diff --git a/packages/gestalt/src/MasonryV2.tsx b/packages/gestalt/src/MasonryV2.tsx index 73ce5a9b54..f8eb96a861 100644 --- a/packages/gestalt/src/MasonryV2.tsx +++ b/packages/gestalt/src/MasonryV2.tsx @@ -248,6 +248,11 @@ function useScrollContainer({ const containerOffset = useRef(0); const scrollPos = useRef(0); + useEffect(() => { + // reset scroll position whenever the scrollContainer changes + scrollPos.current = scrollContainer ? getScrollPos(scrollContainer) : 0; + }, [scrollContainer]); + const measureContainer = useCallback(() => { if (scrollContainer) { containerHeight.current = getElementHeight(scrollContainer); @@ -259,16 +264,20 @@ function useScrollContainer({ } }, [gridWrapper, scrollContainer]); + useEffect(() => { + // measure the container whenever the gridWrapper or scrollContainer changes (we use the identity of the measureContainer function here as an indication of that) + measureContainer(); + }, [measureContainer]); + // created a debounced version of measureContainer to avoid measuring the container on every render // this is mostly because the calls to getBoundingClientRect are expensive and result in forced reflows const measureContainerAsync = useMemo(() => debounce(measureContainer, 100), [measureContainer]); - if (containerHeight.current === 0 && containerOffset.current === 0) { - // initialize value on first render - // doing this here vs in the `useRef` to avoid measureContainer always being called - // https://18.react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents - measureContainer(); - } + useEffect(() => { + // trigger an async measurement whenever an update occurs + // todo - followup on this and figure out a more ideal way to handle this. + measureContainerAsync(); + }); const subscribeToScrollEvent = useCallback( (callback: () => void) => { @@ -291,12 +300,6 @@ function useScrollContainer({ () => 0, ); - useEffect(() => { - // trigger an async measurement whenever an update occurs - // todo - followup on this and figure out a more ideal way to handle this. - measureContainerAsync(); - }); - return { containerHeight: containerHeight.current, containerOffset: containerOffset.current, @@ -476,6 +479,7 @@ function useLayout({ // - itemMeasurementsCount: if we have a change in the number of items we've measured, we should always recalculage // - canPerformLayout: if we don't have a width, we can't calculate positions yet. so recalculate once we're able to + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/exhaustive-deps }, [itemMeasurementsCount, items, canPerformLayout, heightUpdateTrigger]); @@ -773,6 +777,7 @@ function Masonry( hasSetInitialWidth.current = true; } + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/exhaustive-deps }, [width]);