@ncdai/react-wheel-picker 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,14 +1,17 @@
1
1
  # React Wheel Picker
2
2
 
3
+ Backed by [▲Vercel OSS Program](https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker)
4
+
3
5
  iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
4
6
 
5
- - 📱 Natural touch scrolling with smooth inertia effect
6
- - 🖱️ Mouse drag and scroll support for desktop
7
- - 🔄 Infinite loop scrolling
8
- - 🎨 Unstyled components for complete style customization
9
- - ⚡️ Easy installation via shadcn CLI
7
+ - Natural touch scrolling with smooth inertia effect
8
+ - Mouse drag and scroll support for desktop
9
+ - Infinite loop scrolling
10
+ - Unstyled components for complete style customization
11
+ - Full keyboard navigation and type-ahead search
12
+ - Easy installation via shadcn CLI
10
13
 
11
- Check out the live demo: https://react-wheel-picker.chanhdai.com
14
+ Check out the live demo: https://react-wheel-picker.chanhdai.com
12
15
 
13
16
  ## Documentation
14
17
 
@@ -22,6 +25,96 @@ Licensed under the [MIT license](./LICENSE).
22
25
 
23
26
  This project is proudly supported by:
24
27
 
25
- [![Vercel OSS Program](https://assets.chanhdai.com/images/sponsors/vercel-oss-program-2025.svg?v=2)](https://vercel.com/blog/summer-2025-oss-program) [![shadcnstudio.com](https://assets.chanhdai.com/images/sponsors/shadcnstudio.svg?v=2)](https://shadcnstudio.com)
28
+ <table>
29
+ <tbody>
30
+ <tr>
31
+ <td>
32
+ <a href="https://vercel.com/blog/summer-2025-oss-program?utm_source=react-wheel-picker">
33
+ <img
34
+ src="https://assets.chanhdai.com/images/sponsors/vercel-oss-program-2025.svg?v=2"
35
+ alt="Vercel OSS Program"
36
+ />
37
+ </a>
38
+ </td>
39
+ <td>
40
+ <a href="https://shadcnstudio.com?utm_source=chanhdai.com&utm_medium=banner&utm_campaign=github">
41
+ <img src="https://assets.chanhdai.com/images/sponsors/shadcnstudio.svg?v=3" alt="shadcnstudio.com" />
42
+ </a>
43
+ </td>
44
+ <td>
45
+ <a href="https://shadcnspace.com">
46
+ <img
47
+ src="https://assets.chanhdai.com/images/sponsors/shadcnspace.svg?v=3"
48
+ alt="Shadcn Space"
49
+ />
50
+ </a>
51
+ </td>
52
+ </tr>
53
+ <tr>
54
+ <td>
55
+ <a href="https://shadcncraft.com?utm_source=react-wheel-picker">
56
+ <img
57
+ src="https://assets.chanhdai.com/images/sponsors/shadcncraft.svg?v=3"
58
+ alt="shadcncraft"
59
+ />
60
+ </a>
61
+ </td>
62
+ <td>
63
+ <a href="https://www.shadcnblocks.com?utm_source=react-wheel-picker">
64
+ <img
65
+ src="https://assets.chanhdai.com/images/sponsors/shadcnblocks.svg?v=1"
66
+ alt="Shadcnblocks"
67
+ />
68
+ </a>
69
+ </td>
70
+ <td>
71
+ <a href="https://reactbits.dev?utm_source=react-wheel-picker">
72
+ <img
73
+ src="https://assets.chanhdai.com/images/sponsors/reactbits.svg?v=1"
74
+ alt="React Bits"
75
+ />
76
+ </a>
77
+ </td>
78
+ </tr>
79
+ <tr>
80
+ <td>
81
+ <a href="https://openpanel.dev?utm_source=react-wheel-picker">
82
+ <img
83
+ src="https://assets.chanhdai.com/images/sponsors/openpanel.svg?v=1"
84
+ alt="OpenPanel"
85
+ />
86
+ </a>
87
+ </td>
88
+ <td>
89
+ <a href="https://www.mintlify.com?utm_source=react-wheel-picker">
90
+ <img
91
+ src="https://assets.chanhdai.com/images/sponsors/mintlify.svg?v=1"
92
+ alt="Mintlify"
93
+ />
94
+ </a>
95
+ </td>
96
+ <td>
97
+ <a href="https://uirules.com?utm_source=react-wheel-picker">
98
+ <img
99
+ src="https://assets.chanhdai.com/images/sponsors/uirules.svg?v=1"
100
+ alt="UI Rules"
101
+ />
102
+ </a>
103
+ </td>
104
+ </tr>
105
+ <tr>
106
+ <td>
107
+ <a href="https://shoogle.dev?utm_source=react-wheel-picker">
108
+ <img
109
+ src="https://assets.chanhdai.com/images/sponsors/shoogle.svg?v=1"
110
+ alt="Shoogle"
111
+ />
112
+ </a>
113
+ </td>
114
+ <td></td>
115
+ <td></td>
116
+ </tr>
117
+ </tbody>
118
+ </table>
26
119
 
27
120
  > Using this package at work? [Sponsor me](https://github.com/sponsors/ncdai) to help with support and maintenance.
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- [data-rwp-wrapper] ul{margin:0;padding:0;list-style:none}[data-rwp-wrapper] li{margin:0;padding:0}[data-rwp-wrapper]{position:relative;overflow:hidden;display:flex;width:100%;align-items:stretch;justify-content:space-between;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;overflow:hidden;flex:1;cursor:default;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp]:focus-visible{outline:none}[data-rwp-highlight-wrapper]{position:absolute;overflow:hidden;top:50%;width:100%;transform:translateY(-50%);font-size:1rem;font-weight:500}[data-rwp-highlight-list]{position:absolute;width:100%}[data-rwp-options]{position:absolute;top:50%;left:0;display:block;width:100%;height:0;margin:0 auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}[data-rwp-option],[data-rwp-highlight-item]{display:flex;align-items:center;justify-content:center}
1
+ [data-rwp-wrapper] ul{margin:0;padding:0;list-style:none}[data-rwp-wrapper] li{margin:0;padding:0}[data-rwp-wrapper]{position:relative;overflow:hidden;display:flex;width:100%;align-items:stretch;justify-content:space-between;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;overflow:hidden;flex:1;cursor:default;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp]:focus-visible{outline:none}[data-rwp-highlight-wrapper]{position:absolute;overflow:hidden;top:50%;width:100%;transform:translateY(-50%);font-size:1rem;font-weight:500}[data-rwp-highlight-list]{position:absolute;width:100%}[data-rwp-options]{position:absolute;top:50%;left:0;display:block;width:100%;height:0;margin:0 auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}[data-rwp-option],[data-rwp-highlight-item]{display:flex;align-items:center;justify-content:center}[data-rwp-option][data-disabled],[data-rwp-highlight-item][data-disabled]{pointer-events:none}
package/dist/index.d.mts CHANGED
@@ -14,6 +14,8 @@ type WheelPickerOption<T extends WheelPickerValue = string> = {
14
14
  label: ReactNode;
15
15
  /** Optional text for type-ahead search (useful when label is a ReactNode). Defaults to label if string, otherwise value. */
16
16
  textValue?: string;
17
+ /** Whether this option is disabled and cannot be selected */
18
+ disabled?: boolean;
17
19
  };
18
20
  /**
19
21
  * Custom class names for styling different parts of the wheel picker
package/dist/index.d.ts CHANGED
@@ -14,6 +14,8 @@ type WheelPickerOption<T extends WheelPickerValue = string> = {
14
14
  label: ReactNode;
15
15
  /** Optional text for type-ahead search (useful when label is a ReactNode). Defaults to label if string, otherwise value. */
16
16
  textValue?: string;
17
+ /** Whether this option is disabled and cannot be selected */
18
+ disabled?: boolean;
17
19
  };
18
20
  /**
19
21
  * Custom class names for styling different parts of the wheel picker
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";"use client";var Ve=Object.create;var K=Object.defineProperty;var Ke=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var qe=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var Xe=(s,a)=>{for(var h in a)K(s,h,{get:a[h],enumerable:!0})},be=(s,a,h,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of $e(a))!je.call(s,c)&&c!==h&&K(s,c,{get:()=>a[c],enumerable:!(p=Ke(a,c))||p.enumerable});return s};var Q=(s,a,h)=>(h=s!=null?Ve(qe(s)):{},be(a||!s||!s.__esModule?K(h,"default",{value:s,enumerable:!0}):h,s)),_e=s=>be(K({},"__esModule",{value:!0}),s);var rt={};Xe(rt,{WheelPicker:()=>nt,WheelPickerWrapper:()=>tt});module.exports=_e(rt);var M=Q(require("react")),u=require("react");var T=Q(require("react")),ve=(0,T.createContext)(null);function Te(){return(0,T.useContext)(ve)}function ke({children:s}){let[a,h]=(0,T.useState)(-1),p=(0,T.useRef)(0),c=(0,T.useRef)(new Map),g=(0,T.useCallback)((l,I)=>{let w=l!==null?l:p.current++;return c.current.set(w,I),h(i=>i===-1?w:i),w},[]),D=(0,T.useCallback)(l=>{var I;return(I=c.current.get(l))!=null?I:null},[]),S=(0,T.useCallback)(()=>Array.from(c.current.keys()).sort((l,I)=>l-I),[]),L=(0,T.useMemo)(()=>({activeIndex:a,setActiveIndex:h,register:g,getPickerRef:D,getPickerIndices:S}),[a,h,g,D,S]);return T.default.createElement(ve.Provider,{value:L},s)}var W=Q(require("react"));function xe(s){let a=W.default.useRef(s);return W.default.useEffect(()=>{a.current=s}),W.default.useMemo(()=>(...h)=>{var p;return(p=a.current)==null?void 0:p.call(a,...h)},[])}function Ze({defaultProp:s,onChange:a}){let h=W.default.useState(s),[p]=h,c=W.default.useRef(p),g=xe(a);return W.default.useEffect(()=>{c.current!==p&&(g(p),c.current=p)},[p,c,g]),h}function ye({prop:s,defaultProp:a,onChange:h=()=>{}}){let[p,c]=Ze({defaultProp:a,onChange:h}),g=s!==void 0,D=g?s:p,S=xe(h),L=W.default.useCallback(l=>{if(g){let w=typeof l=="function"?l(s):l;w!==s&&S(w)}else c(l)},[g,s,c,S]);return[D,L]}var O=require("react"),Je=500;function we(s,{getTextValue:a,getCurrentIndex:h,onMatch:p}){let c=(0,O.useRef)(""),g=(0,O.useRef)(null),D=(0,O.useCallback)(()=>{c.current="",g.current&&(clearTimeout(g.current),g.current=null)},[]);return{handleTypeaheadSearch:(0,O.useCallback)(L=>{g.current&&clearTimeout(g.current),c.current+=L.toLowerCase();let l=c.current,w=l.length>1&&Array.from(l).every(k=>k===l[0])?l[0]:l,i=h(),m=w.length===1,P=-1;if(m)for(let k=1;k<=s.length;k++){let C=(i+k)%s.length;if(a(s[C]).toLowerCase().startsWith(w)){P=C;break}}else P=s.findIndex(k=>a(k).toLowerCase().startsWith(w));P!==-1&&p(P),g.current=setTimeout(()=>{c.current="",g.current=null},Je)},[s,a,h,p]),resetTypeahead:D}}var Ie=.3,Qe=30,Ne=s=>Math.pow(s-1,3)+1,N=(s,a,h)=>Math.max(a,Math.min(s,h)),et=s=>{var a;return(a=s.textValue)!=null?a:typeof s.label=="string"?s.label:String(s.value)},tt=({className:s,children:a})=>M.default.createElement(ke,null,M.default.createElement("div",{className:s,"data-rwp-wrapper":!0},a));function nt({defaultValue:s,value:a,onValueChange:h,options:p,infinite:c=!1,visibleCount:g=20,dragSensitivity:D=3,scrollSensitivity:S=5,optionItemHeight:L=30,classNames:l}){var fe,pe;let[I=(fe=p[0])==null?void 0:fe.value,w]=ye({defaultProp:s,prop:a,onChange:h}),i=(0,u.useMemo)(()=>{if(!c)return p;let e=[],t=Math.ceil(g/2);if(p.length===0)return e;for(;e.length<t;)e.push(...p);return e},[g,p,c]),m=L,P=m*.5,k=360/g,C=m/Math.tan(k*Math.PI/180),ee=Math.round(C*2+m*.25),R=g>>2,te=D*10,Ee=10,y=(0,u.useRef)(null),z=(0,u.useRef)(null),$=(0,u.useRef)(null),b=(0,u.useRef)(0),ne=(0,u.useRef)(0),H=(0,u.useRef)(!1),re=(0,u.useRef)(0),[Me,oe]=(0,u.useState)(!1),Y=(0,u.useRef)(-1),x=Te(),De=(0,u.useCallback)(e=>{if(y.current=e,e&&x){let t=Y.current===-1?null:Y.current;Y.current=x.register(t,e)}},[x]),q=(0,u.useRef)({startY:0,yList:[],touchScroll:0,isClick:!0}),j=(0,u.useRef)(null),Se=(0,u.useMemo)(()=>{let e=(n,r,o)=>M.default.createElement("li",{key:r,className:l==null?void 0:l.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-P,height:m,lineHeight:`${m}px`,transform:`rotateX(${o}deg) translateZ(${C}px)`,visibility:"hidden"}},n.label),t=i.map((n,r)=>e(n,r,-k*r));if(c)for(let n=0;n<R;++n){let r=-n-1,o=n+i.length;t.unshift(e(i[i.length-n-1],r,k*(n+1))),t.push(e(i[n],o,-k*o))}return t},[m,P,c,k,i,R,C,l==null?void 0:l.optionItem]),Ce=(0,u.useMemo)(()=>{let e=(n,r)=>M.default.createElement("li",{key:r,className:l==null?void 0:l.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:m}},n.label),t=i.map((n,r)=>e(n,r));if(c){let n=i[0],r=i[i.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[l==null?void 0:l.highlightItem,m,c,i]),We=(0,u.useMemo)(()=>{let e=0,t=Math.PI/180,n=[];for(let r=R-1;r>=-R+1;--r){let o=r*k,f=m*Math.cos(o*t),d=e;e+=f,n.push([d,e])}return n},[k,m,R]),X=e=>(e%i.length+i.length)%i.length,G=e=>{let t=c?X(e):e;if(z.current){let n=`translateZ(${-C}px) rotateX(${k*t}deg)`;z.current.style.transform=n,z.current.childNodes.forEach(r=>{let o=r,f=Math.abs(Number(o.dataset.index)-t);o.style.visibility=f>R?"hidden":"visible"})}return $.current&&($.current.style.transform=`translateY(${-t*m}px)`),t},B=()=>{cancelAnimationFrame(ne.current)},se=(e,t,n,r)=>{if(e===t||n===0){G(e);return}let o=performance.now(),f=t-e,d=v=>{let E=(v-o)/1e3;if(E<n){let J=Ne(E/n);b.current=G(e+J*f),ne.current=requestAnimationFrame(d)}else B(),b.current=G(t),r==null||r()};requestAnimationFrame(d)},V=e=>{let t=X(e)|0,n=c?t:Math.min(Math.max(t,0),i.length-1);if(!c&&n!==e)return;b.current=G(n);let r=i[b.current];w(r.value)},Le=e=>{let t=i.findIndex(n=>n.value===e);if(t===-1){console.error("Invalid value selected:",e);return}B(),V(t)},A=e=>{let t=b.current,n=t+e;c?n=Math.round(n):n=N(Math.round(n),0,i.length-1);let r=Math.abs(n-t);if(r===0)return;let o=Math.sqrt(r/S);B(),se(t,n,o,()=>{V(b.current)})},Pe=e=>{let t=y.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,o=We.findIndex(([d,v])=>r>=d&&r<=v);if(o===-1){console.error("No item found for click position:",r);return}let f=(R-o-1)*-1;A(f)},Re=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[0])==null?void 0:n.clientY)||0,o=q.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let f=(o.startY-r)/m,d=b.current+f;if(c)d=X(d);else{let v=i.length;d<0?d*=Ie:d>v&&(d=v+(d-v)*Ie)}o.touchScroll=G(d)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},ce=e=>{var t;!H.current&&!((t=y.current)!=null&&t.contains(e.target))&&e.target!==y.current||(e.cancelable&&e.preventDefault(),i.length&&Re(e))},ae=e=>{var t,n,r;try{H.current=!0;let o=new AbortController,{signal:f}=o;j.current=o;let d={signal:f,passive:!1};(t=y.current)==null||t.addEventListener("touchmove",ce,d),document.addEventListener("mousemove",ce,d);let v=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,E=q.current;E.startY=v,E.yList=[[v,Date.now()]],E.touchScroll=b.current,E.isClick=!0,B()}catch(o){console.error("Error in initiateDragGesture:",o)}},U=(0,u.useCallback)(e=>{var r;let t=H.current,n=!!((r=y.current)!=null&&r.contains(e.target))||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),i.length&&ae(e))},[ae]),Ae=e=>{let t=b.current,n=t,r=e>0?-te:te,o=0;if(c){o=Math.abs(e/r);let f=e*o+.5*r*o*o;n=Math.round(t+f)}else if(t<0||t>i.length-1){let f=N(t,0,i.length-1),d=t-f;r=Ee,o=Math.sqrt(Math.abs(d/r)),e=r*o,e=t>0?-e:e,n=f}else{o=Math.abs(e/r);let f=e*o+.5*r*o*o;n=Math.round(t+f),n=N(n,0,i.length-1);let d=n-t;o=Math.sqrt(Math.abs(d/r))}se(t,n,o,()=>{V(b.current)}),V(b.current)},ie=()=>{var e,t,n,r;try{(e=j.current)==null||e.abort(),j.current=null;let o=q.current;if(o.isClick){Pe(o.startY);return}let f=o.yList,d=0;if(f.length>1){let v=f.length,[E,J]=(t=f[v-2])!=null?t:[0,0],[Ue,Fe]=(n=f[v-1])!=null?n:[0,0],ge=Fe-J;if(ge>0){let me=(E-Ue)/m*1e3/ge,ze=Qe,Be=me>0?1:-1;d=Math.min(Math.abs(me),ze)*Be}}b.current=(r=o.touchScroll)!=null?r:b.current,Ae(d)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{H.current=!1}},F=(0,u.useCallback)(e=>{var r;if(!i.length)return;let t=H.current,n=!!((r=y.current)!=null&&r.contains(e.target))||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),ie())},[ie]),le=e=>{e.preventDefault();let t=Date.now();if(t-re.current<100)return;let n=Math.sign(e.deltaY);n&&(re.current=t,A(n))},_=(0,u.useCallback)(e=>{if(!i.length||!y.current)return;let t=H.current,n=y.current.contains(e.target)||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),le(e))},[le]),Z=(0,u.useCallback)(e=>{let t=Y.current;if(!x||t===-1)return;let n=x.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let o;e==="prev"?o=r>0?r-1:n.length-1:o=r<n.length-1?r+1:0;let f=n[o],d=x.getPickerRef(f);if(d){let v=y.current;v&&(v.tabIndex=-1),d.tabIndex=0,x.setActiveIndex(f),d.focus()}},[x]),{handleTypeaheadSearch:ue,resetTypeahead:de}=we(i,{getTextValue:et,getCurrentIndex:(0,u.useCallback)(()=>Math.round(b.current),[]),onMatch:(0,u.useCallback)(e=>{let t=e-Math.round(b.current);A(t)},[])}),He=(0,u.useCallback)(e=>{if(i.length)switch(e.key){case"ArrowUp":e.preventDefault(),A(-1);break;case"ArrowDown":e.preventDefault(),A(1);break;case"ArrowLeft":e.preventDefault(),Z("prev");break;case"ArrowRight":e.preventDefault(),Z("next");break;case"Home":c||(e.preventDefault(),A(-b.current));break;case"End":c||(e.preventDefault(),A(i.length-1-b.current));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ue(e.key));break}},[i.length,c,Z,ue]),Ye=(0,u.useCallback)(()=>{oe(!0);let e=Y.current;x&&e!==-1&&x.setActiveIndex(e)},[x]),Oe=(0,u.useCallback)(()=>{oe(!1),de()},[de]);(0,u.useEffect)(()=>{let e=y.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",U,t),e.addEventListener("touchend",F,t),e.addEventListener("wheel",_,t),document.addEventListener("mousedown",U,t),document.addEventListener("mouseup",F,t),()=>{e.removeEventListener("touchstart",U),e.removeEventListener("touchend",F),e.removeEventListener("wheel",_),document.removeEventListener("mousedown",U),document.removeEventListener("mouseup",F)}},[F,U,_]),(0,u.useEffect)(()=>{Le(I)},[I,a,i]);let he=Y.current,Ge=(pe=x==null?void 0:x.activeIndex)!=null?pe:-1;return M.default.createElement("div",{ref:De,"data-rwp":!0,tabIndex:x&&he!==-1?Ge===he?0:-1:0,onKeyDown:He,onFocus:Ye,onBlur:Oe,style:{height:ee}},M.default.createElement("ul",{ref:z,"data-rwp-options":!0},Se),M.default.createElement("div",{className:l==null?void 0:l.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Me||void 0,"data-slot":"highlight-wrapper",style:{height:m,lineHeight:`${m}px`}},M.default.createElement("ul",{ref:$,"data-rwp-highlight-list":!0,style:{top:c?-m:void 0}},Ce)))}0&&(module.exports={WheelPicker,WheelPickerWrapper});
1
+ "use strict";"use client";var je=Object.create;var N=Object.defineProperty;var Xe=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var Ze=Object.getPrototypeOf,Je=Object.prototype.hasOwnProperty;var Qe=(o,l)=>{for(var d in l)N(o,d,{get:l[d],enumerable:!0})},ye=(o,l,d,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of _e(l))!Je.call(o,c)&&c!==d&&N(o,c,{get:()=>l[c],enumerable:!(p=Xe(l,c))||p.enumerable});return o};var oe=(o,l,d)=>(d=o!=null?je(Ze(o)):{},ye(l||!o||!o.__esModule?N(d,"default",{value:o,enumerable:!0}):d,o)),Ne=o=>ye(N({},"__esModule",{value:!0}),o);var ct={};Qe(ct,{WheelPicker:()=>at,WheelPickerWrapper:()=>ot});module.exports=Ne(ct);var L=oe(require("react")),f=require("react");var k=oe(require("react")),we=(0,k.createContext)(null);function Ie(){return(0,k.useContext)(we)}function Ee({children:o}){let[l,d]=(0,k.useState)(-1),p=(0,k.useRef)(0),c=(0,k.useRef)(new Map),m=(0,k.useCallback)((h,D)=>{let w=h!==null?h:p.current++;return c.current.set(w,D),d(O=>O===-1?w:O),w},[]),M=(0,k.useCallback)(h=>{var D;return(D=c.current.get(h))!=null?D:null},[]),S=(0,k.useCallback)(()=>Array.from(c.current.keys()).sort((h,D)=>h-D),[]),y=(0,k.useMemo)(()=>({activeIndex:l,setActiveIndex:d,register:m,getPickerRef:M,getPickerIndices:S}),[l,d,m,M,S]);return k.default.createElement(we.Provider,{value:y},o)}var R=oe(require("react"));function Me(o){let l=R.default.useRef(o);return R.default.useEffect(()=>{l.current=o}),R.default.useMemo(()=>(...d)=>{var p;return(p=l.current)==null?void 0:p.call(l,...d)},[])}function et({defaultProp:o,onChange:l}){let d=R.default.useState(o),[p]=d,c=R.default.useRef(p),m=Me(l);return R.default.useEffect(()=>{c.current!==p&&(m(p),c.current=p)},[p,c,m]),d}function Se({prop:o,defaultProp:l,onChange:d=()=>{}}){let[p,c]=et({defaultProp:l,onChange:d}),m=o!==void 0,M=m?o:p,S=Me(d),y=R.default.useCallback(h=>{if(m){let w=typeof h=="function"?h(o):h;w!==o&&S(w)}else c(h)},[m,o,c,S]);return[M,y]}var z=require("react"),tt=500;function De(o,{getTextValue:l,getCurrentIndex:d,onMatch:p}){let c=(0,z.useRef)(""),m=(0,z.useRef)(null),M=(0,z.useCallback)(()=>{c.current="",m.current&&(clearTimeout(m.current),m.current=null)},[]);return{handleTypeaheadSearch:(0,z.useCallback)(y=>{m.current&&clearTimeout(m.current),c.current+=y.toLowerCase();let h=c.current,w=h.length>1&&Array.from(h).every(C=>C===h[0])?h[0]:h,O=d(),a=w.length===1,v=-1;if(a)for(let C=1;C<=o.length;C++){let W=(O+C)%o.length;if(l(o[W]).toLowerCase().startsWith(w)){v=W;break}}else v=o.findIndex(C=>l(C).toLowerCase().startsWith(w));v!==-1&&p(v),m.current=setTimeout(()=>{c.current="",m.current=null},tt)},[o,l,d,p]),resetTypeahead:M}}var We=.3,nt=30,rt=o=>Math.pow(o-1,3)+1,ae=(o,l,d)=>Math.max(l,Math.min(o,d)),st=o=>{var l;return(l=o.textValue)!=null?l:typeof o.label=="string"?o.label:String(o.value)},q=(o,l,d,p)=>{if(d.length===0||!d.some(S=>!S.disabled))return o;let m=S=>{var w;let y=o,h=0,D=d.length;for(;h<D;){if(y=y+S,p)y=(y%d.length+d.length)%d.length;else if(y<0||y>=d.length)return-1;if(!((w=d[y])!=null&&w.disabled))return y;h++}return-1},M=m(l);return M===-1&&(M=m(l*-1)),M===-1?o:M},ot=({className:o,children:l})=>L.default.createElement(Ee,null,L.default.createElement("div",{className:o,"data-rwp-wrapper":!0},l));function at({defaultValue:o,value:l,onValueChange:d,options:p,infinite:c=!1,visibleCount:m=20,dragSensitivity:M=3,scrollSensitivity:S=5,optionItemHeight:y=30,classNames:h}){var Te;let D=(0,f.useMemo)(()=>{var t,n;let e=p.find(r=>!r.disabled);return(n=e==null?void 0:e.value)!=null?n:(t=p[0])==null?void 0:t.value},[p]),[w=D,O]=Se({defaultProp:o,prop:l,onChange:d}),a=(0,f.useMemo)(()=>{if(!c)return p;let e=[],t=Math.ceil(m/2);if(p.length===0)return e;for(;e.length<t;)e.push(...p);return e},[m,p,c]),v=y,C=v*.5,W=360/m,U=v/Math.tan(W*Math.PI/180),Ce=Math.round(U*2+v*.25),P=m>>2,ce=M*10,Le=10,E=(0,f.useRef)(null),j=(0,f.useRef)(null),ee=(0,f.useRef)(null),T=(0,f.useRef)(0),le=(0,f.useRef)(0),Y=(0,f.useRef)(!1),ie=(0,f.useRef)(0),[Re,ue]=(0,f.useState)(!1),G=(0,f.useRef)(-1),I=Ie(),Pe=(0,f.useCallback)(e=>{if(E.current=e,e&&I){let t=G.current===-1?null:G.current;G.current=I.register(t,e)}},[I]),te=(0,f.useRef)({startY:0,yList:[],touchScroll:0,isClick:!0}),ne=(0,f.useRef)(null),Ae=(0,f.useMemo)(()=>{let e=(n,r,s)=>L.default.createElement("li",{key:r,className:h==null?void 0:h.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,"data-disabled":n.disabled||void 0,style:{top:-C,height:v,lineHeight:`${v}px`,transform:`rotateX(${s}deg) translateZ(${U}px)`,visibility:"hidden"}},n.label),t=a.map((n,r)=>e(n,r,-W*r));if(c)for(let n=0;n<P;++n){let r=-n-1,s=n+a.length;t.unshift(e(a[a.length-n-1],r,W*(n+1))),t.push(e(a[n],s,-W*s))}return t},[v,C,c,W,a,P,U,h==null?void 0:h.optionItem]),He=(0,f.useMemo)(()=>{let e=(n,r)=>L.default.createElement("li",{key:r,className:h==null?void 0:h.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,"data-disabled":n.disabled||void 0,style:{height:v}},n.label),t=a.map((n,r)=>e(n,r));if(c){let n=a[0],r=a[a.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[h==null?void 0:h.highlightItem,v,c,a]),Oe=(0,f.useMemo)(()=>{let e=0,t=Math.PI/180,n=[];for(let r=P-1;r>=-P+1;--r){let s=r*W,g=v*Math.cos(s*t),i=e;e+=g,n.push([i,e])}return n},[W,v,P]),X=e=>(e%a.length+a.length)%a.length,V=e=>{let t=c?X(e):e;if(j.current){let n=`translateZ(${-U}px) rotateX(${W*t}deg)`;j.current.style.transform=n,j.current.childNodes.forEach(r=>{let s=r,g=Math.abs(Number(s.dataset.index)-t);s.style.visibility=g>P?"hidden":"visible"})}return ee.current&&(ee.current.style.transform=`translateY(${-t*v}px)`),t},_=()=>{cancelAnimationFrame(le.current)},de=(e,t,n,r)=>{if(e===t||n===0){V(e);return}let s=performance.now(),g=t-e,i=u=>{let b=(u-s)/1e3;if(b<n){let x=rt(b/n);T.current=V(e+x*g),le.current=requestAnimationFrame(i)}else _(),T.current=V(t),r==null||r()};requestAnimationFrame(i)},Z=(0,f.useRef)(1),J=(e,t)=>{var g;let n=X(e)|0,r=c?n:Math.min(Math.max(n,0),a.length-1);if(!c&&r!==e)return;if((g=a[r])!=null&&g.disabled){let i=t!=null?t:Z.current,b=q(r,i,a,c)-T.current;if(b!==0){A(b);return}}T.current=V(r);let s=a[T.current];s&&!s.disabled&&O(s.value)},Ye=e=>{var n;let t=a.findIndex(r=>r.value===e);if(t===-1){console.error("Invalid value selected:",e);return}(n=a[t])!=null&&n.disabled&&(t=q(t,1,a,c)),_(),J(t)},A=e=>{let t=T.current,n=t+e;c?n=Math.round(n):n=ae(Math.round(n),0,a.length-1);let r=Math.abs(n-t);if(r===0)return;let s=e>0?1:-1;Z.current=s;let g=Math.sqrt(r/S);_(),de(t,n,g,()=>{J(T.current,s)})},Ge=e=>{var b;let t=E.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,s=Oe.findIndex(([x,H])=>r>=x&&r<=H);if(s===-1){console.error("No item found for click position:",r);return}let g=(P-s-1)*-1,i=T.current+g,u=c?X(i):Math.max(0,Math.min(i,a.length-1));(b=a[u])!=null&&b.disabled||A(g)},ze=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[0])==null?void 0:n.clientY)||0,s=te.current;s.isClick&&Math.abs(r-s.startY)>5&&(s.isClick=!1),s.yList.push([r,Date.now()]),s.yList.length>5&&s.yList.shift();let g=(s.startY-r)/v,i=T.current+g;if(c)i=X(i);else{let u=a.length;i<0?i*=We:i>u&&(i=u+(i-u)*We)}s.touchScroll=V(i)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},he=e=>{var t;!Y.current&&!((t=E.current)!=null&&t.contains(e.target))&&e.target!==E.current||(e.cancelable&&e.preventDefault(),a.length&&ze(e))},fe=e=>{var t,n,r;try{Y.current=!0;let s=new AbortController,{signal:g}=s;ne.current=s;let i={signal:g,passive:!1};(t=E.current)==null||t.addEventListener("touchmove",he,i),document.addEventListener("mousemove",he,i);let u=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,b=te.current;b.startY=u,b.yList=[[u,Date.now()]],b.touchScroll=T.current,b.isClick=!0,_()}catch(s){console.error("Error in initiateDragGesture:",s)}},F=(0,f.useCallback)(e=>{var r;let t=Y.current,n=!!((r=E.current)!=null&&r.contains(e.target))||e.target===E.current;(t||n)&&e.cancelable&&(e.preventDefault(),a.length&&fe(e))},[fe]),Ue=e=>{let t=T.current,n=t,r=e>0?-ce:ce,s=0,g=e>0?1:-1;if(Z.current=g,c){s=Math.abs(e/r);let i=e*s+.5*r*s*s;n=Math.round(t+i)}else if(t<0||t>a.length-1){let i=ae(t,0,a.length-1),u=t-i;r=Le,s=Math.sqrt(Math.abs(u/r)),e=r*s,e=t>0?-e:e,n=i}else{s=Math.abs(e/r);let i=e*s+.5*r*s*s;n=Math.round(t+i),n=ae(n,0,a.length-1);let u=n-t;s=Math.sqrt(Math.abs(u/r))}de(t,n,s,()=>{J(T.current,g)}),J(T.current,g)},ge=()=>{var e,t,n,r;try{(e=ne.current)==null||e.abort(),ne.current=null;let s=te.current;if(s.isClick){Ge(s.startY);return}let g=s.yList,i=0;if(g.length>1){let u=g.length,[b,x]=(t=g[u-2])!=null?t:[0,0],[H,Q]=(n=g[u-1])!=null?n:[0,0],$=Q-x;if($>0){let ke=(b-H)/v*1e3/$,$e=nt,qe=ke>0?1:-1;i=Math.min(Math.abs(ke),$e)*qe}}T.current=(r=s.touchScroll)!=null?r:T.current,Ue(i)}catch(s){console.error("Error in finalizeDragAndStartInertiaScroll:",s)}finally{Y.current=!1}},B=(0,f.useCallback)(e=>{var r;if(!a.length)return;let t=Y.current,n=!!((r=E.current)!=null&&r.contains(e.target))||e.target===E.current;(t||n)&&e.cancelable&&(e.preventDefault(),ge())},[ge]),pe=e=>{e.preventDefault();let t=Date.now();if(t-ie.current<100)return;let n=Math.sign(e.deltaY);n&&(ie.current=t,Z.current=n,A(n))},re=(0,f.useCallback)(e=>{if(!a.length||!E.current)return;let t=Y.current,n=E.current.contains(e.target)||e.target===E.current;(t||n)&&e.cancelable&&(e.preventDefault(),pe(e))},[pe]),se=(0,f.useCallback)(e=>{let t=G.current;if(!I||t===-1)return;let n=I.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let s;e==="prev"?s=r>0?r-1:n.length-1:s=r<n.length-1?r+1:0;let g=n[s],i=I.getPickerRef(g);if(i){let u=E.current;u&&(u.tabIndex=-1),i.tabIndex=0,I.setActiveIndex(g),i.focus()}},[I]),K=(0,f.useMemo)(()=>{let e=new Map,t=new Map,n=[];return a.forEach((r,s)=>{if(!r.disabled){let g=n.length;e.set(g,s),t.set(s,g),n.push(r)}}),{enabled:n,map:e,reverseMap:t}},[a]),{handleTypeaheadSearch:me,resetTypeahead:be}=De(K.enabled,{getTextValue:st,getCurrentIndex:(0,f.useCallback)(()=>{var t;let e=Math.round(T.current);return(t=K.reverseMap.get(e))!=null?t:0},[K]),onMatch:(0,f.useCallback)(e=>{let t=K.map.get(e);if(t!==void 0){let n=t-Math.round(T.current);A(n)}},[K])}),Ve=(0,f.useCallback)(e=>{if(!a.length)return;let t=u=>{var $;e.preventDefault();let b=Math.round(T.current),x=b+u;if(!c&&(u===-1&&x<0||u===1&&x>=a.length))return;let H=c?u===-1?(x%a.length+a.length)%a.length:x%a.length:x;if(($=a[H])!=null&&$.disabled){let xe=q(H,u,a,c);x=b+u+(xe-H)}let Q=x-b;Q!==0&&A(Q)},n=()=>{var x;if(c)return;e.preventDefault();let u=0;(x=a[0])!=null&&x.disabled&&(u=q(0,1,a,!1));let b=u-T.current;b!==0&&A(b)},r=()=>{var x;if(c)return;e.preventDefault();let u=a.length-1;(x=a[u])!=null&&x.disabled&&(u=q(u,-1,a,!1));let b=u-T.current;b!==0&&A(b)},s=()=>{e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),me(e.key))},i={ArrowUp:()=>t(-1),ArrowDown:()=>t(1),ArrowLeft:()=>{e.preventDefault(),se("prev")},ArrowRight:()=>{e.preventDefault(),se("next")},Home:n,End:r}[e.key];i?i():s()},[a.length,c,se,me]),Fe=(0,f.useCallback)(()=>{ue(!0);let e=G.current;I&&e!==-1&&I.setActiveIndex(e)},[I]),Be=(0,f.useCallback)(()=>{ue(!1),be()},[be]);(0,f.useEffect)(()=>{let e=E.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",F,t),e.addEventListener("touchend",B,t),e.addEventListener("wheel",re,t),document.addEventListener("mousedown",F,t),document.addEventListener("mouseup",B,t),()=>{e.removeEventListener("touchstart",F),e.removeEventListener("touchend",B),e.removeEventListener("wheel",re),document.removeEventListener("mousedown",F),document.removeEventListener("mouseup",B)}},[B,F,re]),(0,f.useEffect)(()=>{Ye(w)},[w,l,a]);let ve=G.current,Ke=(Te=I==null?void 0:I.activeIndex)!=null?Te:-1;return L.default.createElement("div",{ref:Pe,"data-rwp":!0,tabIndex:I&&ve!==-1?Ke===ve?0:-1:0,onKeyDown:Ve,onFocus:Fe,onBlur:Be,style:{height:Ce}},L.default.createElement("ul",{ref:j,"data-rwp-options":!0},Ae),L.default.createElement("div",{className:h==null?void 0:h.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Re||void 0,"data-slot":"highlight-wrapper",style:{height:v,lineHeight:`${v}px`}},L.default.createElement("ul",{ref:ee,"data-rwp-highlight-list":!0,style:{top:c?-v:void 0}},He)))}0&&(module.exports={WheelPicker,WheelPickerWrapper});
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- "use client";import C from"react";import{useCallback as w,useEffect as Ee,useMemo as V,useRef as I,useState as Qe}from"react";import $e,{createContext as qe,useCallback as J,useContext as je,useMemo as Xe,useRef as me,useState as _e}from"react";var be=qe(null);function ve(){return je(be)}function Te({children:i}){let[d,p]=_e(-1),f=me(0),a=me(new Map),h=J((c,y)=>{let x=c!==null?c:f.current++;return a.current.set(x,y),p(s=>s===-1?x:s),x},[]),M=J(c=>{var y;return(y=a.current.get(c))!=null?y:null},[]),D=J(()=>Array.from(a.current.keys()).sort((c,y)=>c-y),[]),W=Xe(()=>({activeIndex:d,setActiveIndex:p,register:h,getPickerRef:M,getPickerIndices:D}),[d,p,h,M,D]);return $e.createElement(be.Provider,{value:W},i)}import A from"react";function ke(i){let d=A.useRef(i);return A.useEffect(()=>{d.current=i}),A.useMemo(()=>(...p)=>{var f;return(f=d.current)==null?void 0:f.call(d,...p)},[])}function Ze({defaultProp:i,onChange:d}){let p=A.useState(i),[f]=p,a=A.useRef(f),h=ke(d);return A.useEffect(()=>{a.current!==f&&(h(f),a.current=f)},[f,a,h]),p}function xe({prop:i,defaultProp:d,onChange:p=()=>{}}){let[f,a]=Ze({defaultProp:d,onChange:p}),h=i!==void 0,M=h?i:f,D=ke(p),W=A.useCallback(c=>{if(h){let x=typeof c=="function"?c(i):c;x!==i&&D(x)}else a(c)},[h,i,a,D]);return[M,W]}import{useCallback as ye,useRef as we}from"react";var Je=500;function Ie(i,{getTextValue:d,getCurrentIndex:p,onMatch:f}){let a=we(""),h=we(null),M=ye(()=>{a.current="",h.current&&(clearTimeout(h.current),h.current=null)},[]);return{handleTypeaheadSearch:ye(W=>{h.current&&clearTimeout(h.current),a.current+=W.toLowerCase();let c=a.current,x=c.length>1&&Array.from(c).every(v=>v===c[0])?c[0]:c,s=p(),g=x.length===1,L=-1;if(g)for(let v=1;v<=i.length;v++){let S=(s+v)%i.length;if(d(i[S]).toLowerCase().startsWith(x)){L=S;break}}else L=i.findIndex(v=>d(v).toLowerCase().startsWith(x));L!==-1&&f(L),h.current=setTimeout(()=>{a.current="",h.current=null},Je)},[i,d,p,f]),resetTypeahead:M}}var Me=.3,Ne=30,et=i=>Math.pow(i-1,3)+1,Q=(i,d,p)=>Math.max(d,Math.min(i,p)),tt=i=>{var d;return(d=i.textValue)!=null?d:typeof i.label=="string"?i.label:String(i.value)},Tt=({className:i,children:d})=>C.createElement(Te,null,C.createElement("div",{className:i,"data-rwp-wrapper":!0},d));function kt({defaultValue:i,value:d,onValueChange:p,options:f,infinite:a=!1,visibleCount:h=20,dragSensitivity:M=3,scrollSensitivity:D=5,optionItemHeight:W=30,classNames:c}){var he,fe;let[y=(he=f[0])==null?void 0:he.value,x]=xe({defaultProp:i,prop:d,onChange:p}),s=V(()=>{if(!a)return f;let e=[],t=Math.ceil(h/2);if(f.length===0)return e;for(;e.length<t;)e.push(...f);return e},[h,f,a]),g=W,L=g*.5,v=360/h,S=g/Math.tan(v*Math.PI/180),N=Math.round(S*2+g*.25),P=h>>2,ee=M*10,De=10,k=I(null),F=I(null),K=I(null),m=I(0),te=I(0),H=I(!1),ne=I(0),[Se,re]=Qe(!1),Y=I(-1),T=ve(),Ce=w(e=>{if(k.current=e,e&&T){let t=Y.current===-1?null:Y.current;Y.current=T.register(t,e)}},[T]),$=I({startY:0,yList:[],touchScroll:0,isClick:!0}),q=I(null),We=V(()=>{let e=(n,r,o)=>C.createElement("li",{key:r,className:c==null?void 0:c.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-L,height:g,lineHeight:`${g}px`,transform:`rotateX(${o}deg) translateZ(${S}px)`,visibility:"hidden"}},n.label),t=s.map((n,r)=>e(n,r,-v*r));if(a)for(let n=0;n<P;++n){let r=-n-1,o=n+s.length;t.unshift(e(s[s.length-n-1],r,v*(n+1))),t.push(e(s[n],o,-v*o))}return t},[g,L,a,v,s,P,S,c==null?void 0:c.optionItem]),Le=V(()=>{let e=(n,r)=>C.createElement("li",{key:r,className:c==null?void 0:c.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:g}},n.label),t=s.map((n,r)=>e(n,r));if(a){let n=s[0],r=s[s.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[c==null?void 0:c.highlightItem,g,a,s]),Pe=V(()=>{let e=0,t=Math.PI/180,n=[];for(let r=P-1;r>=-P+1;--r){let o=r*v,u=g*Math.cos(o*t),l=e;e+=u,n.push([l,e])}return n},[v,g,P]),j=e=>(e%s.length+s.length)%s.length,O=e=>{let t=a?j(e):e;if(F.current){let n=`translateZ(${-S}px) rotateX(${v*t}deg)`;F.current.style.transform=n,F.current.childNodes.forEach(r=>{let o=r,u=Math.abs(Number(o.dataset.index)-t);o.style.visibility=u>P?"hidden":"visible"})}return K.current&&(K.current.style.transform=`translateY(${-t*g}px)`),t},z=()=>{cancelAnimationFrame(te.current)},oe=(e,t,n,r)=>{if(e===t||n===0){O(e);return}let o=performance.now(),u=t-e,l=b=>{let E=(b-o)/1e3;if(E<n){let Z=et(E/n);m.current=O(e+Z*u),te.current=requestAnimationFrame(l)}else z(),m.current=O(t),r==null||r()};requestAnimationFrame(l)},B=e=>{let t=j(e)|0,n=a?t:Math.min(Math.max(t,0),s.length-1);if(!a&&n!==e)return;m.current=O(n);let r=s[m.current];x(r.value)},Re=e=>{let t=s.findIndex(n=>n.value===e);if(t===-1){console.error("Invalid value selected:",e);return}z(),B(t)},R=e=>{let t=m.current,n=t+e;a?n=Math.round(n):n=Q(Math.round(n),0,s.length-1);let r=Math.abs(n-t);if(r===0)return;let o=Math.sqrt(r/D);z(),oe(t,n,o,()=>{B(m.current)})},Ae=e=>{let t=k.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,o=Pe.findIndex(([l,b])=>r>=l&&r<=b);if(o===-1){console.error("No item found for click position:",r);return}let u=(P-o-1)*-1;R(u)},He=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[0])==null?void 0:n.clientY)||0,o=$.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let u=(o.startY-r)/g,l=m.current+u;if(a)l=j(l);else{let b=s.length;l<0?l*=Me:l>b&&(l=b+(l-b)*Me)}o.touchScroll=O(l)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},se=e=>{var t;!H.current&&!((t=k.current)!=null&&t.contains(e.target))&&e.target!==k.current||(e.cancelable&&e.preventDefault(),s.length&&He(e))},ce=e=>{var t,n,r;try{H.current=!0;let o=new AbortController,{signal:u}=o;q.current=o;let l={signal:u,passive:!1};(t=k.current)==null||t.addEventListener("touchmove",se,l),document.addEventListener("mousemove",se,l);let b=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,E=$.current;E.startY=b,E.yList=[[b,Date.now()]],E.touchScroll=m.current,E.isClick=!0,z()}catch(o){console.error("Error in initiateDragGesture:",o)}},G=w(e=>{var r;let t=H.current,n=!!((r=k.current)!=null&&r.contains(e.target))||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),s.length&&ce(e))},[ce]),Ye=e=>{let t=m.current,n=t,r=e>0?-ee:ee,o=0;if(a){o=Math.abs(e/r);let u=e*o+.5*r*o*o;n=Math.round(t+u)}else if(t<0||t>s.length-1){let u=Q(t,0,s.length-1),l=t-u;r=De,o=Math.sqrt(Math.abs(l/r)),e=r*o,e=t>0?-e:e,n=u}else{o=Math.abs(e/r);let u=e*o+.5*r*o*o;n=Math.round(t+u),n=Q(n,0,s.length-1);let l=n-t;o=Math.sqrt(Math.abs(l/r))}oe(t,n,o,()=>{B(m.current)}),B(m.current)},ae=()=>{var e,t,n,r;try{(e=q.current)==null||e.abort(),q.current=null;let o=$.current;if(o.isClick){Ae(o.startY);return}let u=o.yList,l=0;if(u.length>1){let b=u.length,[E,Z]=(t=u[b-2])!=null?t:[0,0],[ze,Be]=(n=u[b-1])!=null?n:[0,0],pe=Be-Z;if(pe>0){let ge=(E-ze)/g*1e3/pe,Ve=Ne,Ke=ge>0?1:-1;l=Math.min(Math.abs(ge),Ve)*Ke}}m.current=(r=o.touchScroll)!=null?r:m.current,Ye(l)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{H.current=!1}},U=w(e=>{var r;if(!s.length)return;let t=H.current,n=!!((r=k.current)!=null&&r.contains(e.target))||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),ae())},[ae]),ie=e=>{e.preventDefault();let t=Date.now();if(t-ne.current<100)return;let n=Math.sign(e.deltaY);n&&(ne.current=t,R(n))},X=w(e=>{if(!s.length||!k.current)return;let t=H.current,n=k.current.contains(e.target)||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),ie(e))},[ie]),_=w(e=>{let t=Y.current;if(!T||t===-1)return;let n=T.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let o;e==="prev"?o=r>0?r-1:n.length-1:o=r<n.length-1?r+1:0;let u=n[o],l=T.getPickerRef(u);if(l){let b=k.current;b&&(b.tabIndex=-1),l.tabIndex=0,T.setActiveIndex(u),l.focus()}},[T]),{handleTypeaheadSearch:le,resetTypeahead:ue}=Ie(s,{getTextValue:tt,getCurrentIndex:w(()=>Math.round(m.current),[]),onMatch:w(e=>{let t=e-Math.round(m.current);R(t)},[])}),Oe=w(e=>{if(s.length)switch(e.key){case"ArrowUp":e.preventDefault(),R(-1);break;case"ArrowDown":e.preventDefault(),R(1);break;case"ArrowLeft":e.preventDefault(),_("prev");break;case"ArrowRight":e.preventDefault(),_("next");break;case"Home":a||(e.preventDefault(),R(-m.current));break;case"End":a||(e.preventDefault(),R(s.length-1-m.current));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),le(e.key));break}},[s.length,a,_,le]),Ge=w(()=>{re(!0);let e=Y.current;T&&e!==-1&&T.setActiveIndex(e)},[T]),Ue=w(()=>{re(!1),ue()},[ue]);Ee(()=>{let e=k.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",G,t),e.addEventListener("touchend",U,t),e.addEventListener("wheel",X,t),document.addEventListener("mousedown",G,t),document.addEventListener("mouseup",U,t),()=>{e.removeEventListener("touchstart",G),e.removeEventListener("touchend",U),e.removeEventListener("wheel",X),document.removeEventListener("mousedown",G),document.removeEventListener("mouseup",U)}},[U,G,X]),Ee(()=>{Re(y)},[y,d,s]);let de=Y.current,Fe=(fe=T==null?void 0:T.activeIndex)!=null?fe:-1;return C.createElement("div",{ref:Ce,"data-rwp":!0,tabIndex:T&&de!==-1?Fe===de?0:-1:0,onKeyDown:Oe,onFocus:Ge,onBlur:Ue,style:{height:N}},C.createElement("ul",{ref:F,"data-rwp-options":!0},We),C.createElement("div",{className:c==null?void 0:c.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Se||void 0,"data-slot":"highlight-wrapper",style:{height:g,lineHeight:`${g}px`}},C.createElement("ul",{ref:K,"data-rwp-highlight-list":!0,style:{top:a?-g:void 0}},Le)))}export{kt as WheelPicker,Tt as WheelPickerWrapper};
1
+ "use client";import L from"react";import{useCallback as C,useEffect as Ce,useMemo as z,useRef as D,useState as nt}from"react";import _e,{createContext as Ze,useCallback as se,useContext as Je,useMemo as Qe,useRef as ke,useState as Ne}from"react";var ye=Ze(null);function we(){return Je(ye)}function Ie({children:i}){let[h,f]=Ne(-1),g=ke(0),a=ke(new Map),p=se((u,M)=>{let k=u!==null?u:g.current++;return a.current.set(k,M),f(O=>O===-1?k:O),k},[]),I=se(u=>{var M;return(M=a.current.get(u))!=null?M:null},[]),E=se(()=>Array.from(a.current.keys()).sort((u,M)=>u-M),[]),x=Qe(()=>({activeIndex:h,setActiveIndex:f,register:p,getPickerRef:I,getPickerIndices:E}),[h,f,p,I,E]);return _e.createElement(ye.Provider,{value:x},i)}import H from"react";function Ee(i){let h=H.useRef(i);return H.useEffect(()=>{h.current=i}),H.useMemo(()=>(...f)=>{var g;return(g=h.current)==null?void 0:g.call(h,...f)},[])}function et({defaultProp:i,onChange:h}){let f=H.useState(i),[g]=f,a=H.useRef(g),p=Ee(h);return H.useEffect(()=>{a.current!==g&&(p(g),a.current=g)},[g,a,p]),f}function Me({prop:i,defaultProp:h,onChange:f=()=>{}}){let[g,a]=et({defaultProp:h,onChange:f}),p=i!==void 0,I=p?i:g,E=Ee(f),x=H.useCallback(u=>{if(p){let k=typeof u=="function"?u(i):u;k!==i&&E(k)}else a(u)},[p,i,a,E]);return[I,x]}import{useCallback as Se,useRef as De}from"react";var tt=500;function We(i,{getTextValue:h,getCurrentIndex:f,onMatch:g}){let a=De(""),p=De(null),I=Se(()=>{a.current="",p.current&&(clearTimeout(p.current),p.current=null)},[]);return{handleTypeaheadSearch:Se(x=>{p.current&&clearTimeout(p.current),a.current+=x.toLowerCase();let u=a.current,k=u.length>1&&Array.from(u).every(W=>W===u[0])?u[0]:u,O=f(),o=k.length===1,b=-1;if(o)for(let W=1;W<=i.length;W++){let S=(O+W)%i.length;if(h(i[S]).toLowerCase().startsWith(k)){b=S;break}}else b=i.findIndex(W=>h(W).toLowerCase().startsWith(k));b!==-1&&g(b),p.current=setTimeout(()=>{a.current="",p.current=null},tt)},[i,h,f,g]),resetTypeahead:I}}var Le=.3,rt=30,st=i=>Math.pow(i-1,3)+1,oe=(i,h,f)=>Math.max(h,Math.min(i,f)),ot=i=>{var h;return(h=i.textValue)!=null?h:typeof i.label=="string"?i.label:String(i.value)},q=(i,h,f,g)=>{if(f.length===0||!f.some(E=>!E.disabled))return i;let p=E=>{var k;let x=i,u=0,M=f.length;for(;u<M;){if(x=x+E,g)x=(x%f.length+f.length)%f.length;else if(x<0||x>=f.length)return-1;if(!((k=f[x])!=null&&k.disabled))return x;u++}return-1},I=p(h);return I===-1&&(I=p(h*-1)),I===-1?i:I},yt=({className:i,children:h})=>L.createElement(Ie,null,L.createElement("div",{className:i,"data-rwp-wrapper":!0},h));function wt({defaultValue:i,value:h,onValueChange:f,options:g,infinite:a=!1,visibleCount:p=20,dragSensitivity:I=3,scrollSensitivity:E=5,optionItemHeight:x=30,classNames:u}){var ve;let M=z(()=>{var t,n;let e=g.find(r=>!r.disabled);return(n=e==null?void 0:e.value)!=null?n:(t=g[0])==null?void 0:t.value},[g]),[k=M,O]=Me({defaultProp:i,prop:h,onChange:f}),o=z(()=>{if(!a)return g;let e=[],t=Math.ceil(p/2);if(g.length===0)return e;for(;e.length<t;)e.push(...g);return e},[p,g,a]),b=x,W=b*.5,S=360/p,U=b/Math.tan(S*Math.PI/180),Re=Math.round(U*2+b*.25),R=p>>2,ae=I*10,Pe=10,w=D(null),j=D(null),N=D(null),v=D(0),ce=D(0),Y=D(!1),le=D(0),[Ae,ie]=nt(!1),G=D(-1),y=we(),He=C(e=>{if(w.current=e,e&&y){let t=G.current===-1?null:G.current;G.current=y.register(t,e)}},[y]),ee=D({startY:0,yList:[],touchScroll:0,isClick:!0}),te=D(null),Oe=z(()=>{let e=(n,r,s)=>L.createElement("li",{key:r,className:u==null?void 0:u.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,"data-disabled":n.disabled||void 0,style:{top:-W,height:b,lineHeight:`${b}px`,transform:`rotateX(${s}deg) translateZ(${U}px)`,visibility:"hidden"}},n.label),t=o.map((n,r)=>e(n,r,-S*r));if(a)for(let n=0;n<R;++n){let r=-n-1,s=n+o.length;t.unshift(e(o[o.length-n-1],r,S*(n+1))),t.push(e(o[n],s,-S*s))}return t},[b,W,a,S,o,R,U,u==null?void 0:u.optionItem]),Ye=z(()=>{let e=(n,r)=>L.createElement("li",{key:r,className:u==null?void 0:u.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,"data-disabled":n.disabled||void 0,style:{height:b}},n.label),t=o.map((n,r)=>e(n,r));if(a){let n=o[0],r=o[o.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[u==null?void 0:u.highlightItem,b,a,o]),Ge=z(()=>{let e=0,t=Math.PI/180,n=[];for(let r=R-1;r>=-R+1;--r){let s=r*S,d=b*Math.cos(s*t),c=e;e+=d,n.push([c,e])}return n},[S,b,R]),X=e=>(e%o.length+o.length)%o.length,V=e=>{let t=a?X(e):e;if(j.current){let n=`translateZ(${-U}px) rotateX(${S*t}deg)`;j.current.style.transform=n,j.current.childNodes.forEach(r=>{let s=r,d=Math.abs(Number(s.dataset.index)-t);s.style.visibility=d>R?"hidden":"visible"})}return N.current&&(N.current.style.transform=`translateY(${-t*b}px)`),t},_=()=>{cancelAnimationFrame(ce.current)},ue=(e,t,n,r)=>{if(e===t||n===0){V(e);return}let s=performance.now(),d=t-e,c=l=>{let m=(l-s)/1e3;if(m<n){let T=st(m/n);v.current=V(e+T*d),ce.current=requestAnimationFrame(c)}else _(),v.current=V(t),r==null||r()};requestAnimationFrame(c)},Z=D(1),J=(e,t)=>{var d;let n=X(e)|0,r=a?n:Math.min(Math.max(n,0),o.length-1);if(!a&&r!==e)return;if((d=o[r])!=null&&d.disabled){let c=t!=null?t:Z.current,m=q(r,c,o,a)-v.current;if(m!==0){P(m);return}}v.current=V(r);let s=o[v.current];s&&!s.disabled&&O(s.value)},ze=e=>{var n;let t=o.findIndex(r=>r.value===e);if(t===-1){console.error("Invalid value selected:",e);return}(n=o[t])!=null&&n.disabled&&(t=q(t,1,o,a)),_(),J(t)},P=e=>{let t=v.current,n=t+e;a?n=Math.round(n):n=oe(Math.round(n),0,o.length-1);let r=Math.abs(n-t);if(r===0)return;let s=e>0?1:-1;Z.current=s;let d=Math.sqrt(r/E);_(),ue(t,n,d,()=>{J(v.current,s)})},Ue=e=>{var m;let t=w.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,s=Ge.findIndex(([T,A])=>r>=T&&r<=A);if(s===-1){console.error("No item found for click position:",r);return}let d=(R-s-1)*-1,c=v.current+d,l=a?X(c):Math.max(0,Math.min(c,o.length-1));(m=o[l])!=null&&m.disabled||P(d)},Ve=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[0])==null?void 0:n.clientY)||0,s=ee.current;s.isClick&&Math.abs(r-s.startY)>5&&(s.isClick=!1),s.yList.push([r,Date.now()]),s.yList.length>5&&s.yList.shift();let d=(s.startY-r)/b,c=v.current+d;if(a)c=X(c);else{let l=o.length;c<0?c*=Le:c>l&&(c=l+(c-l)*Le)}s.touchScroll=V(c)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},de=e=>{var t;!Y.current&&!((t=w.current)!=null&&t.contains(e.target))&&e.target!==w.current||(e.cancelable&&e.preventDefault(),o.length&&Ve(e))},he=e=>{var t,n,r;try{Y.current=!0;let s=new AbortController,{signal:d}=s;te.current=s;let c={signal:d,passive:!1};(t=w.current)==null||t.addEventListener("touchmove",de,c),document.addEventListener("mousemove",de,c);let l=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,m=ee.current;m.startY=l,m.yList=[[l,Date.now()]],m.touchScroll=v.current,m.isClick=!0,_()}catch(s){console.error("Error in initiateDragGesture:",s)}},F=C(e=>{var r;let t=Y.current,n=!!((r=w.current)!=null&&r.contains(e.target))||e.target===w.current;(t||n)&&e.cancelable&&(e.preventDefault(),o.length&&he(e))},[he]),Fe=e=>{let t=v.current,n=t,r=e>0?-ae:ae,s=0,d=e>0?1:-1;if(Z.current=d,a){s=Math.abs(e/r);let c=e*s+.5*r*s*s;n=Math.round(t+c)}else if(t<0||t>o.length-1){let c=oe(t,0,o.length-1),l=t-c;r=Pe,s=Math.sqrt(Math.abs(l/r)),e=r*s,e=t>0?-e:e,n=c}else{s=Math.abs(e/r);let c=e*s+.5*r*s*s;n=Math.round(t+c),n=oe(n,0,o.length-1);let l=n-t;s=Math.sqrt(Math.abs(l/r))}ue(t,n,s,()=>{J(v.current,d)}),J(v.current,d)},fe=()=>{var e,t,n,r;try{(e=te.current)==null||e.abort(),te.current=null;let s=ee.current;if(s.isClick){Ue(s.startY);return}let d=s.yList,c=0;if(d.length>1){let l=d.length,[m,T]=(t=d[l-2])!=null?t:[0,0],[A,Q]=(n=d[l-1])!=null?n:[0,0],$=Q-T;if($>0){let xe=(m-A)/b*1e3/$,je=rt,Xe=xe>0?1:-1;c=Math.min(Math.abs(xe),je)*Xe}}v.current=(r=s.touchScroll)!=null?r:v.current,Fe(c)}catch(s){console.error("Error in finalizeDragAndStartInertiaScroll:",s)}finally{Y.current=!1}},B=C(e=>{var r;if(!o.length)return;let t=Y.current,n=!!((r=w.current)!=null&&r.contains(e.target))||e.target===w.current;(t||n)&&e.cancelable&&(e.preventDefault(),fe())},[fe]),ge=e=>{e.preventDefault();let t=Date.now();if(t-le.current<100)return;let n=Math.sign(e.deltaY);n&&(le.current=t,Z.current=n,P(n))},ne=C(e=>{if(!o.length||!w.current)return;let t=Y.current,n=w.current.contains(e.target)||e.target===w.current;(t||n)&&e.cancelable&&(e.preventDefault(),ge(e))},[ge]),re=C(e=>{let t=G.current;if(!y||t===-1)return;let n=y.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let s;e==="prev"?s=r>0?r-1:n.length-1:s=r<n.length-1?r+1:0;let d=n[s],c=y.getPickerRef(d);if(c){let l=w.current;l&&(l.tabIndex=-1),c.tabIndex=0,y.setActiveIndex(d),c.focus()}},[y]),K=z(()=>{let e=new Map,t=new Map,n=[];return o.forEach((r,s)=>{if(!r.disabled){let d=n.length;e.set(d,s),t.set(s,d),n.push(r)}}),{enabled:n,map:e,reverseMap:t}},[o]),{handleTypeaheadSearch:pe,resetTypeahead:me}=We(K.enabled,{getTextValue:ot,getCurrentIndex:C(()=>{var t;let e=Math.round(v.current);return(t=K.reverseMap.get(e))!=null?t:0},[K]),onMatch:C(e=>{let t=K.map.get(e);if(t!==void 0){let n=t-Math.round(v.current);P(n)}},[K])}),Be=C(e=>{if(!o.length)return;let t=l=>{var $;e.preventDefault();let m=Math.round(v.current),T=m+l;if(!a&&(l===-1&&T<0||l===1&&T>=o.length))return;let A=a?l===-1?(T%o.length+o.length)%o.length:T%o.length:T;if(($=o[A])!=null&&$.disabled){let Te=q(A,l,o,a);T=m+l+(Te-A)}let Q=T-m;Q!==0&&P(Q)},n=()=>{var T;if(a)return;e.preventDefault();let l=0;(T=o[0])!=null&&T.disabled&&(l=q(0,1,o,!1));let m=l-v.current;m!==0&&P(m)},r=()=>{var T;if(a)return;e.preventDefault();let l=o.length-1;(T=o[l])!=null&&T.disabled&&(l=q(l,-1,o,!1));let m=l-v.current;m!==0&&P(m)},s=()=>{e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),pe(e.key))},c={ArrowUp:()=>t(-1),ArrowDown:()=>t(1),ArrowLeft:()=>{e.preventDefault(),re("prev")},ArrowRight:()=>{e.preventDefault(),re("next")},Home:n,End:r}[e.key];c?c():s()},[o.length,a,re,pe]),Ke=C(()=>{ie(!0);let e=G.current;y&&e!==-1&&y.setActiveIndex(e)},[y]),$e=C(()=>{ie(!1),me()},[me]);Ce(()=>{let e=w.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",F,t),e.addEventListener("touchend",B,t),e.addEventListener("wheel",ne,t),document.addEventListener("mousedown",F,t),document.addEventListener("mouseup",B,t),()=>{e.removeEventListener("touchstart",F),e.removeEventListener("touchend",B),e.removeEventListener("wheel",ne),document.removeEventListener("mousedown",F),document.removeEventListener("mouseup",B)}},[B,F,ne]),Ce(()=>{ze(k)},[k,h,o]);let be=G.current,qe=(ve=y==null?void 0:y.activeIndex)!=null?ve:-1;return L.createElement("div",{ref:He,"data-rwp":!0,tabIndex:y&&be!==-1?qe===be?0:-1:0,onKeyDown:Be,onFocus:Ke,onBlur:$e,style:{height:Re}},L.createElement("ul",{ref:j,"data-rwp-options":!0},Oe),L.createElement("div",{className:u==null?void 0:u.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Ae||void 0,"data-slot":"highlight-wrapper",style:{height:b,lineHeight:`${b}px`}},L.createElement("ul",{ref:N,"data-rwp-highlight-list":!0,style:{top:a?-b:void 0}},Ye)))}export{wt as WheelPicker,yt as WheelPickerWrapper};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncdai/react-wheel-picker",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
5
5
  "publishConfig": {
6
6
  "access": "public",