@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/Wheel/index.cjs

@@ -26,7 +26,7 @@ __export(Wheel_exports, {
 });
 module.exports = __toCommonJS(Wheel_exports);
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -34,6 +34,16 @@ 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,
@@ -50,16 +60,18 @@ function ensureWheelFocusStyles() {
   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; }";
+  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 = import_tamagui.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 = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Wheel",
   position: "relative",
   overflow: "hidden",
-  userSelect: "none",
-  width: 80
-  // Default width for wheel column
+  userSelect: "none"
 });
 const WheelItemContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "WheelItem",
@@ -75,30 +87,8 @@ const SelectionIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   position: "absolute",
   left: 0,
   right: 0,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$color3",
-  opacity: 0.3,
   pointerEvents: "none"
 });
-const FadeOverlay = (0, import_tamagui.styled)(import_tamagui.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;
@@ -143,20 +133,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;
-  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
+    rotateX,
+    scale,
+    opacity: 1
+  };
+}
+function tokenPx(token, scale) {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = (0, import_tamagui.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({
@@ -165,23 +174,27 @@ function Wheel({
   onChange,
   visibleItems = 5,
   itemHeight: itemHeightProp,
+  width: widthProp,
   renderItem,
   disabled = false,
   size: sizeProp,
   loop = false,
+  highlightEdges = "all",
   "aria-label": ariaLabel
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const size = sizeProp ?? knobProps.sizeToken;
-  const itemHeight = itemHeightProp ?? (0, import_tamagui.getTokens)().size?.[knobProps.sizeToken]?.val ?? 40;
+  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 || "quick";
-  const snapDurationMs = transitionDurationsMs[motionTransition] ?? 100;
+  const motionTransition = knobProps.transition;
+  const snapDurationMs = motionTransition ? transitionDurationsMs[motionTransition] ?? 100 : 0;
   const containerRef = (0, import_react.useRef)(null);
   const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -196,12 +209,15 @@ function Wheel({
   selectedIndexRef.current = selectedIndex;
   const isDraggingRef = (0, import_react.useRef)(false);
   const lastYRef = (0, import_react.useRef)(0);
+  const downYRef = (0, import_react.useRef)(0);
+  const dragDistanceRef = (0, import_react.useRef)(0);
   const lastTimeRef = (0, import_react.useRef)(0);
   const dragVelocitiesRef = (0, import_react.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 runSnapComplete = (0, import_react.useCallback)((finalOffset, dataIndex) => {
     const safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
     const settled = loopEnabled && n > 0 ? equivalentOffsetNear(0, finalOffset, n, itemHeight) : finalOffset;
@@ -290,7 +306,32 @@ function Wheel({
       animateToOffset(dataIdx * itemHeight, dataIdx, animated);
     }
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  const hitTestDataIndex = (0, import_react.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 = (0, import_react.useCallback)(initialVelocity => {
+    if (snapDurationMs <= 0) {
+      snapToNearestRow(false);
+      return;
+    }
     let velocity = initialVelocity * momentumMultiplier;
     let offset = scrollOffsetRef.current;
     const animate = () => {
@@ -305,18 +346,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 = (0, import_react.useCallback)(e => {
     if (disabled) return;
     if (animationRef.current) {
@@ -325,10 +366,13 @@ function Wheel({
     }
     isDraggingRef.current = true;
     lastYRef.current = e.clientY;
+    downYRef.current = e.clientY;
+    dragDistanceRef.current = 0;
     lastTimeRef.current = performance.now();
     dragVelocitiesRef.current = [];
     if (import_tamagui.isWeb && containerRef.current) {
       containerRef.current.setPointerCapture(e.pointerId);
+      containerRef.current.style.cursor = "grabbing";
     }
   }, [disabled]);
   const handlePointerMove = (0, import_react.useCallback)(e => {
@@ -337,6 +381,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);
@@ -361,7 +406,19 @@ function Wheel({
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
     if (import_tamagui.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 rect = containerRef.current?.getBoundingClientRect();
+      const tapY = e.clientY - (rect?.top ?? 0);
+      const tapped = hitTestDataIndex(tapY);
+      if (tapped != null) {
+        snapToIndex(tapped, true);
+        return;
+      }
     }
     const velocities = dragVelocitiesRef.current;
     if (velocities.length > 0) {
@@ -374,7 +431,7 @@ function Wheel({
     } else {
       snapToNearestRow(true);
     }
-  }, [snapToNearestRow, startMomentum]);
+  }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
   const handleWheel = (0, import_react.useCallback)(e => {
     if (disabled) return;
     e.preventDefault();
@@ -392,6 +449,7 @@ function Wheel({
         newOffset = maxOffset;
       }
     }
+    scrollOffsetRef.current = newOffset;
     setScrollOffset(newOffset);
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(() => {
@@ -401,7 +459,7 @@ function Wheel({
         }
       }, 100);
     });
-  }, [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow]);
+  }, [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow]);
   const handleKeyDown = (0, import_react.useCallback)(e => {
     if (disabled) return;
     let delta = 0;
@@ -486,32 +544,41 @@ 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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.body,
+      fontSize: size,
+      fontWeight: isSelected && !disabled ? "600" : "400",
+      color: itemColor(isSelected),
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      maxWidth: "100%",
+      px: "$2",
+      children: getItemLabel(item)
+    });
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WheelContainer, {
     height: containerHeight,
+    width: columnWidth,
+    minWidth: columnWidth,
     ...knobProps.containerRadius,
     "data-testid": "wheel",
     "data-disabled": disabled ? true : void 0,
     "aria-disabled": disabled || void 0,
     opacity: 1,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
+      className: highlightSmoothClass,
+      backgroundColor: "$color4",
       top: paddingItems * itemHeight,
-      height: itemHeight
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FadeOverlay, {
-      edge: "top",
-      height: paddingItems * itemHeight,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          background: "linear-gradient(to bottom, color-mix(in srgb, var(--background) 18%, transparent) 0%, transparent 100%)"
-        }
-      } : {})
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FadeOverlay, {
-      edge: "bottom",
-      height: paddingItems * itemHeight,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          background: "linear-gradient(to top, color-mix(in srgb, var(--background) 18%, transparent) 0%, transparent 100%)"
-        }
-      } : {})
+      height: itemHeight,
+      style: highlightStyle,
+      "data-testid": "wheel-selection"
     }), import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
       ref: containerRef,
       className: "mp1-wheel-wrapper",
@@ -529,12 +596,13 @@ function Wheel({
         width: "100%",
         height: containerHeight,
         position: "relative",
-        perspective: "1000px",
+        perspective: `${perspectivePx}px`,
         perspectiveOrigin: "center center",
         overflow: "hidden",
         userSelect: "none",
         touchAction: "none",
-        cursor: disabled ? "not-allowed" : "grab"
+        cursor: disabled ? "not-allowed" : "grab",
+        ...wheelMaskStyle
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -546,16 +614,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__ */(0, import_jsx_runtime.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",
@@ -572,14 +637,8 @@ function Wheel({
             transformStyle: "preserve-3d",
             backfaceVisibility: "hidden"
           },
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected && !disabled ? "600" : "400",
-            color: itemColor(isSelected),
-            children: getItemLabel(item)
-          })
-        }, rowKey);
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       width: "100%",
@@ -597,12 +656,9 @@ 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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           position: "absolute",
           left: 0,
@@ -614,14 +670,9 @@ function Wheel({
           pointerEvents: "none",
           y: transform.translateY,
           scale: transform.scale,
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected && !disabled ? "600" : "400",
-            color: itemColor(isSelected),
-            children: getItemLabel(item)
-          })
-        }, rowKey);
+          rotateX: `${transform.rotateX}deg`,
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
       })
     })]
   });