@homebound/beam 2.123.2 → 2.124.0

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/internal/DatePicker.d.ts

@@ -4,5 +4,6 @@ export interface DatePickerProps {
     value?: Date;
     onSelect: (value: Date) => void;
     disabledDays?: Modifier | Modifier[];
+    dottedDays?: Modifier[];
 }
 export declare function DatePicker(props: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/DatePicker.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 require("./DatePicker.css");
 function DatePicker(props) {
-    const { value, onSelect, disabledDays } = props;
+    const { value, onSelect, disabledDays, dottedDays } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
             ...Css_1.Css.dib.bgWhite.xs.$,
@@ -20,7 +20,7 @@ function DatePicker(props) {
             // Un-collapse the borders so we can hover each cell
             "& .DayPicker-Month": Css_1.Css.add({ borderCollapse: "separate" }).$,
             // // Make the boxes smaller, this ends up being 32x32 which matches figma
-            "& .DayPicker-Day": Css_1.Css.pPx(8).xs.ba.bWhite.br4.$,
+            "& .DayPicker-Day": Css_1.Css.px1.ptPx(6).pbPx(10).xs.ba.bWhite.br4.relative.$,
             // For today, use a background
             "& .DayPicker-Day--today": Css_1.Css.bgGray100.$,
             // For selected, use a background - `--outside` modifier is set on placeholder days not within the viewed month
@@ -33,12 +33,16 @@ function DatePicker(props) {
             "& .DayPicker-Day--disabled": Css_1.Css.cursorNotAllowed.$,
             // Override `.DayPicker-Day:active` background when the day is disabled
             "& .DayPicker-Day--disabled:active": Css_1.Css.bgWhite.$,
+            // Display dottedDays using positioned pseudo elements.
+            "& .DayPicker-Day--indicatorDot": Css_1.Css.addIn("&:after", Css_1.Css.wPx(4).hPx(4).br4.absolute.bottomPx(5).left("calc(50% - 2px)").bgLightBlue700.add("content", "''").$).$,
+            // Update dottedDays color if day is "selected"
+            "& .DayPicker-Day--selected.DayPicker-Day--indicatorDot": Css_1.Css.addIn("&:after", Css_1.Css.bgWhite.$).$,
         } }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.default, { navbarElement: NavbarElement, weekdayElement: Weekday, selectedDays: [value], initialMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
                 if (modifiers.disabled)
                     return;
                 // Set the day value
                 onSelect(day);
-            }, disabledDays: disabledDays }, void 0) }), void 0));
+            }, disabledDays: disabledDays, modifiers: { indicatorDot: dottedDays } }, void 0) }), void 0));
 }
 exports.DatePicker = DatePicker;
 /** Customize the prev/next button to be our SVG icons. */

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.2",
+  "version": "2.124.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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",