@shopify/shop-minis-react 0.1.3 → 0.1.5

package/src/components/atoms/list.tsx

@@ -1,30 +1,24 @@
-import {ComponentType, useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 
-import {
-  VariableSizeList as _VariableSizeList,
-  VariableSizeListProps,
-} from 'react-window'
+import {Virtuoso, VirtuosoProps} from 'react-virtuoso'
 
 import {cn} from '../../lib/utils'
 import '../../styles/utilities.css'
 
 import {Pagination} from './pagination'
 
-const VariableSizeList =
-  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>
-
 interface Props<T = any>
   extends Omit<
-    VariableSizeListProps<T>,
-    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'
+    VirtuosoProps<T, unknown>,
+    'data' | 'itemContent' | 'endReached'
   > {
   items: T[]
   renderItem: (item: T, index: number) => React.ReactNode
-  itemSizeForRow: (index: number) => number
   showScrollbar?: boolean
   header?: React.ReactNode
-  headerHeight?: number
   fetchMore?: () => Promise<void>
+  loadingComponent?: React.ReactNode
+  isFetchingMore?: boolean
 }
 
 export function List<T = any>({
@@ -34,18 +28,13 @@ export function List<T = any>({
   className,
   showScrollbar = false,
   header,
-  headerHeight,
-  itemSizeForRow,
   fetchMore,
-  overscanCount,
-  ...listProps
+  loadingComponent,
+  isFetchingMore,
+  ...virtuosoProps
 }: Props<T>) {
   const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)
 
-  // This is workaround to prevent multiple calls to fetchMore
-  // react-window re-renders the rows while scrolling,
-  // and the TrackingPixel could be triggered multiple times
-
   const _fetchMore = useCallback(() => {
     // Dedupe concurrent calls by returning the same in-flight promise
     if (inFlightFetchMoreRef.current) return
@@ -60,62 +49,37 @@ export function List<T = any>({
     inFlightFetchMoreRef.current = current
   }, [fetchMore])
 
-  const rowRenderer = useCallback(
-    ({index, style}: {index: number; style: React.CSSProperties}) => {
-      // prepend the header to the first row if it exists
-      if (header && index === 0) {
-        return (
-          <div style={style}>
-            {header}
-            <div style={{top: headerHeight}}>{renderItem(items[0], 0)}</div>
-          </div>
-        )
-      }
-
-      // append the pagination spinner to the last row if fetchMore exists
-      if (fetchMore && index === items.length - 1) {
-        return (
-          <div style={style}>
-            {renderItem(items[index], index)}
-            <div style={{bottom: 0}}>
-              <Pagination fetchMore={_fetchMore} />
-            </div>
-          </div>
-        )
-      }
-
-      return <div style={style}>{renderItem(items[index], index)}</div>
-    },
-    [items, renderItem, header, headerHeight, _fetchMore, fetchMore]
+  const itemContent = useCallback(
+    (index: number, item: T) => <>{renderItem(item, index)}</>,
+    [renderItem]
   )
 
-  const getItemSize = useCallback(
-    (index: number) => {
-      // include the header height in the first row height
-      if (header && index === 0) {
-        const _headerHeight = headerHeight || 0
-        return _headerHeight + itemSizeForRow(index)
-      }
+  const Footer = useCallback(() => {
+    if (!fetchMore) return null
 
-      return itemSizeForRow(index)
-    },
-    [itemSizeForRow, header, headerHeight]
-  )
+    return (
+      <Pagination
+        fetchMore={_fetchMore}
+        loadingComponent={loadingComponent}
+        isFetchingMore={isFetchingMore}
+      />
+    )
+  }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])
 
   const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
 
   return (
-    <VariableSizeList
+    <Virtuoso
       className={classNames}
-      height={height}
-      direction="vertical"
-      width="100%"
-      itemCount={items.length}
-      overscanCount={overscanCount}
-      itemSize={getItemSize}
-      {...listProps}
-    >
-      {rowRenderer}
-    </VariableSizeList>
+      style={{height}}
+      data={items}
+      itemContent={itemContent}
+      components={{
+        Header: header ? () => <div>{header}</div> : undefined,
+        Footer,
+      }}
+      endReached={fetchMore ? _fetchMore : undefined}
+      {...virtuosoProps}
+    />
   )
 }

package/src/components/commerce/search.tsx

@@ -13,8 +13,6 @@ import {Input} from '../ui/input'
 import {ProductLink} from './product-link'
 import {ProductLinkSkeleton} from './product-link-skeleton'
 
-const ESTIMATED_PRODUCT_LINK_HEIGHT = 100
-
 interface SearchContextValue {
   query: string
   setQuery: (query: string) => void
@@ -146,10 +144,8 @@ export interface SearchResultsListProps {
 function SearchResultsList({
   height = window.innerHeight,
   renderItem,
-  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,
   initialStateComponent,
   showScrollbar,
-  overscanCount = 5,
 }: SearchResultsListProps) {
   const {query, products, loading, fetchMore, hasNextPage, isTyping} =
     useSearchContext()
@@ -205,10 +201,8 @@ function SearchResultsList({
       items={products || []}
       height={height}
       renderItem={_renderItem}
-      itemSizeForRow={() => itemHeight}
       fetchMore={hasNextPage ? fetchMore : undefined}
       showScrollbar={showScrollbar}
-      overscanCount={overscanCount}
     />
   )
 }

package/src/stories/List.stories.tsx

@@ -19,10 +19,6 @@ const meta = {
       control: 'number',
       description: 'Height of the virtualized list container',
     },
-    itemSizeForRow: {
-      control: 'number',
-      description: 'Height of each item in the list',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof List>

package/src/test-setup.ts

@@ -1,4 +1,7 @@
 import '@testing-library/jest-dom'
+
+import React from 'react'
+
 import {cleanup} from '@testing-library/react'
 import {afterEach, vi} from 'vitest'
 
@@ -32,3 +35,68 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
   thresholds: [],
   takeRecords: vi.fn(),
 }))
+
+// Mock ResizeObserver (used by react-virtuoso)
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Set default window size for virtuoso calculations
+Object.defineProperty(window, 'innerHeight', {
+  writable: true,
+  configurable: true,
+  value: 768,
+})
+
+Object.defineProperty(window, 'innerWidth', {
+  writable: true,
+  configurable: true,
+  value: 1024,
+})
+
+vi.mock('react-virtuoso', () => ({
+  Virtuoso: vi.fn().mockImplementation(props => {
+    const {data, itemContent, style, className, components, endReached} = props
+    const items = data || []
+
+    // Simulating virtualization
+    const maxVisibleItems = 20
+    const visibleItems = items.slice(0, maxVisibleItems)
+
+    React.useEffect(() => {
+      if (endReached && items.length >= maxVisibleItems) {
+        // Simulating reaching the end after a short delay
+        const timer = setTimeout(() => endReached(), 100)
+        return () => clearTimeout(timer)
+      }
+      return undefined
+    }, [endReached, items.length])
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        'data-testid': 'virtuoso-scroller',
+        'data-virtuoso-scroller': 'true',
+        'data-item-count': items.length,
+        'data-visible-items': visibleItems.length,
+      },
+      components?.Header && components.Header(),
+      React.createElement(
+        'div',
+        {'data-testid': 'virtuoso-item-list'},
+        visibleItems.map((item: any, index: number) =>
+          React.createElement(
+            'div',
+            {key: `virtuoso-item-${String(item?.id || index)}`},
+            itemContent?.(index, item)
+          )
+        )
+      ),
+      components?.Footer && components.Footer()
+    )
+  }),
+}))

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js

@@ -1,8 +0,0 @@
-function i(e) {
-  if (e === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-export {
-  i as default
-};
-//# sourceMappingURL=assertThisInitialized.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"assertThisInitialized.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js"],"sourcesContent":["function _assertThisInitialized(e) {\n  if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  return e;\n}\nexport { _assertThisInitialized as default };"],"names":["_assertThisInitialized"],"mappings":"AAAA,SAASA,EAAuB,GAAG;AACjC,MAAe,MAAX,OAAc,OAAM,IAAI,eAAe,2DAA2D;AACtG,SAAO;AACT;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js

@@ -1,8 +0,0 @@
-import e from "./setPrototypeOf.js";
-function p(o, t) {
-  o.prototype = Object.create(t.prototype), o.prototype.constructor = o, e(o, t);
-}
-export {
-  p as default
-};
-//# sourceMappingURL=inheritsLoose.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inheritsLoose.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js"],"sourcesContent":["import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };"],"names":["_inheritsLoose","t","o","setPrototypeOf"],"mappings":";AACA,SAASA,EAAeC,GAAGC,GAAG;AAC5B,EAAAD,EAAE,YAAY,OAAO,OAAOC,EAAE,SAAS,GAAGD,EAAE,UAAU,cAAcA,GAAGE,EAAeF,GAAGC,CAAC;AAC5F;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js

@@ -1,9 +0,0 @@
-function e(o, r) {
-  return e = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t, n) {
-    return t.__proto__ = n, t;
-  }, e(o, r);
-}
-export {
-  e as default
-};
-//# sourceMappingURL=setPrototypeOf.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"setPrototypeOf.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js"],"sourcesContent":["function _setPrototypeOf(t, e) {\n  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n    return t.__proto__ = e, t;\n  }, _setPrototypeOf(t, e);\n}\nexport { _setPrototypeOf as default };"],"names":["_setPrototypeOf","t","e"],"mappings":"AAAA,SAASA,EAAgBC,GAAGC,GAAG;AAC7B,SAAOF,IAAkB,OAAO,iBAAiB,OAAO,eAAe,KAAM,IAAG,SAAU,GAAGE,GAAG;AAC9F,WAAO,EAAE,YAAYA,GAAG;AAAA,EAC5B,GAAKF,EAAgBC,GAAGC,CAAC;AACzB;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js

@@ -1,28 +0,0 @@
-var s = Number.isNaN || function(r) {
-  return typeof r == "number" && r !== r;
-};
-function o(e, r) {
-  return !!(e === r || s(e) && s(r));
-}
-function g(e, r) {
-  if (e.length !== r.length)
-    return !1;
-  for (var t = 0; t < e.length; t++)
-    if (!o(e[t], r[t]))
-      return !1;
-  return !0;
-}
-function h(e, r) {
-  r === void 0 && (r = g);
-  var t, f = [], u, l = !1;
-  function i() {
-    for (var n = [], a = 0; a < arguments.length; a++)
-      n[a] = arguments[a];
-    return l && t === this && r(n, f) || (u = e.apply(this, n), l = !0, t = this, f = n), u;
-  }
-  return i;
-}
-export {
-  h as default
-};
-//# sourceMappingURL=memoize-one.esm.js.map

package/dist/shop-minis-react/node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"memoize-one.esm.js","sources":["../../../../../../../../node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js"],"sourcesContent":["var safeIsNaN = Number.isNaN ||\n    function ponyfill(value) {\n        return typeof value === 'number' && value !== value;\n    };\nfunction isEqual(first, second) {\n    if (first === second) {\n        return true;\n    }\n    if (safeIsNaN(first) && safeIsNaN(second)) {\n        return true;\n    }\n    return false;\n}\nfunction areInputsEqual(newInputs, lastInputs) {\n    if (newInputs.length !== lastInputs.length) {\n        return false;\n    }\n    for (var i = 0; i < newInputs.length; i++) {\n        if (!isEqual(newInputs[i], lastInputs[i])) {\n            return false;\n        }\n    }\n    return true;\n}\n\nfunction memoizeOne(resultFn, isEqual) {\n    if (isEqual === void 0) { isEqual = areInputsEqual; }\n    var lastThis;\n    var lastArgs = [];\n    var lastResult;\n    var calledOnce = false;\n    function memoized() {\n        var newArgs = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            newArgs[_i] = arguments[_i];\n        }\n        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {\n            return lastResult;\n        }\n        lastResult = resultFn.apply(this, newArgs);\n        calledOnce = true;\n        lastThis = this;\n        lastArgs = newArgs;\n        return lastResult;\n    }\n    return memoized;\n}\n\nexport default memoizeOne;\n"],"names":["safeIsNaN","value","isEqual","first","second","areInputsEqual","newInputs","lastInputs","i","memoizeOne","resultFn","lastThis","lastArgs","lastResult","calledOnce","memoized","newArgs","_i"],"mappings":"AAAA,IAAIA,IAAY,OAAO,SACnB,SAAkBC,GAAO;AACrB,SAAO,OAAOA,KAAU,YAAYA,MAAUA;AACjD;AACL,SAASC,EAAQC,GAAOC,GAAQ;AAI5B,SAHI,GAAAD,MAAUC,KAGVJ,EAAUG,CAAK,KAAKH,EAAUI,CAAM;AAI5C;AACA,SAASC,EAAeC,GAAWC,GAAY;AAC3C,MAAID,EAAU,WAAWC,EAAW;AAChC,WAAO;AAEX,WAASC,IAAI,GAAGA,IAAIF,EAAU,QAAQE;AAClC,QAAI,CAACN,EAAQI,EAAUE,CAAC,GAAGD,EAAWC,CAAC,CAAC;AACpC,aAAO;AAGf,SAAO;AACX;AAEA,SAASC,EAAWC,GAAUR,GAAS;AACnC,EAAIA,MAAY,WAAUA,IAAUG;AACpC,MAAIM,GACAC,IAAW,CAAE,GACbC,GACAC,IAAa;AACjB,WAASC,IAAW;AAEhB,aADIC,IAAU,CAAE,GACPC,IAAK,GAAGA,IAAK,UAAU,QAAQA;AACpC,MAAAD,EAAQC,CAAE,IAAI,UAAUA,CAAE;AAE9B,WAAIH,KAAcH,MAAa,QAAQT,EAAQc,GAASJ,CAAQ,MAGhEC,IAAaH,EAAS,MAAM,MAAMM,CAAO,GACzCF,IAAa,IACbH,IAAW,MACXC,IAAWI,IACJH;AAAA,EACf;AACI,SAAOE;AACX;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.16.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../../node_modules/.pnpm/react-intersection-observer@9.16.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.mjs"],"sourcesContent":["\"use client\";\nvar __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n\n// src/InView.tsx\nimport * as React from \"react\";\n\n// src/observe.ts\nvar observerMap = /* @__PURE__ */ new Map();\nvar RootIds = /* @__PURE__ */ new WeakMap();\nvar rootId = 0;\nvar unsupportedValue = void 0;\nfunction defaultFallbackInView(inView) {\n  unsupportedValue = inView;\n}\nfunction getRootId(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}\nfunction optionsToId(options) {\n  return Object.keys(options).sort().filter(\n    (key) => options[key] !== void 0\n  ).map((key) => {\n    return `${key}_${key === \"root\" ? getRootId(options.root) : options[key]}`;\n  }).toString();\n}\nfunction createObserver(options) {\n  const id = optionsToId(options);\n  let instance = observerMap.get(id);\n  if (!instance) {\n    const elements = /* @__PURE__ */ new Map();\n    let thresholds;\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        var _a;\n        const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n        if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n          entry.isVisible = inView;\n        }\n        (_a = elements.get(entry.target)) == null ? void 0 : _a.forEach((callback) => {\n          callback(inView, entry);\n        });\n      });\n    }, options);\n    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n    instance = {\n      id,\n      observer,\n      elements\n    };\n    observerMap.set(id, instance);\n  }\n  return instance;\n}\nfunction observe(element, callback, options = {}, fallbackInView = unsupportedValue) {\n  if (typeof window.IntersectionObserver === \"undefined\" && fallbackInView !== void 0) {\n    const bounds = element.getBoundingClientRect();\n    callback(fallbackInView, {\n      isIntersecting: fallbackInView,\n      target: element,\n      intersectionRatio: typeof options.threshold === \"number\" ? options.threshold : 0,\n      time: 0,\n      boundingClientRect: bounds,\n      intersectionRect: bounds,\n      rootBounds: bounds\n    });\n    return () => {\n    };\n  }\n  const { id, observer, elements } = createObserver(options);\n  const callbacks = elements.get(element) || [];\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n  callbacks.push(callback);\n  observer.observe(element);\n  return function unobserve() {\n    callbacks.splice(callbacks.indexOf(callback), 1);\n    if (callbacks.length === 0) {\n      elements.delete(element);\n      observer.unobserve(element);\n    }\n    if (elements.size === 0) {\n      observer.disconnect();\n      observerMap.delete(id);\n    }\n  };\n}\n\n// src/InView.tsx\nfunction isPlainChildren(props) {\n  return typeof props.children !== \"function\";\n}\nvar InView = class extends React.Component {\n  constructor(props) {\n    super(props);\n    __publicField(this, \"node\", null);\n    __publicField(this, \"_unobserveCb\", null);\n    __publicField(this, \"handleNode\", (node) => {\n      if (this.node) {\n        this.unobserve();\n        if (!node && !this.props.triggerOnce && !this.props.skip) {\n          this.setState({ inView: !!this.props.initialInView, entry: void 0 });\n        }\n      }\n      this.node = node ? node : null;\n      this.observeNode();\n    });\n    __publicField(this, \"handleChange\", (inView, entry) => {\n      if (inView && this.props.triggerOnce) {\n        this.unobserve();\n      }\n      if (!isPlainChildren(this.props)) {\n        this.setState({ inView, entry });\n      }\n      if (this.props.onChange) {\n        this.props.onChange(inView, entry);\n      }\n    });\n    this.state = {\n      inView: !!props.initialInView,\n      entry: void 0\n    };\n  }\n  componentDidMount() {\n    this.unobserve();\n    this.observeNode();\n  }\n  componentDidUpdate(prevProps) {\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  componentWillUnmount() {\n    this.unobserve();\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    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  unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n      this._unobserveCb = null;\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    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;\n    return React.createElement(\n      as || \"div\",\n      { ref: this.handleNode, ...props },\n      children\n    );\n  }\n};\n\n// src/useInView.tsx\nimport * as React2 from \"react\";\nfunction useInView({\n  threshold,\n  delay,\n  trackVisibility,\n  rootMargin,\n  root,\n  triggerOnce,\n  skip,\n  initialInView,\n  fallbackInView,\n  onChange\n} = {}) {\n  var _a;\n  const [ref, setRef] = React2.useState(null);\n  const callback = React2.useRef(onChange);\n  const [state, setState] = React2.useState({\n    inView: !!initialInView,\n    entry: void 0\n  });\n  callback.current = onChange;\n  React2.useEffect(\n    () => {\n      if (skip || !ref) return;\n      let unobserve;\n      unobserve = observe(\n        ref,\n        (inView, entry) => {\n          setState({\n            inView,\n            entry\n          });\n          if (callback.current) callback.current(inView, entry);\n          if (entry.isIntersecting && triggerOnce && unobserve) {\n            unobserve();\n            unobserve = void 0;\n          }\n        },\n        {\n          root,\n          rootMargin,\n          threshold,\n          // @ts-ignore\n          trackVisibility,\n          // @ts-ignore\n          delay\n        },\n        fallbackInView\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  const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;\n  const previousEntryTarget = React2.useRef(void 0);\n  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {\n    previousEntryTarget.current = entryTarget;\n    setState({\n      inView: !!initialInView,\n      entry: void 0\n    });\n  }\n  const result = [setRef, state.inView, state.entry];\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n  return result;\n}\nexport {\n  InView,\n  defaultFallbackInView,\n  observe,\n  useInView\n};\n//# sourceMappingURL=index.mjs.map"],"names":["__defProp","__defNormalProp","obj","key","value","__publicField","observerMap","RootIds","rootId","unsupportedValue","getRootId","root","optionsToId","options","createObserver","id","instance","elements","thresholds","observer","entries","entry","_a","inView","threshold","callback","observe","element","fallbackInView","bounds","callbacks","isPlainChildren","props","InView","React","node","prevProps","rootMargin","trackVisibility","delay","children","as","triggerOnce","onChange","skip","initialInView"],"mappings":"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","x_google_ignoreList":[0]}