{"version":3,"file":"711-c8c07f06d1db043f79a4.js","mappings":"yLAiBIA,EACAC,E,sBAAAC,G,kBAAA,4IAqBIC,EAAiBC,EAAA,OAOO,SAGhBC,EAAAC,EAedH,EACAE,EACAE,EACAC,GAAA,IAhBEC,EAAAH,EAAAI,MACAC,EAAAL,EAAAM,QACAC,EAAAP,EAAAQ,UACAC,EAAAT,EAAAU,SACAC,EAAAX,EAAAY,eACAC,EAAAb,EAAAc,IACAC,EAAAf,EAAAgB,aAAAC,EAAAjB,EACAkB,SAAAC,OAAA,IAAAF,EAAW,CAAC,EAADA,EACXG,EAAApB,EAAAqB,eACAC,EAAAtB,EAAAuB,gBAAAC,EAAAxB,EACAyB,UAAAC,OAAA,IAAAF,EAAA,QAAAA,EACGG,GAAAC,EAAAA,EAAAA,GAAA5B,EAAAJ,GAQHiC,EAME1B,EANF2B,MACAC,EAKE5B,EALF6B,OACAC,EAIE9B,EAJF+B,OACAC,EAGEhC,EAHFiC,OACAC,EAEElC,EAFFmC,YACiBC,EACfpC,EADFoB,gBAGIiB,EAAWC,KAAKC,UAAUP,GAEhChB,GAAAwB,EAAAA,EAAAA,GAAA,CACElB,UAAAC,EACAL,eAAAD,EACAG,gBAAAD,GACGH,GAGL,IAAMyB,EACJC,EAAAA,cAACC,EAAAA,EAAA,CAAcZ,OAAQD,EAAQH,MAAOD,EAAOG,OAAQD,GACnDc,EAAAA,cAACE,EAAAA,GAAAJ,EAAAA,EAAAA,GAAA,IACKK,EAAAA,EAAAA,GACFX,EACA5B,EACAwB,EACAJ,EACAE,EACAQ,EACAb,EACAN,KAIJyB,EAAAA,cAACI,EAAAA,GAAAN,EAAAA,EAAAA,GAAA,GACMhB,EAAA,CACLG,MAAOD,EACPG,OAAQD,EACRmB,UAAWnC,IACPoC,EAAAA,EAAAA,GACF5C,EACAE,EACA0B,EACA9B,EACAM,EACA6B,EACA3B,EACAM,MAoBR,OAdItB,EAAKuD,UAEHrD,EAASqD,SAAWnD,EAAamD,QACnClD,EAAakD,QAAU1D,EACrBkD,EACA/C,EAAKuD,QACLlD,EAAakD,SAGfzD,EAAaiD,EAAW/C,EAAKuD,SAE/BrD,EAASqD,SAAA,GAAU,WAIfvD,EAAKuD,SACP1D,EACE,KACAG,EAAKuD,QACLlD,EAAakD,QAAA,EApGnB1D,EAAc,SACZkC,EACAe,GAEA9C,EAAewD,OAAOzB,EAAWe,EAAA,EAEnChD,EAAeE,EAAeyD,O","sources":["webpack://marine-debris-tracker/../src/components/lazy-hydrate.tsx"],"sourcesContent":["/* global HAS_REACT_18 */\nimport React, { MutableRefObject } from \"react\"\nimport { GatsbyImageProps } from \"./gatsby-image.browser\"\nimport { LayoutWrapper } from \"./layout-wrapper\"\nimport { Placeholder } from \"./placeholder\"\nimport { MainImageProps, MainImage } from \"./main-image\"\nimport { getMainProps, getPlaceholderProps } from \"./hooks\"\nimport { ReactElement } from \"react\"\nimport type { Root } from \"react-dom/client\"\n\ntype LazyHydrateProps = Omit<GatsbyImageProps, \"as\" | \"style\" | \"className\"> & {\n  isLoading: boolean\n  isLoaded: boolean // alwaystype SetStateAction<S> = S | ((prevState: S) => S);\n  toggleIsLoaded: (toggle: boolean) => void\n  ref: MutableRefObject<HTMLImageElement | undefined>\n}\n\nlet reactRender\nlet reactHydrate\nif (HAS_REACT_18) {\n  const reactDomClient = require(`react-dom/client`)\n  reactRender = (\n    Component: React.ReactChild | Iterable<React.ReactNode>,\n    el: ReactDOM.Container,\n    root: Root\n  ): Root => {\n    if (!root) {\n      root = reactDomClient.createRoot(el)\n    }\n\n    root.render(Component)\n\n    return root\n  }\n  reactHydrate = (\n    Component: React.ReactChild | Iterable<React.ReactNode>,\n    el: ReactDOM.Container\n  ): Root => reactDomClient.hydrateRoot(el, Component)\n} else {\n  const reactDomClient = require(`react-dom`)\n  reactRender = (\n    Component: React.ReactChild | Iterable<React.ReactNode>,\n    el: ReactDOM.Container\n  ): void => {\n    reactDomClient.render(Component, el)\n  }\n  reactHydrate = reactDomClient.hydrate\n}\n\nexport function lazyHydrate(\n  {\n    image,\n    loading,\n    isLoading,\n    isLoaded,\n    toggleIsLoaded,\n    ref,\n    imgClassName,\n    imgStyle = {},\n    objectPosition,\n    backgroundColor,\n    objectFit = `cover`,\n    ...props\n  }: LazyHydrateProps,\n  root: MutableRefObject<HTMLElement | undefined>,\n  hydrated: MutableRefObject<boolean>,\n  forceHydrate: MutableRefObject<boolean>,\n  reactRootRef: MutableRefObject<Root>\n): (() => void) | null {\n  const {\n    width,\n    height,\n    layout,\n    images,\n    placeholder,\n    backgroundColor: wrapperBackgroundColor,\n  } = image\n\n  const cacheKey = JSON.stringify(images)\n\n  imgStyle = {\n    objectFit,\n    objectPosition,\n    backgroundColor,\n    ...imgStyle,\n  }\n\n  const component = (\n    <LayoutWrapper layout={layout} width={width} height={height}>\n      <Placeholder\n        {...getPlaceholderProps(\n          placeholder,\n          isLoaded,\n          layout,\n          width,\n          height,\n          wrapperBackgroundColor,\n          objectFit,\n          objectPosition\n        )}\n      />\n\n      <MainImage\n        {...(props as Omit<MainImageProps, \"images\" | \"fallback\">)}\n        width={width}\n        height={height}\n        className={imgClassName}\n        {...getMainProps(\n          isLoading,\n          isLoaded,\n          images,\n          loading,\n          toggleIsLoaded,\n          cacheKey,\n          ref,\n          imgStyle\n        )}\n      />\n    </LayoutWrapper>\n  )\n\n  if (root.current) {\n    // Force render to mitigate \"Expected server HTML to contain a matching\" in develop\n    if (hydrated.current || forceHydrate.current || HAS_REACT_18) {\n      reactRootRef.current = reactRender(\n        component,\n        root.current,\n        reactRootRef.current\n      )\n    } else {\n      reactHydrate(component, root.current)\n    }\n    hydrated.current = true\n  }\n\n  return (): void => {\n    if (root.current) {\n      reactRender(\n        null as unknown as ReactElement,\n        root.current,\n        reactRootRef.current\n      )\n    }\n  }\n}\n"],"names":["s","d","u","l","require","m","g","b","h","f","image","p","loading","v","isLoading","y","isLoaded","C","toggleIsLoaded","j","ref","L","imgClassName","E","imgStyle","S","_","objectPosition","k","backgroundColor","w","objectFit","A","N","e","P","width","R","height","F","layout","q","images","x","placeholder","H","I","JSON","stringify","r","T","c","t","o","a","i","className","n","current","render","hydrate"],"sourceRoot":""}