diff --git a/.changeset/light-rats-wave.md b/.changeset/light-rats-wave.md new file mode 100644 index 000000000..d48c49a7d --- /dev/null +++ b/.changeset/light-rats-wave.md @@ -0,0 +1,5 @@ +--- +'@autoguru/overdrive': minor +--- + +FillHeightBox gets optional maxHeight prop diff --git a/packages/overdrive/lib/components/FillHeightBox/FillHeightBox.tsx b/packages/overdrive/lib/components/FillHeightBox/FillHeightBox.tsx index 4e3ce6901..e7f684230 100644 --- a/packages/overdrive/lib/components/FillHeightBox/FillHeightBox.tsx +++ b/packages/overdrive/lib/components/FillHeightBox/FillHeightBox.tsx @@ -15,6 +15,7 @@ export const FillHeightBox: FunctionComponent = ({ serverVhFallback, observedElementRef, style, + maxHeight, ...scrollPaneProps }) => { const containerRef = React.useRef(null); @@ -24,6 +25,7 @@ export const FillHeightBox: FunctionComponent = ({ observedElementRef, bottomGap, serverVhFallback, + maxHeight, }); return ( diff --git a/packages/overdrive/lib/hooks/useWindowHeightFill/useWindowHeightFill.ts b/packages/overdrive/lib/hooks/useWindowHeightFill/useWindowHeightFill.ts index 8578dae61..1353451ff 100644 --- a/packages/overdrive/lib/hooks/useWindowHeightFill/useWindowHeightFill.ts +++ b/packages/overdrive/lib/hooks/useWindowHeightFill/useWindowHeightFill.ts @@ -10,6 +10,7 @@ export interface UseWindowHeightFillProps { serverVhFallback?: number; includeMobile?: boolean; observeDomChanges?: boolean; + maxHeight?: number; containerRef: RefObject; observedElementRef?: RefObject; } @@ -20,6 +21,7 @@ export const useWindowHeightFill = ({ serverVhFallback = 100, containerRef, observedElementRef, + maxHeight, }: UseWindowHeightFillProps): string => { // Create an observer instance linked to the callback function const cappedHeight = useResponsiveValue([includeMobile, , true]); @@ -39,10 +41,12 @@ export const useWindowHeightFill = ({ themeClass, themeContractVars.space[bottomGap], ) || '0px'; - const availableHeight = + const availableHeight = Math.min( + maxHeight ?? Number.POSITIVE_INFINITY, window.innerHeight - - // @ts-ignore - containerRef.current.getBoundingClientRect().top; + // @ts-ignore + containerRef.current.getBoundingClientRect().top, + ); const newHeight = gap ? `calc(${availableHeight}px - ${gap})` : `${availableHeight}px`; @@ -79,6 +83,7 @@ export const useWindowHeightFill = ({ document?.body, themeClass, bottomGap, + maxHeight, ]); return cappedHeight ? containerHeight : 'auto';