react-atom-trigger 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -2
- package/lib/index.js +1 -1
- package/lib/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";const t=new Set;function n(){if(typeof process>`u`||!process.env)return null;let e=`production`;return e===`development`||e===`production`?e:null}function r(e){return(Object.prototype.hasOwnProperty.call(e??{},`nodeEnv`)?e?.nodeEnv??null:n())===`development`}function i(e){r()&&(t.has(e)||(t.add(e),typeof console<`u`&&console.warn&&console.warn(e)))}function a(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function o(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function s(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function c(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function l(e){if(!e)return;let t=c(e.props);return t===void 0?c(e):t}function u(t,n,r){return t?n===1?r?r.type===e.Fragment?`[react-atom-trigger] Child mode does not support React.Fragment. Wrap the content in a single DOM element. Observation is disabled for this render.`:null:`[react-atom-trigger] Child mode expects a React element child. Observation is disabled for this render.`:`[react-atom-trigger] Child mode expects exactly one top-level React element. Observation is disabled for this render.`:null}function d({originalChildRef:t,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:o}){let[c,l]=e.useState(null),u=e.useRef(null),d=e.useCallback(()=>{u.current=null,l(e=>e===null?e:null)},[]),f=e.useCallback(e=>{if(s(t,e),e===null){d();return}if(a(e)){u.current=e,l(t=>t===e?t:e);return}d(),i(`[react-atom-trigger] Child mode requires the child ref to resolve to a DOM element. Observation is disabled for this render.`)},[d,t]);return e.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!c&&o))return;let e=window.setTimeout(()=>{u.current||i(`[react-atom-trigger] Child mode expects a DOM element or a component that forwards its ref to a DOM element. Observation is disabled for this render.`)},16);return()=>{window.clearTimeout(e)}},[n,r,c,o]),{childNode:c,attachObservedChildRef:f}}function f(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function p(e){return typeof e==`string`?e:f(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):(e==null||i(`[react-atom-trigger] Invalid rootMargin array ${JSON.stringify(e)}. Use exactly four finite numbers: [top, right, bottom, left]. Falling back to 0px.`),`0px`)}function m(e,t){let n=e.trim();if(!n||/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return i(`[react-atom-trigger] Invalid rootMargin token "${n}". Use px, % or 0. Falling back to 0px.`),0;let[,a,o]=r,s=Number.parseFloat(a);return o===`%`?s/100*t:s}function h(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return i(`[react-atom-trigger] Invalid rootMargin "${e}". Use 1 to 4 values in IntersectionObserver order. Falling back to 0px.`),{top:0,right:0,bottom:0,left:0};let[a=`0px`,o=a,s=a,c=o]=r;return{top:m(a,n),right:m(o,t),bottom:m(s,n),left:m(c,t)}}function g(e,t){let n=h(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function _(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function v(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function y(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function b(e){return Math.min(1,Math.max(0,e))}function x(e){return Array.isArray(e)?(i("[react-atom-trigger] `threshold` expects a single number in v2. Using the first finite numeric entry."),b(e.find(e=>typeof e==`number`&&Number.isFinite(e))??0)):e==null?0:typeof e!=`number`||!Number.isFinite(e)?(i("[react-atom-trigger] `threshold` must be a finite number between 0 and 1. Falling back to 0."),0):((e<0||e>1)&&i("[react-atom-trigger] `threshold` should be between 0 and 1. Values are clamped."),b(e))}function S(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function C(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function w(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function T(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function E(e){e.previousTriggerActive=void 0,e.previousRect=null}function D(e,t,n,r){let i=_(e.node.getBoundingClientRect()),a=g(t,e.rootMargin),o=v(i,a),s=y(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:S(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!w(h,e.counts,e.once,e.oncePerDirection))return;let b=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=b;let x={type:h,isInitial:m,entry:p,counts:b,movementDirection:d,position:C(p),timestamp:f};e.onEvent?.(x),h===`enter`?e.onEnter?.(x):e.onLeave?.(x),T(e)&&e.dispose?.()}const O=new WeakMap;function k(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function A(e){return e===window||o(e)}function j(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=A(e)?k():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)D(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{if((t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId!==0)return;t.rafId=-1;let r=window.requestAnimationFrame(()=>{t.rafId=0,n()});t.rafId===-1&&(t.rafId=r)},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),A(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:A(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function ee(e){let t=O.get(e);if(t)return t;let n=j(e);return O.set(e,n),n}function te(e,t){let n=ee(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.dispose=void 0,n.registrations.size===0&&(n.cleanup(),O.delete(e)))};return t.dispose=a,a}function ne(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function M(e,t){e.node=t.node,e.rootMargin=t.rootMargin,e.threshold=t.threshold,e.once=t.once,e.oncePerDirection=t.oncePerDirection,e.fireOnInitialVisible=t.fireOnInitialVisible}function re(e,t){e.onEnter=t.onEnter,e.onLeave=t.onLeave,e.onEvent=t.onEvent}function N(e){e.dispose?.(),e.dispose=null,e.binding=null}function ie(e){return{node:e.node,rootMargin:e.rootMargin,threshold:e.threshold,once:e.once,oncePerDirection:e.oncePerDirection,fireOnInitialVisible:e.fireOnInitialVisible}}function ae(e,t){return!!(e&&e.node===t.node&&e.target===t.target&&e.rootMargin===t.rootMargin&&e.threshold===t.threshold&&e.once===t.once&&e.oncePerDirection===t.oncePerDirection&&e.fireOnInitialVisible===t.fireOnInitialVisible)}function P(e,t){return{registration:ne(e,t),binding:null,dispose:null}}function F(e,t){re(e.registration,t)}function I(e,t){let n=e.registration;if(!t.node){E(n),N(e);return}let r=ie({node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible});if(t.disabled||!t.target){N(e),M(n,r),E(n);return}let i={...r,target:t.target};if(ae(e.binding,i)){M(n,r);return}E(n),N(e),M(n,r),e.dispose=te(t.target,n),e.binding=i}function L(e){N(e)}function R(e){let t=e.kind===`rootRef`?"[react-atom-trigger] `rootRef.current` must resolve to a real DOM element. Observation is paused until it does.":"[react-atom-trigger] `root` must be a real DOM element when provided. Observation is paused until it is.",{target:n}=e;return n==null?null:a(n)?n:(i(t),null)}function z(t){let n=t!==void 0,[r,i]=e.useState(()=>n?t.current:null);return e.useEffect(()=>{if(!n)return;let e=t.current;i(t=>t===e?t:e)}),n?r:void 0}function B(e){switch(e.kind){case`rootRef`:case`root`:return R(e);case`viewport`:return typeof window>`u`?null:window}}const V={display:`table`},oe=({onEnter:t,onLeave:n,onEvent:r,children:a,once:o=!1,oncePerDirection:s=!1,fireOnInitialVisible:c=!1,disabled:f=!1,threshold:m=0,root:h,rootRef:g,rootMargin:_=`0px`,className:v})=>{let y=e.useRef(null),b=e.useRef(null),S=z(g),C=p(_),w=x(m),T=a!=null,E=e.Children.count(a),D=E===1&&e.isValidElement(a)?a:null,O=u(T,E,D),k=O||!D?null:D,{childNode:A,attachObservedChildRef:j}=d({originalChildRef:l(k),hasObservedChild:T,invalidChildWarning:O,shouldWarnAboutMissingDomRef:k!==null});return e.useEffect(()=>{T&&v&&i("[react-atom-trigger] `className` only applies to the internal sentinel. In child mode, style the child element directly.")},[v,T]),e.useEffect(()=>{O&&i(O)},[O]),e.useEffect(()=>{o&&s&&i("[react-atom-trigger] `once` and `oncePerDirection` were both provided. `once` takes precedence.")},[o,s]),e.useEffect(()=>{let e=b.current;e&&F(e,{onEnter:t,onLeave:n,onEvent:r})},[t,n,r]),e.useEffect(()=>{if(typeof window>`u`)return;let e=T?A:y.current,i=B(g===void 0?h===void 0?{kind:`viewport`}:{kind:`root`,target:h}:{kind:`rootRef`,target:S});if(!e){b.current&&I(b.current,{disabled:!1,node:null,target:i,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c});return}b.current||(b.current=P({node:e,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c},{onEnter:t,onLeave:n,onEvent:r})),I(b.current,{disabled:f,node:e,target:i,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c})},[f,C,w,o,s,c,A,h,g,S,T]),e.useEffect(()=>()=>{b.current&&(L(b.current),b.current=null)},[]),T?k?e.cloneElement(k,{ref:j}):e.createElement(e.Fragment,null,a):e.createElement(`div`,{ref:y,style:V,className:v})},H=e.useSyncExternalStore,se=typeof window>`u`?e.useEffect:e.useLayoutEffect;function U(t,n,r){if(H)return H(t,n,r);let[i,a]=e.useState(()=>r()),o=e.useRef(i);return se(()=>{let e=()=>{let e=n();Object.is(o.current,e)||(o.current=e,a(e))};return e(),t(e)},[t,n]),i}function W(e,t,n){return n(e.current,t)?e.current:(e.current=t,t)}const G={x:0,y:0},K={width:0,height:0},ce=typeof window>`u`?e.useEffect:e.useLayoutEffect;function q(e,t){let n=null,r=null,i=()=>{n&&(clearTimeout(n),n=null),r=Date.now(),e()};return{schedule:()=>{if(t<=0){i();return}let e=Date.now();if(r===null||e-r>=t){i();return}n||(n=setTimeout(()=>{i()},t-(e-r)))},cancel:()=>{n&&(clearTimeout(n),n=null)}}}function J(){return typeof window>`u`?K:{width:window.innerWidth,height:window.innerHeight}}function Y(e){return!!(e&&typeof e==`object`&&!o(e)&&`current`in e)}function X(e){return Y(e)?e.current:e||(typeof window>`u`?null:window)}function le(e){return e===window||o(e)}function Z(e){if(le(e))return{x:e.scrollX,y:e.scrollY};let t=e;return{x:t.scrollLeft,y:t.scrollTop}}function ue(e){let t=X(e);return t?Z(t):G}function Q(e,t){return e.x===t.x&&e.y===t.y}function $(e,t){return e.width===t.width&&e.height===t.height}function de(t){let n=t?.enabled!==!1,r=t?.passive,i=t?.throttleMs??16,a=e.useRef(J()),o=e.useCallback(()=>typeof window>`u`?K:n?W(a,J(),$):a.current,[n]);return U(e.useCallback(e=>{if(typeof window>`u`||!n)return()=>{};let t=q(()=>{let t=J();$(a.current,t)||(a.current=t,e())},i);return window.addEventListener(`resize`,t.schedule,{passive:r}),()=>{t.cancel(),window.removeEventListener(`resize`,t.schedule)}},[n,r,i]),o,()=>K)}function fe(t){let n=t?.target,r=Y(n),i=t?.enabled!==!1,a=t?.passive,o=t?.throttleMs??16,s=e.useRef(ue(n)),[c,l]=e.useState(()=>r?X(n):null);ce(()=>{if(!r)return;let e=X(n);l(t=>t===e?t:e)});let u=r?c:X(n),d=e.useCallback(()=>i?u?W(s,Z(u),Q):W(s,G,Q):s.current,[i,u]);return U(e.useCallback(e=>{if(!i||!u)return()=>{};let t=q(()=>{let t=Z(u);Q(s.current,t)||(s.current=t,e())},o);return u.addEventListener(`scroll`,t.schedule,{passive:a}),()=>{t.cancel(),u.removeEventListener(`scroll`,t.schedule)}},[i,a,u,o]),d,()=>G)}export{oe as AtomTrigger,fe as useScrollPosition,de as useViewportSize};
|
|
1
|
+
import e from"react";const t=new Set;function n(){if(typeof process>`u`||!process.env)return null;let e=`production`;return e===`development`||e===`production`?e:null}function r(e){return(Object.prototype.hasOwnProperty.call(e??{},`nodeEnv`)?e?.nodeEnv??null:n())===`development`}function i(e){r()&&(t.has(e)||(t.add(e),typeof console<`u`&&console.warn&&console.warn(e)))}function a(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function o(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function s(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function c(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function l(e){if(!e)return;let t=c(e.props);return t===void 0?c(e):t}function u(t,n,r){return t?n===1?r?r.type===e.Fragment?`[react-atom-trigger] Child mode does not support React.Fragment. Wrap the content in a single DOM element. Observation is disabled for this render.`:null:`[react-atom-trigger] Child mode expects a React element child. Observation is disabled for this render.`:`[react-atom-trigger] Child mode expects exactly one top-level React element. Observation is disabled for this render.`:null}function d({originalChildRef:t,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:o}){let[c,l]=e.useState(null),u=e.useRef(null),d=e.useCallback(()=>{u.current=null,l(e=>e===null?e:null)},[]),f=e.useCallback(e=>{if(s(t,e),e===null){d();return}if(a(e)){u.current=e,l(t=>t===e?t:e);return}d(),i(`[react-atom-trigger] Child mode requires the child ref to resolve to a DOM element. Observation is disabled for this render.`)},[d,t]);return e.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!c&&o))return;let e=window.setTimeout(()=>{u.current||i(`[react-atom-trigger] Child mode expects a DOM element or a component that forwards its ref to a DOM element. Observation is disabled for this render.`)},16);return()=>{window.clearTimeout(e)}},[n,r,c,o]),{childNode:c,attachObservedChildRef:f}}function f(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function p(e){return typeof e==`string`?e:f(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):(e==null||i(`[react-atom-trigger] Invalid rootMargin array ${JSON.stringify(e)}. Use exactly four finite numbers: [top, right, bottom, left]. Falling back to 0px.`),`0px`)}function m(e,t){let n=e.trim();if(!n||/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return i(`[react-atom-trigger] Invalid rootMargin token "${n}". Use px, % or 0. Falling back to 0px.`),0;let[,a,o]=r,s=Number.parseFloat(a);return o===`%`?s/100*t:s}function h(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return i(`[react-atom-trigger] Invalid rootMargin "${e}". Use 1 to 4 values in IntersectionObserver order. Falling back to 0px.`),{top:0,right:0,bottom:0,left:0};let[a=`0px`,o=a,s=a,c=o]=r;return{top:m(a,n),right:m(o,t),bottom:m(s,n),left:m(c,t)}}function g(e,t){let n=h(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function _(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function v(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function y(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function b(e){return Math.min(1,Math.max(0,e))}function x(e){return Array.isArray(e)?(i("[react-atom-trigger] `threshold` expects a single number in v2. Using the first finite numeric entry."),b(e.find(e=>typeof e==`number`&&Number.isFinite(e))??0)):e==null?0:typeof e!=`number`||!Number.isFinite(e)?(i("[react-atom-trigger] `threshold` must be a finite number between 0 and 1. Falling back to 0."),0):((e<0||e>1)&&i("[react-atom-trigger] `threshold` should be between 0 and 1. Values are clamped."),b(e))}function S(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function C(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function w(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function T(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function E(e){e.previousTriggerActive=void 0,e.previousRect=null}function D(e,t,n,r){let i=_(e.node.getBoundingClientRect()),a=g(t,e.rootMargin),o=v(i,a),s=y(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:S(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!w(h,e.counts,e.once,e.oncePerDirection))return;let b=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=b;let x={type:h,isInitial:m,entry:p,counts:b,movementDirection:d,position:C(p),timestamp:f};e.onEvent?.(x),h===`enter`?e.onEnter?.(x):e.onLeave?.(x),T(e)&&e.dispose?.()}const O=new WeakMap;function k(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function A(e){return e===window||o(e)}function j(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=A(e)?k():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)D(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{(t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId===0&&(t.rafId=window.requestAnimationFrame(()=>{t.rafId=0,n()}))},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),A(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:A(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function ee(e){let t=O.get(e);if(t)return t;let n=j(e);return O.set(e,n),n}function M(e,t){let n=ee(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.dispose=void 0,n.registrations.size===0&&(n.cleanup(),O.delete(e)))};return t.dispose=a,a}function te(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function ne(e,t){e.onEnter=t.onEnter,e.onLeave=t.onLeave,e.onEvent=t.onEvent}function N(e){e.dispose?.(),e.dispose=null,e.binding=null}function re(e,t){return{registration:te(e,t),binding:null,dispose:null}}function ie(e,t){ne(e.registration,t)}function P(e,t){let n=e.registration;if(!t.node){E(n),N(e);return}let r={node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible};if(t.disabled||!t.target){N(e),Object.assign(n,r),E(n);return}let i={...r,target:t.target};if(e.binding!==null&&e.binding.node===i.node&&e.binding.target===i.target&&e.binding.rootMargin===i.rootMargin&&e.binding.threshold===i.threshold&&e.binding.once===i.once&&e.binding.oncePerDirection===i.oncePerDirection&&e.binding.fireOnInitialVisible===i.fireOnInitialVisible){Object.assign(n,r);return}E(n),N(e),Object.assign(n,r),e.dispose=M(t.target,n),e.binding=i}function F(e){N(e)}function I(e){let t=e.kind===`rootRef`?"[react-atom-trigger] `rootRef.current` must resolve to a real DOM element. Observation is paused until it does.":"[react-atom-trigger] `root` must be a real DOM element when provided. Observation is paused until it is.",{target:n}=e;return n==null?null:a(n)?n:(i(t),null)}function L(t){let n=t!==void 0,[r,i]=e.useState(()=>n?t.current:null);return e.useEffect(()=>{if(!n)return;let e=t.current;i(t=>t===e?t:e)}),n?r:void 0}function R(e){switch(e.kind){case`rootRef`:case`root`:return I(e);case`viewport`:return typeof window>`u`?null:window}}const z={display:`table`},B=({onEnter:t,onLeave:n,onEvent:r,children:a,once:o=!1,oncePerDirection:s=!1,fireOnInitialVisible:c=!1,disabled:f=!1,threshold:m=0,root:h,rootRef:g,rootMargin:_=`0px`,className:v})=>{let y=e.useRef(null),b=e.useRef(null),S=L(g),C=p(_),w=x(m),T=a!=null,E=e.Children.count(a),D=E===1&&e.isValidElement(a)?a:null,O=u(T,E,D),k=O||!D?null:D,{childNode:A,attachObservedChildRef:j}=d({originalChildRef:l(k),hasObservedChild:T,invalidChildWarning:O,shouldWarnAboutMissingDomRef:k!==null});return e.useEffect(()=>{T&&v&&i("[react-atom-trigger] `className` only applies to the internal sentinel. In child mode, style the child element directly.")},[v,T]),e.useEffect(()=>{O&&i(O)},[O]),e.useEffect(()=>{o&&s&&i("[react-atom-trigger] `once` and `oncePerDirection` were both provided. `once` takes precedence.")},[o,s]),e.useEffect(()=>{let e=b.current;e&&ie(e,{onEnter:t,onLeave:n,onEvent:r})},[t,n,r]),e.useEffect(()=>{if(typeof window>`u`)return;let e=T?A:y.current,i=R(g===void 0?h===void 0?{kind:`viewport`}:{kind:`root`,target:h}:{kind:`rootRef`,target:S});if(!e){b.current&&P(b.current,{disabled:!1,node:null,target:i,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c});return}b.current||(b.current=re({node:e,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c},{onEnter:t,onLeave:n,onEvent:r})),P(b.current,{disabled:f,node:e,target:i,rootMargin:C,threshold:w,once:o,oncePerDirection:s,fireOnInitialVisible:c})},[f,C,w,o,s,c,A,h,g,S,T]),e.useEffect(()=>()=>{b.current&&(F(b.current),b.current=null)},[]),T?k?e.cloneElement(k,{ref:j}):e.createElement(e.Fragment,null,a):e.createElement(`div`,{ref:y,style:z,className:v})},V=e.useSyncExternalStore,H=typeof window>`u`?e.useEffect:e.useLayoutEffect;function U(t,n,r){if(V)return V(t,n,r);let[i,a]=e.useState(()=>r()),o=e.useRef(i);return H(()=>{let e=()=>{let e=n();Object.is(o.current,e)||(o.current=e,a(e))};return e(),t(e)},[t,n]),i}function W(e,t,n){return n(e.current,t)?e.current:(e.current=t,t)}const G={x:0,y:0},K={width:0,height:0},ae=typeof window>`u`?e.useEffect:e.useLayoutEffect;function q(e,t){let n=null,r=null,i=()=>{n&&(clearTimeout(n),n=null),r=Date.now(),e()};return{schedule:()=>{if(t<=0){i();return}let e=Date.now();if(r===null||e-r>=t){i();return}n||(n=setTimeout(()=>{i()},t-(e-r)))},cancel:()=>{n&&(clearTimeout(n),n=null)}}}function J(){return typeof window>`u`?K:{width:window.innerWidth,height:window.innerHeight}}function Y(e){return!!(e&&typeof e==`object`&&!o(e)&&`current`in e)}function X(e){return Y(e)?e.current:e||(typeof window>`u`?null:window)}function oe(e){return e===window||o(e)}function Z(e){if(oe(e))return{x:e.scrollX,y:e.scrollY};let t=e;return{x:t.scrollLeft,y:t.scrollTop}}function se(e){let t=X(e);return t?Z(t):G}function Q(e,t){return e.x===t.x&&e.y===t.y}function $(e,t){return e.width===t.width&&e.height===t.height}function ce(t){let n=t?.enabled!==!1,r=t?.passive,i=t?.throttleMs??16,a=e.useRef(J()),o=e.useCallback(()=>typeof window>`u`?K:n?W(a,J(),$):a.current,[n]);return U(e.useCallback(e=>{if(typeof window>`u`||!n)return()=>{};let t=q(()=>{let t=J();$(a.current,t)||(a.current=t,e())},i);return window.addEventListener(`resize`,t.schedule,{passive:r}),()=>{t.cancel(),window.removeEventListener(`resize`,t.schedule)}},[n,r,i]),o,()=>K)}function le(t){let n=t?.target,r=Y(n),i=t?.enabled!==!1,a=t?.passive,o=t?.throttleMs??16,s=e.useRef(se(n)),[c,l]=e.useState(()=>r?X(n):null);ae(()=>{if(!r)return;let e=X(n);l(t=>t===e?t:e)});let u=r?c:X(n),d=e.useCallback(()=>i?u?W(s,Z(u),Q):W(s,G,Q):s.current,[i,u]);return U(e.useCallback(e=>{if(!i||!u)return()=>{};let t=q(()=>{let t=Z(u);Q(s.current,t)||(s.current=t,e())},o);return u.addEventListener(`scroll`,t.schedule,{passive:a}),()=>{t.cancel(),u.removeEventListener(`scroll`,t.schedule)}},[i,a,u,o]),d,()=>G)}export{B as AtomTrigger,le as useScrollPosition,ce as useViewportSize};
|
package/lib/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.reactAtomTrigger={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let l=new Set;function u(){if(typeof process>`u`||!process.env)return null;let e=`production`;return e===`development`||e===`production`?e:null}function d(e){return(Object.prototype.hasOwnProperty.call(e??{},`nodeEnv`)?e?.nodeEnv??null:u())===`development`}function f(e){d()&&(l.has(e)||(l.add(e),typeof console<`u`&&console.warn&&console.warn(e)))}function p(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function m(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function h(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function g(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function _(e){if(!e)return;let t=g(e.props);return t===void 0?g(e):t}function v(e,n,r){return e?n===1?r?r.type===t.default.Fragment?`[react-atom-trigger] Child mode does not support React.Fragment. Wrap the content in a single DOM element. Observation is disabled for this render.`:null:`[react-atom-trigger] Child mode expects a React element child. Observation is disabled for this render.`:`[react-atom-trigger] Child mode expects exactly one top-level React element. Observation is disabled for this render.`:null}function y({originalChildRef:e,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:i}){let[a,o]=t.default.useState(null),s=t.default.useRef(null),c=t.default.useCallback(()=>{s.current=null,o(e=>e===null?e:null)},[]),l=t.default.useCallback(t=>{if(h(e,t),t===null){c();return}if(p(t)){s.current=t,o(e=>e===t?e:t);return}c(),f(`[react-atom-trigger] Child mode requires the child ref to resolve to a DOM element. Observation is disabled for this render.`)},[c,e]);return t.default.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!a&&i))return;let e=window.setTimeout(()=>{s.current||f(`[react-atom-trigger] Child mode expects a DOM element or a component that forwards its ref to a DOM element. Observation is disabled for this render.`)},16);return()=>{window.clearTimeout(e)}},[n,r,a,i]),{childNode:a,attachObservedChildRef:l}}function b(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function ee(e){return typeof e==`string`?e:b(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):(e==null||f(`[react-atom-trigger] Invalid rootMargin array ${JSON.stringify(e)}. Use exactly four finite numbers: [top, right, bottom, left]. Falling back to 0px.`),`0px`)}function x(e,t){let n=e.trim();if(!n||/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return f(`[react-atom-trigger] Invalid rootMargin token "${n}". Use px, % or 0. Falling back to 0px.`),0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function S(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return f(`[react-atom-trigger] Invalid rootMargin "${e}". Use 1 to 4 values in IntersectionObserver order. Falling back to 0px.`),{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:x(i,n),right:x(a,t),bottom:x(o,n),left:x(s,t)}}function C(e,t){let n=S(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function w(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function T(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function E(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function D(e){return Math.min(1,Math.max(0,e))}function te(e){return Array.isArray(e)?(f("[react-atom-trigger] `threshold` expects a single number in v2. Using the first finite numeric entry."),D(e.find(e=>typeof e==`number`&&Number.isFinite(e))??0)):e==null?0:typeof e!=`number`||!Number.isFinite(e)?(f("[react-atom-trigger] `threshold` must be a finite number between 0 and 1. Falling back to 0."),0):((e<0||e>1)&&f("[react-atom-trigger] `threshold` should be between 0 and 1. Values are clamped."),D(e))}function O(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function k(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function A(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function ne(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function j(e){e.previousTriggerActive=void 0,e.previousRect=null}function re(e,t,n,r){let i=w(e.node.getBoundingClientRect()),a=C(t,e.rootMargin),o=T(i,a),s=E(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:O(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!A(h,e.counts,e.once,e.oncePerDirection))return;let g=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=g;let _={type:h,isInitial:m,entry:p,counts:g,movementDirection:d,position:k(p),timestamp:f};e.onEvent?.(_),h===`enter`?e.onEnter?.(_):e.onLeave?.(_),ne(e)&&e.dispose?.()}let M=new WeakMap;function ie(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function N(e){return e===window||m(e)}function ae(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=N(e)?ie():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)re(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{if((t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId!==0)return;t.rafId=-1;let r=window.requestAnimationFrame(()=>{t.rafId=0,n()});t.rafId===-1&&(t.rafId=r)},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),N(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:N(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function oe(e){let t=M.get(e);if(t)return t;let n=ae(e);return M.set(e,n),n}function se(e,t){let n=oe(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.dispose=void 0,n.registrations.size===0&&(n.cleanup(),M.delete(e)))};return t.dispose=a,a}function ce(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function P(e,t){e.node=t.node,e.rootMargin=t.rootMargin,e.threshold=t.threshold,e.once=t.once,e.oncePerDirection=t.oncePerDirection,e.fireOnInitialVisible=t.fireOnInitialVisible}function le(e,t){e.onEnter=t.onEnter,e.onLeave=t.onLeave,e.onEvent=t.onEvent}function F(e){e.dispose?.(),e.dispose=null,e.binding=null}function ue(e){return{node:e.node,rootMargin:e.rootMargin,threshold:e.threshold,once:e.once,oncePerDirection:e.oncePerDirection,fireOnInitialVisible:e.fireOnInitialVisible}}function de(e,t){return!!(e&&e.node===t.node&&e.target===t.target&&e.rootMargin===t.rootMargin&&e.threshold===t.threshold&&e.once===t.once&&e.oncePerDirection===t.oncePerDirection&&e.fireOnInitialVisible===t.fireOnInitialVisible)}function I(e,t){return{registration:ce(e,t),binding:null,dispose:null}}function L(e,t){le(e.registration,t)}function R(e,t){let n=e.registration;if(!t.node){j(n),F(e);return}let r=ue({node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible});if(t.disabled||!t.target){F(e),P(n,r),j(n);return}let i={...r,target:t.target};if(de(e.binding,i)){P(n,r);return}j(n),F(e),P(n,r),e.dispose=se(t.target,n),e.binding=i}function z(e){F(e)}function B(e){let t=e.kind===`rootRef`?"[react-atom-trigger] `rootRef.current` must resolve to a real DOM element. Observation is paused until it does.":"[react-atom-trigger] `root` must be a real DOM element when provided. Observation is paused until it is.",{target:n}=e;return n==null?null:p(n)?n:(f(t),null)}function V(e){let n=e!==void 0,[r,i]=t.default.useState(()=>n?e.current:null);return t.default.useEffect(()=>{if(!n)return;let t=e.current;i(e=>e===t?e:t)}),n?r:void 0}function fe(e){switch(e.kind){case`rootRef`:case`root`:return B(e);case`viewport`:return typeof window>`u`?null:window}}let pe={display:`table`},me=({onEnter:e,onLeave:n,onEvent:r,children:i,once:a=!1,oncePerDirection:o=!1,fireOnInitialVisible:s=!1,disabled:c=!1,threshold:l=0,root:u,rootRef:d,rootMargin:p=`0px`,className:m})=>{let h=t.default.useRef(null),g=t.default.useRef(null),b=V(d),x=ee(p),S=te(l),C=i!=null,w=t.default.Children.count(i),T=w===1&&t.default.isValidElement(i)?i:null,E=v(C,w,T),D=E||!T?null:T,{childNode:O,attachObservedChildRef:k}=y({originalChildRef:_(D),hasObservedChild:C,invalidChildWarning:E,shouldWarnAboutMissingDomRef:D!==null});return t.default.useEffect(()=>{C&&m&&f("[react-atom-trigger] `className` only applies to the internal sentinel. In child mode, style the child element directly.")},[m,C]),t.default.useEffect(()=>{E&&f(E)},[E]),t.default.useEffect(()=>{a&&o&&f("[react-atom-trigger] `once` and `oncePerDirection` were both provided. `once` takes precedence.")},[a,o]),t.default.useEffect(()=>{let t=g.current;t&&L(t,{onEnter:e,onLeave:n,onEvent:r})},[e,n,r]),t.default.useEffect(()=>{if(typeof window>`u`)return;let t=C?O:h.current,i=fe(d===void 0?u===void 0?{kind:`viewport`}:{kind:`root`,target:u}:{kind:`rootRef`,target:b});if(!t){g.current&&R(g.current,{disabled:!1,node:null,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s});return}g.current||(g.current=I({node:t,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s},{onEnter:e,onLeave:n,onEvent:r})),R(g.current,{disabled:c,node:t,target:i,rootMargin:x,threshold:S,once:a,oncePerDirection:o,fireOnInitialVisible:s})},[c,x,S,a,o,s,O,u,d,b,C]),t.default.useEffect(()=>()=>{g.current&&(z(g.current),g.current=null)},[]),C?D?t.default.cloneElement(D,{ref:k}):t.default.createElement(t.default.Fragment,null,i):t.default.createElement(`div`,{ref:h,style:pe,className:m})},H=t.default.useSyncExternalStore,he=typeof window>`u`?t.default.useEffect:t.default.useLayoutEffect;function U(e,n,r){if(H)return H(e,n,r);let[i,a]=t.default.useState(()=>r()),o=t.default.useRef(i);return he(()=>{let t=()=>{let e=n();Object.is(o.current,e)||(o.current=e,a(e))};return t(),e(t)},[e,n]),i}function W(e,t,n){return n(e.current,t)?e.current:(e.current=t,t)}let G={x:0,y:0},K={width:0,height:0},ge=typeof window>`u`?t.default.useEffect:t.default.useLayoutEffect;function q(e,t){let n=null,r=null,i=()=>{n&&(clearTimeout(n),n=null),r=Date.now(),e()};return{schedule:()=>{if(t<=0){i();return}let e=Date.now();if(r===null||e-r>=t){i();return}n||(n=setTimeout(()=>{i()},t-(e-r)))},cancel:()=>{n&&(clearTimeout(n),n=null)}}}function J(){return typeof window>`u`?K:{width:window.innerWidth,height:window.innerHeight}}function Y(e){return!!(e&&typeof e==`object`&&!m(e)&&`current`in e)}function X(e){return Y(e)?e.current:e||(typeof window>`u`?null:window)}function _e(e){return e===window||m(e)}function Z(e){if(_e(e))return{x:e.scrollX,y:e.scrollY};let t=e;return{x:t.scrollLeft,y:t.scrollTop}}function ve(e){let t=X(e);return t?Z(t):G}function Q(e,t){return e.x===t.x&&e.y===t.y}function $(e,t){return e.width===t.width&&e.height===t.height}function ye(e){let n=e?.enabled!==!1,r=e?.passive,i=e?.throttleMs??16,a=t.default.useRef(J()),o=t.default.useCallback(()=>typeof window>`u`?K:n?W(a,J(),$):a.current,[n]);return U(t.default.useCallback(e=>{if(typeof window>`u`||!n)return()=>{};let t=q(()=>{let t=J();$(a.current,t)||(a.current=t,e())},i);return window.addEventListener(`resize`,t.schedule,{passive:r}),()=>{t.cancel(),window.removeEventListener(`resize`,t.schedule)}},[n,r,i]),o,()=>K)}function be(e){let n=e?.target,r=Y(n),i=e?.enabled!==!1,a=e?.passive,o=e?.throttleMs??16,s=t.default.useRef(ve(n)),[c,l]=t.default.useState(()=>r?X(n):null);ge(()=>{if(!r)return;let e=X(n);l(t=>t===e?t:e)});let u=r?c:X(n),d=t.default.useCallback(()=>i?u?W(s,Z(u),Q):W(s,G,Q):s.current,[i,u]);return U(t.default.useCallback(e=>{if(!i||!u)return()=>{};let t=q(()=>{let t=Z(u);Q(s.current,t)||(s.current=t,e())},o);return u.addEventListener(`scroll`,t.schedule,{passive:a}),()=>{t.cancel(),u.removeEventListener(`scroll`,t.schedule)}},[i,a,u,o]),d,()=>G)}e.AtomTrigger=me,e.useScrollPosition=be,e.useViewportSize=ye});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.reactAtomTrigger={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let l=new Set;function u(){if(typeof process>`u`||!process.env)return null;let e=`production`;return e===`development`||e===`production`?e:null}function d(e){return(Object.prototype.hasOwnProperty.call(e??{},`nodeEnv`)?e?.nodeEnv??null:u())===`development`}function f(e){d()&&(l.has(e)||(l.add(e),typeof console<`u`&&console.warn&&console.warn(e)))}function p(e){return!!(e&&typeof e==`object`&&`nodeType`in e&&e.nodeType===1&&`getBoundingClientRect`in e&&typeof e.getBoundingClientRect==`function`&&`addEventListener`in e&&typeof e.addEventListener==`function`&&`removeEventListener`in e&&typeof e.removeEventListener==`function`)}function m(e){return!!(e&&typeof e==`object`&&`window`in e&&e.window===e)}function h(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function g(e){if(!e||typeof e!=`object`&&typeof e!=`function`)return;let t=Object.getOwnPropertyDescriptor(e,`ref`);if(!(!t||!(`value`in t)))return t.value}function _(e){if(!e)return;let t=g(e.props);return t===void 0?g(e):t}function ee(e,n,r){return e?n===1?r?r.type===t.default.Fragment?`[react-atom-trigger] Child mode does not support React.Fragment. Wrap the content in a single DOM element. Observation is disabled for this render.`:null:`[react-atom-trigger] Child mode expects a React element child. Observation is disabled for this render.`:`[react-atom-trigger] Child mode expects exactly one top-level React element. Observation is disabled for this render.`:null}function te({originalChildRef:e,hasObservedChild:n,invalidChildWarning:r,shouldWarnAboutMissingDomRef:i}){let[a,o]=t.default.useState(null),s=t.default.useRef(null),c=t.default.useCallback(()=>{s.current=null,o(e=>e===null?e:null)},[]),l=t.default.useCallback(t=>{if(h(e,t),t===null){c();return}if(p(t)){s.current=t,o(e=>e===t?e:t);return}c(),f(`[react-atom-trigger] Child mode requires the child ref to resolve to a DOM element. Observation is disabled for this render.`)},[c,e]);return t.default.useEffect(()=>{if(typeof window>`u`||!(n&&!r&&!a&&i))return;let e=window.setTimeout(()=>{s.current||f(`[react-atom-trigger] Child mode expects a DOM element or a component that forwards its ref to a DOM element. Observation is disabled for this render.`)},16);return()=>{window.clearTimeout(e)}},[n,r,a,i]),{childNode:a,attachObservedChildRef:l}}function v(e){return Array.isArray(e)&&e.length===4&&e.every(e=>typeof e==`number`&&Number.isFinite(e))}function ne(e){return typeof e==`string`?e:v(e)?e.map(e=>`${Object.is(e,-0)?0:e}px`).join(` `):(e==null||f(`[react-atom-trigger] Invalid rootMargin array ${JSON.stringify(e)}. Use exactly four finite numbers: [top, right, bottom, left]. Falling back to 0px.`),`0px`)}function y(e,t){let n=e.trim();if(!n||/^[+-]?0(?:\.0+)?$/.test(n))return 0;let r=n.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/);if(!r)return f(`[react-atom-trigger] Invalid rootMargin token "${n}". Use px, % or 0. Falling back to 0px.`),0;let[,i,a]=r,o=Number.parseFloat(i);return a===`%`?o/100*t:o}function b(e,t,n){let r=e.trim().split(/\s+/).filter(Boolean);if(r.length>4)return f(`[react-atom-trigger] Invalid rootMargin "${e}". Use 1 to 4 values in IntersectionObserver order. Falling back to 0px.`),{top:0,right:0,bottom:0,left:0};let[i=`0px`,a=i,o=i,s=a]=r;return{top:y(i,n),right:y(a,t),bottom:y(o,n),left:y(s,t)}}function x(e,t){let n=b(t,e.width,e.height);return new DOMRect(e.left-n.left,e.top-n.top,e.width+n.left+n.right,e.height+n.top+n.bottom)}function S(e){let t=e.width>0?e.width:1,n=e.height>0?e.height:1;return t===e.width&&n===e.height?e:new DOMRect(e.left,e.top,t,n)}function C(e,t){let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),a=Math.min(e.bottom,t.bottom);return i<=n||a<=r?new DOMRect(0,0,0,0):new DOMRect(n,r,i-n,a-r)}function w(e,t){let n=e.width*e.height;return n<=0?0:t.width*t.height/n}function T(e){return Math.min(1,Math.max(0,e))}function re(e){return Array.isArray(e)?(f("[react-atom-trigger] `threshold` expects a single number in v2. Using the first finite numeric entry."),T(e.find(e=>typeof e==`number`&&Number.isFinite(e))??0)):e==null?0:typeof e!=`number`||!Number.isFinite(e)?(f("[react-atom-trigger] `threshold` must be a finite number between 0 and 1. Falling back to 0."),0):((e<0||e>1)&&f("[react-atom-trigger] `threshold` should be between 0 and 1. Values are clamped."),T(e))}function E(e,t){if(!e)return`unknown`;let n=t.left-e.left,r=t.top-e.top;return n===0&&r===0?`stationary`:Math.abs(r)>=Math.abs(n)?r<0?`up`:`down`:n<0?`left`:`right`}function D(e){if(e.isIntersecting)return`inside`;let t=e.boundingClientRect,n=e.rootBounds?.top??0,r=e.rootBounds?.bottom??window.innerHeight,i=e.rootBounds?.left??0,a=e.rootBounds?.right??window.innerWidth;return t.bottom<=n?`above`:t.top>=r?`below`:t.right<=i?`left`:t.left>=a?`right`:`outside`}function O(e,t,n,r){return!(n&&t.entered+t.left>0||r&&(e===`enter`&&t.entered>0||e===`leave`&&t.left>0))}function ie(e){return e.once?e.counts.entered+e.counts.left>0:e.oncePerDirection?e.counts.entered>0&&e.counts.left>0:!1}function k(e){e.previousTriggerActive=void 0,e.previousRect=null}function ae(e,t,n,r){let i=S(e.node.getBoundingClientRect()),a=x(t,e.rootMargin),o=C(i,a),s=w(i,o),c=s>0,l=e.previousTriggerActive,u=l===!0||e.threshold===0?c:s>=e.threshold,d=e.previousRect&&(n===`root-change`||r)?`stationary`:E(e.previousRect,i);e.previousRect=i,e.previousTriggerActive=u;let f=Date.now(),p={target:e.node,rootBounds:a,boundingClientRect:i,intersectionRect:o,isIntersecting:c,intersectionRatio:s,source:`geometry`},m=l===void 0;if(m&&(!e.fireOnInitialVisible||!u)||l===u)return;let h=u?`enter`:`leave`;if(!O(h,e.counts,e.once,e.oncePerDirection))return;let g=h===`enter`?{...e.counts,entered:e.counts.entered+1}:{...e.counts,left:e.counts.left+1};e.counts=g;let _={type:h,isInitial:m,entry:p,counts:g,movementDirection:d,position:D(p),timestamp:f};e.onEvent?.(_),h===`enter`?e.onEnter?.(_):e.onLeave?.(_),ie(e)&&e.dispose?.()}let A=new WeakMap;function oe(){return new DOMRect(0,0,window.innerWidth,window.innerHeight)}function j(e){return e===window||m(e)}function se(e){let t={registrations:new Set,rafId:0,pendingSampleCause:null,previousBaseRootBounds:null,resizeObserver:null,intersectionObserver:null,queueSample:()=>{},cleanup:()=>{}},n=()=>{if(t.rafId=0,t.registrations.size===0){t.pendingSampleCause=null;return}let n=t.pendingSampleCause??`geometry-change`;t.pendingSampleCause=null;let r=j(e)?oe():e.getBoundingClientRect(),i=t.previousBaseRootBounds!==null&&(t.previousBaseRootBounds.top!==r.top||t.previousBaseRootBounds.left!==r.left||t.previousBaseRootBounds.width!==r.width||t.previousBaseRootBounds.height!==r.height);for(let e of t.registrations)ae(e,r,n,i);t.previousBaseRootBounds=new DOMRect(r.left,r.top,r.width,r.height)},r=(e=`geometry-change`)=>{(t.pendingSampleCause===null||t.pendingSampleCause===`geometry-change`&&e!==`geometry-change`||t.pendingSampleCause===`root-change`&&e===`scroll`)&&(t.pendingSampleCause=e),t.rafId===0&&(t.rafId=window.requestAnimationFrame(()=>{t.rafId=0,n()}))},i=()=>{r(`scroll`)},a=()=>{r(`root-change`)};return e.addEventListener(`scroll`,i,{passive:!0}),window.addEventListener(`resize`,a),typeof ResizeObserver<`u`&&(t.resizeObserver=new ResizeObserver(a),j(e)||t.resizeObserver.observe(e)),typeof IntersectionObserver<`u`&&(t.intersectionObserver=new IntersectionObserver(()=>{r(`geometry-change`)},{root:j(e)?null:e,rootMargin:`200% 200% 200% 200%`,threshold:0})),t.queueSample=r,t.cleanup=()=>{t.rafId!==0&&(cancelAnimationFrame(t.rafId),t.rafId=0),e.removeEventListener(`scroll`,i),window.removeEventListener(`resize`,a),t.resizeObserver?.disconnect(),t.intersectionObserver?.disconnect(),t.pendingSampleCause=null,t.previousBaseRootBounds=null},t}function ce(e){let t=A.get(e);if(t)return t;let n=se(e);return A.set(e,n),n}function le(e,t){let n=ce(e),r=!1,i=t.node;n.registrations.add(t),n.resizeObserver?.observe(i),n.intersectionObserver?.observe(i),n.queueSample();let a=()=>{r||(r=!0,n.registrations.delete(t),n.resizeObserver?.unobserve(i),n.intersectionObserver?.unobserve(i),t.dispose=void 0,n.registrations.size===0&&(n.cleanup(),A.delete(e)))};return t.dispose=a,a}function ue(e,t){return{...e,...t,previousTriggerActive:void 0,previousRect:null,counts:{entered:0,left:0}}}function de(e,t){e.onEnter=t.onEnter,e.onLeave=t.onLeave,e.onEvent=t.onEvent}function M(e){e.dispose?.(),e.dispose=null,e.binding=null}function fe(e,t){return{registration:ue(e,t),binding:null,dispose:null}}function N(e,t){de(e.registration,t)}function P(e,t){let n=e.registration;if(!t.node){k(n),M(e);return}let r={node:t.node,rootMargin:t.rootMargin,threshold:t.threshold,once:t.once,oncePerDirection:t.oncePerDirection,fireOnInitialVisible:t.fireOnInitialVisible};if(t.disabled||!t.target){M(e),Object.assign(n,r),k(n);return}let i={...r,target:t.target};if(e.binding!==null&&e.binding.node===i.node&&e.binding.target===i.target&&e.binding.rootMargin===i.rootMargin&&e.binding.threshold===i.threshold&&e.binding.once===i.once&&e.binding.oncePerDirection===i.oncePerDirection&&e.binding.fireOnInitialVisible===i.fireOnInitialVisible){Object.assign(n,r);return}k(n),M(e),Object.assign(n,r),e.dispose=le(t.target,n),e.binding=i}function F(e){M(e)}function I(e){let t=e.kind===`rootRef`?"[react-atom-trigger] `rootRef.current` must resolve to a real DOM element. Observation is paused until it does.":"[react-atom-trigger] `root` must be a real DOM element when provided. Observation is paused until it is.",{target:n}=e;return n==null?null:p(n)?n:(f(t),null)}function L(e){let n=e!==void 0,[r,i]=t.default.useState(()=>n?e.current:null);return t.default.useEffect(()=>{if(!n)return;let t=e.current;i(e=>e===t?e:t)}),n?r:void 0}function R(e){switch(e.kind){case`rootRef`:case`root`:return I(e);case`viewport`:return typeof window>`u`?null:window}}let z={display:`table`},B=({onEnter:e,onLeave:n,onEvent:r,children:i,once:a=!1,oncePerDirection:o=!1,fireOnInitialVisible:s=!1,disabled:c=!1,threshold:l=0,root:u,rootRef:d,rootMargin:p=`0px`,className:m})=>{let h=t.default.useRef(null),g=t.default.useRef(null),v=L(d),y=ne(p),b=re(l),x=i!=null,S=t.default.Children.count(i),C=S===1&&t.default.isValidElement(i)?i:null,w=ee(x,S,C),T=w||!C?null:C,{childNode:E,attachObservedChildRef:D}=te({originalChildRef:_(T),hasObservedChild:x,invalidChildWarning:w,shouldWarnAboutMissingDomRef:T!==null});return t.default.useEffect(()=>{x&&m&&f("[react-atom-trigger] `className` only applies to the internal sentinel. In child mode, style the child element directly.")},[m,x]),t.default.useEffect(()=>{w&&f(w)},[w]),t.default.useEffect(()=>{a&&o&&f("[react-atom-trigger] `once` and `oncePerDirection` were both provided. `once` takes precedence.")},[a,o]),t.default.useEffect(()=>{let t=g.current;t&&N(t,{onEnter:e,onLeave:n,onEvent:r})},[e,n,r]),t.default.useEffect(()=>{if(typeof window>`u`)return;let t=x?E:h.current,i=R(d===void 0?u===void 0?{kind:`viewport`}:{kind:`root`,target:u}:{kind:`rootRef`,target:v});if(!t){g.current&&P(g.current,{disabled:!1,node:null,target:i,rootMargin:y,threshold:b,once:a,oncePerDirection:o,fireOnInitialVisible:s});return}g.current||(g.current=fe({node:t,rootMargin:y,threshold:b,once:a,oncePerDirection:o,fireOnInitialVisible:s},{onEnter:e,onLeave:n,onEvent:r})),P(g.current,{disabled:c,node:t,target:i,rootMargin:y,threshold:b,once:a,oncePerDirection:o,fireOnInitialVisible:s})},[c,y,b,a,o,s,E,u,d,v,x]),t.default.useEffect(()=>()=>{g.current&&(F(g.current),g.current=null)},[]),x?T?t.default.cloneElement(T,{ref:D}):t.default.createElement(t.default.Fragment,null,i):t.default.createElement(`div`,{ref:h,style:z,className:m})},V=t.default.useSyncExternalStore,pe=typeof window>`u`?t.default.useEffect:t.default.useLayoutEffect;function H(e,n,r){if(V)return V(e,n,r);let[i,a]=t.default.useState(()=>r()),o=t.default.useRef(i);return pe(()=>{let t=()=>{let e=n();Object.is(o.current,e)||(o.current=e,a(e))};return t(),e(t)},[e,n]),i}function U(e,t,n){return n(e.current,t)?e.current:(e.current=t,t)}let W={x:0,y:0},G={width:0,height:0},me=typeof window>`u`?t.default.useEffect:t.default.useLayoutEffect;function K(e,t){let n=null,r=null,i=()=>{n&&(clearTimeout(n),n=null),r=Date.now(),e()};return{schedule:()=>{if(t<=0){i();return}let e=Date.now();if(r===null||e-r>=t){i();return}n||(n=setTimeout(()=>{i()},t-(e-r)))},cancel:()=>{n&&(clearTimeout(n),n=null)}}}function q(){return typeof window>`u`?G:{width:window.innerWidth,height:window.innerHeight}}function J(e){return!!(e&&typeof e==`object`&&!m(e)&&`current`in e)}function Y(e){return J(e)?e.current:e||(typeof window>`u`?null:window)}function he(e){return e===window||m(e)}function X(e){if(he(e))return{x:e.scrollX,y:e.scrollY};let t=e;return{x:t.scrollLeft,y:t.scrollTop}}function ge(e){let t=Y(e);return t?X(t):W}function Z(e,t){return e.x===t.x&&e.y===t.y}function Q(e,t){return e.width===t.width&&e.height===t.height}function $(e){let n=e?.enabled!==!1,r=e?.passive,i=e?.throttleMs??16,a=t.default.useRef(q()),o=t.default.useCallback(()=>typeof window>`u`?G:n?U(a,q(),Q):a.current,[n]);return H(t.default.useCallback(e=>{if(typeof window>`u`||!n)return()=>{};let t=K(()=>{let t=q();Q(a.current,t)||(a.current=t,e())},i);return window.addEventListener(`resize`,t.schedule,{passive:r}),()=>{t.cancel(),window.removeEventListener(`resize`,t.schedule)}},[n,r,i]),o,()=>G)}function _e(e){let n=e?.target,r=J(n),i=e?.enabled!==!1,a=e?.passive,o=e?.throttleMs??16,s=t.default.useRef(ge(n)),[c,l]=t.default.useState(()=>r?Y(n):null);me(()=>{if(!r)return;let e=Y(n);l(t=>t===e?t:e)});let u=r?c:Y(n),d=t.default.useCallback(()=>i?u?U(s,X(u),Z):U(s,W,Z):s.current,[i,u]);return H(t.default.useCallback(e=>{if(!i||!u)return()=>{};let t=K(()=>{let t=X(u);Z(s.current,t)||(s.current=t,e())},o);return u.addEventListener(`scroll`,t.schedule,{passive:a}),()=>{t.cancel(),u.removeEventListener(`scroll`,t.schedule)}},[i,a,u,o]),d,()=>W)}e.AtomTrigger=B,e.useScrollPosition=_e,e.useViewportSize=$});
|
package/package.json
CHANGED