react-panel-layout 0.6.0 → 0.6.1

package/dist/stack.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),ee=require("react"),B=require("./styles-qf6ptVLD.cjs"),te=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),ne=require("./useContentCache-DqXtLrLs.cjs"),re=require("./useDocumentPointerEvents-ChqrKXDk.cjs"),U=require("./useEffectEvent-huSsGUnl.cjs");function se(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const n=se(ee);function oe(r){const{wasActive:e,isActive:t,transitionMode:s}=r;return s!=="css"||e===t?null:t?"push":"pop"}function ce(r){const{displayMode:e,depth:t,navigationDepth:s,isActive:a,isAnimatingOut:c,isRevealing:u,revealDepth:i}=r;return e==="overlay"?a||c||u&&t===i?"visible":"hidden":t<=s||c?"visible":"hidden"}function ie(r){const{depth:e,activeDepth:t,displayMode:s,isRevealing:a,revealDepth:c}=r,u=e===t,i=e<t;if(a&&u&&c!==null)return`translateX(${.3*100}%)`;if(u)return"translateX(0)";if(i)switch(s){case"overlay":return"translateX(0)";case"slide":return"translateX(-30%)";case"stack":{const f=(t-e)*-5,p=1-(t-e)*.05;return`translateX(${f}%) scale(${p})`}}return"translateX(100%)"}function ae(r,e,t){return e===void 0||e<=0||!t?r:`translateX(${e*100}%)`}function ue(r){if(r==="css")return`transform ${B.STACK_TRANSITION_DURATION} ${B.STACK_TRANSITION_EASING}`}function le(r){const{depth:e,isActive:t,wasActive:s,currentAnimationType:a,displayMode:c,transitionMode:u,navigationState:i,swipeProgress:f}=r,o=oe({wasActive:s,isActive:t,transitionMode:u})??a,d=o==="pop",h=ce({displayMode:c,depth:e,navigationDepth:i.depth,isActive:t,isAnimatingOut:d,isRevealing:i.isRevealing,revealDepth:i.revealDepth}),g=ie({depth:e,activeDepth:i.depth,displayMode:c,isRevealing:i.isRevealing,revealDepth:i.revealDepth}),S=ae(g,f,t),v=(()=>{if(u==="css"){if(o==="push")return B.STACK_ANIMATION_PUSH;if(o==="pop")return B.STACK_ANIMATION_POP}})(),m=ue(u);return{nextAnimationType:o,visibility:h,transform:S,animation:v,transition:m,zIndex:e,pointerEvents:t?"auto":"none"}}const fe={position:"absolute",inset:0,width:"100%",height:"100%"},z=n.memo(({id:r,depth:e,isActive:t,displayMode:s,transitionMode:a,navigationState:c,swipeProgress:u,children:i})=>{const f=n.useRef(null),p=n.useRef(t),[o,d]=n.useState(null),h=le({depth:e,isActive:t,wasActive:p.current,currentAnimationType:o,displayMode:s,transitionMode:a,navigationState:c,swipeProgress:u});te.useIsomorphicLayoutEffect(()=>{const m=p.current;p.current=t,m!==t&&d(h.nextAnimationType)},[t,h.nextAnimationType]);const g=n.useCallback(m=>{m.target===m.currentTarget&&d(null)},[]),S=n.useMemo(()=>{const m={...fe,transform:h.transform,pointerEvents:h.pointerEvents,zIndex:h.zIndex,visibility:h.visibility};return h.animation!==void 0&&(m.animation=h.animation),h.transition!==void 0&&(m.transition=h.transition),m},[h.transform,h.pointerEvents,h.zIndex,h.visibility,h.animation,h.transition]),v=L.jsx("div",{ref:f,"data-stack-content":r,"data-depth":e,"data-active":t?"true":"false",style:S,onAnimationEnd:g,children:i});return a==="none"?L.jsx(n.Activity,{mode:t?"visible":"hidden",children:v}):v}),V=n.createContext(null),de=n.memo(()=>{const r=n.useContext(V);if(!r)throw new Error("StackOutlet must be used within useStackNavigation");const[,e]=n.useReducer(i=>i+1,0);n.useEffect(()=>r.subscribe(e),[r]);const{panels:t,navigationState:s,displayMode:a,transitionMode:c}=r.getState(),u=n.useMemo(()=>s.stack.map((i,f)=>{const p=t.find(o=>o.id===i);return p?{panel:p,depth:f}:null}).filter(i=>i!==null),[s.stack,t]);return L.jsx(L.Fragment,{children:u.map(({panel:i,depth:f})=>L.jsx(z,{id:i.id,depth:f,isActive:f===s.depth,displayMode:a,transitionMode:c,navigationState:s,children:i.cache?r.getCachedContent(i.id):i.content},i.id))})});function pe(r){const{panels:e,initialPanelId:t,displayMode:s,transitionMode:a="css",onPanelChange:c}=r,[u,i]=n.useState(()=>{const l=t??e[0]?.id;if(!l)throw new Error("useStackNavigation: No panels provided");return[l]}),[f,p]=n.useState({isRevealing:!1,revealDepth:null}),o=u.length-1,d=n.useMemo(()=>({stack:u,depth:o,isRevealing:f.isRevealing,revealDepth:f.revealDepth}),[u,o,f.isRevealing,f.revealDepth]),h=u[o],g=o>0?u[o-1]:null,S=n.useCallback(l=>{e.find(R=>R.id===l)&&(i(R=>[...R,l]),c?.(l,o+1))},[e,o,c]),v=n.useCallback(l=>{if(l>=0)return;const y=o+l;if(y<0)return;i(F=>F.slice(0,y+1));const R=u[y];c?.(R,y)},[o,u,c]),m=n.useCallback(l=>{if(l<0||l>=u.length)return;i(R=>R.slice(0,l+1));const y=u[l];c?.(y,l)},[u,c]),w=n.useCallback(l=>{e.find(R=>R.id===l)&&(i(R=>[...R.slice(0,-1),l]),c?.(l,o))},[e,o,c]),E=n.useCallback(l=>l>=0?!1:o+l>=0,[o]),k=n.useCallback(l=>{const y=l??o-1;y<0||y>=o||p({isRevealing:!0,revealDepth:y})},[o]),A=n.useCallback(()=>{o!==0&&p({isRevealing:!0,revealDepth:0})},[o]),P=n.useCallback(()=>{p({isRevealing:!1,revealDepth:null})},[]),D=n.useCallback(l=>{const y=u.indexOf(l),R=y===o;return{"data-stack-panel":l,"data-depth":y,"data-active":R?"true":"false","aria-hidden":!R}},[u,o]),M=n.useCallback(()=>{const l=o>0,y=g?e.find(F=>F.id===g):null,R=y?.title?`Back to ${y.title}`:"Go back";return{onClick:()=>v(-1),disabled:!l,"aria-label":R}},[o,g,e,v]),I=n.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]),C=n.useRef({panels:e,navigationState:d,displayMode:s,transitionMode:a});C.current={panels:e,navigationState:d,displayMode:s,transitionMode:a};const O=n.useRef(new Set);n.useEffect(()=>{O.current.forEach(l=>l())},[d,s,a]);const _=n.useCallback(l=>C.current.panels.find(R=>R.id===l)?.content??null,[]),N=n.useMemo(()=>e.map(l=>l.id),[e]),{getCachedContent:b}=ne.useContentCache({resolveContent:_,validIds:N}),x=n.useMemo(()=>({getState:()=>C.current,subscribe:l=>(O.current.add(l),()=>O.current.delete(l)),getCachedContent:b}),[b]),T=n.useMemo(()=>{const l=()=>L.jsx(V.Provider,{value:x,children:L.jsx("div",{style:I,"data-stack-container":!0,children:L.jsx(de,{})})});return l.displayName="StackOutlet",l},[x,I]);return{state:d,push:S,go:v,move:m,replace:w,revealParent:k,revealRoot:A,dismissReveal:P,getPanelProps:D,getBackButtonProps:M,canGo:E,currentPanelId:h,previousPanelId:g,Outlet:T}}const j={isDown:!1,start:null,current:null,pointerId:null,wasCanceled:!1},G=(r,e)=>({x:r,y:e,timestamp:performance.now()});function he(r){const{enabled:e,primaryOnly:t=!0}=r,[s,a]=n.useState(j),c=n.useCallback(()=>{a(j)},[]),u=U.useEffectEvent(d=>{if(!e||t&&!d.isPrimary||d.pointerType==="mouse"&&d.button!==0)return;const h=G(d.clientX,d.clientY);a({isDown:!0,start:h,current:h,pointerId:d.pointerId,wasCanceled:!1})}),i=U.useEffectEvent(d=>{if(s.pointerId!==d.pointerId)return;const h=G(d.clientX,d.clientY);a(g=>({...g,current:h}))}),f=U.useEffectEvent(()=>{a(j)}),p=U.useEffectEvent(()=>{a({...j,wasCanceled:!0})}),o=s.isDown?e:!1;return re.useDocumentPointerEvents(o,{onMove:i,onUp:f,onCancel:p}),n.useEffect(()=>{!e&&s.isDown&&c()},[e,s.isDown,c]),{state:s,onPointerDown:u,reset:c}}const me=10,ve=(r,e)=>{const t=Math.abs(r),s=Math.abs(e);return t===0&&s===0?null:t>s*1.5?"horizontal":s>t*1.5?"vertical":null};function ge(r){const{tracking:e,lockThreshold:t=me}=r,[s,a]=n.useState(null),c=n.useCallback(()=>{a(null)},[]);return n.useEffect(()=>{if(!e.isDown){s!==null&&c();return}if(s!==null||!e.start||!e.current)return;const u=e.current.x-e.start.x,i=e.current.y-e.start.y;if(Math.max(Math.abs(u),Math.abs(i))<t)return;const p=ve(u,i);p!==null&&a(p)},[e.isDown,e.start,e.current,s,t,c]),{lockedAxis:s,isLocked:s!==null,reset:c}}const H=(r,e,t)=>{const s=t-e;return s<=0?0:r/s},W=r=>r>0?1:r<0?-1:0,Ee=(...r)=>{const e={},t=[];for(const a of r)Object.assign(e,a.style),a.onPointerDown&&t.push(a.onPointerDown);return{onPointerDown:a=>{for(const c of t)c?.(a)},style:e}},Y={distanceThreshold:100,velocityThreshold:.5,lockThreshold:10},K=20,$={phase:"idle",displacement:{x:0,y:0},velocity:{x:0,y:0},direction:0},be=150,q=(r,e,t,s,a)=>{const c=t==="horizontal"?r.x:r.y,u=t==="horizontal"?e.x:e.y,i=Math.abs(c),f=Math.abs(u);if(i>=s.distanceThreshold||f>=s.velocityThreshold){const o=W(c);a?.({phase:"ended",displacement:r,velocity:e,direction:o})}};function ye(r){const{containerRef:e,axis:t,enabled:s=!0,thresholds:a,onSwipeEnd:c,enableWheel:u=!0,pointerStartFilter:i}=r,f={...Y,...a},p=U.useEffectEvent(c),{state:o,onPointerDown:d}=he({enabled:s}),h=n.useCallback(b=>{if(s){if(i){const x=e.current;if(!x||!i(b,x))return}d(b)}},[s,i,e,d]),{lockedAxis:g,isLocked:S}=ge({tracking:o,lockThreshold:f.lockThreshold}),v=n.useRef(null),m=n.useRef(!1);n.useEffect(()=>{m.current=S?g===t:!1},[S,g,t]),n.useEffect(()=>{const b=e.current;if(!b||!s)return;const x=y=>{y.preventDefault()},T=y=>{m.current&&y.preventDefault(),document.addEventListener("touchmove",x,{passive:!1})},l=()=>{document.removeEventListener("touchmove",x)};return document.addEventListener("touchend",l),document.addEventListener("touchcancel",l),b.addEventListener("touchstart",T,{passive:!1}),()=>{b.removeEventListener("touchstart",T),document.removeEventListener("touchend",l),document.removeEventListener("touchcancel",l)}},[e,s]);const[w,E]=n.useState($),k=n.useRef({x:0,y:0}),A=n.useRef(null),P=n.useRef(!1),D=n.useRef(null),M=n.useCallback(()=>{k.current={x:0,y:0},P.current=!1,D.current=null,E($)},[]),I=n.useCallback(()=>{const b={...k.current};q(b,{x:0,y:0},t,f,p),M()},[t,f,p,M]),C=U.useEffectEvent(b=>{if(!s||!u||o.isDown)return;const{deltaX:x,deltaY:T}=b;if(!P.current){const R=Math.abs(x),F=Math.abs(T);(R>=f.lockThreshold||F>=f.lockThreshold)&&(P.current=!0,D.current=R>F?"horizontal":"vertical")}if(P.current&&D.current!==t)return;k.current.x-=x,k.current.y-=T;const l=k.current,y=t==="horizontal"?l.x:l.y;E({phase:"swiping",displacement:{...l},velocity:{x:0,y:0},direction:W(y)}),A.current!==null&&clearTimeout(A.current),A.current=setTimeout(I,be)});n.useEffect(()=>{const b=e.current;if(!b||!s||!u)return;const x=T=>{T.preventDefault(),C(T)};return b.addEventListener("wheel",x,{passive:!1}),()=>{b.removeEventListener("wheel",x),A.current!==null&&clearTimeout(A.current)}},[e,s,u,C]),n.useEffect(()=>()=>{A.current!==null&&clearTimeout(A.current)},[]);const O=n.useMemo(()=>{if(!o.isDown||!o.start||!o.current)return $;const b=o.current.x-o.start.x,x=o.current.y-o.start.y,T={x:b,y:x},l={x:H(b,o.start.timestamp,o.current.timestamp),y:H(x,o.start.timestamp,o.current.timestamp)};return!S||g!==t?{phase:"tracking",displacement:T,velocity:l,direction:0}:{phase:"swiping",displacement:T,velocity:l,direction:W(t==="horizontal"?b:x)}},[o.isDown,o.start,o.current,S,g,t]);n.useEffect(()=>{O.phase!=="idle"&&(v.current=O)},[O]),n.useEffect(()=>{if(o.isDown)return;const b=v.current;!b||b.phase!=="swiping"&&b.phase!=="tracking"||(v.current=null,!o.wasCanceled&&q(b.displacement,b.velocity,t,f,p))},[o.isDown,o.wasCanceled,t,f,p]);const _=O.phase!=="idle"?O:w,N=n.useMemo(()=>({onPointerDown:h,style:{touchAction:t==="horizontal"?"pan-y pinch-zoom":"pan-x pinch-zoom",userSelect:"none",WebkitUserSelect:"none"}}),[t,h]);return{state:_,containerProps:N}}const Se=r=>r==="left"||r==="right"?"horizontal":"vertical",we=(r,e,t,s,a)=>{const c=t.getBoundingClientRect();switch(s){case"left":return r>=c.left&&r<=c.left+a;case"right":return r>=c.right-a&&r<=c.right;case"top":return e>=c.top&&e<=c.top+a;case"bottom":return e>=c.bottom-a&&e<=c.bottom}};function Te(r){const{containerRef:e,edge:t,edgeWidth:s=K,enabled:a=!0,thresholds:c,onSwipeEnd:u}=r,i={...Y,...c},f=Se(t),[p,o]=n.useState(!1),d=n.useCallback((v,m)=>{const w=we(v.clientX,v.clientY,m,t,s);return o(w),w},[t,s]),{state:h,containerProps:g}=ye({containerRef:e,axis:f,enabled:a,thresholds:i,onSwipeEnd:u,enableWheel:!1,pointerStartFilter:d});return n.useEffect(()=>{h.phase==="idle"&&o(!1)},[h.phase]),{isEdgeGesture:p,state:p?h:$,containerProps:g}}const ke=(r,e,t)=>{const s=e.getBoundingClientRect();return r>=s.left&&r<=s.left+t};function xe(r){const{containerRef:e,active:t,preventEdgeBack:s=!0,preventOverscroll:a=!0,edgeWidth:c=K}=r,u=n.useRef(null),i=n.useCallback(()=>{if(!a)return;const o=document.documentElement;u.current===null&&(u.current=o.style.overscrollBehavior),o.style.overscrollBehavior="none"},[a]);n.useEffect(()=>{t||!a||u.current!==null&&(document.documentElement.style.overscrollBehavior=u.current,u.current=null)},[t,a]),n.useEffect(()=>()=>{u.current!==null&&(document.documentElement.style.overscrollBehavior=u.current,u.current=null)},[]);const f=n.useCallback(o=>{if(!s)return;const d=e.current;d&&o.pointerType==="touch"&&ke(o.clientX,d,c)&&(i(),o.preventDefault())},[s,e,c,i]);return{containerProps:n.useMemo(()=>({onPointerDown:s?f:void 0,style:{overscrollBehavior:a?"contain":void 0,WebkitOverflowScrolling:"touch"}}),[a,s,f])}}function Re(r){const{containerRef:e,navigation:t,edge:s="left",edgeWidth:a=20,enabled:c=!0}=r,[u,i]=n.useState(null),f=n.useCallback(m=>{i(null),s==="left"&&m.direction===1&&t.canGo(-1)&&t.go(-1)},[s,t]),{isEdgeGesture:p,state:o,containerProps:d}=Te({containerRef:e,edge:s,edgeWidth:a,enabled:c&&t.canGo(-1),onSwipeEnd:f});n.useEffect(()=>{p&&(o.phase==="swiping"||o.phase==="tracking")?i(o):o.phase==="idle"&&i(null)},[p,o]);const{containerProps:h}=xe({containerRef:e,active:p,preventEdgeBack:!0,preventOverscroll:!0,edgeWidth:a}),g=n.useMemo(()=>{if(!u||!e.current)return 0;const m=e.current.clientWidth;if(m===0)return 0;const w=u.displacement.x;if(s==="left"&&w<=0||s==="right"&&w>=0)return 0;const E=Math.abs(w);return Math.min(E/m,1)},[u,e,s]),S=n.useMemo(()=>Ee(d,h),[d,h]);return{isEdgeSwiping:p,progress:g,inputState:p?o:$,containerProps:S}}const Z={easeOutExpo:r=>r===1?1:1-Math.pow(2,-10*r)},Ae=300;function De(r){const{duration:e=Ae,easing:t=Z.easeOutExpo,onFrame:s,onComplete:a}=r,[c,u]=n.useState(!1),i=n.useRef(null),f=n.useRef(null),p=n.useRef(s),o=n.useRef(a);n.useEffect(()=>{p.current=s,o.current=a},[s,a]);const d=n.useCallback(()=>{i.current!==null&&(cancelAnimationFrame(i.current),i.current=null),f.current=null,u(!1)},[]),h=n.useCallback(()=>{d(),u(!0),f.current=null;const g=S=>{f.current===null&&(f.current=S);const v=S-f.current,m=Math.min(v/e,1),w=t(m),E=m>=1,k={progress:m,easedProgress:w,elapsed:v,isComplete:E};p.current?.(k),E?(i.current=null,f.current=null,u(!1),o.current?.()):i.current=requestAnimationFrame(g)};i.current=requestAnimationFrame(g)},[e,t,d]);return n.useEffect(()=>()=>{i.current!==null&&cancelAnimationFrame(i.current)},[]),{isAnimating:c,start:h,cancel:d}}function Ce(r,e,t){return r+(e-r)*t}const Pe=300,X=r=>r==="horizontal"?"translateX":"translateY";function Ie(r){const{elementRef:e,targetPx:t,displacement:s,isSwiping:a,axis:c="horizontal",animationDuration:u=Pe,containerSize:i,animateOnTargetChange:f=!1,initialPx:p}=r,o=p??t,d=n.useRef(o),h=n.useRef(null),g=n.useRef(t),S=n.useRef(i),v=n.useRef(null),m=n.useRef(!0);m.current&&p!==void 0&&p!==t?(v.current={from:p,to:t},m.current=!1):m.current&&(m.current=!1),t!==g.current&&!a&&h.current===null&&(f&&Math.abs(d.current-t)>1?v.current={from:d.current,to:t}:d.current=t,g.current=t),i!==void 0&&i!==S.current&&i>0&&(d.current=t,S.current=i);const w=n.useCallback(({easedProgress:D})=>{const M=e.current,I=h.current;if(!M||!I)return;const C=Ce(I.from,I.to,D);d.current=C,M.style.transform=`${X(c)}(${C}px)`},[c,e]),E=n.useCallback(()=>{h.current=null,d.current=t,g.current=t},[t]),{isAnimating:k,start:A,cancel:P}=De({duration:u,easing:Z.easeOutExpo,onFrame:w,onComplete:E});return n.useLayoutEffect(()=>{if(a){P(),h.current=null,v.current=null;return}if(v.current){const I=v.current;h.current=I,v.current=null;const C=e.current;C&&(C.style.transform=`${X(c)}(${I.from}px)`),A();return}const D=d.current;Math.abs(D-t)>1?(h.current={from:D,to:t},A()):(d.current=t,g.current=t)},[a,t,A,P]),n.useLayoutEffect(()=>{const D=e.current;if(!D||k||h.current!==null||v.current!==null)return;const M=t+s;d.current=M,D.style.transform=`${X(c)}(${M}px)`},[t,s,c,k,e]),{isAnimating:k,currentPx:d.current,animationDirection:h.current}}const J=-.3;function Me(r){return Math.max(0,r)}function Oe(r,e,t=J){if(e<=0)return 0;const s=Math.max(0,r),a=Math.min(s/e,1),c=t*e,u=Math.abs(t)*a*e;return c+u}function Le(r){const{depth:e,navigationDepth:t,isActive:s,isSwiping:a,isAnimating:c}=r;return!!(s||e===t-1&&(a||c))}function _e(r,e){return r===e?"active":r===e-1?"behind":"hidden"}const Ne=300,Fe=.05,Ue=.1,$e={position:"absolute",inset:0,width:"100%",height:"100%"},je=(r,e)=>r.phase==="idle"?0:e==="horizontal"?r.displacement.x:r.displacement.y,Be="-5px 0 15px rgba(0, 0, 0, 0.1)",Q=n.memo(({id:r,depth:e,navigationDepth:t,isActive:s,inputState:a,containerSize:c,axis:u="horizontal",behindOffset:i=J,animationDuration:f=Ne,animateOnMount:p=!1,showShadow:o=!0,displayMode:d="overlay",showDimming:h=!0,children:g})=>{const S=n.useRef(null),v=n.useRef(!0),m=je(a,u),w=a.phase==="swiping"||a.phase==="tracking",E=_e(e,t),k=v.current;v.current&&(v.current=!1);const A=n.useMemo(()=>{switch(E){case"active":return 0;case"behind":return i*c;case"hidden":return c}},[E,i,c]),P=n.useMemo(()=>{if(m<=0)return 0;switch(E){case"active":return Me(m);case"behind":{const T=Oe(m,c,i),l=i*c;return T-l}case"hidden":return 0}},[E,m,c,i]),D=n.useMemo(()=>{if(!(!k||!p)&&E==="active"&&e>0)return c},[k,p,E,e,c]),{isAnimating:M}=Ie({elementRef:S,targetPx:A,displacement:P,isSwiping:w,axis:u,animationDuration:f,containerSize:c,animateOnTargetChange:!0,initialPx:D}),I=Le({depth:e,navigationDepth:t,isActive:s,isSwiping:w,isAnimating:M}),C=n.useMemo(()=>c<=0||m<=0?0:Math.min(m/c,1),[m,c]),O=n.useMemo(()=>{if(d!=="stack")return 1;const T=t-e;if(E==="active")return 1;if(E==="behind"){const l=1-T*Fe;return l+C*(1-l)}return 1},[d,E,e,t,C]),_=n.useMemo(()=>!h||E!=="behind"?0:Ue*(1-C),[h,E,C]);n.useLayoutEffect(()=>{const T=S.current;T&&(T.style.visibility=I?"visible":"hidden")},[I]),n.useLayoutEffect(()=>{const T=S.current;if(!T||d!=="stack")return;const l=T.style.transform;if(l.includes("translateX")){const y=l.match(/translateX\([^)]+\)/);y&&(T.style.transform=`${y[0]} scale(${O})`)}else T.style.transform=`scale(${O})`},[O,d]);const N=o&&e>0&&E==="active",b=n.useMemo(()=>({...$e,pointerEvents:s?"auto":"none",willChange:"transform",zIndex:e,visibility:I?"visible":"hidden",boxShadow:N?Be:void 0}),[s,e,I,N]),x=n.useMemo(()=>_<=0?null:{position:"absolute",inset:0,backgroundColor:`rgba(0, 0, 0, ${_})`,pointerEvents:"none",zIndex:1},[_]);return L.jsxs("div",{ref:S,"data-stack-content":r,"data-depth":e,"data-active":s?"true":"false","data-role":E,style:b,children:[g,x!=null&&L.jsx("div",{style:x,"data-dimming-overlay":!0})]})}),Xe=300;function We(r,e,t){const{stack:s,depth:a}=e,c=[a];a>0&&c.push(a-1);const u=[];for(const i of c){const f=s[i],p=r.find(o=>o.id===f);p&&u.push({panel:p,depth:i,isExiting:!1})}if(t!=null&&!u.some(f=>f.panel.id===t)){const f=r.find(p=>p.id===t);f&&u.push({panel:f,depth:a+1,isExiting:!0})}return u.sort((i,f)=>i.depth-f.depth)}const Ge=n.memo(({panels:r,navigationState:e,inputState:t,containerSize:s,getCachedContent:a,behindOffset:c,animateOnMount:u=!1,animationDuration:i=Xe,showShadow:f,displayMode:p,showDimming:o})=>{const[d,h]=n.useState(null),g=n.useRef(e.depth),S=n.useRef(e.stack);n.useLayoutEffect(()=>{const w=g.current,E=S.current,{depth:k,stack:A}=e;if(g.current=k,S.current=A,k<w){const P=E[w];if(P!=null){h(P);const D=setTimeout(()=>{h(null)},i);return()=>clearTimeout(D)}}},[e.depth,e.stack,i]);const v=n.useMemo(()=>We(r,e,d),[r,e,d]),m=n.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]);return L.jsx("div",{style:m,"data-swipe-stack-container":!0,children:v.map(({panel:w,depth:E,isExiting:k})=>{const A=E===e.depth&&!k,P=a?.(w.id)??w.content;return L.jsx(Q,{id:w.id,depth:E,navigationDepth:e.depth,isActive:A,inputState:t,containerSize:s,behindOffset:c,animateOnMount:u,animationDuration:i,showShadow:f,displayMode:p,showDimming:o,children:P},w.id)})})});exports.StackContent=z;exports.SwipeStackContent=Q;exports.SwipeStackOutlet=Ge;exports.useStackNavigation=pe;exports.useStackSwipeInput=Re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),Z=require("react"),X=require("./styles-qf6ptVLD.cjs"),z=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),ee=require("./useContentCache-DqXtLrLs.cjs"),G=require("./useNativeGestureGuard-C7TSqEkr.cjs");function te(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,i.get?i:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const r=te(Z);function ne(t){const{wasActive:e,isActive:n,transitionMode:i}=t;return i!=="css"||e===n?null:n?"push":"pop"}function re(t){const{displayMode:e,depth:n,navigationDepth:i,isActive:o,isAnimatingOut:c,isRevealing:u,revealDepth:s}=t;return e==="overlay"?o||c||u&&n===s?"visible":"hidden":n<=i||c?"visible":"hidden"}function se(t){const{depth:e,activeDepth:n,displayMode:i,isRevealing:o,revealDepth:c}=t,u=e===n,s=e<n;if(o&&u&&c!==null)return`translateX(${.3*100}%)`;if(u)return"translateX(0)";if(s)switch(i){case"overlay":return"translateX(0)";case"slide":return"translateX(-30%)";case"stack":{const l=(n-e)*-5,f=1-(n-e)*.05;return`translateX(${l}%) scale(${f})`}}return"translateX(100%)"}function ie(t,e,n){return e===void 0||e<=0||!n?t:`translateX(${e*100}%)`}function ce(t){if(t==="css")return`transform ${X.STACK_TRANSITION_DURATION} ${X.STACK_TRANSITION_EASING}`}function oe(t){const{depth:e,isActive:n,wasActive:i,currentAnimationType:o,displayMode:c,transitionMode:u,navigationState:s,swipeProgress:l}=t,m=ne({wasActive:i,isActive:n,transitionMode:u})??o,v=m==="pop",a=re({displayMode:c,depth:e,navigationDepth:s.depth,isActive:n,isAnimatingOut:v,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),g=se({depth:e,activeDepth:s.depth,displayMode:c,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),y=ie(g,l,n),R=(()=>{if(u==="css"){if(m==="push")return X.STACK_ANIMATION_PUSH;if(m==="pop")return X.STACK_ANIMATION_POP}})(),d=ce(u);return{nextAnimationType:m,visibility:a,transform:y,animation:R,transition:d,zIndex:e,pointerEvents:n?"auto":"none"}}const ae={position:"absolute",inset:0,width:"100%",height:"100%"},q=r.memo(({id:t,depth:e,isActive:n,displayMode:i,transitionMode:o,navigationState:c,swipeProgress:u,children:s})=>{const l=r.useRef(null),f=r.useRef(n),[m,v]=r.useState(null),a=oe({depth:e,isActive:n,wasActive:f.current,currentAnimationType:m,displayMode:i,transitionMode:o,navigationState:c,swipeProgress:u});z.useIsomorphicLayoutEffect(()=>{const d=f.current;f.current=n,d!==n&&v(a.nextAnimationType)},[n,a.nextAnimationType]);const g=r.useCallback(d=>{d.target===d.currentTarget&&v(null)},[]),y=r.useMemo(()=>{const d={...ae,transform:a.transform,pointerEvents:a.pointerEvents,zIndex:a.zIndex,visibility:a.visibility};return a.animation!==void 0&&(d.animation=a.animation),a.transition!==void 0&&(d.transition=a.transition),d},[a.transform,a.pointerEvents,a.zIndex,a.visibility,a.animation,a.transition]),R=E.jsx("div",{ref:l,"data-stack-content":t,"data-depth":e,"data-active":n?"true":"false",style:y,onAnimationEnd:g,children:s});return o==="none"?E.jsx(r.Activity,{mode:n?"visible":"hidden",children:R}):R});function ue(t,e){switch(e.type){case"push":return[...t,e.id];case"go":{if(e.direction>=0)return t;const i=t.length-1+e.direction;return i<0?t:t.slice(0,i+1)}case"move":return e.targetDepth<0||e.targetDepth>=t.length?t:t.slice(0,e.targetDepth+1);case"replace":return t.length===0?[e.id]:[...t.slice(0,-1),e.id]}}const V=r.createContext(null),le=r.memo(()=>{const t=r.useContext(V);if(!t)throw new Error("StackOutlet must be used within useStackNavigation");const[,e]=r.useReducer(s=>s+1,0);r.useEffect(()=>t.subscribe(e),[t]);const{panels:n,navigationState:i,displayMode:o,transitionMode:c}=t.getState(),u=r.useMemo(()=>i.stack.map((s,l)=>{const f=n.find(m=>m.id===s);return f?{panel:f,depth:l}:null}).filter(s=>s!==null),[i.stack,n]);return E.jsx(E.Fragment,{children:u.map(({panel:s,depth:l})=>E.jsx(q,{id:s.id,depth:l,isActive:l===i.depth,displayMode:o,transitionMode:c,navigationState:i,children:s.cache?t.getCachedContent(s.id):s.content},s.id))})});function fe(t){const{panels:e,initialPanelId:n,displayMode:i,transitionMode:o="css",onPanelChange:c}=t,u=n??e[0]?.id;if(!u)throw new Error("useStackNavigation: No panels provided");const[s,l]=r.useReducer(ue,[u]),f=r.useRef(s);f.current=s;const m=r.useRef(s);r.useEffect(()=>{const p=m.current;if(m.current=s,c&&s!==p){const C=s.length-1,b=s[C];b!==void 0&&c(b,C)}},[s,c]);const[v,a]=r.useState({isRevealing:!1,revealDepth:null}),g=s.length-1,y=r.useMemo(()=>({stack:s,depth:g,isRevealing:v.isRevealing,revealDepth:v.revealDepth}),[s,g,v.isRevealing,v.revealDepth]),R=s[g],d=g>0?s[g-1]:null,h=r.useCallback(p=>{e.find(b=>b.id===p)&&l({type:"push",id:p})},[e]),A=r.useCallback(p=>{l({type:"go",direction:p})},[]),k=r.useCallback(p=>{l({type:"move",targetDepth:p})},[]),x=r.useCallback(p=>{e.find(b=>b.id===p)&&l({type:"replace",id:p})},[e]),M=r.useCallback(p=>p>=0?!1:f.current.length-1+p>=0,[]),_=r.useCallback(p=>{const C=f.current.length-1,b=p??C-1;b<0||b>=C||a({isRevealing:!0,revealDepth:b})},[]),F=r.useCallback(()=>{f.current.length-1!==0&&a({isRevealing:!0,revealDepth:0})},[]),O=r.useCallback(()=>{a({isRevealing:!1,revealDepth:null})},[]),N=r.useCallback(p=>{const C=f.current,b=C.indexOf(p),U=C.length-1,j=b===U;return{"data-stack-panel":p,"data-depth":b,"data-active":j?"true":"false","aria-hidden":!j}},[]),S=r.useCallback(()=>{const p=f.current,C=p.length-1,b=C>0,U=C>0?p[C-1]:null,j=U?e.find(Q=>Q.id===U):null,J=j?.title?`Back to ${j.title}`:"Go back";return{onClick:()=>A(-1),disabled:!b,"aria-label":J}},[e,A]),T=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]),D=r.useRef({panels:e,navigationState:y,displayMode:i,transitionMode:o});D.current={panels:e,navigationState:y,displayMode:i,transitionMode:o};const w=r.useRef(new Set);r.useEffect(()=>{w.current.forEach(p=>p())},[y,i,o]);const L=r.useCallback(p=>D.current.panels.find(b=>b.id===p)?.content??null,[]),I=r.useMemo(()=>e.map(p=>p.id),[e]),{getCachedContent:P}=ee.useContentCache({resolveContent:L,validIds:I}),$=r.useMemo(()=>({getState:()=>D.current,subscribe:p=>(w.current.add(p),()=>w.current.delete(p)),getCachedContent:P}),[P]),Y=r.useMemo(()=>{const p=()=>E.jsx(V.Provider,{value:$,children:E.jsx("div",{style:T,"data-stack-container":!0,children:E.jsx(le,{})})});return p.displayName="StackOutlet",p},[$,T]);return{state:y,push:h,go:A,move:k,replace:x,revealParent:_,revealRoot:F,dismissReveal:O,getPanelProps:N,getBackButtonProps:S,canGo:M,currentPanelId:R,previousPanelId:d,Outlet:Y}}function pe(t){const{containerRef:e,navigation:n,edge:i="left",edgeWidth:o=20,enabled:c=!0}=t,[u,s]=r.useState(null),l=r.useCallback(d=>{s(null),i==="left"&&d.direction===1&&n.canGo(-1)&&n.go(-1)},[i,n]),{isEdgeGesture:f,state:m,containerProps:v}=G.useEdgeSwipeInput({containerRef:e,edge:i,edgeWidth:o,enabled:c?n.canGo(-1):!1,onSwipeEnd:l});r.useEffect(()=>{f&&(m.phase==="swiping"||m.phase==="tracking")?s(m):m.phase==="idle"&&s(null)},[f,m]);const{containerProps:a}=G.useNativeGestureGuard({containerRef:e,active:f,preventEdgeBack:!0,preventOverscroll:!0,edgeWidth:o}),g=r.useMemo(()=>{if(!u||!e.current)return 0;const d=e.current.clientWidth;if(d===0)return 0;const h=u.displacement.x;if(i==="left"&&h<=0||i==="right"&&h>=0)return 0;const A=Math.abs(h);return Math.min(A/d,1)},[u,e,i]),y=r.useMemo(()=>G.mergeGestureContainerProps(v,a),[v,a]),R=f?m:G.IDLE_SWIPE_INPUT_STATE;return{isEdgeSwiping:f,progress:g,inputState:R,containerProps:y}}const K={easeOutExpo:t=>t===1?1:1-Math.pow(2,-10*t)},de=300;function me(t){const{duration:e=de,easing:n=K.easeOutExpo,onFrame:i,onComplete:o}=t,[c,u]=r.useState(!1),s=r.useRef(null),l=r.useRef(null),f=r.useRef(i),m=r.useRef(o);r.useEffect(()=>{f.current=i,m.current=o},[i,o]);const v=r.useCallback(()=>{s.current!==null&&(cancelAnimationFrame(s.current),s.current=null),l.current=null,u(!1)},[]),a=r.useCallback(()=>{v(),u(!0),l.current=null;const g=y=>{l.current===null&&(l.current=y);const R=y-l.current,d=Math.min(R/e,1),h=n(d),A=d>=1,k={progress:d,easedProgress:h,elapsed:R,isComplete:A};f.current?.(k),A?(s.current=null,l.current=null,u(!1),m.current?.()):s.current=requestAnimationFrame(g)};s.current=requestAnimationFrame(g)},[e,n,v]);return r.useEffect(()=>()=>{s.current!==null&&cancelAnimationFrame(s.current)},[]),{isAnimating:c,start:a,cancel:v}}function he(t,e,n){return t+(e-t)*n}const ve=300,B=t=>t==="horizontal"?"translateX":"translateY",ge=(t,e,n,i)=>t||e===void 0||e<=0||n===void 0||n===i?null:{from:n,to:i},ye=(t,e,n,i,o,c,u)=>t===e?{type:"none"}:i?{type:"none"}:o?{type:"none"}:c?Math.abs(n-t)<=1?{type:"snap",position:t}:u?n>t?{type:"snap",position:t}:{type:"animate",animation:{from:n,to:t}}:{type:"animate",animation:{from:n,to:t}}:{type:"snap",position:t},Re=(t,e,n)=>t===void 0||t===e||t<=0?null:n;function Ae(t){const{elementRef:e,targetPx:n,displacement:i,isOperating:o,axis:c="horizontal",animationDuration:u=ve,containerSize:s,animateOnTargetChange:l=!1,initialPx:f,skipTargetChangeAnimation:m=!1}=t,v=f??n,a=r.useRef(v),g=r.useRef(null),y=r.useRef(n),R=r.useRef(s),d=r.useRef(null),h=r.useRef(!1),A=ge(h.current,s,f,n);A!==null&&(d.current=A,h.current=!0);const k=ye(n,y.current,a.current,o,g.current!==null,l,m);k.type==="animate"?(d.current=k.animation,y.current=n):k.type==="snap"&&(a.current=k.position,y.current=n);const x=Re(s,R.current,n);x!==null&&(a.current=x,R.current=s);const M=r.useCallback(({easedProgress:S})=>{const T=e.current,D=g.current;if(!T||!D)return;const w=he(D.from,D.to,S);a.current=w,T.style.transform=`${B(c)}(${w}px)`},[c,e]),_=r.useCallback(()=>{g.current=null,a.current=n,y.current=n},[n]),{isAnimating:F,start:O,cancel:N}=me({duration:u,easing:K.easeOutExpo,onFrame:M,onComplete:_});return r.useLayoutEffect(()=>{if(o){N(),g.current=null,d.current=null;return}if(d.current){const D=d.current;g.current=D,d.current=null;const w=e.current;w&&(w.style.transform=`${B(c)}(${D.from}px)`),O();return}const S=a.current;Math.abs(S-n)>1?(g.current={from:S,to:n},O()):(a.current=n,y.current=n)},[o,n,O,N]),r.useLayoutEffect(()=>{const S=e.current;if(!S||F||g.current!==null||d.current!==null)return;const T=n+i;a.current=T,S.style.transform=`${B(c)}(${T}px)`},[n,i,c,F,e]),{isAnimating:F,currentPx:a.current,animationDirection:g.current}}function be(t,e){const n=r.useRef(e),i=r.useRef(t),o=r.useRef(!1),u=n.current&&!e,s=t!==i.current,l=e&&s,v=o.current||l||u&&s,a=e?i.current:t;return r.useLayoutEffect(()=>{e?l&&(o.current=!0):(o.current=!1,i.current=t),n.current=e}),{value:a,changedDuringOperation:v,operationJustEnded:u}}const W=-.3;function Ce(t){return Math.max(0,t)}function ke(t,e,n=W){if(e<=0)return 0;const i=Math.max(0,t),o=Math.min(i/e,1),c=n*e,u=Math.abs(n)*o*e;return c+u}function Se(t){const{depth:e,navigationDepth:n,isActive:i,isOperating:o,isAnimating:c}=t;return!!(i||e===n-1&&(o||c))}function Te(t,e){return t===e?"active":t===e-1?"behind":"hidden"}const De=300,Ie=.05,Ee=.1,we={position:"absolute",inset:0,width:"100%",height:"100%"},xe=(t,e)=>t.phase==="idle"?0:e==="horizontal"?t.displacement.x:t.displacement.y,Me="-5px 0 15px rgba(0, 0, 0, 0.1)",H=r.memo(({id:t,depth:e,navigationDepth:n,isActive:i,operationState:o,containerSize:c,axis:u="horizontal",behindOffset:s=W,animationDuration:l=De,animateOnMount:f=!1,showShadow:m=!0,displayMode:v="overlay",showDimming:a=!0,children:g})=>{const y=r.useRef(null),R=xe(o,u),d=o.phase==="operating",h=Te(e,n),{value:A,changedDuringOperation:k}=be(h,R>0),x=r.useMemo(()=>{switch(A){case"active":return 0;case"behind":return s*c;case"hidden":return c}},[A,s,c]),M=r.useMemo(()=>{if(R<=0)return 0;switch(A){case"active":return Ce(R);case"behind":{const I=ke(R,c,s),P=s*c;return I-P}case"hidden":return 0}},[A,R,c,s]),_=r.useMemo(()=>{if(f&&h==="active"&&e>0)return c},[f,h,e,c]),{isAnimating:F}=Ae({elementRef:y,targetPx:x,displacement:M,isOperating:d,axis:u,animationDuration:l,containerSize:c,animateOnTargetChange:!0,initialPx:_,skipTargetChangeAnimation:k}),O=Se({depth:e,navigationDepth:n,isActive:i,isOperating:d,isAnimating:F}),N=r.useMemo(()=>c<=0||R<=0?0:Math.min(R/c,1),[R,c]),S=r.useMemo(()=>{if(v!=="stack")return 1;const I=n-e;if(h==="active")return 1;if(h==="behind"){const P=1-I*Ie;return P+N*(1-P)}return 1},[v,h,e,n,N]),T=r.useMemo(()=>!a||h!=="behind"?0:Ee*(1-N),[a,h,N]);r.useLayoutEffect(()=>{const I=y.current;I&&(I.style.visibility=O?"visible":"hidden")},[O]),r.useLayoutEffect(()=>{const I=y.current;if(!I||v!=="stack")return;const P=I.style.transform;if(P.includes("translateX")){const $=P.match(/translateX\([^)]+\)/);$&&(I.style.transform=`${$[0]} scale(${S})`)}else I.style.transform=`scale(${S})`},[S,v]);const D=m?e>0&&h==="active":!1,w=r.useMemo(()=>({...we,pointerEvents:i?"auto":"none",willChange:"transform",zIndex:e,visibility:O?"visible":"hidden",boxShadow:D?Me:void 0}),[i,e,O,D]),L=r.useMemo(()=>T<=0?null:{position:"absolute",inset:0,backgroundColor:`rgba(0, 0, 0, ${T})`,pointerEvents:"none",zIndex:1},[T]);return E.jsxs("div",{ref:y,"data-stack-content":t,"data-depth":e,"data-active":i?"true":"false","data-role":h,style:w,children:[g,L!=null?E.jsx("div",{style:L,"data-dimming-overlay":!0}):null]})}),Oe=300;function Pe(t,e,n){const{stack:i,depth:o}=e,c=[o];o>0&&c.push(o-1);const u=[];for(const s of c){const l=i[s],f=t.find(m=>m.id===l);f&&u.push({panel:f,depth:s,isExiting:!1})}if(n!=null&&!u.some(l=>l.panel.id===n)){const l=t.find(f=>f.id===n);l&&u.push({panel:l,depth:o+1,isExiting:!0})}return u.sort((s,l)=>s.depth-l.depth)}const Ne=r.memo(({panels:t,navigationState:e,operationState:n,containerSize:i,getCachedContent:o,behindOffset:c,animateOnMount:u=!1,animationDuration:s=Oe,showShadow:l,displayMode:f,showDimming:m})=>{const[v,a]=r.useState(null),g=r.useRef(e.depth),y=r.useRef(e.stack);r.useLayoutEffect(()=>{const h=g.current,A=y.current,{depth:k,stack:x}=e;if(g.current=k,y.current=x,k<h){const M=A[h];if(M!=null){a(M);const _=setTimeout(()=>{a(null)},s);return()=>clearTimeout(_)}}},[e.depth,e.stack,s]);const R=r.useMemo(()=>Pe(t,e,v),[t,e,v]),d=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]);return E.jsx("div",{style:d,"data-swipe-stack-container":!0,children:R.map(({panel:h,depth:A,isExiting:k})=>{const x=A===e.depth&&!k,M=o?.(h.id)??h.content;return E.jsx(H,{id:h.id,depth:A,navigationDepth:e.depth,isActive:x,operationState:n,containerSize:i,behindOffset:c,animateOnMount:u,animationDuration:s,showShadow:l,displayMode:f,showDimming:m,children:M},h.id)})})});exports.StackContent=q;exports.SwipeStackContent=H;exports.SwipeStackOutlet=Ne;exports.useStackNavigation=fe;exports.useStackSwipeInput=pe;
 //# sourceMappingURL=stack.cjs.map