@gfazioli/mantine-picker 2.3.14 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Mantine Picker Component
 
-<img alt="Mantine Picker" src="https://github.com/gfazioli/mantine-picker/blob/master/logo.png" />
+<img alt="Mantine Picker" src="https://github.com/gfazioli/mantine-picker/blob/master/logo.jpeg" />
 
 <div align="center">
   
@@ -18,12 +18,24 @@
 ## Overview
 
 This component is created on top of the [Mantine](https://mantine.dev/) library.
-
-[Mantine Picker](https://gfazioli.github.io/mantine-picker/) is a versatile UI component for building iOS-like wheel pickers in React with Mantine, enabling selection through dragging, mouse wheel, clicking, and keyboard navigation. Developers can fully control state via value and onChange, or render bespoke item content with renderItem (e.g., color swatches, badges). 
-
-The component’s appearance and behavior are highly tunable: itemHeight, visibleItems, cylinderRadius, rotation (rotateY), blur/opacity/scale gradients, mask and highlight, dividers, loop, and animationDuration. Decorative sections (leftSection/rightSection) let you embed icons or labels that remain fixed while the list scrolls, and readOnly mode permits programmatic updates while preventing user changes—handy for counters and clocks.
-
-Beyond simple lists like cities or months, the Picker supports composite inputs such as time and date pickers by composing multiple instances (hours, minutes, AM/PM; day, month, year) and synchronizing their values. Styling can be adapted with variants, size presets, uppercase transforms, gradients, and custom shadows, and global styles are imported once via the package’s CSS. Altogether, Mantine Picker offers a polished, customizable selection experience that integrates cleanly with Mantine layouts and components for production-ready pickers.
+It requires **Mantine 9.x** and **React 19**.
+
+[Mantine Picker](https://gfazioli.github.io/mantine-picker/) is an iOS-style wheel picker for React with Mantine, enabling selection through dragging, mouse wheel, clicking, and keyboard navigation.
+
+## Features
+
+- 🎡 **iOS-style wheel picker**: Smooth drag, wheel, click, and keyboard navigation
+- 🎲 **3D rotation effect**: Configurable `perspective`, `maxRotation`, `cylinderRadius`, `rotateY`
+- 🔄 **Loop mode**: Infinite circular scrolling through items
+- 🎯 **Momentum scrolling**: Inertia-based deceleration after drag release
+- 🎨 **Custom item rendering**: `renderItem` for color swatches, badges, icons, or any React content
+- 📐 **Left/Right sections**: Fixed content beside the picker (icons, labels)
+- 🔒 **Read-only mode**: Programmatic updates without user interaction (counters, clocks)
+- 🎭 **Visual effects**: Configurable blur, opacity, scale gradients for non-selected items
+- 🖌 **Mask, highlight, dividers**: Toggle gradient mask, selection highlight, and divider lines
+- ♿ **Accessible**: `aria-label`, keyboard navigation, `focusable` prop, screen reader support
+- 🎨 **Styles API**: Full Mantine Styles API support with 6 selectors
+- 📦 **TypeScript**: Full type safety with generic `Picker<T>` support
 
 > [!note]
 >

package/dist/cjs/Picker.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var React = require('react');
+var hooks = require('@mantine/hooks');
 var core = require('@mantine/core');
 var Picker_module = require('./Picker.module.css.cjs');
 
@@ -62,8 +63,9 @@ const varsResolver = core.createVarsResolver(
     };
   }
 );
-const Picker = core.polymorphicFactory((_props, ref) => {
-  const props = core.useProps("Picker", defaultProps, _props);
+const Picker = core.polymorphicFactory((_props) => {
+  const { ref, ...restProps } = _props;
+  const props = core.useProps("Picker", defaultProps, restProps);
   const {
     data,
     value,
@@ -155,10 +157,10 @@ const Picker = core.polymorphicFactory((_props, ref) => {
   const prevValueRef = React.useRef(value);
   const containerRef = React.useRef(null);
   const rootRef = React.useRef(null);
+  const mergedRootRef = hooks.useMergedRef(ref, rootRef);
   const [isDragging, setIsDragging] = React.useState(false);
-  const [lastY, setLastY] = React.useState(0);
-  const [dragOffset, setDragOffset] = React.useState(0);
-  const [velocity, setVelocity] = React.useState(0);
+  const lastYRef = React.useRef(0);
+  const velocityRef = React.useRef(0);
   const [isMomentumScrolling, setIsMomentumScrolling] = React.useState(false);
   const lastMoveTime = React.useRef(0);
   const lastMovePosition = React.useRef(0);
@@ -167,10 +169,14 @@ const Picker = core.polymorphicFactory((_props, ref) => {
   const wheelTimeoutRef = React.useRef(null);
   const lastWheelEventTime = React.useRef(0);
   const [currentPosition, setCurrentPosition] = React.useState(selectedIndex);
+  const currentPositionRef = React.useRef(currentPosition);
+  currentPositionRef.current = currentPosition;
   const [isAnimating, setIsAnimating] = React.useState(false);
   const animationRef = React.useRef(null);
   const [isFocused, setIsFocused] = React.useState(false);
   const prevLoopRef = React.useRef(loop);
+  const originalOverflowRef = React.useRef(null);
+  const isWindows = typeof navigator !== "undefined" && navigator.userAgent.includes("Windows");
   React.useEffect(() => {
     if (value !== prevValueRef.current && selectedIndex !== -1) {
       if (animate) {
@@ -238,58 +244,69 @@ const Picker = core.polymorphicFactory((_props, ref) => {
     }
     return currentRoundedPos - directPath;
   };
-  const animateToPosition = (targetPosition) => {
-    if (targetPosition === currentPosition || isAnimating) {
-      return;
-    }
-    let clampedTargetPosition = targetPosition;
-    if (!loop) {
-      clampedTargetPosition = Math.max(0, Math.min(data.length - 1, targetPosition));
-    }
-    if (animationRef.current !== null) {
-      cancelAnimationFrame(animationRef.current);
-    }
-    if (momentumAnimationRef.current !== null) {
-      cancelAnimationFrame(momentumAnimationRef.current);
-      setIsMomentumScrolling(false);
-    }
-    setIsAnimating(true);
-    const startTime = performance.now();
-    const startPosition = currentPosition;
-    const distance = Math.abs(clampedTargetPosition - startPosition);
-    const duration = Math.min(
-      animationDuration || 300,
-      Math.max(100, (animationDuration || 300) * Math.min(distance / 3, 1))
-    );
-    const animate2 = (time) => {
-      const elapsed = time - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const easeProgress = 1 - (1 - progress) * (1 - progress);
-      const position = startPosition + (clampedTargetPosition - startPosition) * easeProgress;
-      setCurrentPosition(position);
-      if (progress < 1) {
-        animationRef.current = requestAnimationFrame(animate2);
-      } else {
-        setIsAnimating(false);
-        animationRef.current = null;
-        setCurrentPosition(clampedTargetPosition);
-        if (!disabled) {
-          const realIndex2 = loop ? (Math.round(clampedTargetPosition) % data.length + data.length) % data.length : Math.round(clampedTargetPosition);
-          onChange?.(data[realIndex2]);
-        }
-        const realIndex = loop ? (Math.round(clampedTargetPosition) % data.length + data.length) % data.length : Math.round(clampedTargetPosition);
-        prevValueRef.current = data[realIndex];
+  const snapAndNotify = React.useCallback(
+    (roundedPosition) => {
+      if (data.length === 0) {
+        return;
       }
-    };
-    animationRef.current = requestAnimationFrame(animate2);
-  };
-  const applyMomentum = () => {
-    if (velocity === 0 || disabled) {
+      const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : Math.max(0, Math.min(data.length - 1, roundedPosition));
+      if (!disabled) {
+        onChange?.(data[realIndex]);
+      }
+      prevValueRef.current = data[realIndex];
+    },
+    [disabled, loop, data, onChange]
+  );
+  const animateToPosition = React.useCallback(
+    (targetPosition) => {
+      if (targetPosition === currentPositionRef.current || isAnimating) {
+        return;
+      }
+      let clampedTargetPosition = targetPosition;
+      if (!loop) {
+        clampedTargetPosition = Math.max(0, Math.min(data.length - 1, targetPosition));
+      }
+      if (animationRef.current !== null) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      if (momentumAnimationRef.current !== null) {
+        cancelAnimationFrame(momentumAnimationRef.current);
+        setIsMomentumScrolling(false);
+      }
+      setIsAnimating(true);
+      const startTime = performance.now();
+      const startPosition = currentPositionRef.current;
+      const distance = Math.abs(clampedTargetPosition - startPosition);
+      const duration = Math.min(
+        animationDuration || 300,
+        Math.max(100, (animationDuration || 300) * Math.min(distance / 3, 1))
+      );
+      const animate2 = (time) => {
+        const elapsed = time - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easeProgress = 1 - (1 - progress) * (1 - progress);
+        const position = startPosition + (clampedTargetPosition - startPosition) * easeProgress;
+        setCurrentPosition(position);
+        if (progress < 1) {
+          animationRef.current = requestAnimationFrame(animate2);
+        } else {
+          setIsAnimating(false);
+          animationRef.current = null;
+          setCurrentPosition(clampedTargetPosition);
+          snapAndNotify(Math.round(clampedTargetPosition));
+        }
+      };
+      animationRef.current = requestAnimationFrame(animate2);
+    },
+    [isAnimating, loop, data.length, animationDuration, snapAndNotify]
+  );
+  const applyMomentum = React.useCallback(() => {
+    if (velocityRef.current === 0 || disabled) {
       return;
     }
     setIsMomentumScrolling(true);
-    let currentVelocity = velocity * (momentum || 0.95);
-    let currentPos = currentPosition;
+    let currentVelocity = velocityRef.current * (momentum || 0.95);
+    let currentPos = currentPositionRef.current;
     let lastDirection = Math.sign(currentVelocity);
     const momentumScroll = () => {
       currentVelocity *= decelerationRate || 0.95;
@@ -329,18 +346,13 @@ const Picker = core.polymorphicFactory((_props, ref) => {
         }
         setCurrentPosition(roundedPosition);
         requestAnimationFrame(() => {
-          if (!disabled) {
-            const realIndex2 = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-            onChange?.(data[realIndex2]);
-          }
-          const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-          prevValueRef.current = data[realIndex];
+          snapAndNotify(roundedPosition);
         });
       }
       lastDirection = currentDirection;
     };
     momentumAnimationRef.current = requestAnimationFrame(momentumScroll);
-  };
+  }, [disabled, momentum, decelerationRate, loop, data.length, snapAndNotify]);
   React.useEffect(() => {
     return () => {
       if (animationRef.current !== null) {
@@ -357,23 +369,26 @@ const Picker = core.polymorphicFactory((_props, ref) => {
   const handleMouseEnter = () => {
     const isInteractionDisabled = disabled || readOnly;
     if (preventPageScroll && !isInteractionDisabled && typeof document !== "undefined") {
+      originalOverflowRef.current = document.body.style.overflow;
       document.body.style.overflow = "hidden";
     }
   };
   const handleMouseLeave = () => {
-    if (preventPageScroll && typeof document !== "undefined") {
-      document.body.style.overflow = "auto";
+    if (preventPageScroll && typeof document !== "undefined" && originalOverflowRef.current !== null) {
+      document.body.style.overflow = originalOverflowRef.current;
+      originalOverflowRef.current = null;
     }
   };
   React.useEffect(() => {
     return () => {
-      if (preventPageScroll && typeof document !== "undefined") {
-        document.body.style.overflow = "auto";
+      if (preventPageScroll && typeof document !== "undefined" && originalOverflowRef.current !== null) {
+        document.body.style.overflow = originalOverflowRef.current;
+        originalOverflowRef.current = null;
       }
     };
   }, [preventPageScroll]);
   const halfVisible = Math.floor((visibleItems || 5) / 2);
-  const handleMouseDown = (e) => {
+  const startDrag = (clientY) => {
     const isInteractionDisabled = disabled || readOnly;
     if (isAnimating || isInteractionDisabled || isMomentumScrolling) {
       return;
@@ -382,163 +397,118 @@ const Picker = core.polymorphicFactory((_props, ref) => {
       cancelAnimationFrame(momentumAnimationRef.current);
       setIsMomentumScrolling(false);
     }
-    e.preventDefault();
     setIsDragging(true);
-    setLastY(e.clientY);
-    setDragOffset(0);
-    setVelocity(0);
+    lastYRef.current = clientY;
+    velocityRef.current = 0;
     lastMoveTime.current = performance.now();
     lastMovePosition.current = currentPosition;
   };
-  const handleTouchStart = (e) => {
-    const isInteractionDisabled = disabled || readOnly;
-    if (isAnimating || isInteractionDisabled || isMomentumScrolling) {
-      return;
-    }
-    if (momentumAnimationRef.current !== null) {
-      cancelAnimationFrame(momentumAnimationRef.current);
-      setIsMomentumScrolling(false);
-    }
-    setIsDragging(true);
-    setLastY(e.touches[0].clientY);
-    setDragOffset(0);
-    setVelocity(0);
-    lastMoveTime.current = performance.now();
-    lastMovePosition.current = currentPosition;
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    startDrag(e.clientY);
   };
-  const clampPosition = (position) => {
-    if (loop) {
-      return position;
-    }
-    if (position < 0) {
-      return position * 0.3;
-    } else if (position > data.length - 1) {
-      return data.length - 1 + (position - (data.length - 1)) * 0.3;
-    }
-    return position;
+  const handleTouchStart = (e) => {
+    startDrag(e.touches[0].clientY);
   };
-  const handleMouseMove = (e) => {
-    const isInteractionDisabled = disabled || readOnly;
-    if (!isDragging || isInteractionDisabled) {
-      return;
-    }
-    const currentTime = performance.now();
-    const newY = e.clientY;
-    const deltaY = newY - lastY;
-    const timeDelta = currentTime - lastMoveTime.current;
-    const itemOffsetRatio = deltaY / (itemHeight || 40);
-    setCurrentPosition((prev) => {
-      let newPosition = prev - itemOffsetRatio;
-      newPosition = clampPosition(newPosition);
-      if (timeDelta > 0) {
-        const positionDelta = newPosition - lastMovePosition.current;
-        setVelocity(positionDelta / timeDelta * 16);
+  const clampPosition = React.useCallback(
+    (position) => {
+      if (loop) {
+        return position;
       }
-      lastMovePosition.current = newPosition;
-      lastMoveTime.current = currentTime;
-      return newPosition;
-    });
-    setLastY(newY);
-  };
-  const handleTouchMove = (e) => {
-    const isInteractionDisabled = disabled || readOnly;
-    if (!isDragging || isInteractionDisabled) {
-      return;
-    }
-    const currentTime = performance.now();
-    const newY = e.touches[0].clientY;
-    const deltaY = newY - lastY;
-    const timeDelta = currentTime - lastMoveTime.current;
-    const itemOffsetRatio = deltaY / (itemHeight || 40);
-    setCurrentPosition((prev) => {
-      let newPosition = prev - itemOffsetRatio;
-      newPosition = clampPosition(newPosition);
-      if (timeDelta > 0) {
-        const positionDelta = newPosition - lastMovePosition.current;
-        setVelocity(positionDelta / timeDelta * 16);
+      if (position < 0) {
+        return position * 0.3;
+      } else if (position > data.length - 1) {
+        return data.length - 1 + (position - (data.length - 1)) * 0.3;
       }
-      lastMovePosition.current = newPosition;
-      lastMoveTime.current = currentTime;
-      return newPosition;
-    });
-    setLastY(newY);
-  };
-  const handleMouseUp = () => {
-    const isInteractionDisabled = disabled || readOnly;
-    if (!isDragging || isInteractionDisabled) {
-      return;
-    }
-    setIsDragging(false);
-    setDragOffset(0);
-    if (Math.abs(velocity) > 0.05) {
-      applyMomentum();
-    } else {
-      let roundedPosition = Math.round(currentPosition);
-      if (!loop) {
-        roundedPosition = Math.max(0, Math.min(data.length - 1, roundedPosition));
+      return position;
+    },
+    [loop, data.length]
+  );
+  const handleDragMove = React.useCallback(
+    (clientY) => {
+      const isInteractionDisabled = disabled || readOnly;
+      if (!isDragging || isInteractionDisabled) {
+        return;
       }
-      if (roundedPosition !== currentPosition) {
-        animateToPosition(roundedPosition);
-      } else {
-        if (!disabled) {
-          const realIndex2 = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-          onChange?.(data[realIndex2]);
+      const currentTime = performance.now();
+      const deltaY = clientY - lastYRef.current;
+      const timeDelta = currentTime - lastMoveTime.current;
+      const itemOffsetRatio = deltaY / (itemHeight || 40);
+      setCurrentPosition((prev) => {
+        let newPosition = prev - itemOffsetRatio;
+        newPosition = clampPosition(newPosition);
+        if (timeDelta > 0) {
+          const positionDelta = newPosition - lastMovePosition.current;
+          velocityRef.current = positionDelta / timeDelta * 16;
         }
-        const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-        prevValueRef.current = data[realIndex];
-      }
-    }
-  };
-  const handleTouchEnd = () => {
+        lastMovePosition.current = newPosition;
+        lastMoveTime.current = currentTime;
+        return newPosition;
+      });
+      lastYRef.current = clientY;
+    },
+    [isDragging, disabled, readOnly, itemHeight, clampPosition]
+  );
+  const handleDragEnd = React.useCallback(() => {
     const isInteractionDisabled = disabled || readOnly;
     if (!isDragging || isInteractionDisabled) {
       return;
     }
     setIsDragging(false);
-    setDragOffset(0);
-    if (Math.abs(velocity) > 0.05) {
+    if (Math.abs(velocityRef.current) > 0.05) {
       applyMomentum();
     } else {
-      let roundedPosition = Math.round(currentPosition);
+      let roundedPosition = Math.round(currentPositionRef.current);
       if (!loop) {
         roundedPosition = Math.max(0, Math.min(data.length - 1, roundedPosition));
       }
-      if (roundedPosition !== currentPosition) {
+      if (roundedPosition !== currentPositionRef.current) {
         animateToPosition(roundedPosition);
       } else {
-        if (!disabled) {
-          const realIndex2 = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-          onChange?.(data[realIndex2]);
-        }
-        const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-        prevValueRef.current = data[realIndex];
+        snapAndNotify(roundedPosition);
       }
     }
-  };
+  }, [
+    isDragging,
+    disabled,
+    readOnly,
+    loop,
+    data.length,
+    applyMomentum,
+    animateToPosition,
+    snapAndNotify
+  ]);
   React.useEffect(() => {
-    const handleGlobalMouseMove = (e) => handleMouseMove(e);
-    const handleGlobalMouseUp = () => handleMouseUp();
-    const handleGlobalTouchMove = (e) => handleTouchMove(e);
-    const handleGlobalTouchEnd = () => handleTouchEnd();
+    const onMouseMove = (e) => handleDragMove(e.clientY);
+    const onMouseUp = () => handleDragEnd();
+    const onTouchMove = (e) => handleDragMove(e.touches[0].clientY);
+    const onTouchEnd = () => handleDragEnd();
     if (isDragging) {
-      window.addEventListener("mousemove", handleGlobalMouseMove, { passive: false });
-      window.addEventListener("mouseup", handleGlobalMouseUp);
-      window.addEventListener("touchmove", handleGlobalTouchMove, { passive: false });
-      window.addEventListener("touchend", handleGlobalTouchEnd);
+      window.addEventListener("mousemove", onMouseMove, { passive: false });
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onTouchMove, { passive: false });
+      window.addEventListener("touchend", onTouchEnd);
     }
     return () => {
-      window.removeEventListener("mousemove", handleGlobalMouseMove);
-      window.removeEventListener("mouseup", handleGlobalMouseUp);
-      window.removeEventListener("touchmove", handleGlobalTouchMove);
-      window.removeEventListener("touchend", handleGlobalTouchEnd);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
     };
-  }, [isDragging, lastY, currentPosition, disabled, readOnly, loop, data.length]);
-  const isWindows = React.useCallback(() => {
-    if (typeof navigator !== "undefined") {
-      return navigator.userAgent.indexOf("Windows") !== -1;
+  }, [isDragging, handleDragMove, handleDragEnd]);
+  const wheelSnapToNearest = React.useCallback(() => {
+    setIsWheeling(false);
+    let roundedPosition = Math.round(currentPositionRef.current);
+    if (!loop) {
+      roundedPosition = Math.max(0, Math.min(data.length - 1, roundedPosition));
     }
-    return false;
-  }, []);
+    if (roundedPosition !== currentPositionRef.current) {
+      animateToPosition(roundedPosition);
+    } else {
+      snapAndNotify(roundedPosition);
+    }
+    wheelTimeoutRef.current = null;
+  }, [loop, data.length, snapAndNotify, animateToPosition]);
   const handleWheel = React.useCallback(
     (e) => {
       const isInteractionDisabled = disabled || readOnly;
@@ -559,7 +529,7 @@ const Picker = core.polymorphicFactory((_props, ref) => {
       } else if (e.deltaMode === 2) {
         delta *= 100;
       }
-      if (isWindows()) {
+      if (isWindows) {
         sensitivity *= 0.2;
       }
       delta *= sensitivity;
@@ -580,61 +550,38 @@ const Picker = core.polymorphicFactory((_props, ref) => {
       lastWheelEventTime.current = Date.now();
       wheelTimeoutRef.current = setTimeout(() => {
         if (Date.now() - lastWheelEventTime.current >= 150) {
-          setIsWheeling(false);
-          let roundedPosition = Math.round(currentPosition);
-          if (!loop) {
-            roundedPosition = Math.max(0, Math.min(data.length - 1, roundedPosition));
-          }
-          if (roundedPosition !== currentPosition) {
-            animateToPosition(roundedPosition);
-          } else {
-            if (!disabled) {
-              const realIndex2 = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-              onChange?.(data[realIndex2]);
-            }
-            const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-            prevValueRef.current = data[realIndex];
-          }
-          wheelTimeoutRef.current = null;
+          wheelSnapToNearest();
         } else {
           if (wheelTimeoutRef.current) {
             clearTimeout(wheelTimeoutRef.current);
           }
-          wheelTimeoutRef.current = setTimeout(() => {
-            setIsWheeling(false);
-            let roundedPosition = Math.round(currentPosition);
-            if (!loop) {
-              roundedPosition = Math.max(0, Math.min(data.length - 1, roundedPosition));
-            }
-            if (roundedPosition !== currentPosition) {
-              animateToPosition(roundedPosition);
-            } else {
-              if (!disabled) {
-                const realIndex2 = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-                onChange?.(data[realIndex2]);
-              }
-              const realIndex = loop ? (roundedPosition % data.length + data.length) % data.length : roundedPosition;
-              prevValueRef.current = data[realIndex];
-            }
-            wheelTimeoutRef.current = null;
-          }, 150);
+          wheelTimeoutRef.current = setTimeout(wheelSnapToNearest, 150);
         }
       }, 150);
     },
     [
-      currentPosition,
       data,
       loop,
       isAnimating,
       disabled,
       readOnly,
       itemHeight,
-      onChange,
       wheelSensitivity,
       isMomentumScrolling,
-      isWindows
+      isWindows,
+      wheelSnapToNearest
     ]
   );
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el || disabled || readOnly) {
+      return;
+    }
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel, disabled, readOnly]);
   const handleKeyDown = React.useCallback(
     (e) => {
       const isInteractionDisabled = disabled || readOnly;
@@ -696,7 +643,7 @@ const Picker = core.polymorphicFactory((_props, ref) => {
         }
       }
     },
-    [currentPosition, data.length, loop, disabled, readOnly, isMomentumScrolling]
+    [currentPosition, data.length, loop, disabled, readOnly, animateToPosition]
   );
   const handleFocus = () => {
     if (!disabled) {
@@ -718,33 +665,25 @@ const Picker = core.polymorphicFactory((_props, ref) => {
     const currentRoundedPos = Math.round(currentPosition);
     const directVisualPath = virtualIndex - currentRoundedPos;
     animateToPosition(currentRoundedPos + directVisualPath);
-    if (!disabled) {
-      onChange?.(data[clickedIndex]);
-    }
-    prevValueRef.current = data[clickedIndex];
+    snapAndNotify(clickedIndex);
   };
-  const createContinuousIndices = () => {
+  const flooredPosition = Math.floor(currentPosition);
+  const continuousIndices = React.useMemo(() => {
     if (!loop || data.length <= 1) {
       return Array.from({ length: data.length }, (_, i) => ({ dataIndex: i, virtualIndex: i }));
     }
-    const duplicatesPerSide = Math.max(
-      // At least visibleItems * 2 to ensure we have enough items on both sides
-      (visibleItems || 5) * 2,
-      // Or data.length * 2 to ensure we have enough duplicates for large datasets
-      data.length * 2
-    );
-    const continuousIndices = [];
-    const startIndex = Math.floor(currentPosition) - duplicatesPerSide;
-    const endIndex = Math.floor(currentPosition) + duplicatesPerSide;
+    const duplicatesPerSide = Math.max((visibleItems || 5) * 2, data.length * 2);
+    const indices = [];
+    const startIndex = flooredPosition - duplicatesPerSide;
+    const endIndex = flooredPosition + duplicatesPerSide;
     for (let i = startIndex; i <= endIndex; i++) {
       const dataIndex = (i % data.length + data.length) % data.length;
-      continuousIndices.push({ dataIndex, virtualIndex: i });
+      indices.push({ dataIndex, virtualIndex: i });
     }
-    return continuousIndices;
-  };
+    return indices;
+  }, [loop, data.length, visibleItems, flooredPosition]);
   const renderItems = () => {
     const items = [];
-    const continuousIndices = createContinuousIndices();
     const visibleRange = Math.max(
       halfVisible + 1,
       // Add just 1 extra item on each side for smoother scrolling
@@ -754,7 +693,7 @@ const Picker = core.polymorphicFactory((_props, ref) => {
     for (const { dataIndex, virtualIndex } of continuousIndices) {
       const relativePos = virtualIndex - currentPosition;
       if (Math.abs(relativePos) <= visibleRange) {
-        const itemOffset = relativePos * (itemHeight || 40) + dragOffset;
+        const itemOffset = relativePos * (itemHeight || 40);
         const distanceFromCenter = Math.abs(relativePos);
         const maxDistance = halfVisible;
         const normalizedDistance = Math.min(distanceFromCenter / maxDistance, 1);
@@ -829,14 +768,7 @@ const Picker = core.polymorphicFactory((_props, ref) => {
   return /* @__PURE__ */ React.createElement(
     core.Box,
     {
-      ref: (node) => {
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-        rootRef.current = node;
-      },
+      ref: mergedRootRef,
       ...getStyles("root", {
         style: {
           perspective: enable3D ? `${perspective}px` : void 0
@@ -865,7 +797,6 @@ const Picker = core.polymorphicFactory((_props, ref) => {
         className: Picker_module.container,
         onMouseDown: disabled || readOnly ? void 0 : handleMouseDown,
         onTouchStart: disabled || readOnly ? void 0 : handleTouchStart,
-        onWheel: disabled || readOnly ? void 0 : handleWheel,
         onKeyDown: disabled || readOnly ? void 0 : handleKeyDown,
         onFocus: handleFocus,
         onBlur: handleBlur,