react-abohook-fullpage 1.1.2 → 1.1.3

package/dist/index.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");var N={exports:{}},k={};var q;function oe(){if(q)return k;q=1;var r=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function i(f,n,a){var l=null;if(a!==void 0&&(l=""+a),n.key!==void 0&&(l=""+n.key),"key"in n){a={};for(var p in n)p!=="key"&&(a[p]=n[p])}else a=n;return n=a.ref,{$$typeof:r,type:f,key:l,ref:n!==void 0?n:null,props:a}}return k.Fragment=o,k.jsx=i,k.jsxs=i,k}var A={};var J;function ae(){return J||(J=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case m:return"Fragment";case S:return"Profiler";case x:return"StrictMode";case Z:return"Suspense";case Q:return"SuspenseList";case ee:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case R:return"Portal";case j:return e.displayName||"Context";case O:return(e._context.displayName||"Context")+".Consumer";case v:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case L:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function o(e){return""+e}function i(e){try{o(e);var t=!1}catch{t=!0}if(t){t=console;var s=t.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),o(e)}}function f(e){if(e===m)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function n(){var e=Y.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function l(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function p(e,t){function s(){U||(U=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}function h(){var e=r(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function g(e,t,s,u,F,I){var c=s.ref;return e={$$typeof:w,type:e,key:t,props:s,_owner:u},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,t,s,u,F,I){var c=t.children;if(c!==void 0)if(u)if(re(c)){for(u=0;u<c.length;u++)y(c[u]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(c);if(M.call(t,"key")){c=r(e);var P=Object.keys(t).filter(function(ne){return ne!=="key"});u=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",V[c+u]||(P=0<P.length?"{"+P.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");var C={exports:{}},O={};var H;function oe(){if(H)return O;H=1;var r=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(d,s,o){var a=null;if(o!==void 0&&(a=""+o),s.key!==void 0&&(a=""+s.key),"key"in s){o={};for(var m in s)m!=="key"&&(o[m]=s[m])}else o=s;return s=o.ref,{$$typeof:r,type:d,key:a,ref:s!==void 0?s:null,props:o}}return O.Fragment=n,O.jsx=l,O.jsxs=l,O}var j={};var X;function ae(){return X||(X=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case v:return"Profiler";case h:return"StrictMode";case N:return"Suspense";case E:return"SuspenseList";case ee:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case T:return e.displayName||"Context";case y:return(e._context.displayName||"Context")+".Consumer";case F:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case Y:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function n(e){return""+e}function l(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var i=t.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),n(e)}}function d(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=I.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function a(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function m(e,t){function i(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function g(){var e=r(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,t,i,c,L,D){var f=i.ref;return e={$$typeof:x,type:e,key:t,props:i,_owner:c},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:g}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,t,i,c,L,D){var f=t.children;if(f!==void 0)if(c)if(re(f)){for(c=0;c<f.length;c++)S(f[c]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(f);if(W.call(t,"key")){f=r(e);var A=Object.keys(t).filter(function(ne){return ne!=="key"});c=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",J[f+c]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,u,c,P,c),V[c+u]=!0)}if(c=null,s!==void 0&&(i(s),c=""+s),l(t)&&(i(t.key),c=""+t.key),"key"in t){s={};for(var $ in t)$!=="key"&&(s[$]=t[$])}else s=t;return c&&p(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),g(e,c,s,n(),F,I)}function y(e){b(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===L&&(e._payload.status==="fulfilled"?b(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function b(e){return typeof e=="object"&&e!==null&&e.$$typeof===w}var _=d,w=Symbol.for("react.transitional.element"),R=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),j=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),Y=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,re=Array.isArray,C=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var U,W={},z=_.react_stack_bottom_frame.bind(_,a)(),G=C(f(a)),V={};A.Fragment=m,A.jsx=function(e,t,s){var u=1e4>Y.recentlyCreatedOwnerStacks++;return T(e,t,s,!1,u?Error("react-stack-top-frame"):z,u?C(f(e)):G)},A.jsxs=function(e,t,s){var u=1e4>Y.recentlyCreatedOwnerStacks++;return T(e,t,s,!0,u?Error("react-stack-top-frame"):z,u?C(f(e)):G)}})()),A}var H;function se(){return H||(H=1,process.env.NODE_ENV==="production"?N.exports=oe():N.exports=ae()),N.exports}var E=se();const ie=50,le=(r,o,i,f=700)=>{const[n,a]=d.useState(0),[l,p]=d.useState(!0),h=d.useRef(!1),[g,T]=d.useState(0),y=o&&n+1===r,b=d.useRef(0),_=d.useRef(0),w=d.useRef(!1),R=(m,x)=>{if(m<0||m>=r||h.current)return;const S=x===2;h.current=!0,T(n),a(m),y?m===3||n===r-1?a(S?g:m):a(g):a(m),o&&r===m+1?p(!1):p(!0),setTimeout(()=>{h.current=!1},f)};return d.useEffect(()=>{i&&i(n);const m=v=>{if(h.current)return v.preventDefault();v.deltaY>0?R(n+1,2):R(n-1,2)},x=v=>{h.current||(v.key==="ArrowDown"&&R(n+1,2),v.key==="ArrowUp"&&R(n-1,2))},S=v=>{b.current=v.touches[0].clientY,w.current=!1},O=v=>{_.current=v.touches[0].clientY,w.current=!0},j=()=>{if(!w.current)return;const v=b.current-_.current;Math.abs(v)>=ie&&(v>0?R(n+1,2):R(n-1,2))};return window.addEventListener("wheel",m,{passive:!1}),window.addEventListener("keydown",x),window.addEventListener("touchstart",S,{passive:!0}),window.addEventListener("touchmove",O,{passive:!0}),window.addEventListener("touchend",j),()=>{window.removeEventListener("wheel",m),window.removeEventListener("keydown",x),window.removeEventListener("touchstart",S),window.removeEventListener("touchmove",O),window.removeEventListener("touchend",j)}},[n,r,o,i]),{active:n,goToSection:R,isHiddenFooter:l}},ue=(r=!1)=>{d.useEffect(()=>{if(r)return;const o=i=>i.preventDefault();return window.addEventListener("contextmenu",o),()=>{window.removeEventListener("contextmenu",o)}},[r])};function ce({children:r,index:o,active:i,isHiddenFooter:f}){return E.jsx("section",{style:{position:"relative",width:"100%",height:"100vh",overflow:"hidden",filter:o===i||f?"blur(0px)":"blur(6px)"},children:r})}const fe=d.memo(ce);function de({sectionsLen:r,active:o,goToSection:i,direction:f="right"}){const n=f==="bottom";return E.jsx("div",{style:{position:"fixed",right:f==="right"?24:f==="bottom"?"50%":void 0,left:f==="left"?24:void 0,top:n?void 0:"50%",bottom:n?"5%":void 0,transform:"translateY(-50%)",display:"flex",flexDirection:n?"row":"column",gap:"16px",zIndex:50},children:Array.from({length:r}).map((a,l)=>E.jsx("button",{disabled:l===o,"aria-label":"navigation dot",onClick:()=>i(l,1),style:{width:"16px",height:"16px",display:"flex",alignItems:"center",justifyContent:"center",padding:0,border:"none",background:"none",cursor:"pointer",userSelect:"none"},children:E.jsx("span",{style:{width:"10px",height:"10px",borderRadius:"50%",backgroundColor:o===l?"white":"rgba(255,255,255,0.4)",transform:o===l?"scale(1.25)":"scale(1)",transition:"all 0.3s ease"}})},l))})}const me=d.memo(de);function ve({children:r}){return E.jsx("div",{style:{position:"relative",width:"100%",height:"100vh",overflow:"hidden",background:"transparent"},children:r})}const X=d.memo(ve);X.__FULLPAGE_SECTION__=!0;function Ee({children:r,styles:o,height:i="30%",backgroundColor:f="yellow"}){return E.jsx("div",{style:{position:"absolute",width:"100%",height:i,backgroundColor:f,bottom:0,zIndex:50,...o},children:r},"fullpage-footer")}const B=d.memo(Ee);B.__FULLPAGE_FOOTER__=!0;function _e(r){process.env.NODE_ENV!=="production"&&r.forEach(o=>{if(d.isValidElement(o)&&!o.type.__FULLPAGE_SECTION__)throw console.warn("[FullPage] You must wrap content inside <FullPage.Section />"),new Error("[FullPage] You must wrap content inside <FullPage.Section />")})}function pe({children:r,isHiddenFooter:o}){const i=o?2500:600;return E.jsx("div",{style:{position:"absolute",left:0,bottom:0,width:"100%",height:"100vh",zIndex:50,transform:o?"translateY(100%)":"translateY(0)",transition:`transform ${i}ms cubic-bezier(0.22,1,0.36,1)`,willChange:"transform",pointerEvents:o?"none":"auto"},children:r})}const he=d.memo(pe);function D({children:r,onChange:o,directionDots:i="right",enableContextMenu:f=!1,duration:n=700}){const a=d.Children.toArray(r),l=a.filter(_=>_.type.__FULLPAGE_SECTION__),p=a.find(_=>_.type.__FULLPAGE_FOOTER__);ue(f),d.useEffect(()=>(_e(l),()=>{}),[l]);const h=!!p,g=l.length+(h?1:0),{active:T,goToSection:y,isHiddenFooter:b}=le(g,h,o,n);return E.jsxs(E.Fragment,{children:[E.jsxs("div",{style:{position:"relative",height:"100vh",width:"100%",overflow:"hidden"},children:[E.jsx("div",{style:{height:`${l.length*100}vh`,transform:b?`translateY(-${T*100}vh)`:`translateY(-${l.length-100}vh)`,transition:"transform 700ms cubic-bezier(0.22,1,0.36,1)"},children:l.map((_,w)=>E.jsx(fe,{index:w,active:T,isHiddenFooter:b,children:_},w))}),p&&E.jsx(he,{isHiddenFooter:b,children:p})]}),E.jsx(me,{sectionsLen:g,active:T,goToSection:y,direction:i})]})}D.Section=X;D.Footer=B;exports.FullPage=D;
+  <%s key={someKey} {...props} />`,c,f,A,f),J[f+c]=!0)}if(f=null,i!==void 0&&(l(i),f=""+i),a(t)&&(l(t.key),f=""+t.key),"key"in t){i={};for(var M in t)M!=="key"&&(i[M]=t[M])}else i=t;return f&&m(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,f,i,s(),L,D)}function S(e){k(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===Y&&(e._payload.status==="fulfilled"?k(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function k(e){return typeof e=="object"&&e!==null&&e.$$typeof===x}var R=u,x=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),T=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),N=Symbol.for("react.suspense"),E=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),I=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,re=Array.isArray,$=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var z,G={},V=R.react_stack_bottom_frame.bind(R,o)(),q=$(d(o)),J={};j.Fragment=p,j.jsx=function(e,t,i){var c=1e4>I.recentlyCreatedOwnerStacks++;return w(e,t,i,!1,c?Error("react-stack-top-frame"):V,c?$(d(e)):q)},j.jsxs=function(e,t,i){var c=1e4>I.recentlyCreatedOwnerStacks++;return w(e,t,i,!0,c?Error("react-stack-top-frame"):V,c?$(d(e)):q)}})()),j}var B;function se(){return B||(B=1,process.env.NODE_ENV==="production"?C.exports=oe():C.exports=ae()),C.exports}var _=se();const ie=50,le=(r,n,l,d=700,s)=>{const[o,a]=u.useState(0),[m,g]=u.useState(!0),b=u.useRef(!1),[w,S]=u.useState(0),k=n&&o+1===r,R=u.useRef(0),x=u.useRef(0),P=u.useRef(!1),p=u.useRef(null),h=(v,y)=>{if(v<0||v>=r||b.current)return;const T=y===2;b.current=!0,S(o),a(v),k?v===3||o===r-1?a(T?w:v):a(w):a(v),n&&r===v+1?g(!1):g(!0),setTimeout(()=>{b.current=!1},d)};return u.useEffect(()=>{l&&l(o);const v=E=>{if(b.current)return E.preventDefault();E.deltaY>0?h(o+1,2):h(o-1,2)},y=E=>{b.current||(E.key==="ArrowDown"&&h(o+1,2),E.key==="ArrowUp"&&h(o-1,2))},T=E=>{R.current=E.touches[0].clientY,P.current=!1},F=E=>{x.current=E.touches[0].clientY,P.current=!0},N=()=>{if(!P.current)return;const E=R.current-x.current;Math.abs(E)>=ie&&(E>0?h(o+1,2):h(o-1,2))};return window.addEventListener("wheel",v,{passive:!1}),window.addEventListener("keydown",y),window.addEventListener("touchstart",T,{passive:!0}),window.addEventListener("touchmove",F,{passive:!0}),window.addEventListener("touchend",N),()=>{window.removeEventListener("wheel",v),window.removeEventListener("keydown",y),window.removeEventListener("touchstart",T),window.removeEventListener("touchmove",F),window.removeEventListener("touchend",N)}},[o,r,n,l]),u.useEffect(()=>{if(!s)return;const v=y=>{if(b.current&&m)return;const T=y.target;p.current&&!p.current.contains(T)&&!m&&(a(w),g(!0))};return setTimeout(()=>{document.addEventListener("click",v)},300),()=>{document.removeEventListener("click",v)}},[w,m,s]),{active:o,goToSection:h,isHiddenFooter:m,footerRef:p}},ue=(r=!1)=>{u.useEffect(()=>{if(r)return;const n=l=>l.preventDefault();return window.addEventListener("contextmenu",n),()=>{window.removeEventListener("contextmenu",n)}},[r])};function ce({children:r,index:n,active:l,isHiddenFooter:d}){return _.jsx("section",{style:{position:"relative",width:"100%",height:"100vh",overflow:"hidden",filter:n===l||d?"blur(0px)":"blur(6px)"},children:r})}const fe=u.memo(ce);function de({sectionsLen:r,active:n,goToSection:l,direction:d="right"}){const s=d==="bottom";return _.jsx("div",{style:{position:"fixed",right:d==="right"?24:d==="bottom"?"50%":void 0,left:d==="left"?24:void 0,top:s?void 0:"50%",bottom:s?"5%":void 0,transform:"translateY(-50%)",display:"flex",flexDirection:s?"row":"column",gap:"16px",zIndex:50},children:Array.from({length:r}).map((o,a)=>_.jsx("button",{disabled:a===n,"aria-label":"navigation dot",onClick:()=>l(a,1),style:{width:"16px",height:"16px",display:"flex",alignItems:"center",justifyContent:"center",padding:0,border:"none",background:"none",cursor:"pointer",userSelect:"none"},children:_.jsx("span",{style:{width:"10px",height:"10px",borderRadius:"50%",backgroundColor:n===a?"white":"rgba(255,255,255,0.4)",transform:n===a?"scale(1.25)":"scale(1)",transition:"all 0.3s ease"}})},a))})}const me=u.memo(de);function ve({children:r}){return _.jsx("div",{style:{position:"relative",width:"100%",height:"100vh",overflow:"hidden",background:"transparent"},children:r})}const Z=u.memo(ve);Z.__FULLPAGE_SECTION__=!0;function Ee({children:r,styles:n,height:l="30%",backgroundColor:d="yellow",footerRef:s}){return _.jsx("div",{ref:s,style:{position:"absolute",width:"100%",height:l,backgroundColor:d,bottom:0,zIndex:50,...n},children:r},"fullpage-footer")}const Q=u.memo(Ee);Q.__FULLPAGE_FOOTER__=!0;function _e(r){process.env.NODE_ENV!=="production"&&r.forEach(n=>{if(u.isValidElement(n)&&!n.type.__FULLPAGE_SECTION__)throw console.warn("[FullPage] You must wrap content inside <FullPage.Section />"),new Error("[FullPage] You must wrap content inside <FullPage.Section />")})}function pe({children:r,isHiddenFooter:n}){const l=n?2500:600;return _.jsx("div",{style:{position:"absolute",left:0,bottom:0,width:"100%",height:"100vh",zIndex:50,transform:n?"translateY(100%)":"translateY(0)",transition:`transform ${l}ms cubic-bezier(0.22,1,0.36,1)`,willChange:"transform",pointerEvents:n?"none":"auto"},children:r})}const he=u.memo(pe);function U({children:r,onChange:n,directionDots:l="right",enableContextMenu:d=!1,duration:s=700,closeOutside:o=!1}){const a=u.Children.toArray(r),m=a.filter(p=>p.type.__FULLPAGE_SECTION__),g=a.find(p=>p.type.__FULLPAGE_FOOTER__);ue(d),u.useEffect(()=>(_e(m),()=>{}),[m]);const b=!!g,w=m.length+(b?1:0),{active:S,goToSection:k,isHiddenFooter:R,footerRef:x}=le(w,b,n,s,o),P=g?u.cloneElement(g,{footerRef:x}):null;return _.jsxs(_.Fragment,{children:[_.jsxs("div",{style:{position:"relative",height:"100vh",width:"100%",overflow:"hidden"},children:[_.jsx("div",{style:{height:`${m.length*100}vh`,transform:R?`translateY(-${S*100}vh)`:`translateY(-${m.length-100}vh)`,transition:"transform 700ms cubic-bezier(0.22,1,0.36,1)"},children:m.map((p,h)=>_.jsx(fe,{index:h,active:S,isHiddenFooter:R,children:p},h))}),g&&_.jsx(he,{isHiddenFooter:R,children:P})]}),_.jsx(me,{sectionsLen:w,active:S,goToSection:k,direction:l})]})}U.Section=Z;U.Footer=Q;exports.FullPage=U;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 
 declare type DirectionDotsType = "left" | "right" | "bottom";
 
-export declare function FullPage({ children, onChange, directionDots, enableContextMenu, duration, }: FullPageProps): JSX_2.Element;
+export declare function FullPage({ children, onChange, directionDots, enableContextMenu, duration, closeOutside, }: FullPageProps): JSX_2.Element;
 
 export declare namespace FullPage {
     var Section: default_2.FC<FullPageSectionProps>;
@@ -15,12 +15,14 @@ declare interface FullPageFooterProps {
     styles?: React.CSSProperties;
     height?: number | string;
     backgroundColor?: string;
+    footerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 declare interface FullPageProps {
     children: React.ReactNode;
     onChange?: (currentSection: number) => void;
     directionDots?: DirectionDotsType;
+    closeOutside?: boolean;
     enableContextMenu?: boolean;
     duration: number;
 }

package/dist/index.es.js

@@ -1,46 +1,46 @@
-import U, { useEffect as W, useState as M, useRef as F, memo as A } from "react";
-var L = { exports: {} }, P = {};
-var X;
+import I, { useEffect as $, useState as G, useRef as A, memo as N } from "react";
+var Y = { exports: {} }, O = {};
+var Z;
 function le() {
-  if (X) return P;
-  X = 1;
-  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), o = /* @__PURE__ */ Symbol.for("react.fragment");
-  function i(f, n, a) {
-    var l = null;
-    if (a !== void 0 && (l = "" + a), n.key !== void 0 && (l = "" + n.key), "key" in n) {
-      a = {};
-      for (var _ in n)
-        _ !== "key" && (a[_] = n[_]);
-    } else a = n;
-    return n = a.ref, {
+  if (Z) return O;
+  Z = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
+  function l(f, s, o) {
+    var a = null;
+    if (o !== void 0 && (a = "" + o), s.key !== void 0 && (a = "" + s.key), "key" in s) {
+      o = {};
+      for (var d in s)
+        d !== "key" && (o[d] = s[d]);
+    } else o = s;
+    return s = o.ref, {
       $$typeof: r,
       type: f,
-      key: l,
-      ref: n !== void 0 ? n : null,
-      props: a
+      key: a,
+      ref: s !== void 0 ? s : null,
+      props: o
     };
   }
-  return P.Fragment = o, P.jsx = i, P.jsxs = i, P;
+  return O.Fragment = n, O.jsx = l, O.jsxs = l, O;
 }
-var k = {};
-var B;
+var j = {};
+var Q;
 function ue() {
-  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && (function() {
     function r(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === ae ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case d:
+        case _:
           return "Fragment";
-        case g:
+        case m:
           return "Profiler";
-        case y:
+        case p:
           return "StrictMode";
-        case te:
+        case L:
           return "Suspense";
-        case re:
+        case v:
           return "SuspenseList";
         case oe:
           return "Activity";
@@ -49,18 +49,18 @@ function ue() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case w:
+          case S:
             return "Portal";
-          case j:
+          case g:
             return e.displayName || "Context";
-          case O:
+          case x:
             return (e._context.displayName || "Context") + ".Consumer";
-          case v:
+          case F:
             var t = e.render;
             return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case ne:
             return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
-          case Y:
+          case D:
             t = e._payload, e = e._init;
             try {
               return r(e(t));
@@ -69,29 +69,29 @@ function ue() {
         }
       return null;
     }
-    function o(e) {
+    function n(e) {
       return "" + e;
     }
-    function i(e) {
+    function l(e) {
       try {
-        o(e);
+        n(e);
         var t = !1;
       } catch {
         t = !0;
       }
       if (t) {
         t = console;
-        var s = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return s.call(
+        var i = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
           t,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           u
-        ), o(e);
+        ), n(e);
       }
     }
     function f(e) {
-      if (e === d) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === Y)
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === D)
         return "<...>";
       try {
         var t = r(e);
@@ -100,49 +100,49 @@ function ue() {
         return "<...>";
       }
     }
-    function n() {
-      var e = C.A;
+    function s() {
+      var e = M.A;
       return e === null ? null : e.getOwner();
     }
-    function a() {
+    function o() {
       return Error("react-stack-top-frame");
     }
-    function l(e) {
-      if (z.call(e, "key")) {
+    function a(e) {
+      if (V.call(e, "key")) {
         var t = Object.getOwnPropertyDescriptor(e, "key").get;
         if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function _(e, t) {
-      function s() {
-        G || (G = !0, console.error(
+    function d(e, t) {
+      function i() {
+        J || (J = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           t
         ));
       }
-      s.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: s,
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
         configurable: !0
       });
     }
-    function p() {
+    function R() {
       var e = r(this.type);
-      return V[e] || (V[e] = !0, console.error(
+      return q[e] || (q[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function R(e, t, s, u, N, $) {
-      var c = s.ref;
+    function h(e, t, i, u, C, W) {
+      var c = i.ref;
       return e = {
-        $$typeof: b,
+        $$typeof: y,
         type: e,
         key: t,
-        props: s,
+        props: i,
         _owner: u
       }, (c !== void 0 ? c : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: p
+        get: R
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,33 +157,33 @@ function ue() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: N
+        value: C
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: $
+        value: W
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function T(e, t, s, u, N, $) {
+    function b(e, t, i, u, C, W) {
       var c = t.children;
       if (c !== void 0)
         if (u)
           if (se(c)) {
             for (u = 0; u < c.length; u++)
-              x(c[u]);
+              T(c[u]);
             Object.freeze && Object.freeze(c);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else x(c);
-      if (z.call(t, "key")) {
+        else T(c);
+      if (V.call(t, "key")) {
         c = r(e);
-        var S = Object.keys(t).filter(function(ie) {
+        var P = Object.keys(t).filter(function(ie) {
           return ie !== "key";
         });
-        u = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", H[c + u] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", B[c + u] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -192,117 +192,129 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           u,
           c,
-          S,
+          P,
           c
-        ), H[c + u] = !0);
+        ), B[c + u] = !0);
       }
-      if (c = null, s !== void 0 && (i(s), c = "" + s), l(t) && (i(t.key), c = "" + t.key), "key" in t) {
-        s = {};
-        for (var D in t)
-          D !== "key" && (s[D] = t[D]);
-      } else s = t;
-      return c && _(
-        s,
+      if (c = null, i !== void 0 && (l(i), c = "" + i), a(t) && (l(t.key), c = "" + t.key), "key" in t) {
+        i = {};
+        for (var z in t)
+          z !== "key" && (i[z] = t[z]);
+      } else i = t;
+      return c && d(
+        i,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), R(
+      ), h(
         e,
         c,
-        s,
-        n(),
-        N,
-        $
+        i,
+        s(),
+        C,
+        W
       );
     }
-    function x(e) {
-      h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === Y && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function T(e) {
+      k(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === D && (e._payload.status === "fulfilled" ? k(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function h(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === b;
+    function k(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
     }
-    var E = U, b = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), y = /* @__PURE__ */ Symbol.for("react.strict_mode"), g = /* @__PURE__ */ Symbol.for("react.profiler"), O = /* @__PURE__ */ Symbol.for("react.consumer"), j = /* @__PURE__ */ Symbol.for("react.context"), v = /* @__PURE__ */ Symbol.for("react.forward_ref"), te = /* @__PURE__ */ Symbol.for("react.suspense"), re = /* @__PURE__ */ Symbol.for("react.suspense_list"), ne = /* @__PURE__ */ Symbol.for("react.memo"), Y = /* @__PURE__ */ Symbol.for("react.lazy"), oe = /* @__PURE__ */ Symbol.for("react.activity"), ae = /* @__PURE__ */ Symbol.for("react.client.reference"), C = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, z = Object.prototype.hasOwnProperty, se = Array.isArray, I = console.createTask ? console.createTask : function() {
+    var w = I, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), S = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), p = /* @__PURE__ */ Symbol.for("react.strict_mode"), m = /* @__PURE__ */ Symbol.for("react.profiler"), x = /* @__PURE__ */ Symbol.for("react.consumer"), g = /* @__PURE__ */ Symbol.for("react.context"), F = /* @__PURE__ */ Symbol.for("react.forward_ref"), L = /* @__PURE__ */ Symbol.for("react.suspense"), v = /* @__PURE__ */ Symbol.for("react.suspense_list"), ne = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), oe = /* @__PURE__ */ Symbol.for("react.activity"), ae = /* @__PURE__ */ Symbol.for("react.client.reference"), M = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, se = Array.isArray, U = console.createTask ? console.createTask : function() {
       return null;
     };
-    E = {
+    w = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var G, V = {}, J = E.react_stack_bottom_frame.bind(
-      E,
-      a
-    )(), q = I(f(a)), H = {};
-    k.Fragment = d, k.jsx = function(e, t, s) {
-      var u = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return T(
+    var J, q = {}, H = w.react_stack_bottom_frame.bind(
+      w,
+      o
+    )(), X = U(f(o)), B = {};
+    j.Fragment = _, j.jsx = function(e, t, i) {
+      var u = 1e4 > M.recentlyCreatedOwnerStacks++;
+      return b(
         e,
         t,
-        s,
+        i,
         !1,
-        u ? Error("react-stack-top-frame") : J,
-        u ? I(f(e)) : q
+        u ? Error("react-stack-top-frame") : H,
+        u ? U(f(e)) : X
       );
-    }, k.jsxs = function(e, t, s) {
-      var u = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return T(
+    }, j.jsxs = function(e, t, i) {
+      var u = 1e4 > M.recentlyCreatedOwnerStacks++;
+      return b(
         e,
         t,
-        s,
+        i,
         !0,
-        u ? Error("react-stack-top-frame") : J,
-        u ? I(f(e)) : q
+        u ? Error("react-stack-top-frame") : H,
+        u ? U(f(e)) : X
       );
     };
-  })()), k;
+  })()), j;
 }
-var Z;
+var K;
 function ce() {
-  return Z || (Z = 1, process.env.NODE_ENV === "production" ? L.exports = le() : L.exports = ue()), L.exports;
+  return K || (K = 1, process.env.NODE_ENV === "production" ? Y.exports = le() : Y.exports = ue()), Y.exports;
 }
-var m = ce();
-const fe = 50, de = (r, o, i, f = 700) => {
-  const [n, a] = M(0), [l, _] = M(!0), p = F(!1), [R, T] = M(0), x = o && n + 1 === r, h = F(0), E = F(0), b = F(!1), w = (d, y) => {
-    if (d < 0 || d >= r || p.current) return;
-    const g = y === 2;
-    p.current = !0, T(n), a(d), x ? d === 3 || n === r - 1 ? a(g ? R : d) : a(R) : a(d), o && r === d + 1 ? _(!1) : _(!0), setTimeout(() => {
-      p.current = !1;
+var E = ce();
+const fe = 50, de = (r, n, l, f = 700, s) => {
+  const [o, a] = G(0), [d, R] = G(!0), h = A(!1), [b, T] = G(0), k = n && o + 1 === r, w = A(0), y = A(0), S = A(!1), _ = A(null), p = (m, x) => {
+    if (m < 0 || m >= r || h.current) return;
+    const g = x === 2;
+    h.current = !0, T(o), a(m), k ? m === 3 || o === r - 1 ? a(g ? b : m) : a(b) : a(m), n && r === m + 1 ? R(!1) : R(!0), setTimeout(() => {
+      h.current = !1;
     }, f);
   };
-  return W(() => {
-    i && i(n);
-    const d = (v) => {
-      if (p.current) return v.preventDefault();
-      v.deltaY > 0 ? w(n + 1, 2) : w(n - 1, 2);
-    }, y = (v) => {
-      p.current || (v.key === "ArrowDown" && w(n + 1, 2), v.key === "ArrowUp" && w(n - 1, 2));
+  return $(() => {
+    l && l(o);
+    const m = (v) => {
+      if (h.current) return v.preventDefault();
+      v.deltaY > 0 ? p(o + 1, 2) : p(o - 1, 2);
+    }, x = (v) => {
+      h.current || (v.key === "ArrowDown" && p(o + 1, 2), v.key === "ArrowUp" && p(o - 1, 2));
     }, g = (v) => {
-      h.current = v.touches[0].clientY, b.current = !1;
-    }, O = (v) => {
-      E.current = v.touches[0].clientY, b.current = !0;
-    }, j = () => {
-      if (!b.current) return;
-      const v = h.current - E.current;
-      Math.abs(v) >= fe && (v > 0 ? w(n + 1, 2) : w(n - 1, 2));
+      w.current = v.touches[0].clientY, S.current = !1;
+    }, F = (v) => {
+      y.current = v.touches[0].clientY, S.current = !0;
+    }, L = () => {
+      if (!S.current) return;
+      const v = w.current - y.current;
+      Math.abs(v) >= fe && (v > 0 ? p(o + 1, 2) : p(o - 1, 2));
     };
-    return window.addEventListener("wheel", d, { passive: !1 }), window.addEventListener("keydown", y), window.addEventListener("touchstart", g, { passive: !0 }), window.addEventListener("touchmove", O, { passive: !0 }), window.addEventListener("touchend", j), () => {
-      window.removeEventListener("wheel", d), window.removeEventListener("keydown", y), window.removeEventListener("touchstart", g), window.removeEventListener("touchmove", O), window.removeEventListener("touchend", j);
+    return window.addEventListener("wheel", m, { passive: !1 }), window.addEventListener("keydown", x), window.addEventListener("touchstart", g, { passive: !0 }), window.addEventListener("touchmove", F, { passive: !0 }), window.addEventListener("touchend", L), () => {
+      window.removeEventListener("wheel", m), window.removeEventListener("keydown", x), window.removeEventListener("touchstart", g), window.removeEventListener("touchmove", F), window.removeEventListener("touchend", L);
     };
-  }, [n, r, o, i]), { active: n, goToSection: w, isHiddenFooter: l };
-}, ve = (r = !1) => {
-  W(() => {
+  }, [o, r, n, l]), $(() => {
+    if (!s) return;
+    const m = (x) => {
+      if (h.current && d) return;
+      const g = x.target;
+      _.current && !_.current.contains(g) && !d && (a(b), R(!0));
+    };
+    return setTimeout(() => {
+      document.addEventListener("click", m);
+    }, 300), () => {
+      document.removeEventListener("click", m);
+    };
+  }, [b, d, s]), { active: o, goToSection: p, isHiddenFooter: d, footerRef: _ };
+}, me = (r = !1) => {
+  $(() => {
     if (r) return;
-    const o = (i) => i.preventDefault();
-    return window.addEventListener("contextmenu", o), () => {
-      window.removeEventListener("contextmenu", o);
+    const n = (l) => l.preventDefault();
+    return window.addEventListener("contextmenu", n), () => {
+      window.removeEventListener("contextmenu", n);
     };
   }, [r]);
 };
-function me({
+function ve({
   children: r,
-  index: o,
-  active: i,
+  index: n,
+  active: l,
   isHiddenFooter: f
 }) {
-  return /* @__PURE__ */ m.jsx(
+  return /* @__PURE__ */ E.jsx(
     "section",
     {
       style: {
@@ -310,41 +322,41 @@ function me({
         width: "100%",
         height: "100vh",
         overflow: "hidden",
-        filter: o === i || f ? "blur(0px)" : "blur(6px)"
+        filter: n === l || f ? "blur(0px)" : "blur(6px)"
       },
       children: r
     }
   );
 }
-const Ee = A(me);
+const Ee = N(ve);
 function _e({
   sectionsLen: r,
-  active: o,
-  goToSection: i,
+  active: n,
+  goToSection: l,
   direction: f = "right"
 }) {
-  const n = f === "bottom";
-  return /* @__PURE__ */ m.jsx(
+  const s = f === "bottom";
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       style: {
         position: "fixed",
         right: f === "right" ? 24 : f === "bottom" ? "50%" : void 0,
         left: f === "left" ? 24 : void 0,
-        top: n ? void 0 : "50%",
-        bottom: n ? "5%" : void 0,
+        top: s ? void 0 : "50%",
+        bottom: s ? "5%" : void 0,
         transform: "translateY(-50%)",
         display: "flex",
-        flexDirection: n ? "row" : "column",
+        flexDirection: s ? "row" : "column",
         gap: "16px",
         zIndex: 50
       },
-      children: Array.from({ length: r }).map((a, l) => /* @__PURE__ */ m.jsx(
+      children: Array.from({ length: r }).map((o, a) => /* @__PURE__ */ E.jsx(
         "button",
         {
-          disabled: l === o,
+          disabled: a === n,
           "aria-label": "navigation dot",
-          onClick: () => i(l, 1),
+          onClick: () => l(a, 1),
           style: {
             width: "16px",
             height: "16px",
@@ -357,28 +369,28 @@ function _e({
             cursor: "pointer",
             userSelect: "none"
           },
-          children: /* @__PURE__ */ m.jsx(
+          children: /* @__PURE__ */ E.jsx(
             "span",
             {
               style: {
                 width: "10px",
                 height: "10px",
                 borderRadius: "50%",
-                backgroundColor: o === l ? "white" : "rgba(255,255,255,0.4)",
-                transform: o === l ? "scale(1.25)" : "scale(1)",
+                backgroundColor: n === a ? "white" : "rgba(255,255,255,0.4)",
+                transform: n === a ? "scale(1.25)" : "scale(1)",
                 transition: "all 0.3s ease"
               }
             }
           )
         },
-        l
+        a
       ))
     }
   );
 }
-const pe = A(_e);
+const pe = N(_e);
 function he({ children: r }) {
-  return /* @__PURE__ */ m.jsx(
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       style: {
@@ -392,36 +404,38 @@ function he({ children: r }) {
     }
   );
 }
-const Q = A(he);
-Q.__FULLPAGE_SECTION__ = !0;
+const ee = N(he);
+ee.__FULLPAGE_SECTION__ = !0;
 function be({
   children: r,
-  styles: o,
-  height: i = "30%",
-  backgroundColor: f = "yellow"
+  styles: n,
+  height: l = "30%",
+  backgroundColor: f = "yellow",
+  footerRef: s
 }) {
-  return /* @__PURE__ */ m.jsx(
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
+      ref: s,
       style: {
         position: "absolute",
         width: "100%",
-        height: i,
+        height: l,
         backgroundColor: f,
         bottom: 0,
         zIndex: 50,
-        ...o
+        ...n
       },
       children: r
     },
     "fullpage-footer"
   );
 }
-const K = A(be);
-K.__FULLPAGE_FOOTER__ = !0;
+const te = N(be);
+te.__FULLPAGE_FOOTER__ = !0;
 function we(r) {
-  process.env.NODE_ENV !== "production" && r.forEach((o) => {
-    if (U.isValidElement(o) && !o.type.__FULLPAGE_SECTION__)
+  process.env.NODE_ENV !== "production" && r.forEach((n) => {
+    if (I.isValidElement(n) && !n.type.__FULLPAGE_SECTION__)
       throw console.warn(
         "[FullPage] You must wrap content inside <FullPage.Section />"
       ), new Error(
@@ -429,9 +443,9 @@ function we(r) {
       );
   });
 }
-function Re({ children: r, isHiddenFooter: o }) {
-  const i = o ? 2500 : 600;
-  return /* @__PURE__ */ m.jsx(
+function Re({ children: r, isHiddenFooter: n }) {
+  const l = n ? 2500 : 600;
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       style: {
@@ -441,38 +455,40 @@ function Re({ children: r, isHiddenFooter: o }) {
         width: "100%",
         height: "100vh",
         zIndex: 50,
-        transform: o ? "translateY(100%)" : "translateY(0)",
-        transition: `transform ${i}ms cubic-bezier(0.22,1,0.36,1)`,
+        transform: n ? "translateY(100%)" : "translateY(0)",
+        transition: `transform ${l}ms cubic-bezier(0.22,1,0.36,1)`,
         willChange: "transform",
-        pointerEvents: o ? "none" : "auto"
+        pointerEvents: n ? "none" : "auto"
       },
       children: r
     }
   );
 }
-const Te = A(Re);
-function ee({
+const ge = N(Re);
+function re({
   children: r,
-  onChange: o,
-  directionDots: i = "right",
+  onChange: n,
+  directionDots: l = "right",
   enableContextMenu: f = !1,
-  duration: n = 700
+  duration: s = 700,
+  closeOutside: o = !1
 }) {
-  const a = U.Children.toArray(r), l = a.filter(
-    (E) => E.type.__FULLPAGE_SECTION__
-  ), _ = a.find(
-    (E) => E.type.__FULLPAGE_FOOTER__
-  );
-  ve(f), W(() => (we(l), () => {
-  }), [l]);
-  const p = !!_, R = l.length + (p ? 1 : 0), { active: T, goToSection: x, isHiddenFooter: h } = de(
-    R,
-    p,
-    o,
-    n
+  const a = I.Children.toArray(r), d = a.filter(
+    (_) => _.type.__FULLPAGE_SECTION__
+  ), R = a.find(
+    (_) => _.type.__FULLPAGE_FOOTER__
   );
-  return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
-    /* @__PURE__ */ m.jsxs(
+  me(f), $(() => (we(d), () => {
+  }), [d]);
+  const h = !!R, b = d.length + (h ? 1 : 0), { active: T, goToSection: k, isHiddenFooter: w, footerRef: y } = de(
+    b,
+    h,
+    n,
+    s,
+    o
+  ), S = R ? I.cloneElement(R, { footerRef: y }) : null;
+  return /* @__PURE__ */ E.jsxs(E.Fragment, { children: [
+    /* @__PURE__ */ E.jsxs(
       "div",
       {
         style: {
@@ -482,43 +498,43 @@ function ee({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ m.jsx(
+          /* @__PURE__ */ E.jsx(
             "div",
             {
               style: {
-                height: `${l.length * 100}vh`,
-                transform: h ? `translateY(-${T * 100}vh)` : `translateY(-${l.length - 100}vh)`,
+                height: `${d.length * 100}vh`,
+                transform: w ? `translateY(-${T * 100}vh)` : `translateY(-${d.length - 100}vh)`,
                 transition: "transform 700ms cubic-bezier(0.22,1,0.36,1)"
               },
-              children: l.map((E, b) => /* @__PURE__ */ m.jsx(
+              children: d.map((_, p) => /* @__PURE__ */ E.jsx(
                 Ee,
                 {
-                  index: b,
+                  index: p,
                   active: T,
-                  isHiddenFooter: h,
-                  children: E
+                  isHiddenFooter: w,
+                  children: _
                 },
-                b
+                p
               ))
             }
           ),
-          _ && /* @__PURE__ */ m.jsx(Te, { isHiddenFooter: h, children: _ })
+          R && /* @__PURE__ */ E.jsx(ge, { isHiddenFooter: w, children: S })
         ]
       }
     ),
-    /* @__PURE__ */ m.jsx(
+    /* @__PURE__ */ E.jsx(
       pe,
       {
-        sectionsLen: R,
+        sectionsLen: b,
         active: T,
-        goToSection: x,
-        direction: i
+        goToSection: k,
+        direction: l
       }
     )
   ] });
 }
-ee.Section = Q;
-ee.Footer = K;
+re.Section = ee;
+re.Footer = te;
 export {
-  ee as FullPage
+  re as FullPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-abohook-fullpage",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React FullPage scroll component with parallax and navigation dots",
   "author": "Mostafa Ahmed",
   "license": "MIT",