{
  "version": 3,
  "sources": ["../../../../../../node_modules/src/InView.tsx", "../../../../../../node_modules/src/observe.ts", "../../../../../../node_modules/src/useInView.tsx"],
  "sourcesContent": ["import * as React from \"react\";\nimport type { IntersectionObserverProps, PlainChildrenProps } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n  inView: boolean;\n  entry?: IntersectionObserverEntry;\n};\n\nfunction isPlainChildren(\n  props: IntersectionObserverProps | PlainChildrenProps,\n): props is PlainChildrenProps {\n  return typeof props.children !== \"function\";\n}\n\n/**\n ## Render props\n\n To use the `<InView>` component, you pass it a function. It will be called\n whenever the state changes, with the new value of `inView`. In addition to the\n `inView` prop, children also receive a `ref` that should be set on the\n containing DOM element. This is the element that the IntersectionObserver will\n monitor.\n\n If you need it, you can also access the\n [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)\n on `entry`, giving you access to all the details about the current intersection\n state.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n <InView>\n {({ inView, ref, entry }) => (\n      <div ref={ref}>\n        <h2>{`Header inside viewport ${inView}.`}</h2>\n      </div>\n    )}\n </InView>\n );\n\n export default Component;\n ```\n\n ## Plain children\n\n You can pass any element to the `<InView />`, and it will handle creating the\n wrapping DOM element. Add a handler to the `onChange` method, and control the\n state in your own component. Any extra props you add to `<InView>` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n <InView as=\"div\" onChange={(inView, entry) => console.log('Inview:', inView)}>\n <h2>Plain children are always rendered. Use onChange to monitor state.</h2>\n </InView>\n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n  IntersectionObserverProps | PlainChildrenProps,\n  State\n> {\n  node: Element | null = null;\n  _unobserveCb: (() => void) | null = null;\n\n  constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n    super(props);\n    this.state = {\n      inView: !!props.initialInView,\n      entry: undefined,\n    };\n  }\n\n  componentDidMount() {\n    this.unobserve();\n    this.observeNode();\n  }\n\n  componentDidUpdate(prevProps: IntersectionObserverProps) {\n    // If a IntersectionObserver option changed, reinit the observer\n    if (\n      prevProps.rootMargin !== this.props.rootMargin ||\n      prevProps.root !== this.props.root ||\n      prevProps.threshold !== this.props.threshold ||\n      prevProps.skip !== this.props.skip ||\n      prevProps.trackVisibility !== this.props.trackVisibility ||\n      prevProps.delay !== this.props.delay\n    ) {\n      this.unobserve();\n      this.observeNode();\n    }\n  }\n\n  componentWillUnmount() {\n    this.unobserve();\n  }\n\n  observeNode() {\n    if (!this.node || this.props.skip) return;\n    const {\n      threshold,\n      root,\n      rootMargin,\n      trackVisibility,\n      delay,\n      fallbackInView,\n    } = this.props;\n\n    this._unobserveCb = observe(\n      this.node,\n      this.handleChange,\n      {\n        threshold,\n        root,\n        rootMargin,\n        // @ts-ignore\n        trackVisibility,\n        // @ts-ignore\n        delay,\n      },\n      fallbackInView,\n    );\n  }\n\n  unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n      this._unobserveCb = null;\n    }\n  }\n\n  handleNode = (node?: Element | null) => {\n    if (this.node) {\n      // Clear the old observer, before we start observing a new element\n      this.unobserve();\n\n      if (!node && !this.props.triggerOnce && !this.props.skip) {\n        // Reset the state if we get a new node, and we aren't ignoring updates\n        this.setState({ inView: !!this.props.initialInView, entry: undefined });\n      }\n    }\n\n    this.node = node ? node : null;\n    this.observeNode();\n  };\n\n  handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n    if (inView && this.props.triggerOnce) {\n      // If `triggerOnce` is true, we should stop observing the element.\n      this.unobserve();\n    }\n    if (!isPlainChildren(this.props)) {\n      // Store the current State, so we can pass it to the children in the next render update\n      // There's no reason to update the state for plain children, since it's not used in the rendering.\n      this.setState({ inView, entry });\n    }\n    if (this.props.onChange) {\n      // If the user is actively listening for onChange, always trigger it\n      this.props.onChange(inView, entry);\n    }\n  };\n\n  render() {\n    const { children } = this.props;\n    if (typeof children === \"function\") {\n      const { inView, entry } = this.state;\n      return children({ inView, entry, ref: this.handleNode });\n    }\n\n    const {\n      as,\n      triggerOnce,\n      threshold,\n      root,\n      rootMargin,\n      onChange,\n      skip,\n      trackVisibility,\n      delay,\n      initialInView,\n      fallbackInView,\n      ...props\n    } = this.props as PlainChildrenProps;\n\n    return React.createElement(\n      as || \"div\",\n      { ref: this.handleNode, ...props },\n      children,\n    );\n  }\n}\n", "import type { ObserverInstanceCallback } from \"./index\";\n\nconst observerMap = new Map<\n  string,\n  {\n    id: string;\n    observer: IntersectionObserver;\n    elements: Map<Element, Array<ObserverInstanceCallback>>;\n  }\n>();\n\nconst RootIds: WeakMap<Element | Document, string> = new WeakMap();\nlet rootId = 0;\n\nlet unsupportedValue: boolean | undefined = undefined;\n\n/**\n * What should be the default behavior if the IntersectionObserver is unsupported?\n * Ideally the polyfill has been loaded, you can have the following happen:\n * - `undefined`: Throw an error\n * - `true` or `false`: Set the `inView` value to this regardless of intersection state\n * **/\nexport function defaultFallbackInView(inView: boolean | undefined) {\n  unsupportedValue = inView;\n}\n\n/**\n * Generate a unique ID for the root element\n * @param root\n */\nfunction getRootId(root: IntersectionObserverInit[\"root\"]) {\n  if (!root) return \"0\";\n  if (RootIds.has(root)) return RootIds.get(root);\n  rootId += 1;\n  RootIds.set(root, rootId.toString());\n  return RootIds.get(root);\n}\n\n/**\n * Convert the options to a string Id, based on the values.\n * Ensures we can reuse the same observer when observing elements with the same options.\n * @param options\n */\nexport function optionsToId(options: IntersectionObserverInit) {\n  return Object.keys(options)\n    .sort()\n    .filter(\n      (key) => options[key as keyof IntersectionObserverInit] !== undefined,\n    )\n    .map((key) => {\n      return `${key}_${\n        key === \"root\"\n          ? getRootId(options.root)\n          : options[key as keyof IntersectionObserverInit]\n      }`;\n    })\n    .toString();\n}\n\nfunction createObserver(options: IntersectionObserverInit) {\n  // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n  const id = optionsToId(options);\n  let instance = observerMap.get(id);\n\n  if (!instance) {\n    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n    const elements = new Map<Element, Array<ObserverInstanceCallback>>();\n    // biome-ignore lint/style/useConst: It's fine to use let here, as we are going to assign it later\n    let thresholds: number[] | readonly number[];\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n        const inView =\n          entry.isIntersecting &&\n          thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n\n        // @ts-ignore support IntersectionObserver v2\n        if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n          // @ts-ignore\n          entry.isVisible = inView;\n        }\n\n        elements.get(entry.target)?.forEach((callback) => {\n          callback(inView, entry);\n        });\n      });\n    }, options);\n\n    // Ensure we have a valid thresholds array. If not, use the threshold from the options\n    thresholds =\n      observer.thresholds ||\n      (Array.isArray(options.threshold)\n        ? options.threshold\n        : [options.threshold || 0]);\n\n    instance = {\n      id,\n      observer,\n      elements,\n    };\n\n    observerMap.set(id, instance);\n  }\n\n  return instance;\n}\n\n/**\n * @param element - DOM Element to observe\n * @param callback - Callback function to trigger when intersection status changes\n * @param options - Intersection Observer options\n * @param fallbackInView - Fallback inView value.\n * @return Function - Cleanup function that should be triggered to unregister the observer\n */\nexport function observe(\n  element: Element,\n  callback: ObserverInstanceCallback,\n  options: IntersectionObserverInit = {},\n  fallbackInView = unsupportedValue,\n) {\n  if (\n    typeof window.IntersectionObserver === \"undefined\" &&\n    fallbackInView !== undefined\n  ) {\n    const bounds = element.getBoundingClientRect();\n    callback(fallbackInView, {\n      isIntersecting: fallbackInView,\n      target: element,\n      intersectionRatio:\n        typeof options.threshold === \"number\" ? options.threshold : 0,\n      time: 0,\n      boundingClientRect: bounds,\n      intersectionRect: bounds,\n      rootBounds: bounds,\n    });\n    return () => {\n      // Nothing to cleanup\n    };\n  }\n  // An observer with the same options can be reused, so lets use this fact\n  const { id, observer, elements } = createObserver(options);\n\n  // Register the callback listener for this element\n  const callbacks = elements.get(element) || [];\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n\n  callbacks.push(callback);\n  observer.observe(element);\n\n  return function unobserve() {\n    // Remove the callback from the callback list\n    callbacks.splice(callbacks.indexOf(callback), 1);\n\n    if (callbacks.length === 0) {\n      // No more callback exists for element, so destroy it\n      elements.delete(element);\n      observer.unobserve(element);\n    }\n\n    if (elements.size === 0) {\n      // No more elements are being observer by this instance, so destroy it\n      observer.disconnect();\n      observerMap.delete(id);\n    }\n  };\n}\n", "import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n  inView: boolean;\n  entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n *   const { ref, inView, entry } = useInView({\n *       threshold: 0,\n *   });\n *\n *   return (\n *     <div ref={ref}>\n *       <h2>{`Header inside viewport ${inView}.`}</h2>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useInView({\n  threshold,\n  delay,\n  trackVisibility,\n  rootMargin,\n  root,\n  triggerOnce,\n  skip,\n  initialInView,\n  fallbackInView,\n  onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n  const [ref, setRef] = React.useState<Element | null>(null);\n  const callback = React.useRef<IntersectionOptions[\"onChange\"]>();\n  const [state, setState] = React.useState<State>({\n    inView: !!initialInView,\n    entry: undefined,\n  });\n\n  // Store the onChange callback in a `ref`, so we can access the latest instance\n  // inside the `useEffect`, but without triggering a rerender.\n  callback.current = onChange;\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n  React.useEffect(\n    () => {\n      // Ensure we have node ref, and that we shouldn't skip observing\n      if (skip || !ref) return;\n\n      let unobserve: (() => void) | undefined;\n      unobserve = observe(\n        ref,\n        (inView, entry) => {\n          setState({\n            inView,\n            entry,\n          });\n          if (callback.current) callback.current(inView, entry);\n\n          if (entry.isIntersecting && triggerOnce && unobserve) {\n            // If it should only trigger once, unobserve the element after it's inView\n            unobserve();\n            unobserve = undefined;\n          }\n        },\n        {\n          root,\n          rootMargin,\n          threshold,\n          // @ts-ignore\n          trackVisibility,\n          // @ts-ignore\n          delay,\n        },\n        fallbackInView,\n      );\n\n      return () => {\n        if (unobserve) {\n          unobserve();\n        }\n      };\n    },\n    // We break the rule here, because we aren't including the actual `threshold` variable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      // If the threshold is an array, convert it to a string, so it won't change between renders.\n      Array.isArray(threshold) ? threshold.toString() : threshold,\n      ref,\n      root,\n      rootMargin,\n      triggerOnce,\n      skip,\n      trackVisibility,\n      fallbackInView,\n      delay,\n    ],\n  );\n\n  const entryTarget = state.entry?.target;\n  const previousEntryTarget = React.useRef<Element>();\n  if (\n    !ref &&\n    entryTarget &&\n    !triggerOnce &&\n    !skip &&\n    previousEntryTarget.current !== entryTarget\n  ) {\n    // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n    // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n    previousEntryTarget.current = entryTarget;\n    setState({\n      inView: !!initialInView,\n      entry: undefined,\n    });\n  }\n\n  const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n  // Support object destructuring, by adding the specific values.\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n\n  return result;\n}\n"],
  "mappings": "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",
  "names": ["React", "React2", "observerMap", "RootIds", "rootId", "unsupportedValue", "getRootId", "root", "RootIds", "rootId", "optionsToId", "options", "key", "createObserver", "id", "instance", "observerMap", "elements", "thresholds", "observer", "entries", "entry", "_a", "inView", "threshold", "callback", "observe", "element", "fallbackInView", "unsupportedValue", "bounds", "callbacks", "useInView", "threshold", "delay", "trackVisibility", "rootMargin", "root", "triggerOnce", "skip", "initialInView", "fallbackInView", "onChange", "_a", "ref", "setRef", "callback", "state", "setState", "unobserve", "observe", "inView", "entry", "entryTarget", "previousEntryTarget", "result"]
}