From 4cf17c99e4c8bbc152a34d1b51f258b6ab3213d2 Mon Sep 17 00:00:00 2001 From: Jarek Rencz Date: Tue, 21 Feb 2023 00:35:21 +0100 Subject: [PATCH] Fix height adjustment in ZoomElement in Safari Problem, as described in [this thread](https://github.com/storybookjs/storybook/pull/21138#pullrequestreview-1305837273) affects stories rendered with custom elements using Shadow DOM. Such stories are affected if at the moment ZoomElement measures the height, component did not yet render its contents. Then, when component in a story renders content, it doesn't trigger MutationObserver (mutation callback is not called when Shadow DOM is altered). ResizeObserver is added next to MutationObserver (orignally added via #15472), not replaces it, because MutationObserver is better supported by older browsers than ResizeObserver. Problem, as described in the original thread was mitigated by @JReinhold with #21163, but even after that fix Safari is excluded from using native `zoom` and needs the fallback behavior. --- code/ui/components/src/Zoom/ZoomElement.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/code/ui/components/src/Zoom/ZoomElement.tsx b/code/ui/components/src/Zoom/ZoomElement.tsx index b47d70b66576..57e9af1ac1c9 100644 --- a/code/ui/components/src/Zoom/ZoomElement.tsx +++ b/code/ui/components/src/Zoom/ZoomElement.tsx @@ -1,6 +1,7 @@ /* global MutationObserver */ import type { ReactElement, RefObject } from 'react'; import React, { useEffect, useRef, useState, useCallback } from 'react'; +import useResizeObserver from 'use-resize-observer'; import { styled } from '@storybook/theming'; import { browserSupportsCssZoom } from './browserSupportsCssZoom'; @@ -62,6 +63,12 @@ export function ZoomElement({ scale, children }: ZoomProps) { setElementHeight(componentWrapperRef.current.getBoundingClientRect().height); }, []); + const onResize = useCallback(({height}) => { + if (height) { + setElementHeight(height); + } + }, []); + useEffect(() => { if (componentWrapperRef.current) { setElementHeight(componentWrapperRef.current.getBoundingClientRect().height); @@ -74,6 +81,11 @@ export function ZoomElement({ scale, children }: ZoomProps) { callback: handleMutations, }); + useResizeObserver({ + ref: componentWrapperRef, + onResize, + }); + return (