@cleartrip/ct-design-intersection-observer 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,63 @@
+# InterSectionObserver
+
+A component that observes element visibility using Intersection Observer API.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-intersection-observer
+# or
+pnpm add @cleartrip/ct-design-intersection-observer
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { InterSectionObserver } from '@cleartrip/ct-design-intersection-observer';
+
+function Example() {
+  return (
+    <InterSectionObserver>
+      {/* Basic usage */}
+    </InterSectionObserver>
+  );
+}
+```
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { InterSectionObserver } from 'yagami/core/components';
++ import { InterSectionObserver } from '@cleartrip/ct-design-intersection-observer';
+```

package/dist/IntersectionObserver.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IntersectionObserverProps } from './type';
+declare const WebIntersectionObserver: React.FC<IntersectionObserverProps>;
+export default WebIntersectionObserver;
+//# sourceMappingURL=IntersectionObserver.d.ts.map

package/dist/IntersectionObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserver.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAEnD,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgFhE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/IntersectionObserver.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IntersectionObserverProps } from './type';
+declare const InterSectionObserver: React.FC<IntersectionObserverProps>;
+export default InterSectionObserver;
+//# sourceMappingURL=IntersectionObserver.native.d.ts.map

package/dist/IntersectionObserver.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserver.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAEnD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwC7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/ct-design-intersection-observer.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("react");exports.IntersectionObserver=({children:t,onIntersection:n,onTimedObservationComplete:u,threshold:c=[.01,.5],wrapped:s})=>{const i=r.useRef(!1),o=r.useRef(!1),l=r.useRef(null),a=r.useRef(null),d=r.useCallback(e=>{l.current&&e.unobserve(l.current)},[l]),f=r.useCallback((e,r)=>{const t=e[0];if(null==t?void 0:t.isIntersecting){o.current||(n(),o.current=!0);const{intersectionRatio:e}=t;e>=.5?(a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{i.current||(d(r),i.current=!0,null==u||u())},1e3)):a.current&&clearTimeout(a.current)}else a.current&&clearTimeout(a.current)},[n,u,d]);return r.useEffect(()=>{const e=new IntersectionObserver(f,{threshold:c});return l.current&&e.observe(l.current),()=>{d(e)}},[f,c,d]),s?e.jsx("div",{ref:l,children:t}):e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:l}),t]})};
+//# sourceMappingURL=ct-design-intersection-observer.browser.cjs.js.map

package/dist/ct-design-intersection-observer.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-intersection-observer.browser.cjs.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"sourcesContent":[null],"names":["children","onIntersection","onTimedObservationComplete","threshold","wrapped","viewed","useRef","intersected","intersectionRef","timeoutInstance","unobserve","useCallback","observer","current","handleIO","entries","entry","isIntersecting","intersectionRatio","clearTimeout","setTimeout","useEffect","IntersectionObserver","observe","_jsx","ref","_jsxs","jsxs","_Fragment","Fragment"],"mappings":"gGAIqE,EACnEA,WACAC,iBACAC,6BACAC,YAAY,CAAC,IAAM,IACnBC,cAEA,MAAMC,EAASC,UAAgB,GACzBC,EAAcD,UAAgB,GAC9BE,EAAkBF,SAA8B,MAChDG,EAAkBH,SAA8B,MAEhDI,EAAYC,cACfC,IACKJ,EAAgBK,SAClBD,EAASF,UAAUF,EAAgBK,UAGvC,CAACL,IAGGM,EAAWH,EAAAA,YACf,CAACI,EAAsCH,KACrC,MAAMI,EAAQD,EAAQ,GAEtB,GAAIC,aAAK,EAALA,EAAOC,eAAgB,CACpBV,EAAYM,UACfZ,IACAM,EAAYM,SAAU,GAGxB,MAAMK,kBAAEA,GAAsBF,EAE1BE,GAAqB,IACnBT,EAAgBI,SAClBM,aAAaV,EAAgBI,SAE/BJ,EAAgBI,QAAUO,WAAW,KAC9Bf,EAAOQ,UACVH,EAAUE,GACVP,EAAOQ,SAAU,EACjBX,SAAAA,MAED,MACMO,EAAgBI,SACzBM,aAAaV,EAAgBI,QAEhC,MACKJ,EAAgBI,SAClBM,aAAaV,EAAgBI,UAInC,CAACZ,EAAgBC,EAA4BQ,IAiB/C,OAdAW,EAAAA,UAAU,KACR,MAAMT,EAAW,IAAIU,qBAAqBR,EAAU,CAClDX,cAOF,OAJIK,EAAgBK,SAClBD,EAASW,QAAQf,EAAgBK,SAG5B,KACLH,EAAUE,KAEX,CAACE,EAAUX,EAAWO,IAErBN,EACKoB,EAAAA,WAAKC,IAAKjB,EAAkBR,SAAAA,IAInC0B,EACEC,KAAAC,EAAAC,SAAA,CAAA7B,SAAA,CAAAwB,EAAAA,IAAA,MAAA,CAAKC,IAAKjB,IACTR"}

package/dist/ct-design-intersection-observer.browser.esm.js

@@ -0,0 +1,2 @@
+import{jsx as r,jsxs as e,Fragment as t}from"react/jsx-runtime";import{useRef as n,useCallback as c,useEffect as o}from"react";const u=({children:u,onIntersection:i,onTimedObservationComplete:s,threshold:l=[.01,.5],wrapped:m})=>{const d=n(!1),a=n(!1),v=n(null),h=n(null),p=c(r=>{v.current&&r.unobserve(v.current)},[v]),b=c((r,e)=>{const t=r[0];if(null==t?void 0:t.isIntersecting){a.current||(i(),a.current=!0);const{intersectionRatio:r}=t;r>=.5?(h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{d.current||(p(e),d.current=!0,null==s||s())},1e3)):h.current&&clearTimeout(h.current)}else h.current&&clearTimeout(h.current)},[i,s,p]);return o(()=>{const r=new IntersectionObserver(b,{threshold:l});return v.current&&r.observe(v.current),()=>{p(r)}},[b,l,p]),m?r("div",{ref:v,children:u}):e(t,{children:[r("div",{ref:v}),u]})};export{u as IntersectionObserver};
+//# sourceMappingURL=ct-design-intersection-observer.browser.esm.js.map

package/dist/ct-design-intersection-observer.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-intersection-observer.browser.esm.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"sourcesContent":[null],"names":["WebIntersectionObserver","children","onIntersection","onTimedObservationComplete","threshold","wrapped","viewed","useRef","intersected","intersectionRef","timeoutInstance","unobserve","useCallback","observer","current","handleIO","entries","entry","isIntersecting","intersectionRatio","clearTimeout","setTimeout","useEffect","IntersectionObserver","observe","_jsx","ref","_jsxs","_Fragment"],"mappings":"+HAIM,MAAAA,EAA+D,EACnEC,WACAC,iBACAC,6BACAC,YAAY,CAAC,IAAM,IACnBC,cAEA,MAAMC,EAASC,GAAgB,GACzBC,EAAcD,GAAgB,GAC9BE,EAAkBF,EAA8B,MAChDG,EAAkBH,EAA8B,MAEhDI,EAAYC,EACfC,IACKJ,EAAgBK,SAClBD,EAASF,UAAUF,EAAgBK,UAGvC,CAACL,IAGGM,EAAWH,EACf,CAACI,EAAsCH,KACrC,MAAMI,EAAQD,EAAQ,GAEtB,GAAIC,aAAK,EAALA,EAAOC,eAAgB,CACpBV,EAAYM,UACfZ,IACAM,EAAYM,SAAU,GAGxB,MAAMK,kBAAEA,GAAsBF,EAE1BE,GAAqB,IACnBT,EAAgBI,SAClBM,aAAaV,EAAgBI,SAE/BJ,EAAgBI,QAAUO,WAAW,KAC9Bf,EAAOQ,UACVH,EAAUE,GACVP,EAAOQ,SAAU,EACjBX,SAAAA,MAED,MACMO,EAAgBI,SACzBM,aAAaV,EAAgBI,QAEhC,MACKJ,EAAgBI,SAClBM,aAAaV,EAAgBI,UAInC,CAACZ,EAAgBC,EAA4BQ,IAiB/C,OAdAW,EAAU,KACR,MAAMT,EAAW,IAAIU,qBAAqBR,EAAU,CAClDX,cAOF,OAJIK,EAAgBK,SAClBD,EAASW,QAAQf,EAAgBK,SAG5B,KACLH,EAAUE,KAEX,CAACE,EAAUX,EAAWO,IAErBN,EACKoB,SAAKC,IAAKjB,EAAkBR,SAAAA,IAInC0B,EACEC,EAAA,CAAA3B,SAAA,CAAAwB,EAAA,MAAA,CAAKC,IAAKjB,IACTR"}

package/dist/ct-design-intersection-observer.cjs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const WebIntersectionObserver = ({ children, onIntersection, onTimedObservationComplete, threshold = [0.01, 0.5], wrapped, }) => {
+    const viewed = react.useRef(false);
+    const intersected = react.useRef(false);
+    const intersectionRef = react.useRef(null);
+    const timeoutInstance = react.useRef(null);
+    const unobserve = react.useCallback((observer) => {
+        if (intersectionRef.current) {
+            observer.unobserve(intersectionRef.current);
+        }
+    }, [intersectionRef]);
+    const handleIO = react.useCallback((entries, observer) => {
+        const entry = entries[0];
+        if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+            if (!intersected.current) {
+                onIntersection();
+                intersected.current = true;
+            }
+            const { intersectionRatio } = entry;
+            if (intersectionRatio >= 0.5) {
+                if (timeoutInstance.current) {
+                    clearTimeout(timeoutInstance.current);
+                }
+                timeoutInstance.current = setTimeout(() => {
+                    if (!viewed.current) {
+                        unobserve(observer);
+                        viewed.current = true;
+                        onTimedObservationComplete === null || onTimedObservationComplete === void 0 ? void 0 : onTimedObservationComplete();
+                    }
+                }, 1000);
+            }
+            else if (timeoutInstance.current) {
+                clearTimeout(timeoutInstance.current);
+            }
+        }
+        else {
+            if (timeoutInstance.current) {
+                clearTimeout(timeoutInstance.current);
+            }
+        }
+    }, [onIntersection, onTimedObservationComplete, unobserve]);
+    react.useEffect(() => {
+        const observer = new IntersectionObserver(handleIO, {
+            threshold,
+        });
+        if (intersectionRef.current) {
+            observer.observe(intersectionRef.current);
+        }
+        return () => {
+            unobserve(observer);
+        };
+    }, [handleIO, threshold, unobserve]);
+    if (wrapped) {
+        return jsxRuntime.jsx("div", { ref: intersectionRef, children: children });
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: intersectionRef }), children] }));
+};
+
+exports.IntersectionObserver = WebIntersectionObserver;
+//# sourceMappingURL=ct-design-intersection-observer.cjs.js.map

package/dist/ct-design-intersection-observer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-intersection-observer.cjs.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"sourcesContent":[null],"names":["useRef","useCallback","useEffect","_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAIM,MAAA,uBAAuB,GAAwC,CAAC,EACpE,QAAQ,EACR,cAAc,EACd,0BAA0B,EAC1B,SAAS,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,EACvB,OAAO,GACR,KAAI;AACH,IAAA,MAAM,MAAM,GAAGA,YAAM,CAAU,KAAK,CAAC,CAAC;AACtC,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAU,KAAK,CAAC,CAAC;AAC3C,IAAA,MAAM,eAAe,GAAGA,YAAM,CAAwB,IAAI,CAAC,CAAC;AAC5D,IAAA,MAAM,eAAe,GAAGA,YAAM,CAAwB,IAAI,CAAC,CAAC;AAE5D,IAAA,MAAM,SAAS,GAAGC,iBAAW,CAC3B,CAAC,QAA8B,KAAI;AACjC,QAAA,IAAI,eAAe,CAAC,OAAO,EAAE;AAC3B,YAAA,QAAQ,CAAC,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC7C;AACH,KAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,QAAQ,GAAGA,iBAAW,CAC1B,CAAC,OAAoC,EAAE,QAA8B,KAAI;AACvE,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAEzB,IAAI,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,cAAc,EAAE;AACzB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AACxB,gBAAA,cAAc,EAAE,CAAC;AACjB,gBAAA,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;aAC5B;AAED,YAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;AAEpC,YAAA,IAAI,iBAAiB,IAAI,GAAG,EAAE;AAC5B,gBAAA,IAAI,eAAe,CAAC,OAAO,EAAE;AAC3B,oBAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;iBACvC;AACD,gBAAA,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AACxC,oBAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;wBACnB,SAAS,CAAC,QAAQ,CAAC,CAAC;AACpB,wBAAA,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;AACtB,wBAAA,0BAA0B,KAA1B,IAAA,IAAA,0BAA0B,KAA1B,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,0BAA0B,EAAI,CAAC;qBAChC;iBACF,EAAE,IAAI,CAAC,CAAC;aACV;AAAM,iBAAA,IAAI,eAAe,CAAC,OAAO,EAAE;AAClC,gBAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;aACvC;SACF;aAAM;AACL,YAAA,IAAI,eAAe,CAAC,OAAO,EAAE;AAC3B,gBAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;aACvC;SACF;KACF,EACD,CAAC,cAAc,EAAE,0BAA0B,EAAE,SAAS,CAAC,CACxD,CAAC;IAEFC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE;YAClD,SAAS;AACV,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,eAAe,CAAC,OAAO,EAAE;AAC3B,YAAA,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC3C;AAED,QAAA,OAAO,MAAK;YACV,SAAS,CAAC,QAAQ,CAAC,CAAC;AACtB,SAAC,CAAC;KACH,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAErC,IAAI,OAAO,EAAE;AACX,QAAA,OAAOC,wBAAK,GAAG,EAAE,eAAe,EAAG,QAAA,EAAA,QAAQ,GAAO,CAAC;KACpD;IAED,QACEC,eACE,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CAAAF,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,eAAe,EAAA,CAAI,EAC5B,QAAQ,CACR,EAAA,CAAA,EACH;AACJ;;;;"}

package/dist/ct-design-intersection-observer.esm.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+
+const WebIntersectionObserver = ({ children, onIntersection, onTimedObservationComplete, threshold = [0.01, 0.5], wrapped, }) => {
+    const viewed = useRef(false);
+    const intersected = useRef(false);
+    const intersectionRef = useRef(null);
+    const timeoutInstance = useRef(null);
+    const unobserve = useCallback((observer) => {
+        if (intersectionRef.current) {
+            observer.unobserve(intersectionRef.current);
+        }
+    }, [intersectionRef]);
+    const handleIO = useCallback((entries, observer) => {
+        const entry = entries[0];
+        if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+            if (!intersected.current) {
+                onIntersection();
+                intersected.current = true;
+            }
+            const { intersectionRatio } = entry;
+            if (intersectionRatio >= 0.5) {
+                if (timeoutInstance.current) {
+                    clearTimeout(timeoutInstance.current);
+                }
+                timeoutInstance.current = setTimeout(() => {
+                    if (!viewed.current) {
+                        unobserve(observer);
+                        viewed.current = true;
+                        onTimedObservationComplete === null || onTimedObservationComplete === void 0 ? void 0 : onTimedObservationComplete();
+                    }
+                }, 1000);
+            }
+            else if (timeoutInstance.current) {
+                clearTimeout(timeoutInstance.current);
+            }
+        }
+        else {
+            if (timeoutInstance.current) {
+                clearTimeout(timeoutInstance.current);
+            }
+        }
+    }, [onIntersection, onTimedObservationComplete, unobserve]);
+    useEffect(() => {
+        const observer = new IntersectionObserver(handleIO, {
+            threshold,
+        });
+        if (intersectionRef.current) {
+            observer.observe(intersectionRef.current);
+        }
+        return () => {
+            unobserve(observer);
+        };
+    }, [handleIO, threshold, unobserve]);
+    if (wrapped) {
+        return jsx("div", { ref: intersectionRef, children: children });
+    }
+    return (jsxs(Fragment, { children: [jsx("div", { ref: intersectionRef }), children] }));
+};
+
+export { WebIntersectionObserver as IntersectionObserver };
+//# sourceMappingURL=ct-design-intersection-observer.esm.js.map

package/dist/ct-design-intersection-observer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-intersection-observer.esm.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/ct-design-intersection-observer.umd.js

@@ -0,0 +1,67 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemIntersectionObserver = {}, global.jsxRuntime, global.React));
+})(this, (function (exports, jsxRuntime, react) { 'use strict';
+
+    const WebIntersectionObserver = ({ children, onIntersection, onTimedObservationComplete, threshold = [0.01, 0.5], wrapped, }) => {
+        const viewed = react.useRef(false);
+        const intersected = react.useRef(false);
+        const intersectionRef = react.useRef(null);
+        const timeoutInstance = react.useRef(null);
+        const unobserve = react.useCallback((observer) => {
+            if (intersectionRef.current) {
+                observer.unobserve(intersectionRef.current);
+            }
+        }, [intersectionRef]);
+        const handleIO = react.useCallback((entries, observer) => {
+            const entry = entries[0];
+            if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+                if (!intersected.current) {
+                    onIntersection();
+                    intersected.current = true;
+                }
+                const { intersectionRatio } = entry;
+                if (intersectionRatio >= 0.5) {
+                    if (timeoutInstance.current) {
+                        clearTimeout(timeoutInstance.current);
+                    }
+                    timeoutInstance.current = setTimeout(() => {
+                        if (!viewed.current) {
+                            unobserve(observer);
+                            viewed.current = true;
+                            onTimedObservationComplete === null || onTimedObservationComplete === void 0 ? void 0 : onTimedObservationComplete();
+                        }
+                    }, 1000);
+                }
+                else if (timeoutInstance.current) {
+                    clearTimeout(timeoutInstance.current);
+                }
+            }
+            else {
+                if (timeoutInstance.current) {
+                    clearTimeout(timeoutInstance.current);
+                }
+            }
+        }, [onIntersection, onTimedObservationComplete, unobserve]);
+        react.useEffect(() => {
+            const observer = new IntersectionObserver(handleIO, {
+                threshold,
+            });
+            if (intersectionRef.current) {
+                observer.observe(intersectionRef.current);
+            }
+            return () => {
+                unobserve(observer);
+            };
+        }, [handleIO, threshold, unobserve]);
+        if (wrapped) {
+            return jsxRuntime.jsx("div", { ref: intersectionRef, children: children });
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: intersectionRef }), children] }));
+    };
+
+    exports.IntersectionObserver = WebIntersectionObserver;
+
+}));
+//# sourceMappingURL=ct-design-intersection-observer.umd.js.map

package/dist/ct-design-intersection-observer.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-intersection-observer.umd.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx"],"sourcesContent":[null],"names":["useRef","useCallback","useEffect","_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as IntersectionObserver } from './IntersectionObserver';
+export * from './type';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,cAAc,QAAQ,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface IntersectionObserverProps {
+    children: ReactNode;
+    onIntersection: () => void;
+    onIntersectionComplete?: () => void;
+    onTimedObservationComplete?: () => void;
+    threshold?: number[];
+    timedThreshold?: number;
+    wrapped?: boolean;
+    observerBox?: [number, number, number | undefined, number | undefined];
+    gestureHorizontallyScrollable?: boolean;
+    triggerOnce?: boolean;
+    onUnmount?: () => void;
+    observeOnScroll?: boolean;
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,yBAAyB;IAExC,QAAQ,EAAE,SAAS,CAAC;IAGpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAG3B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAGrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAGvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAGxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAKvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/dist/useInViewType.d.ts

@@ -0,0 +1,48 @@
+import type { RefObject } from 'react';
+import { LayoutChangeEvent, View } from 'react-native';
+export type InViewHookResponse<T> = RefObject<T>;
+export interface IntersectionOptions extends IntersectionObserverInit {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number[];
+    triggerOnce?: boolean;
+    skip?: boolean;
+    delay?: number;
+    onChange?: (inView: boolean) => void;
+    onIntersectionComplete?: () => void;
+    customIntersectionRatio?: {
+        horizontal: number;
+        vertical: number;
+    };
+    fireEventOnlyOnEnterInViewPort?: boolean;
+    pageName?: string;
+    timedThreshold?: number;
+    onTimedObservationComplete?: () => void;
+    minimumObservationTime?: number;
+    observerBox?: [number, number, number | undefined, number | undefined];
+    gestureHorizontallyScrollable?: boolean;
+    observeOnScroll?: boolean;
+    onUnmount?: () => void;
+    checkFullVisibility?: boolean;
+}
+export declare enum SCROLLING_TYPE {
+    NONE = "none",
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+interface Thresholds {
+    [key: number]: () => void;
+}
+export interface UseInViewProps {
+    thresholds: Thresholds;
+    onExit?: () => void;
+    id?: string;
+}
+export interface UseInViewReturn {
+    viewRef: React.RefObject<View>;
+    visiblePercent: number;
+    isInView: boolean;
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+export {};
+//# sourceMappingURL=useInViewType.d.ts.map

package/dist/useInViewType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInViewType.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useInViewType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKvD,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB;IAEnE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAGrC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpC,uBAAuB,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IAKF,8BAA8B,CAAC,EAAE,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAGhC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAEvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAMxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAMvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED,UAAU,UAAU;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C"}

package/dist/useinView.d.ts

@@ -0,0 +1,4 @@
+import { IntersectionOptions, InViewHookResponse } from './useInViewType';
+declare const useInView: <T>({ threshold, timedThreshold, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime, observerBox, gestureHorizontallyScrollable, triggerOnce, observeOnScroll, onUnmount, checkFullVisibility, }: IntersectionOptions) => InViewHookResponse<T>;
+export default useInView;
+//# sourceMappingURL=useinView.d.ts.map

package/dist/useinView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useinView.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAgI1E,QAAA,MAAM,SAAS,GAAI,CAAC,EAAE,gOAanB,mBAAmB,KAAG,kBAAkB,CAAC,CAAC,CAoI5C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cleartrip/ct-design-intersection-observer",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "Intersection Observer Component",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-intersection-observer.cjs.js",
+  "react-native": "src/index.ts",
+  "jsnext:main": "dist/ct-design-intersection-observer.esm.js",
+  "module": "dist/ct-design-intersection-observer.esm.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-intersection-observer.d.ts",
+      "import": "./dist/ct-design-intersection-observer.esm.js",
+      "default": "./dist/ct-design-intersection-observer.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-intersection-observer.esm.js": "./dist/ct-design-intersection-observer.browser.esm.js",
+    "./dist/ct-design-intersection-observer.cjs.js": "./dist/ct-design-intersection-observer.browser.cjs.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-scroll-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-list": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-common-utils": "4.0.0-SNAPSHOT-test.0"
+  },
+  "devDependencies": {
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-native": ">=0.78.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Cleartrip",
+  "license": "ISC",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch-package": "rollup -c -w",
+    "build-package": "rollup -c",
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish"
+  }
+}

package/src/IntersectionObserver.native.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { View } from 'react-native';
+import useInView from './useinView';
+
+import { IntersectionObserverProps } from './type';
+
+const InterSectionObserver: React.FC<IntersectionObserverProps> = ({
+  children,
+  onIntersection,
+  onTimedObservationComplete,
+  threshold = [0.01, 0.05],
+  timedThreshold = 1000,
+  wrapped = false,
+  observerBox,
+  gestureHorizontallyScrollable,
+  triggerOnce,
+  onIntersectionComplete,
+  onUnmount,
+  observeOnScroll,
+}) => {
+  const ref = useInView<View>({
+    onChange: onIntersection,
+    onTimedObservationComplete,
+    onIntersectionComplete,
+    threshold,
+    timedThreshold: timedThreshold,
+    minimumObservationTime: timedThreshold,
+    observerBox,
+    gestureHorizontallyScrollable,
+    triggerOnce,
+    onUnmount,
+    observeOnScroll,
+  });
+  if (wrapped) {
+    return (
+      <View ref={ref} collapsable={false}>
+        {children}
+      </View>
+    );
+  }
+  return (
+    <>
+      <View ref={ref} collapsable={false} />
+      {children}
+    </>
+  );
+};
+
+export default InterSectionObserver;

package/src/IntersectionObserver.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { IntersectionObserverProps } from './type';
+
+const WebIntersectionObserver: React.FC<IntersectionObserverProps> = ({
+  children,
+  onIntersection,
+  onTimedObservationComplete,
+  threshold = [0.01, 0.5],
+  wrapped,
+}) => {
+  const viewed = useRef<boolean>(false);
+  const intersected = useRef<boolean>(false);
+  const intersectionRef = useRef<HTMLDivElement | null>(null);
+  const timeoutInstance = useRef<NodeJS.Timeout | null>(null);
+
+  const unobserve = useCallback(
+    (observer: IntersectionObserver) => {
+      if (intersectionRef.current) {
+        observer.unobserve(intersectionRef.current);
+      }
+    },
+    [intersectionRef],
+  );
+
+  const handleIO = useCallback(
+    (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+      const entry = entries[0];
+
+      if (entry?.isIntersecting) {
+        if (!intersected.current) {
+          onIntersection();
+          intersected.current = true;
+        }
+
+        const { intersectionRatio } = entry;
+
+        if (intersectionRatio >= 0.5) {
+          if (timeoutInstance.current) {
+            clearTimeout(timeoutInstance.current);
+          }
+          timeoutInstance.current = setTimeout(() => {
+            if (!viewed.current) {
+              unobserve(observer);
+              viewed.current = true;
+              onTimedObservationComplete?.();
+            }
+          }, 1000);
+        } else if (timeoutInstance.current) {
+          clearTimeout(timeoutInstance.current);
+        }
+      } else {
+        if (timeoutInstance.current) {
+          clearTimeout(timeoutInstance.current);
+        }
+      }
+    },
+    [onIntersection, onTimedObservationComplete, unobserve],
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIO, {
+      threshold,
+    });
+
+    if (intersectionRef.current) {
+      observer.observe(intersectionRef.current);
+    }
+
+    return () => {
+      unobserve(observer);
+    };
+  }, [handleIO, threshold, unobserve]);
+
+  if (wrapped) {
+    return <div ref={intersectionRef}>{children}</div>;
+  }
+
+  return (
+    <>
+      <div ref={intersectionRef} />
+      {children}
+    </>
+  );
+};
+
+export default WebIntersectionObserver;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as IntersectionObserver } from './IntersectionObserver';
+export * from './type';

package/src/type.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+
+export interface IntersectionObserverProps {
+  /** The content to be observed for intersection */
+  children: ReactNode;
+
+  /** Callback function triggered when intersection occurs */
+  onIntersection: () => void;
+
+  /** Callback function triggered when intersection completes and element goes out of view */
+  onIntersectionComplete?: () => void;
+
+  /** Optional callback function triggered when timed observation is complete */
+  onTimedObservationComplete?: () => void;
+
+  /** Array of threshold values between 0 and 1, indicating at what percentage of the target's visibility the observer's callback should be executed */
+  threshold?: number[];
+
+  /** Time in milliseconds to wait before triggering onTimedObservationComplete */
+  timedThreshold?: number;
+
+  /** Whether the observed element should be wrapped in a containing element */
+  wrapped?: boolean;
+
+  /** observer box: instead of root margin */
+  observerBox?: [number, number, number | undefined, number | undefined];
+
+  /** Whether the observed element should be horizontally scrollable */
+  gestureHorizontallyScrollable?: boolean;
+
+  /** Whether the observed element should be triggered once */
+  triggerOnce?: boolean;
+
+  /**
+   * handlle umount
+   */
+  onUnmount?: () => void;
+
+  /**
+   * observe on scroll
+   */
+  observeOnScroll?: boolean;
+}

package/src/useInViewType.ts

@@ -0,0 +1,106 @@
+import type { RefObject } from 'react';
+
+import { LayoutChangeEvent, View } from 'react-native';
+
+/**
+ * The Hook response supports both array and object destructing
+ */
+export type InViewHookResponse<T> = RefObject<T>;
+
+export interface IntersectionOptions extends IntersectionObserverInit {
+  /** The IntersectionObserver interface's read-only `root` property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the `root` is null, then the bounds of the actual document viewport are used.*/
+  root?: Element | null;
+  /** Margin around the root. Can have values similar to the CSS margin property, e.g. `10px 20px 30px 40px` (top, right, bottom, left). */
+  rootMargin?: string;
+  /** Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an `array` of numbers, to create multiple trigger points. */
+  threshold?: number[];
+  /** Only trigger the inView callback once */
+  triggerOnce?: boolean;
+
+  /** Skip assigning the observer to the `ref` */
+  skip?: boolean;
+
+  /** Set a minimum delay in milliseconds between notifications */
+  delay?: number;
+
+  /** Callback function triggered whenever the in-view state changes
+   * @param inView - Boolean indicating if element is in viewport
+   */
+  onChange?: (inView: boolean) => void;
+
+  /** Callback function triggered when intersection completes and element goes out of view */
+  onIntersectionComplete?: () => void;
+
+  /** Custom intersection ratio thresholds for horizontal and vertical directions
+   * @property {number} horizontal - Percentage (0-100) for horizontal threshold
+   * @property {number} vertical - Percentage (0-100) for vertical threshold
+   */
+  customIntersectionRatio?: {
+    horizontal: number;
+    vertical: number;
+  };
+
+  /** Controls if the event should only fire on entering viewport
+   * @default true
+   */
+  fireEventOnlyOnEnterInViewPort?: boolean;
+
+  /** Unique identifier for the page where hook is used
+   * Used to calculate rootMargin
+   */
+  pageName?: string;
+
+  /** Time threshold in milliseconds for observation */
+  timedThreshold?: number;
+
+  /** Callback fired when timed observation is complete */
+  onTimedObservationComplete?: () => void;
+
+  /** Minimum time in milliseconds required for observation */
+  minimumObservationTime?: number;
+
+  /** observer box: instead of root margin */
+  observerBox?: [number, number, number | undefined, number | undefined];
+
+  gestureHorizontallyScrollable?: boolean;
+
+  /**
+   * Observe the element on scroll
+   * @default false
+   */
+  observeOnScroll?: boolean;
+
+  /**
+   * Callback function triggered when the hook is unmounted
+   */
+  onUnmount?: () => void;
+
+  /**
+   * check full visibility of the element
+   * @default false
+   */
+  checkFullVisibility?: boolean;
+}
+
+export enum SCROLLING_TYPE {
+  NONE = 'none',
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+interface Thresholds {
+  [key: number]: () => void;
+}
+
+export interface UseInViewProps {
+  thresholds: Thresholds;
+  onExit?: () => void;
+  id?: string;
+}
+
+export interface UseInViewReturn {
+  viewRef: React.RefObject<View>;
+  visiblePercent: number;
+  isInView: boolean;
+  onLayout: (event: LayoutChangeEvent) => void;
+}

package/src/useinView.ts

@@ -0,0 +1,283 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { Dimensions, View } from 'react-native';
+import { useAddObservableChild, useGetScrolling } from '@cleartrip/ct-design-scroll-container';
+import { useListItem } from '@cleartrip/ct-design-list';
+import { promiseHandler } from '@cleartrip/ct-design-common-utils';
+
+import { IntersectionOptions, InViewHookResponse } from './useInViewType';
+
+const { width, height } = Dimensions.get('window');
+/**
+ * todo
+ * horizontal scroll and root margin
+ */
+
+interface VisibilityState {
+  visibleRef: React.MutableRefObject<number>;
+  timeoutVisibleRef: React.MutableRefObject<boolean>;
+  timeoutVisibleStartRef: React.MutableRefObject<{ start: number; end: number }>;
+  triggerOnceValue: React.MutableRefObject<boolean>;
+}
+
+const calculateVisibility = (
+  rectTop: number,
+  rectBottom: number,
+  rectHeight: number,
+  rectLeft: number,
+  rectRight: number,
+  rectWidth: number,
+  observerBox: [number, number, number | undefined, number | undefined],
+): { verticalVisibility: number; horizontalVisibility: number } => {
+  const [top, left, _height = height, _width = width] = observerBox;
+
+  // Calculate vertical visibility
+  let verticalVisibility = 0;
+  if (rectHeight) {
+    if (rectTop >= top && rectBottom <= _height) {
+      verticalVisibility = 100;
+    } else if (rectTop < top) {
+      verticalVisibility = ((rectBottom - top) / rectHeight) * 100;
+    } else {
+      verticalVisibility = ((_height - rectTop) / rectHeight) * 100;
+    }
+  } else {
+    const visibleHeight = rectTop > top && rectTop < _height ? rectTop - top : 0;
+    verticalVisibility = (visibleHeight / _height) * 100;
+  }
+
+  // Calculate horizontal visibility
+  let horizontalVisibility = 0;
+  if (rectWidth) {
+    if (rectLeft >= left && rectRight <= _width) {
+      horizontalVisibility = 100;
+    } else if (rectLeft < left) {
+      horizontalVisibility = ((rectRight - left) / rectWidth) * 100;
+    } else {
+      horizontalVisibility = ((_width - rectLeft) / rectWidth) * 100;
+    }
+  } else {
+    const visibleWidth = rectLeft > left && rectLeft < _width ? rectLeft - left : 0;
+    horizontalVisibility = (visibleWidth / _width) * 100;
+  }
+
+  return { verticalVisibility, horizontalVisibility };
+};
+
+const handleVisibilityChange = (
+  visibility: number,
+  threshold: number[],
+  state: VisibilityState,
+  callbacks: {
+    onChange?: (visible: boolean) => void;
+    onIntersectionComplete?: () => void;
+    onTimedObservationComplete?: () => void;
+    triggerOnce?: boolean;
+    minimumObservationTime: number;
+    observerMethod?: (visibleItems?: Set<number>, isScrolling?: boolean) => void;
+  },
+) => {
+  const { visibleRef, timeoutVisibleRef, timeoutVisibleStartRef, triggerOnceValue } = state;
+  const {
+    onChange,
+    onIntersectionComplete,
+    onTimedObservationComplete,
+    triggerOnce,
+    minimumObservationTime,
+    observerMethod,
+  } = callbacks;
+
+  if (visibility === 0) {
+    if (visibleRef.current > 0) {
+      onIntersectionComplete?.();
+    }
+    visibleRef.current = 0;
+    timeoutVisibleRef.current = false;
+    timeoutVisibleStartRef.current.end = 0;
+    timeoutVisibleStartRef.current.start = 0;
+    return;
+  }
+
+  const thresholdVisibility = threshold[visibleRef.current] * 100;
+
+  if (visibility >= thresholdVisibility) {
+    if (!triggerOnceValue.current) {
+      timeoutVisibleRef.current = true;
+      visibleRef.current = visibleRef.current + 1;
+
+      if (timeoutVisibleStartRef.current.start === 0) {
+        timeoutVisibleStartRef.current.start = Date.now();
+      } else {
+        timeoutVisibleStartRef.current.end = Date.now();
+      }
+
+      if (triggerOnce) {
+        triggerOnceValue.current = true;
+      }
+      onChange?.(true);
+      setTimeout(() => {
+        observerMethod?.();
+      }, minimumObservationTime);
+    }
+  }
+
+  if (
+    timeoutVisibleRef.current &&
+    timeoutVisibleStartRef.current.start > 0 &&
+    Date.now() - timeoutVisibleStartRef.current.start >= minimumObservationTime
+  ) {
+    timeoutVisibleRef.current = false;
+    onTimedObservationComplete?.();
+    timeoutVisibleStartRef.current.end = -1;
+    timeoutVisibleStartRef.current.start = -1;
+  }
+};
+
+const useInView = <T>({
+  threshold = [0.01, 0.5],
+  timedThreshold = 1000,
+  onChange,
+  onIntersectionComplete,
+  onTimedObservationComplete,
+  minimumObservationTime = timedThreshold,
+  observerBox = [0, 0, height, width],
+  gestureHorizontallyScrollable = false,
+  triggerOnce = false,
+  observeOnScroll = false,
+  onUnmount,
+  checkFullVisibility = false,
+}: IntersectionOptions): InViewHookResponse<T> => {
+  const ref = useRef<View>(null);
+  const visibleRef = useRef(0);
+  const timeoutVisibleRef = useRef(false);
+  const timeoutVisibleStartRef = useRef({ start: 0, end: 0 });
+  const triggerOnceValue = useRef(false);
+
+  const { horizontal } = useGetScrolling();
+  const { listId } = useListItem();
+
+  const observerMethod = useCallback(
+    (visibleItems?: Set<number>, isScrolling?: boolean) => {
+      if (!observeOnScroll && isScrolling) {
+        return;
+      }
+      if (visibleItems) {
+        const visibleItem = visibleItems?.has(listId);
+
+        if (visibleItem) {
+          onTimedObservationComplete?.();
+        }
+
+        if (visibleItem && visibleRef.current === 0) {
+          visibleRef.current = 1;
+          onChange?.(true);
+          return;
+        } else if (!visibleItem && visibleRef.current === 1) {
+          visibleRef.current = 0;
+          onIntersectionComplete?.();
+          return;
+        }
+        return;
+      }
+
+      promiseHandler.add(() => {
+        return new Promise<void>((resolve) => {
+          if (!ref.current) {
+            resolve();
+            return;
+          }
+          ref.current?.measure((_x, _y, width, height, pageX, pageY) => {
+            const { verticalVisibility, horizontalVisibility } = calculateVisibility(
+              pageY,
+              pageY + height,
+              height,
+              pageX,
+              pageX + width,
+              width,
+              observerBox,
+            );
+
+            const visiblePercentage = threshold[0] * 100;
+            const isVisible =
+              horizontal || gestureHorizontallyScrollable
+                ? horizontalVisibility >= visiblePercentage
+                : verticalVisibility >= visiblePercentage;
+            const visibility = horizontal ? horizontalVisibility : verticalVisibility;
+
+            const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
+            const isTotalVisible = totalVisibility >= visiblePercentage;
+
+            const state = {
+              visibleRef,
+              timeoutVisibleRef,
+              timeoutVisibleStartRef,
+              triggerOnceValue,
+            };
+
+            const callbacks = {
+              onChange,
+              onIntersectionComplete,
+              onTimedObservationComplete,
+              triggerOnce,
+              minimumObservationTime,
+              observerMethod,
+            };
+            if (isTotalVisible) {
+              handleVisibilityChange(totalVisibility, threshold, state, callbacks);
+            } else if (!checkFullVisibility && isVisible) {
+              handleVisibilityChange(visibility, threshold, state, callbacks);
+            } else {
+              handleVisibilityChange(0, threshold, state, callbacks);
+            }
+            resolve();
+          });
+        });
+      }, ref.current);
+    },
+    [
+      checkFullVisibility,
+      gestureHorizontallyScrollable,
+      horizontal,
+      listId,
+      minimumObservationTime,
+      observeOnScroll,
+      observerBox,
+      onChange,
+      onIntersectionComplete,
+      onTimedObservationComplete,
+      threshold,
+      triggerOnce,
+    ],
+  );
+
+  const addObservable = useCallback(() => {
+    return { observe: observerMethod, layout: { X: 0, Y: 0 } };
+  }, [observerMethod]);
+
+  useAddObservableChild(addObservable);
+
+  const handleUnmount = useCallback(() => {
+    onUnmount?.();
+    promiseHandler.clear();
+    visibleRef.current = 0;
+    timeoutVisibleRef.current = false;
+    timeoutVisibleStartRef.current.end = 0;
+    timeoutVisibleStartRef.current.start = 0;
+    triggerOnceValue.current = false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    setTimeout(() => {
+      observerMethod();
+    }, 400);
+    return () => {
+      handleUnmount();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleUnmount]);
+
+  return ref as InViewHookResponse<T>;
+};
+
+export default useInView;