@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/esm/Wheel/index.mjs

@@ -1,18 +1,53 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder } from "react-native-web";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, styled, isWeb, Text } from "tamagui";
+import { View, getTokens, isWeb, styled, Text } from "tamagui";
+import { t } from "../shared/t.mjs";
+import { fireSelectionHaptic } from "./haptic.mjs";
+import { WheelEdgeFade } from "./WheelEdgeFade.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 const friction = 0.95;
 const minVelocity = 0.5;
 const momentumMultiplier = 0.8;
 const rubberBandConstant = 0.55;
+const tapSlopPx = 8;
+const diameterRatio = 1.07;
+const squeeze = 1.45;
+const perspectivePx = 400;
+const defaultColumnWidth = 88;
+const wheelFontBySize = {
+  small: "$6",
+  medium: "$8",
+  large: "$9"
+};
+const transitionDurationsMs = {
+  bouncy: 200,
+  lazy: 600,
+  slow: 500,
+  medium: 250,
+  quick: 100,
+  tooltip: 400,
+  snappy: 80,
+  gentle: 450
+};
+const WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
+function ensureWheelFocusStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(WHEEL_FOCUS_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = WHEEL_FOCUS_STYLE_ID;
+  style.textContent = ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: -2px; }";
+  document.head.appendChild(style);
+}
+const wheelMaskStyle = isWeb ? {
+  WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+  maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)"
+} : void 0;
 const WheelContainer = styled(View, {
   name: "Wheel",
   position: "relative",
   overflow: "hidden",
-  userSelect: "none",
-  width: 80
-  // Default width for wheel column
+  userSelect: "none"
 });
 const WheelItemContainer = styled(View, {
   name: "WheelItem",
@@ -28,30 +63,8 @@ const SelectionIndicator = styled(View, {
   position: "absolute",
   left: 0,
   right: 0,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$color3",
-  opacity: 0.3,
   pointerEvents: "none"
 });
-const FadeOverlay = styled(View, {
-  name: "WheelFadeOverlay",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  pointerEvents: "none",
-  variants: {
-    edge: {
-      top: {
-        top: 0
-      },
-      bottom: {
-        bottom: 0
-      }
-    }
-  }
-});
 function normalizeItem(item) {
   if (typeof item === "object" && item !== null && "value" in item) {
     return item;
@@ -96,20 +109,39 @@ function rubberBand(offset, dimension) {
   return offset < 0 ? -result : result;
 }
 function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  const centerY = containerHeight / 2;
-  const itemCenterY = index * itemHeight + itemHeight / 2 - scrollOffset + (containerHeight - itemHeight) / 2;
-  const distanceFromCenter = itemCenterY - centerY;
-  const normalizedDistance = distanceFromCenter / (containerHeight / 2);
-  const rotateX = normalizedDistance * -70;
-  const scale = 1 - Math.abs(normalizedDistance) * 0.3;
-  const opacity = 1 - Math.abs(normalizedDistance) * 0.35;
-  const curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
-  const translateY = itemCenterY - itemHeight / 2 + curveOffset;
+  const radius = containerHeight * diameterRatio / 2;
+  const angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
+  const clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+  const centerTop = (containerHeight - itemHeight) / 2;
+  const translateY = centerTop + radius * Math.sin(clamped);
+  const rotateX = -(clamped * 180) / Math.PI;
+  const scale = Math.max(0.72, Math.min(1, Math.cos(clamped)));
   return {
     translateY,
-    rotateX: Math.max(-85, Math.min(85, rotateX)),
-    scale: Math.max(0.5, Math.min(1, scale)),
-    opacity: Math.max(0.2, Math.min(1, opacity))
+    rotateX,
+    scale,
+    opacity: 1
+  };
+}
+function tokenPx(token, scale) {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = getTokens()[scale]?.[key]?.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+function highlightBandStyle(edges, radiusToken, pointy) {
+  const r = pointy ? 0 : tokenPx(radiusToken, "radius");
+  const inset = tokenPx("$2", "space");
+  const capStart = edges === "all" || edges === "start";
+  const capEnd = edges === "all" || edges === "end";
+  return {
+    borderStartStartRadius: capStart ? r : 0,
+    borderStartEndRadius: capEnd ? r : 0,
+    borderEndStartRadius: capStart ? r : 0,
+    borderEndEndRadius: capEnd ? r : 0,
+    marginInlineStart: capStart ? inset : 0,
+    marginInlineEnd: capEnd ? inset : 0
   };
 }
 function Wheel({
@@ -117,15 +149,27 @@ function Wheel({
   value,
   onChange,
   visibleItems = 5,
-  itemHeight = 40,
+  itemHeight: itemHeightProp,
+  width: widthProp,
   renderItem,
   disabled = false,
-  size = "$4",
-  loop = false
+  size: sizeProp,
+  loop = false,
+  highlightEdges = "all",
+  flex,
+  onItemCross,
+  "aria-label": ariaLabel
 }) {
   const {
     knobProps
   } = useResolvedKnobs();
+  const sizeKnob = knobProps.size ?? "medium";
+  const size = sizeProp ?? wheelFontBySize[sizeKnob] ?? "$8";
+  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
+  const columnWidth = widthProp ?? defaultColumnWidth;
+  ensureWheelFocusStyles();
+  const motionTransition = knobProps.transition;
+  const snapDurationMs = motionTransition ? transitionDurationsMs[motionTransition] ?? 100 : 0;
   const containerRef = useRef(null);
   const [scrollOffset, setScrollOffset] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -135,27 +179,40 @@ function Wheel({
   scrollOffsetRef.current = scrollOffset;
   const animationRef = useRef(null);
   const isAnimatingRef = useRef(false);
+  const hasMountedRef = useRef(false);
+  const selectedIndexRef = useRef(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
   const isDraggingRef = useRef(false);
   const lastYRef = useRef(0);
+  const downYRef = useRef(0);
+  const dragDistanceRef = useRef(0);
   const lastTimeRef = useRef(0);
   const dragVelocitiesRef = useRef([]);
   const containerHeight = itemHeight * visibleItems;
   const paddingItems = Math.floor(visibleItems / 2);
   const minOffset = 0;
   const maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
+  const liveDataIndex = n === 0 ? 0 : loopEnabled ? modIndex(Math.round(scrollOffset / itemHeight), n) : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+  const lastCrossIndexRef = useRef(null);
+  const onItemCrossRef = useRef(onItemCross);
+  onItemCrossRef.current = onItemCross;
   useEffect(() => {
-    if (value !== void 0) {
-      const index = items.findIndex(item => getItemValue(item) === value);
-      if (index !== -1) {
-        setSelectedIndex(index);
-        const raw = index * itemHeight;
-        setScrollOffset(loop && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw);
-      }
+    if (n === 0) return;
+    if (lastCrossIndexRef.current === null) {
+      lastCrossIndexRef.current = liveDataIndex;
+      return;
     }
-  }, [value, items, itemHeight, loop, n]);
+    if (lastCrossIndexRef.current === liveDataIndex) return;
+    lastCrossIndexRef.current = liveDataIndex;
+    const item = items[liveDataIndex];
+    if (item === void 0) return;
+    onItemCrossRef.current?.(getItemValue(item), liveDataIndex);
+    fireSelectionHaptic();
+  }, [liveDataIndex, items, n]);
   const runSnapComplete = useCallback((finalOffset, dataIndex) => {
     const safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
     const settled = loopEnabled && n > 0 ? equivalentOffsetNear(0, finalOffset, n, itemHeight) : finalOffset;
+    scrollOffsetRef.current = settled;
     setScrollOffset(settled);
     setSelectedIndex(safeIdx);
     onChange?.(getItemValue(items[safeIdx]));
@@ -164,18 +221,23 @@ function Wheel({
   const animateToOffset = useCallback((targetOffset, dataIndex, animated) => {
     const startOffset = scrollOffsetRef.current;
     const goal = loopEnabled && n > 0 ? equivalentOffsetNear(startOffset, targetOffset, n, itemHeight) : targetOffset;
-    if (!animated) {
+    if (!animated || snapDurationMs <= 0) {
       runSnapComplete(goal, dataIndex);
       return;
     }
     const distance = goal - startOffset;
-    const duration = 300;
+    if (Math.abs(distance) < 0.5) {
+      runSnapComplete(goal, dataIndex);
+      return;
+    }
+    const duration = snapDurationMs;
     const startTime = performance.now();
     const animate = currentTime => {
       const elapsed = currentTime - startTime;
       const progress = Math.min(elapsed / duration, 1);
       const eased = 1 - Math.pow(1 - progress, 3);
       const newOffset = startOffset + distance * eased;
+      scrollOffsetRef.current = newOffset;
       setScrollOffset(newOffset);
       if (progress < 1) {
         animationRef.current = requestAnimationFrame(animate);
@@ -186,7 +248,7 @@ function Wheel({
     isAnimatingRef.current = true;
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, n, itemHeight, runSnapComplete]);
+  }, [loopEnabled, n, itemHeight, runSnapComplete, snapDurationMs]);
   const snapToIndex = useCallback((targetIndex, animated = true) => {
     if (n === 0) return;
     const clampedData = Math.max(0, Math.min(targetIndex, n - 1));
@@ -201,6 +263,28 @@ function Wheel({
     const dataIdx = modIndex(targetR, n);
     animateToOffset(targetOffset, dataIdx, animated);
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  useEffect(() => {
+    if (value === void 0) return;
+    const index = items.findIndex(item => getItemValue(item) === value);
+    if (index === -1) return;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      setSelectedIndex(index);
+      const raw = index * itemHeight;
+      const settled = loopEnabled && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw;
+      scrollOffsetRef.current = settled;
+      setScrollOffset(settled);
+      return;
+    }
+    if (isDraggingRef.current) {
+      setSelectedIndex(index);
+      return;
+    }
+    if (index === selectedIndexRef.current && !isAnimatingRef.current) {
+      return;
+    }
+    snapToIndex(index, true);
+  }, [value, items, itemHeight, loopEnabled, n, snapToIndex]);
   const snapToNearestRow = useCallback((animated = true) => {
     if (n === 0) return;
     const r = Math.round(scrollOffsetRef.current / itemHeight);
@@ -213,7 +297,32 @@ function Wheel({
       animateToOffset(dataIdx * itemHeight, dataIdx, animated);
     }
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  const hitTestDataIndex = useCallback(tapY => {
+    if (n === 0) return null;
+    const offset = scrollOffsetRef.current;
+    const centerRow = Math.round(offset / itemHeight);
+    const rowBuffer = paddingItems + 5;
+    let best = null;
+    for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
+      if (!loopEnabled && (vr < 0 || vr >= n)) continue;
+      const dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+      const {
+        translateY
+      } = getItemTransform(vr, offset, itemHeight, containerHeight);
+      const dist = Math.abs(translateY + itemHeight / 2 - tapY);
+      if (!best || dist < best.dist) best = {
+        dataIndex,
+        dist
+      };
+    }
+    if (best && best.dist <= itemHeight) return best.dataIndex;
+    return null;
+  }, [n, itemHeight, paddingItems, loopEnabled, containerHeight]);
   const startMomentum = useCallback(initialVelocity => {
+    if (snapDurationMs <= 0) {
+      snapToNearestRow(false);
+      return;
+    }
     let velocity = initialVelocity * momentumMultiplier;
     let offset = scrollOffsetRef.current;
     const animate = () => {
@@ -228,18 +337,18 @@ function Wheel({
           velocity *= 0.5;
         }
       }
+      scrollOffsetRef.current = offset;
       setScrollOffset(offset);
       if (Math.abs(velocity) > minVelocity) {
         animationRef.current = requestAnimationFrame(animate);
       } else {
-        scrollOffsetRef.current = offset;
         snapToNearestRow(true);
       }
     };
     isAnimatingRef.current = true;
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, minOffset, maxOffset, containerHeight, itemHeight, snapToNearestRow]);
+  }, [loopEnabled, minOffset, maxOffset, containerHeight, snapToNearestRow, snapDurationMs]);
   const handlePointerDown = useCallback(e => {
     if (disabled) return;
     if (animationRef.current) {
@@ -248,10 +357,13 @@ function Wheel({
     }
     isDraggingRef.current = true;
     lastYRef.current = e.clientY;
+    downYRef.current = e.clientY;
+    dragDistanceRef.current = 0;
     lastTimeRef.current = performance.now();
     dragVelocitiesRef.current = [];
     if (isWeb && containerRef.current) {
       containerRef.current.setPointerCapture(e.pointerId);
+      containerRef.current.style.cursor = "grabbing";
     }
   }, [disabled]);
   const handlePointerMove = useCallback(e => {
@@ -260,6 +372,7 @@ function Wheel({
     const currentTime = performance.now();
     const deltaY = lastYRef.current - currentY;
     const deltaTime = currentTime - lastTimeRef.current;
+    dragDistanceRef.current += Math.abs(deltaY);
     if (deltaTime > 0) {
       const velocity = deltaY / deltaTime * 16;
       dragVelocitiesRef.current.push(velocity);
@@ -284,7 +397,20 @@ function Wheel({
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
     if (isWeb && containerRef.current) {
-      containerRef.current.releasePointerCapture(e.pointerId);
+      try {
+        containerRef.current.releasePointerCapture(e.pointerId);
+      } catch {}
+      containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
+    }
+    if (dragDistanceRef.current < tapSlopPx) {
+      const localY = e.locationY;
+      const rect = containerRef.current?.getBoundingClientRect();
+      const tapY = typeof localY === "number" ? localY : e.clientY - (rect?.top ?? 0);
+      const tapped = hitTestDataIndex(tapY);
+      if (tapped != null) {
+        snapToIndex(tapped, true);
+        return;
+      }
     }
     const velocities = dragVelocitiesRef.current;
     if (velocities.length > 0) {
@@ -297,7 +423,52 @@ function Wheel({
     } else {
       snapToNearestRow(true);
     }
-  }, [snapToNearestRow, startMomentum]);
+  }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+  const pointerDownRef = useRef(handlePointerDown);
+  pointerDownRef.current = handlePointerDown;
+  const pointerMoveRef = useRef(handlePointerMove);
+  pointerMoveRef.current = handlePointerMove;
+  const pointerUpRef = useRef(handlePointerUp);
+  pointerUpRef.current = handlePointerUp;
+  const panResponder = useMemo(() => {
+    if (isWeb) return {
+      panHandlers: {}
+    };
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dy) > 1,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: evt => {
+        pointerDownRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderMove: evt => {
+        pointerMoveRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderRelease: evt => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      },
+      onPanResponderTerminate: evt => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      }
+    });
+  }, []);
   const handleWheel = useCallback(e => {
     if (disabled) return;
     e.preventDefault();
@@ -315,6 +486,7 @@ function Wheel({
         newOffset = maxOffset;
       }
     }
+    scrollOffsetRef.current = newOffset;
     setScrollOffset(newOffset);
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(() => {
@@ -324,7 +496,7 @@ function Wheel({
         }
       }, 100);
     });
-  }, [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow]);
+  }, [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow]);
   const handleKeyDown = useCallback(e => {
     if (disabled) return;
     let delta = 0;
@@ -408,44 +580,67 @@ function Wheel({
       };
     });
   }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+  const itemColor = isSelected => disabled ? "$color10" : isSelected ? "$color12" : "$color11";
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
+  const highlightSmoothClass = "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string" ? knobProps.borderRadius.className : void 0;
+  const renderItemNode = (dataIndex, isSelected) => {
+    const item = items[dataIndex];
+    const itemValue = getItemValue(item);
+    if (renderItem) return renderItem(itemValue, dataIndex, isSelected);
+    return /* @__PURE__ */jsx(Text, {
+      ...knobProps.body,
+      fontSize: size,
+      fontWeight: isSelected && !disabled ? "600" : "400",
+      color: itemColor(isSelected),
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      maxWidth: "100%",
+      paddingHorizontal: "$2",
+      children: getItemLabel(item)
+    });
+  };
   return /* @__PURE__ */jsxs(WheelContainer, {
     height: containerHeight,
-    opacity: disabled ? 0.5 : 1,
+    width: flex ? "100%" : columnWidth,
+    minWidth: flex ? 0 : columnWidth,
+    flex,
     ...knobProps.containerRadius,
     "data-testid": "wheel",
+    "data-disabled": disabled ? true : void 0,
+    "aria-disabled": disabled || void 0,
+    opacity: 1,
     children: [/* @__PURE__ */jsx(SelectionIndicator, {
+      className: highlightSmoothClass,
+      backgroundColor: "$color4",
       top: paddingItems * itemHeight,
-      height: itemHeight
-    }), /* @__PURE__ */jsx(FadeOverlay, {
-      edge: "top",
-      height: paddingItems * itemHeight,
-      ...(isWeb ? {
-        style: {
-          background: "linear-gradient(to bottom, var(--background) 0%, transparent 100%)"
-        }
-      } : {})
-    }), /* @__PURE__ */jsx(FadeOverlay, {
-      edge: "bottom",
-      height: paddingItems * itemHeight,
-      ...(isWeb ? {
-        style: {
-          background: "linear-gradient(to top, var(--background) 0%, transparent 100%)"
-        }
-      } : {})
+      height: itemHeight,
+      style: highlightStyle,
+      "data-testid": "wheel-selection"
     }), isWeb ? /* @__PURE__ */jsx("div", {
       ref: containerRef,
+      className: "mp1-wheel-wrapper",
       tabIndex: disabled ? -1 : 0,
+      role: "slider",
+      "aria-label": ariaLabel ?? t("Value picker"),
+      "aria-orientation": "vertical",
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.max(0, n - 1),
+      "aria-valuenow": selectedIndex,
+      "aria-valuetext": items[selectedIndex] !== void 0 ? getItemLabel(items[selectedIndex]) : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? true : void 0,
       style: {
         width: "100%",
         height: containerHeight,
         position: "relative",
-        perspective: "1000px",
+        perspective: `${perspectivePx}px`,
         perspectiveOrigin: "center center",
         overflow: "hidden",
         userSelect: "none",
         touchAction: "none",
-        cursor: "grab",
-        outline: "none"
+        cursor: disabled ? "not-allowed" : "grab",
+        ...wheelMaskStyle
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -457,16 +652,13 @@ function Wheel({
         virtualRow,
         dataIndex
       }) => {
-        const item = items[dataIndex];
-        const isSelected = dataIndex === selectedIndex;
-        const itemValue = getItemValue(item);
+        const isSelected = dataIndex === liveDataIndex;
         const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
         return /* @__PURE__ */jsx("div", {
           "data-testid": "wheel-item",
           "data-index": dataIndex,
-          "data-selected": isSelected,
+          "data-selected": isSelected ? true : void 0,
           "aria-hidden": isSelected ? void 0 : true,
           style: {
             position: "absolute",
@@ -483,34 +675,26 @@ function Wheel({
             transformStyle: "preserve-3d",
             backfaceVisibility: "hidden"
           },
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */jsx(Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected ? "600" : "400",
-            color: isSelected ? "$color12" : "$color11",
-            children: getItemLabel(item)
-          })
-        }, rowKey);
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
       })
-    }) : /* @__PURE__ */jsx(View, {
+    }) : /* @__PURE__ */jsxs(View, {
       width: "100%",
       height: containerHeight,
       position: "relative",
       overflow: "hidden",
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
-      children: renderRows.map(({
+      cursor: disabled ? "not-allowed" : "grab",
+      "data-testid": "wheel-wrapper",
+      "data-disabled": disabled ? true : void 0,
+      "aria-disabled": disabled || void 0,
+      ...panResponder.panHandlers,
+      children: [renderRows.map(({
         virtualRow,
         dataIndex
       }) => {
-        const item = items[dataIndex];
-        const isSelected = dataIndex === selectedIndex;
-        const itemValue = getItemValue(item);
+        const isSelected = dataIndex === liveDataIndex;
         const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
         return /* @__PURE__ */jsx(View, {
           position: "absolute",
           left: 0,
@@ -522,15 +706,15 @@ function Wheel({
           pointerEvents: "none",
           y: transform.translateY,
           scale: transform.scale,
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */jsx(Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected ? "600" : "400",
-            color: isSelected ? "$color12" : "$color11",
-            children: getItemLabel(item)
-          })
-        }, rowKey);
-      })
+          rotateX: `${transform.rotateX}deg`,
+          "data-testid": "wheel-item",
+          "data-index": dataIndex,
+          "data-selected": isSelected ? true : void 0,
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
+      }), /* @__PURE__ */jsx(WheelEdgeFade, {
+        height: paddingItems * itemHeight
+      })]
     })]
   });
 }