{"version":3,"file":"OverflowSlider.BSDoZvez.mjs","names":["React.useMemo","React.useRef","React.useState","React.useCallback","pxPerSec"],"sources":["https:/framerusercontent.com/modules/60V5m6Wyrr8WJygpvWzz/g6ExbjefsqJbQGnVuUbz/OverflowSlider.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView,useMotionValue}from\"framer-motion\";// Component that takes elements and creates a slider. The elements should be visible outside the slider container. The sliding is done either via scroll/touch drag or by placing the cursor at each end of the container.\n/**\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function OverflowSlider(props){const{items,gap,padding,align,enableDrag,enableWheel,wheelSpeed,enableEdgeHover,edgeZone,edgeSpeed,cursor,style}=props;const renderedItems=React.useMemo(()=>{return React.Children.map(items,(child,index)=>{const key=/*#__PURE__*/React.isValidElement(child)&&child.key!=null?String(child.key):index;return /*#__PURE__*/_jsx(\"div\",{style:{flex:\"0 0 auto\",flexShrink:0,minWidth:0},children:child},key);});},[items]);const isStatic=useIsStaticRenderer();const rootRef=React.useRef(null);const trackRef=React.useRef(null);const isFixedWidth=style?.width===\"100%\";const isFixedHeight=style?.height===\"100%\";const x=useMotionValue(0);const[bounds,setBounds]=React.useState({min:0,max:0});const inView=useInView(rootRef,{amount:.05});const measure=React.useCallback(()=>{const root=rootRef.current;const track=trackRef.current;if(!root||!track)return;const rootRect=root.getBoundingClientRect();const trackRect=track.getBoundingClientRect();const viewportWidth=rootRect.width;const contentWidth=track.scrollWidth||trackRect.width;const max=0;const min=Math.min(0,viewportWidth-contentWidth);React.startTransition(()=>setBounds({min,max}));const current=x.get();if(current>max)x.set(max);if(current<min)x.set(min);},[x]);React.useEffect(()=>{if(typeof window===\"undefined\")return;measure();const root=rootRef.current;const track=trackRef.current;if(!root||!track)return;let ro=null;if(\"ResizeObserver\"in window){ro=new ResizeObserver(()=>measure());ro.observe(root);ro.observe(track);}const onResize=()=>measure();window.addEventListener(\"resize\",onResize);return()=>{window.removeEventListener(\"resize\",onResize);if(ro)ro.disconnect();};},[measure]);const clampX=React.useCallback(next=>{if(next>bounds.max)return bounds.max;if(next<bounds.min)return bounds.min;return next;},[bounds.max,bounds.min]);const applyDelta=React.useCallback(delta=>{const next=clampX(x.get()+delta);x.set(next);},[clampX,x]);const onWheel=React.useCallback(e=>{if(!enableWheel||isStatic)return;if(!inView)return;// Only respond to horizontal wheel/trackpad scroll.\n// Let vertical scrolling bubble so the page can scroll.\nif(Math.abs(e.deltaX)<=Math.abs(e.deltaY))return;e.preventDefault();const delta=e.deltaX*wheelSpeed;applyDelta(-delta);},[applyDelta,enableWheel,inView,isStatic,wheelSpeed]);const rafRef=React.useRef(null);const hoverDirRef=React.useRef(0);const lastTRef=React.useRef(0);const stopEdgeHover=React.useCallback(()=>{hoverDirRef.current=0;if(rafRef.current!=null&&typeof window!==\"undefined\"){window.cancelAnimationFrame(rafRef.current);rafRef.current=null;}lastTRef.current=0;},[]);const edgeLoop=React.useCallback(t=>{if(typeof window===\"undefined\")return;if(!enableEdgeHover||isStatic||!inView){stopEdgeHover();return;}const dir=hoverDirRef.current;if(dir===0){stopEdgeHover();return;}const lastT=lastTRef.current||t;const dt=Math.min(.05,Math.max(0,(t-lastT)/1e3));lastTRef.current=t;const pxPerSec=edgeSpeed;const delta=dir*pxPerSec*dt;applyDelta(delta);rafRef.current=window.requestAnimationFrame(edgeLoop);},[applyDelta,enableEdgeHover,edgeSpeed,inView,isStatic,stopEdgeHover]);const maybeStartEdgeHover=React.useCallback(()=>{if(typeof window===\"undefined\")return;if(rafRef.current!=null)return;lastTRef.current=0;rafRef.current=window.requestAnimationFrame(edgeLoop);},[edgeLoop]);const onMouseMove=React.useCallback(e=>{if(!enableEdgeHover||isStatic)return;if(!inView)return;const root=rootRef.current;if(!root)return;const rect=root.getBoundingClientRect();const localX=e.clientX-rect.left;const leftZone=Math.max(0,edgeZone);const rightZone=Math.max(0,edgeZone);let dir=0;if(localX<=leftZone)dir=1;else if(localX>=rect.width-rightZone)dir=-1;if(dir===0){hoverDirRef.current=0;stopEdgeHover();return;}// Don’t scroll if already at the end in that direction\nconst current=x.get();if(dir===1&&current>=bounds.max-.5){hoverDirRef.current=0;stopEdgeHover();return;}if(dir===-1&&current<=bounds.min+.5){hoverDirRef.current=0;stopEdgeHover();return;}hoverDirRef.current=dir;maybeStartEdgeHover();},[bounds.max,bounds.min,edgeZone,enableEdgeHover,inView,isStatic,maybeStartEdgeHover,stopEdgeHover,x]);const onMouseLeave=React.useCallback(()=>{stopEdgeHover();},[stopEdgeHover]);const justifyContent=align===\"center\"?\"center\":align===\"end\"?\"flex-end\":\"flex-start\";const showGrabCursor=cursor===\"grab\"&&enableDrag&&!isStatic;return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:{...style,position:\"relative\",width:isFixedWidth?\"100%\":\"auto\",height:isFixedHeight?\"100%\":\"auto\",minWidth:5,minHeight:5,overflow:\"visible\",touchAction:enableDrag&&!isStatic?\"pan-y\":\"auto\",cursor:showGrabCursor?\"grab\":\"default\",userSelect:\"none\",display:isFixedWidth||isFixedHeight?\"block\":\"inline-block\"},onWheel:onWheel,onMouseMove:onMouseMove,onMouseLeave:onMouseLeave,\"aria-label\":\"Overflow slider\",role:\"region\",children:/*#__PURE__*/_jsx(motion.div,{ref:trackRef,style:{position:\"relative\",display:\"flex\",flexDirection:\"row\",alignItems:\"stretch\",justifyContent,gap,padding,x:isStatic?0:x,willChange:isStatic?undefined:\"transform\",overflow:\"visible\",minHeight:5},drag:enableDrag&&!isStatic?\"x\":false,dragConstraints:isStatic?undefined:{left:bounds.min,right:bounds.max},dragElastic:.08,dragMomentum:true,onDragStart:()=>{if(showGrabCursor&&typeof document!==\"undefined\"){document.body.style.cursor=\"grabbing\";}},onDragEnd:()=>{if(showGrabCursor&&typeof document!==\"undefined\"){document.body.style.cursor=\"\";}// Clamp after momentum settles a bit\nif(typeof window!==\"undefined\"){window.setTimeout(()=>{const next=clampX(x.get());x.set(next);},0);}},children:renderedItems})});}addPropertyControls(OverflowSlider,{items:{type:ControlType.Slot,title:\"Items\",maxCount:20},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:16,min:0,max:200,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,max:200,step:1,unit:\"px\"},align:{type:ControlType.Enum,title:\"Align\",defaultValue:\"start\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],displaySegmentedControl:true},enableDrag:{type:ControlType.Boolean,title:\"Drag\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},enableWheel:{type:ControlType.Boolean,title:\"Wheel\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},wheelSpeed:{type:ControlType.Number,title:\"Wheel Speed\",defaultValue:1,min:.1,max:4,step:.1,hidden:p=>!p.enableWheel},enableEdgeHover:{type:ControlType.Boolean,title:\"Edge Hover\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},edgeZone:{type:ControlType.Number,title:\"Edge Zone\",defaultValue:60,min:0,max:200,step:1,unit:\"px\",hidden:p=>!p.enableEdgeHover},edgeSpeed:{type:ControlType.Number,title:\"Edge Speed\",defaultValue:700,min:0,max:3e3,step:10,unit:\"px/s\",hidden:p=>!p.enableEdgeHover},cursor:{type:ControlType.Enum,title:\"Cursor\",defaultValue:\"grab\",options:[\"default\",\"grab\"],optionTitles:[\"Default\",\"Grab\"],displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"OverflowSlider\",\"slots\":[\"items\"],\"annotations\":{\"framerIntrinsicWidth\":\"320\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"120\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./OverflowSlider.map"],"mappings":"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"}