@maxweek/react-scroller/dist/react-scroller.umd.cjs

Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll

(function(u,X){typeof exports=="object"&&typeof module<"u"?module.exports=X(require("react")):typeof define=="function"&&define.amd?define(["react"],X):(u=typeof globalThis<"u"?globalThis:u||self,u["react-scroller"]=X(u.React))})(this,function(u){"use strict";var X={exports:{}},D={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var fe;function ye(){if(fe)return D;fe=1;var t=Symbol.for("react.transitional.element"),C=Symbol.for("react.fragment");function r(l,E,x){var d=null;if(x!==void 0&&(d=""+x),E.key!==void 0&&(d=""+E.key),"key"in E){x={};for(var b in E)b!=="key"&&(x[b]=E[b])}else x=E;return E=x.ref,{$$typeof:t,type:l,key:d,ref:E!==void 0?E:null,props:x}}return D.Fragment=C,D.jsx=r,D.jsxs=r,D}var B={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ue;function Ye(){return ue||(ue=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===re?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case A:return"Portal";case n:return"Profiler";case q:return"StrictMode";case h:return"Suspense";case _:return"SuspenseList"}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 w:return(e.displayName||"Context")+".Provider";case s:return(e._context.displayName||"Context")+".Consumer";case v:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case M:return o=e.displayName||null,o!==null?o:t(e.type)||"Memo";case I:o=e._payload,e=e._init;try{return t(e(o))}catch{}}return null}function C(e){return""+e}function r(e){try{C(e);var o=!1}catch{o=!0}if(o){o=console;var a=o.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),C(e)}}function l(){}function E(){if(Z===0){be=console.log,ve=console.info,he=console.warn,ge=console.error,Ee=console.group,me=console.groupCollapsed,we=console.groupEnd;var e={configurable:!0,enumerable:!0,value:l,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}Z++}function x(){if(Z--,Z===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:L({},e,{value:be}),info:L({},e,{value:ve}),warn:L({},e,{value:he}),error:L({},e,{value:ge}),group:L({},e,{value:Ee}),groupCollapsed:L({},e,{value:me}),groupEnd:L({},e,{value:we})})}0>Z&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function d(e){if(ie===void 0)try{throw Error()}catch(a){var o=a.stack.trim().match(/\n( *(at )?)/);ie=o&&o[1]||"",_e=-1<a.stack.indexOf(`
    at`)?" (<anonymous>)":-1<a.stack.indexOf("@")?"@unknown:0:0":""}return`
`+ie+e+_e}function b(e,o){if(!e||ce)return"";var a=se.get(e);if(a!==void 0)return a;ce=!0,a=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var c=null;c=z.H,z.H=null,E();try{var g={DetermineComponentFrameRoot:function(){try{if(o){var N=function(){throw Error()};if(Object.defineProperty(N.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(N,[])}catch(Y){var te=Y}Reflect.construct(e,[],N)}else{try{N.call()}catch(Y){te=Y}e.call(N.prototype)}}else{try{throw Error()}catch(Y){te=Y}(N=e())&&typeof N.catch=="function"&&N.catch(function(){})}}catch(Y){if(Y&&te&&typeof Y.stack=="string")return[Y.stack,te.stack]}return[null,null]}};g.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var f=Object.getOwnPropertyDescriptor(g.DetermineComponentFrameRoot,"name");f&&f.configurable&&Object.defineProperty(g.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var i=g.DetermineComponentFrameRoot(),y=i[0],U=i[1];if(y&&U){var m=y.split(`
`),P=U.split(`
`);for(i=f=0;f<m.length&&!m[f].includes("DetermineComponentFrameRoot");)f++;for(;i<P.length&&!P[i].includes("DetermineComponentFrameRoot");)i++;if(f===m.length||i===P.length)for(f=m.length-1,i=P.length-1;1<=f&&0<=i&&m[f]!==P[i];)i--;for(;1<=f&&0<=i;f--,i--)if(m[f]!==P[i]){if(f!==1||i!==1)do if(f--,i--,0>i||m[f]!==P[i]){var K=`
`+m[f].replace(" at new "," at ");return e.displayName&&K.includes("<anonymous>")&&(K=K.replace("<anonymous>",e.displayName)),typeof e=="function"&&se.set(e,K),K}while(1<=f&&0<=i);break}}}finally{ce=!1,z.H=c,x(),Error.prepareStackTrace=a}return m=(m=e?e.displayName||e.name:"")?d(m):"",typeof e=="function"&&se.set(e,m),m}function V(e){if(e==null)return"";if(typeof e=="function"){var o=e.prototype;return b(e,!(!o||!o.isReactComponent))}if(typeof e=="string")return d(e);switch(e){case h:return d("Suspense");case _:return d("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case v:return e=b(e.render,!1),e;case M:return V(e.type);case I:o=e._payload,e=e._init;try{return V(e(o))}catch{}}return""}function j(){var e=z.A;return e===null?null:e.getOwner()}function ne(e){if(de.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function F(e,o){function a(){xe||(xe=!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)",o))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function Q(){var e=t(this.type);return Re[e]||(Re[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 $(e,o,a,c,g,f){return a=f.ref,e={$$typeof:S,type:e,key:o,props:f,_owner:g},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:Q}):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.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function G(e,o,a,c,g,f){if(typeof e=="string"||typeof e=="function"||e===T||e===n||e===q||e===h||e===_||e===p||typeof e=="object"&&e!==null&&(e.$$typeof===I||e.$$typeof===M||e.$$typeof===w||e.$$typeof===s||e.$$typeof===v||e.$$typeof===ke||e.getModuleId!==void 0)){var i=o.children;if(i!==void 0)if(c)if(le(i)){for(c=0;c<i.length;c++)O(i[c],e);Object.freeze&&Object.freeze(i)}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 O(i,e)}else i="",(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(i+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),e===null?c="null":le(e)?c="array":e!==void 0&&e.$$typeof===S?(c="<"+(t(e.type)||"Unknown")+" />",i=" Did you accidentally export a JSX literal instead of a component?"):c=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,i);if(de.call(o,"key")){i=t(e);var y=Object.keys(o).filter(function(m){return m!=="key"});c=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",Se[i+c]||(y=0<y.length?"{"+y.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} />`,c,i,y,i),Se[i+c]=!0)}if(i=null,a!==void 0&&(r(a),i=""+a),ne(o)&&(r(o.key),i=""+o.key),"key"in o){a={};for(var U in o)U!=="key"&&(a[U]=o[U])}else a=o;return i&&F(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),$(e,i,f,g,j(),a)}function O(e,o){if(typeof e=="object"&&e&&e.$$typeof!==Ce){if(le(e))for(var a=0;a<e.length;a++){var c=e[a];H(c)&&J(c,o)}else if(H(e))e._store&&(e._store.validated=1);else if(e===null||typeof e!="object"?a=null:(a=ee&&e[ee]||e["@@iterator"],a=typeof a=="function"?a:null),typeof a=="function"&&a!==e.entries&&(a=a.call(e),a!==e))for(;!(e=a.next()).done;)H(e.value)&&J(e.value,o)}}function H(e){return typeof e=="object"&&e!==null&&e.$$typeof===S}function J(e,o){if(e._store&&!e._store.validated&&e.key==null&&(e._store.validated=1,o=oe(o),!Te[o])){Te[o]=!0;var a="";e&&e._owner!=null&&e._owner!==j()&&(a=null,typeof e._owner.tag=="number"?a=t(e._owner.type):typeof e._owner.name=="string"&&(a=e._owner.name),a=" It was passed a child from "+a+".");var c=z.getCurrentStack;z.getCurrentStack=function(){var g=V(e.type);return c&&(g+=c()||""),g},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',o,a),z.getCurrentStack=c}}function oe(e){var o="",a=j();return a&&(a=t(a.type))&&(o=`

Check the render method of \``+a+"`."),o||(e=t(e))&&(o=`

Check the top-level render call using <`+e+">."),o}var ae=u,S=Symbol.for("react.transitional.element"),A=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),n=Symbol.for("react.profiler"),s=Symbol.for("react.consumer"),w=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),M=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),p=Symbol.for("react.offscreen"),ee=Symbol.iterator,re=Symbol.for("react.client.reference"),z=ae.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,de=Object.prototype.hasOwnProperty,L=Object.assign,ke=Symbol.for("react.client.reference"),le=Array.isArray,Z=0,be,ve,he,ge,Ee,me,we;l.__reactDisabledLog=!0;var ie,_e,ce=!1,se=new(typeof WeakMap=="function"?WeakMap:Map),Ce=Symbol.for("react.client.reference"),xe,Re={},Se={},Te={};B.Fragment=T,B.jsx=function(e,o,a,c,g){return G(e,o,a,!1,c,g)},B.jsxs=function(e,o,a,c,g){return G(e,o,a,!0,c,g)}}()),B}process.env.NODE_ENV==="production"?X.exports=ye():X.exports=Ye();var k=X.exports;function R(t,C,r=""){return t?`__${C}`:r?`__${r}`:""}function W(t){return t||""}return u.forwardRef((t,C)=>{const r=u.useRef({height:0,width:0,top:0,left:0,boxHeight:0,boxWidth:0,progressX:0,progressY:0,grab:!1,grabOffset:0,grabStartX:0,grabStartY:0,grabDeltaX:0,grabDeltaY:0,scrollStartX:0,scrollStartY:0,hovered:!1,inited:!1,barX:{size:0,offset:0,offsetStart:0,offsetDelta:0,clicked:!1},barY:{size:0,offset:0,offsetStart:0,offsetDelta:0,clicked:!1}}).current,l=u.useRef(null),E=u.useRef(null),x=u.useRef(null),d=u.useRef(null),b=u.useRef(null),[V,j]=u.useState(!1);u.useEffect(()=>{const n=h=>{var _;r.barX.clicked=!1,r.barY.clicked=!1,r.grab=!1,j(r.hovered),(_=l.current)==null||_.classList.remove("__grabbing")},s=h=>{if(l.current){if(r.barX.clicked||r.barY.clicked){const _=A(h);r.barX.clicked&&(r.barX.offset=_.x,r.barX.offsetDelta=r.barX.offsetStart-r.barX.offset,l.current.scrollLeft=r.scrollStartX+-r.barX.offsetDelta/r.boxWidth*(r.width-r.boxWidth)),r.barY.clicked&&(r.barY.offset=_.y,r.barY.offsetDelta=r.barY.offsetStart-r.barY.offset,l.current.scrollTop=r.scrollStartY+-r.barY.offsetDelta/r.boxHeight*(r.height-r.boxHeight))}if(r.grab){const _=A(h);t.horizontal&&(r.grabDeltaX=r.grabStartX-_.x,l.current.scrollLeft=r.scrollStartX+r.grabDeltaX),t.vertical&&(r.grabDeltaY=r.grabStartY-_.y,l.current.scrollTop=r.scrollStartY+r.grabDeltaY)}}},w=h=>{h.cancelable&&(r.barX.clicked||r.barY.clicked)&&h.preventDefault()};window.addEventListener("pointerup",n),window.addEventListener("pointermove",s),window.addEventListener("touchmove",w,{passive:!1});const v=new ResizeObserver(h=>{r.inited&&(S(),T())});if(l.current)return v.observe(l.current),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointermove",s),window.removeEventListener("touchmove",w),v.disconnect()}},[]),u.useEffect(()=>{let n=l.current;if(n)return t.horizontal&&n.addEventListener("wheel",H),n.addEventListener("scroll",J),t.grab&&n.addEventListener("pointerdown",Q),()=>{n&&(n.removeEventListener("scroll",J),t.horizontal&&n.removeEventListener("wheel",H),t.grab&&n.removeEventListener("pointerdown",Q))}},[l.current]),u.useEffect(()=>{let n=d.current;if(n)return n.addEventListener("pointerdown",$),()=>{n&&n.removeEventListener("pointerdown",$)}},[d.current]),u.useEffect(()=>{let n=b.current;if(n)return n.addEventListener("pointerdown",G),()=>{n&&n.removeEventListener("pointerdown",G)}},[b.current]),u.useEffect(()=>{let n=E.current;if(n)return n.addEventListener("wheel",O),()=>{n&&n.removeEventListener("wheel",O)}},[E.current]),u.useEffect(()=>{let n=x.current;if(n)return n.addEventListener("wheel",O),()=>{n&&n.removeEventListener("wheel",O)}},[x.current]),u.useEffect(()=>{S(),T()},[t.children]);const ne=()=>{S(),T()},F=(n,s=300)=>{if(!l.current)return;const w=t.horizontal,v=w?l.current.scrollLeft:l.current.scrollTop,h=n-v,_=performance.now(),M=I=>{if(!l.current)return;const p=I-_,ee=Math.min(p/s,1),re=v+h*ee;w?l.current.scrollLeft=re:l.current.scrollTop=re,p<s&&requestAnimationFrame(M)};requestAnimationFrame(M)};u.useImperativeHandle(C,()=>({scrollTo:(n,s)=>{F(n,s)},scrollToStart:n=>{F(0,n)},scrollToEnd:n=>{F(r.height,n)},update:()=>{ne()},getProperties:()=>r,scrollRef:l}));const Q=n=>{if(!l.current||r.barX.clicked||r.barY.clicked)return;r.grab=!0;const s=A(n);r.grabStartX=s.x,r.grabStartY=s.y,t.horizontal&&(r.scrollStartX=l.current.scrollLeft),t.vertical&&(r.scrollStartY=l.current.scrollTop),l.current.classList.add("__grabbing")},$=n=>{l.current&&(r.barY.clicked=!0,r.barY.offsetStart=A(n).y,r.scrollStartY=l.current.scrollTop)},G=n=>{l.current&&(r.barX.clicked=!0,r.barX.offsetStart=A(n).x,r.scrollStartX=l.current.scrollLeft)},O=n=>{n.preventDefault(),l.current&&(t.horizontal&&(l.current.scrollLeft+=n.deltaX),t.vertical&&(l.current.scrollTop+=n.deltaY))},H=n=>{let s=n;if(s.shiftKey||!l.current||t.horizontal)return;let w=s.wheelDeltaY,v=!1;w?w===s.deltaY*-3&&(v=!0):s.deltaMode===0&&(v=!0),v||(s.preventDefault(),l.current.scrollLeft+=s.deltaY/4),S(),T()},J=n=>{n.stopPropagation(),S(),T()},oe=()=>{(t.showWhenMinimal||r.height>r.boxHeight||r.width>r.boxWidth)&&(r.hovered=!0,j(!0))},ae=()=>{r.hovered=!1,!r.grab&&(r.barX.clicked||r.barY.clicked||j(!1))},S=()=>{l.current&&(t.vertical&&t.horizontal?(r.height=l.current.scrollHeight,r.top=l.current.scrollTop,r.boxHeight=l.current.clientHeight,r.width=l.current.scrollWidth,r.left=l.current.scrollLeft,r.boxWidth=l.current.clientWidth):t.horizontal?(r.width=l.current.scrollWidth,r.left=l.current.scrollLeft,r.boxWidth=l.current.clientWidth):(r.height=l.current.scrollHeight,r.top=l.current.scrollTop,r.boxHeight=l.current.clientHeight),r.progressY=r.top/(r.height-r.boxHeight),r.progressX=r.left/(r.width-r.boxWidth),r.inited=!0)},A=n=>{if("x"in n)return{x:n.x,y:n.y};{const s=n.touches[0];return{x:s.clientX,y:s.clientY}}},T=()=>{var n,s,w,v,h;r.barX.size=100/(r.width/r.boxWidth),r.barY.size=100/(r.height/r.boxHeight),t.vertical&&t.horizontal?(d.current&&(d.current.style.height=`${r.barY.size}%`,d.current.style.top=`${r.progressY*100-r.progressY*r.barY.size}%`),b.current&&(b.current.style.width=`${r.barX.size}%`,b.current.style.left=`${r.progressX*100-r.progressX*r.barX.size}%`)):t.horizontal?b.current&&(b.current.style.width=`${r.barX.size}%`,b.current.style.left=`${r.progressX*100-r.progressX*r.barX.size}%`):d.current&&(d.current.style.height=`${r.barY.size}%`,d.current.style.top=`${r.progressY*100-r.progressY*r.barY.size}%`),r.progressX===0&&((n=t.onReachStart)==null||n.call(t,"x")),r.progressY===0&&((s=t.onReachStart)==null||s.call(t,"y")),r.progressX===1&&((w=t.onReachEnd)==null||w.call(t,"x")),r.progressY===1&&((v=t.onReachEnd)==null||v.call(t,"y")),(h=t.onScroll)==null||h.call(t,{progress:r.progressX,offset:r.left},{progress:r.progressY,offset:r.top})},q=["scroller",W(t.className),R(t.horizontal,"horizontal"),R(t.vertical,"vertical"),R(t.needBar,"bar"),R(t.grabCursor,"grab"),R(t.autoHide,"autoHide"),R(t.barAltPosition,"barAlt"),R(t.borderPadding,"borderPadding"),R(t.borderFade,"borderFade"),R(V,"hovered")].join(" ");return k.jsxs("div",{className:q,onPointerEnter:oe,onPointerLeave:ae,children:[t.needBar&&k.jsxs(k.Fragment,{children:[t.vertical&&k.jsx("div",{className:`scroller__bar scroller__bar_vertical ${W(t.barClassName)}`,ref:E,children:k.jsx("div",{className:`scroller__bar_roller scroller__bar_roller_vertical ${W(t.barRollerClassName)}`,ref:d})}),t.horizontal&&k.jsx("div",{className:`scroller__bar scroller__bar_horizontal ${W(t.barClassName)}`,ref:x,children:k.jsx("div",{className:`scroller__bar_roller scroller__bar_roller_horizontal ${W(t.barRollerClassName)}`,ref:b})})]}),k.jsx("div",{className:`scroller__content ${W(t.contentClassName)}`,ref:l,children:t.children})]})})});