@shopify/shop-minis-react 0.1.2 → 0.1.4

package/src/hooks/util/useRequestPermissions.ts

@@ -0,0 +1,24 @@
+import {
+  RequestPermissionParams,
+  RequestPermissionResponse,
+} from '@shopify/shop-minis-platform/actions'
+
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+
+interface UseRequestPermissionsReturns {
+  /**
+   * Request native permissions from the user
+   */
+  requestPermission: (
+    params: RequestPermissionParams
+  ) => Promise<RequestPermissionResponse>
+}
+
+export const useRequestPermissions = (): UseRequestPermissionsReturns => {
+  const {requestPermission} = useShopActions()
+
+  return {
+    requestPermission: useHandleAction(requestPermission),
+  }
+}

package/src/mocks.ts

@@ -1,4 +1,9 @@
-import {Product, Gender, UserState} from '@shopify/shop-minis-platform'
+import {
+  Product,
+  Gender,
+  UserState,
+  MinisContentStatus,
+} from '@shopify/shop-minis-platform'
 import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 // Helper functions for common data structures
@@ -440,6 +445,7 @@ export function makeMockActions(): ShopActions {
           },
           title: 'Mock Content',
           visibility: ['DISCOVERABLE'],
+          status: MinisContentStatus.READY,
         },
       ],
     },
@@ -451,6 +457,9 @@ export function makeMockActions(): ShopActions {
       },
     },
     navigateToCart: undefined,
+    requestPermission: {
+      granted: true,
+    },
   } as const
 
   const mock: Partial<ShopActions> = {}

package/src/providers/ImagePickerProvider.test.tsx

@@ -5,13 +5,30 @@ import {
   renderHook,
   act,
 } from '@testing-library/react'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
 
 import {ImagePickerProvider, useImagePickerContext} from './ImagePickerProvider'
 
+// Mock useRequestPermissions hook
+const mockRequestPermission = vi.fn()
+vi.mock('../hooks/util/useRequestPermissions', () => ({
+  useRequestPermissions: () => ({
+    requestPermission: mockRequestPermission,
+  }),
+}))
+
 describe('ImagePickerProvider', () => {
+  const originalMinisParams = window.minisParams
+
   beforeEach(() => {
     vi.clearAllMocks()
+    // Default to granting permission
+    mockRequestPermission.mockResolvedValue({granted: true})
+  })
+
+  afterEach(() => {
+    // Restore original minisParams
+    window.minisParams = originalMinisParams
   })
 
   describe('Context', () => {
@@ -30,7 +47,7 @@ describe('ImagePickerProvider', () => {
 
     it('provides context value when used within provider', () => {
       const {result} = renderHook(() => useImagePickerContext(), {
-        wrapper: ({children}) => (
+        wrapper: ({children}: {children: React.ReactNode}) => (
           <ImagePickerProvider>{children}</ImagePickerProvider>
         ),
       })
@@ -72,7 +89,7 @@ describe('ImagePickerProvider', () => {
   })
 
   describe('openGallery', () => {
-    it('triggers gallery input click and resolves with selected file', async () => {
+    it('triggers gallery input click directly on non-Android platforms', async () => {
       const TestComponent = () => {
         const {openGallery} = useImagePickerContext()
 
@@ -181,10 +198,106 @@ describe('ImagePickerProvider', () => {
         expect(cancelMessage?.textContent).toBe('User cancelled file selection')
       })
     })
+
+    it('requests CAMERA permission on Android before showing picker', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockResolvedValue({granted: true})
+
+      const TestComponent = () => {
+        const {openGallery} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openGallery().catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Gallery
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const galleryInput = container.querySelector(
+        'input[type="file"]:not([capture])'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(galleryInput, 'click')
+
+      const button = screen.getByText('Open Gallery')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should be clicked after permission request
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('still opens picker on Android even if CAMERA permission is denied', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockRejectedValue(new Error('Permission denied'))
+
+      const TestComponent = () => {
+        const {openGallery} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openGallery().catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Gallery
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const galleryInput = container.querySelector(
+        'input[type="file"]:not([capture])'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(galleryInput, 'click')
+
+      const button = screen.getByText('Open Gallery')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should still be clicked even after permission rejection
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 
   describe('openCamera', () => {
-    it('triggers back camera input click by default', async () => {
+    it('triggers back camera input click directly on non-Android platforms', async () => {
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -356,6 +469,218 @@ describe('ImagePickerProvider', () => {
         expect(cancelMessage?.textContent).toBe('User cancelled camera')
       })
     })
+
+    it('requests CAMERA permission on Android and opens camera if granted', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockResolvedValue({granted: true})
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const cameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(cameraInput, 'click')
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should be clicked after permission is granted
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('rejects with error on Android if CAMERA permission is not granted', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockResolvedValue({granted: false})
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'permission-error')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const cameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(cameraInput, 'click')
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should NOT be clicked when permission is denied
+      expect(clickSpy).not.toHaveBeenCalled()
+
+      // Should show error message
+      await vi.waitFor(() => {
+        const errorMessage = document.querySelector(
+          '[data-testid="permission-error"]'
+        )
+        expect(errorMessage?.textContent).toBe('Camera permission not granted')
+      })
+    })
+
+    it('rejects with error on Android if permission request fails', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockRejectedValue(
+        new Error('Permission request failed')
+      )
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'permission-error')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const cameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(cameraInput, 'click')
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should NOT be clicked when permission request fails
+      expect(clickSpy).not.toHaveBeenCalled()
+
+      // Should show error message
+      await vi.waitFor(() => {
+        const errorMessage = document.querySelector(
+          '[data-testid="permission-error"]'
+        )
+        expect(errorMessage?.textContent).toBe('Camera permission not granted')
+      })
+    })
+
+    it('requests permission for front camera on Android', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockResolvedValue({granted: true})
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera('front').catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Front Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const frontCameraInput = container.querySelector(
+        'input[capture="user"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(frontCameraInput, 'click')
+
+      const button = screen.getByText('Open Front Camera')
+      fireEvent.click(button)
+
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Front camera input should be clicked after permission is granted
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 
   describe('Multiple Picker Handling', () => {

package/src/providers/ImagePickerProvider.tsx

@@ -7,6 +7,8 @@ import React, {
   useMemo,
 } from 'react'
 
+import {useRequestPermissions} from '../hooks/util/useRequestPermissions'
+
 export type CameraFacing = 'front' | 'back'
 
 interface ImagePickerContextValue {
@@ -30,6 +32,8 @@ interface ImagePickerProviderProps {
   children: React.ReactNode
 }
 
+const isAndroid = () => window?.minisParams?.platform === 'android'
+
 export function ImagePickerProvider({children}: ImagePickerProviderProps) {
   const galleryInputRef = useRef<HTMLInputElement>(null)
   const frontCameraInputRef = useRef<HTMLInputElement>(null)
@@ -41,6 +45,8 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
     handler: () => void
   } | null>(null)
 
+  const {requestPermission} = useRequestPermissions()
+
   const cleanupCancelHandler = useCallback(() => {
     if (activeCancelHandlerRef.current) {
       const {input, handler} = activeCancelHandlerRef.current
@@ -106,9 +112,22 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       input.addEventListener('cancel', handleCancel)
       activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-      input.click()
+      if (isAndroid()) {
+        // Android requires explicit camera permission for camera picker
+        requestPermission({permission: 'CAMERA'})
+          .then(() => {
+            // This will show both Camera and Gallery
+            input.click()
+          })
+          .catch(() => {
+            // Show only Gallery
+            input.click()
+          })
+      } else {
+        input.click()
+      }
     })
-  }, [rejectPendingPromise, cleanupCancelHandler])
+  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])
 
   const openCamera = useCallback(
     (cameraFacing: CameraFacing = 'back') => {
@@ -143,10 +162,29 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         input.addEventListener('cancel', handleCancel)
         activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-        input.click()
+        if (isAndroid()) {
+          // Android requires explicit camera permission
+          requestPermission({permission: 'CAMERA'})
+            .then(({granted}) => {
+              if (granted) {
+                input.click()
+              } else {
+                reject(new Error('Camera permission not granted'))
+                resolveRef.current = null
+                rejectRef.current = null
+              }
+            })
+            .catch(() => {
+              reject(new Error('Camera permission not granted'))
+              resolveRef.current = null
+              rejectRef.current = null
+            })
+        } else {
+          input.click()
+        }
       })
     },
-    [rejectPendingPromise, cleanupCancelHandler]
+    [rejectPendingPromise, cleanupCancelHandler, requestPermission]
   )
 
   useEffect(() => {

package/dist/shop-minis-platform/src/types/permissions.js

@@ -1,15 +0,0 @@
-const n = {
-  MiniConsent: "mini_consent",
-  CameraConsent: "camera_consent",
-  PhotoLibraryConsent: "photo_library_consent",
-  MicrophoneConsent: "microphone_consent"
-}, e = {
-  Granted: "granted",
-  Dismissed: "dismissed",
-  Idle: "idle"
-};
-export {
-  n as Consent,
-  e as ConsentStatus
-};
-//# sourceMappingURL=permissions.js.map

package/dist/shop-minis-platform/src/types/permissions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"permissions.js","sources":["../../../../../shop-minis-platform/src/types/permissions.ts"],"sourcesContent":["export type Permission = 'CAMERA' | 'GALLERY' | 'MICROPHONE'\n\nexport interface MiniManifest {\n  trusted_domains?: string[]\n  permissions?: string[]\n  [key: string]: any\n}\n\nexport const Consent = {\n  MiniConsent: 'mini_consent',\n  CameraConsent: 'camera_consent',\n  PhotoLibraryConsent: 'photo_library_consent',\n  MicrophoneConsent: 'microphone_consent',\n} as const\n\nexport const ConsentStatus = {\n  Granted: 'granted',\n  Dismissed: 'dismissed',\n  Idle: 'idle',\n} as const\n\nexport type ConsentType = (typeof Consent)[keyof typeof Consent]\nexport type ConsentStatusType =\n  (typeof ConsentStatus)[keyof typeof ConsentStatus]\n"],"names":["Consent","ConsentStatus"],"mappings":"AAQO,MAAMA,IAAU;AAAA,EACrB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AACrB,GAEaC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AACR;"}

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]}