` will be\r\n passed to the HTML element, allowing you set the `className`, `style`, etc.\r\n\n ```jsx\r\n import { InView } from 'react-intersection-observer';\r\n\n const Component = () => (\r\n console.log('Inview:', inView)}>\r\n Plain children are always rendered. Use onChange to monitor state.
\r\n \r\n );\r\n\n export default Component;\r\n ```\r\n */\n\n\nvar InView = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(InView, _React$Component);\n\n function InView(props) {\n var _this;\n\n _this = _React$Component.call(this, props) || this;\n _this.node = null;\n _this._unobserveCb = null;\n\n _this.handleNode = function (node) {\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({\n inView: !!_this.props.initialInView,\n entry: undefined\n });\n }\n }\n\n _this.node = node ? node : null;\n\n _this.observeNode();\n };\n\n _this.handleChange = function (inView, entry) {\n if (inView && _this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n _this.unobserve();\n }\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({\n inView: inView,\n entry: entry\n });\n }\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 _this.state = {\n inView: !!props.initialInView,\n entry: undefined\n };\n return _this;\n }\n\n var _proto = InView.prototype;\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n this.unobserve();\n this.observeNode();\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.unobserve();\n this.node = null;\n };\n\n _proto.observeNode = function observeNode() {\n if (!this.node || this.props.skip) return;\n var _this$props = this.props,\n threshold = _this$props.threshold,\n root = _this$props.root,\n rootMargin = _this$props.rootMargin,\n trackVisibility = _this$props.trackVisibility,\n delay = _this$props.delay,\n fallbackInView = _this$props.fallbackInView;\n this._unobserveCb = observe(this.node, this.handleChange, {\n threshold: threshold,\n root: root,\n rootMargin: rootMargin,\n // @ts-ignore\n trackVisibility: trackVisibility,\n // @ts-ignore\n delay: delay\n }, fallbackInView);\n };\n\n _proto.unobserve = function unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n\n this._unobserveCb = null;\n }\n };\n\n _proto.render = function render() {\n if (!isPlainChildren(this.props)) {\n var _this$state = this.state,\n inView = _this$state.inView,\n entry = _this$state.entry;\n return this.props.children({\n inView: inView,\n entry: entry,\n ref: this.handleNode\n });\n }\n\n var _this$props2 = this.props,\n children = _this$props2.children,\n as = _this$props2.as,\n props = _objectWithoutPropertiesLoose(_this$props2, _excluded);\n\n return /*#__PURE__*/React.createElement(as || 'div', _extends({\n ref: this.handleNode\n }, props), children);\n };\n\n return InView;\n}(React.Component);\nInView.displayName = 'InView';\nInView.defaultProps = {\n threshold: 0,\n triggerOnce: false,\n initialInView: false\n};\n\n/**\r\n * React Hooks make it easy to monitor the `inView` state of your components. Call\r\n * the `useInView` hook with the (optional) [options](#options) you need. It will\r\n * return an array containing a `ref`, the `inView` status and the current\r\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\r\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\r\n * report the status.\r\n *\r\n * @example\r\n * ```jsx\r\n * import React from 'react';\r\n * import { useInView } from 'react-intersection-observer';\r\n *\r\n * const Component = () => {\r\n * const { ref, inView, entry } = useInView({\r\n * threshold: 0,\r\n * });\r\n *\r\n * return (\r\n * \r\n *
{`Header inside viewport ${inView}.`}
\r\n * \r\n * );\r\n * };\r\n * ```\r\n */\n\nfunction useInView(_temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n threshold = _ref.threshold,\n delay = _ref.delay,\n trackVisibility = _ref.trackVisibility,\n rootMargin = _ref.rootMargin,\n root = _ref.root,\n triggerOnce = _ref.triggerOnce,\n skip = _ref.skip,\n initialInView = _ref.initialInView,\n fallbackInView = _ref.fallbackInView;\n\n var unobserve = React.useRef();\n\n var _React$useState = React.useState({\n inView: !!initialInView\n }),\n state = _React$useState[0],\n setState = _React$useState[1];\n\n var setRef = React.useCallback(function (node) {\n if (unobserve.current !== undefined) {\n unobserve.current();\n unobserve.current = undefined;\n } // Skip creating the observer\n\n\n if (skip) return;\n\n if (node) {\n unobserve.current = observe(node, function (inView, entry) {\n setState({\n inView: inView,\n entry: entry\n });\n\n if (entry.isIntersecting && triggerOnce && unobserve.current) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve.current();\n unobserve.current = undefined;\n }\n }, {\n root: root,\n rootMargin: rootMargin,\n threshold: threshold,\n // @ts-ignore\n trackVisibility: trackVisibility,\n // @ts-ignore\n delay: delay\n }, fallbackInView);\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 [// If the threshold is an array, convert it to a string so it won't change between renders.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);\n /* eslint-disable-next-line */\n\n useEffect(function () {\n if (!unobserve.current && state.entry && !triggerOnce && !skip) {\n // If we don't have a 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 setState({\n inView: !!initialInView\n });\n }\n });\n var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.\n\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n return result;\n}\n\nexport { InView, InView as default, defaultFallbackInView, observe, useInView };\n//# sourceMappingURL=react-intersection-observer.m.js.map\n"],"names":["serverHandoffComplete","id","genId","useId","idFromProps","initialId","_useState","useState","setId","useEffect","String","undefined","_extends","Object","assign","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","createDescendantContext","name","initialValue","descendants","registerDescendant","unregisterDescendant","useDescendant","descendant","context","indexProp","forceUpdate","_useContext","useContext","index","findIndex","item","element","previousDescendants","someDescendantsHaveChanged","some","_previousDescendants$","concat","values","useDescendantsInit","useDescendants","ctx","DescendantProvider","_ref","Ctx","children","items","set","useCallback","_ref2","explicitIndex","rest","excluded","sourceKeys","keys","indexOf","_objectWithoutPropertiesLoose","newItems","find","Boolean","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","slice","map","filter","Provider","value","useMemo","useDescendantKeyDown","options","callback","currentIndex","_options$key","_options$orientation","orientation","_options$rotate","rotate","_options$rtl","rtl","event","includes","selectableDescendants","preventDefault","next","getNextOption","prev","getPreviousOption","nextOrPrev","prevOrNext","prevOrFirst","ctrlKey","getFirstOption","first","nextOrLast","getLastOption","last","TabsKeyboardActivation","TabsOrientation","TabsDescendantsContext","TabPanelDescendantsContext","TabsContext","Tabs","ref","_props$id","_ref$as","as","Comp","defaultIndex","_ref$orientation","Horizontal","_ref$index","controlledIndex","_ref$keyboardActivati","keyboardActivation","Auto","onChange","_ref$readOnly","readOnly","props","isControlled","useRef","_id","userInteractedRef","selectedPanelRef","isRTL","_useControlledState","selectedIndex","setSelectedIndex","focusedIndex","setFocusedIndex","_useDescendantsInit","tabs","setTabs","current","onFocusPanel","_selectedPanelRef$cur","focus","onSelectTab","onSelectTabWithKeyboard","_tabs$index$element","Manual","TabListImpl","forwardedRef","_ref2$as","onKeyDown","ownRef","ownerDocument","dir","handleKeyDown","tab","disabled","_tabs$selectedIndex","role","Children","child","isSelected","TabList","Tab","_ref3","_ref3$as","onFocus","onBlur","_useContext2","tabsId","htmlType","type","handleFocus","handleBlur","tabIndex","onClick","TabPanelsImpl","_ref4","_ref4$as","_useDescendantsInit2","tabPanels","setTabPanels","TabPanels","TabPanel","_ref5","_ref5$as","_useContext3","readyToHide","hidden","SvgLogosFacebookSmall","React","color","size","title","titleId","fill","viewBox","xmlns","width","height","d","defaultProps","propTypes","PropTypes","SvgLogosFacebookXsmall","ModalTabs","className","otherProps","classNames","styles","push","join","ModalTabList","ModalTab","ModalTabPanels","ModalTabPanel","ModalWithTabs","isOpen","onDismiss","logo","Modal","hasClose","src","alt","tabSelected","tester","exports","email","test","parts","split","part","StatusCodes","collection","iteratee","result","isArrayLike","Array","array","comparer","sort","other","valIsDefined","valIsNull","valIsReflexive","valIsSymbol","isSymbol","othIsDefined","othIsNull","othIsReflexive","othIsSymbol","object","orders","objCriteria","criteria","othCriteria","ordersLength","iteratees","identity","resIndex","reUnescapedHtml","reHasUnescapedHtml","RegExp","string","replace","findIndexFunc","predicate","fromIndex","iterable","nativeMax","Math","max","toInteger","guard","path","splice","indexes","lastIndex","previous","isArray","isObjectLike","rsAstral","rsCombo","rsFitz","rsNonAstral","rsRegional","rsSurrPair","reOptMod","rsOptVar","rsSeq","rsSymbol","reUnicode","tag","sortBy","toLowerCase","strSymbols","chrSymbols","reTrim","chars","start","end","comparator","isCommon","seen","outer","computed","seenIndex","_setPrototypeOf","o","p","setPrototypeOf","__proto__","observerMap","Map","RootIds","WeakMap","rootId","unsupportedValue","optionsToId","root","has","toString","get","observe","fallbackInView","window","IntersectionObserver","bounds","getBoundingClientRect","isIntersecting","intersectionRatio","threshold","time","boundingClientRect","intersectionRect","rootBounds","_createObserver","instance","thresholds","elements","observer","entries","forEach","entry","_elements$get","inView","trackVisibility","isVisible","createObserver","callbacks","unobserve","disconnect","_excluded","isPlainChildren","InView","_React$Component","subClass","superClass","_this","node","_unobserveCb","handleNode","triggerOnce","skip","setState","initialInView","observeNode","handleChange","state","create","constructor","_proto","componentDidUpdate","prevProps","rootMargin","delay","componentWillUnmount","_this$props","render","_this$state","_this$props2","useInView","_temp","_React$useState","setRef","displayName"],"sourceRoot":""}