@multiplatform.one/forms 7.36.0 → 7.37.0

package/dist/cjs/Wheel/index.native.js

@@ -28,33 +28,17 @@ __export(Wheel_exports, {
 });
 module.exports = __toCommonJS(Wheel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var import_react_native = require("react-native");
-var import_theme2 = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_t = require("../shared/t.native.js");
 var import_haptic = require("./haptic.native.js");
-var import_WheelEdgeFade = require("./WheelEdgeFade.native.js");
-function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
+var import_NativeWheel = require("./NativeWheel.native.js");
+var import_wheelShared = require("./wheelShared.native.js");
 var friction = 0.95;
 var minVelocity = 0.5;
 var momentumMultiplier = 0.8;
 var rubberBandConstant = 0.55;
 var tapSlopPx = 8;
-var diameterRatio = 1.07;
-var squeeze = 1.45;
-var perspectivePx = 400;
-var defaultColumnWidth = 88;
-var wheelFontByStep = {
-  [-1]: "$6",
-  0: "$8",
-  1: "$9"
-};
 var WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
 function ensureWheelFocusStyles() {
   if (!import_tamagui.isWeb || typeof document === "undefined") return;
@@ -90,44 +74,15 @@ var SelectionIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   right: 0,
   pointerEvents: "none"
 });
-function normalizeItem(item) {
-  if ((typeof item === "undefined" ? "undefined" : _type_of(item)) === "object" && item !== null && "value" in item) {
-    return item;
-  }
-  return {
-    value: item,
-    label: String(item)
-  };
-}
-function getItemLabel(item) {
-  var _normalized_label;
-  var normalized = normalizeItem(item);
-  return (_normalized_label = normalized.label) !== null && _normalized_label !== void 0 ? _normalized_label : String(normalized.value);
-}
-function getItemValue(item) {
-  var normalized = normalizeItem(item);
-  return normalized.value;
-}
-function modIndex(row, n) {
-  if (n <= 0) return 0;
-  return (row % n + n) % n;
-}
 function equivalentOffsetNear(referenceOffset, targetOffset, n, itemHeight) {
   if (n <= 0 || itemHeight <= 0) return targetOffset;
   var rT = Math.round(targetOffset / itemHeight);
-  var m = modIndex(rT, n);
+  var m = (0, import_wheelShared.modIndex)(rT, n);
   var span = n * itemHeight;
   var base = m * itemHeight;
   var k = Math.round((referenceOffset - base) / span);
   return base + k * span;
 }
-function nearestRowForDataIndex(currentRow, targetDataIndex, n) {
-  var currentMod = modIndex(currentRow, n);
-  var delta = targetDataIndex - currentMod;
-  if (delta > n / 2) delta -= n;
-  if (delta < -n / 2) delta += n;
-  return currentRow + delta;
-}
 function rubberBand(offset, dimension) {
   var c = rubberBandConstant;
   var x = Math.abs(offset);
@@ -135,69 +90,45 @@ function rubberBand(offset, dimension) {
   return offset < 0 ? -result : result;
 }
 function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  var radius = containerHeight * diameterRatio / 2;
-  var angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
-  var clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
-  var centerTop = (containerHeight - itemHeight) / 2;
-  var translateY = centerTop + radius * Math.sin(clamped);
-  var rotateX = -(clamped * 180) / Math.PI;
-  var scale = Math.max(0.72, Math.min(1, Math.cos(clamped)));
+  var pose = (0, import_wheelShared.drumPose)(index - scrollOffset / itemHeight, itemHeight, containerHeight);
   return {
-    translateY,
-    rotateX,
-    scale,
+    translateY: (containerHeight - itemHeight) / 2 + pose.offset,
+    rotateX: pose.rotateX,
+    scale: pose.scale,
     opacity: 1
   };
 }
-function tokenPx(token, scale) {
-  var _getTokens_scale_key, _getTokens_scale;
-  if (typeof token === "number") return token;
-  var key = String(token).replace(/^\$/, "");
-  var val = (_getTokens_scale = (0, import_tamagui.getTokens)()[scale]) === null || _getTokens_scale === void 0 ? void 0 : (_getTokens_scale_key = _getTokens_scale[key]) === null || _getTokens_scale_key === void 0 ? void 0 : _getTokens_scale_key.val;
-  if (typeof val === "number") return val;
-  return scale === "radius" ? 9 : 8;
-}
-function highlightBandStyle(edges, radiusToken, pointy) {
-  var r = pointy ? 0 : tokenPx(radiusToken, "radius");
-  var inset = tokenPx("$2", "space");
-  var capStart = edges === "all" || edges === "start";
-  var 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(props) {
+  return import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(WebWheel, {
+    ...props
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_NativeWheel.NativeWheel, {
+    ...props
+  });
 }
-function Wheel(param) {
+function WebWheel(props) {
   var {
     items,
     value,
     onChange,
     visibleItems = 5,
-    itemHeight: itemHeightProp,
     width: widthProp,
     renderItem,
     disabled = false,
-    size: sizeProp,
     loop = false,
-    highlightEdges = "all",
     flex,
     onItemCross,
     "aria-label": ariaLabel
-  } = param;
-  var _ref;
+  } = props;
   var {
-    knobProps
-  } = (0, import_theme2.useResolvedKnobs)();
-  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : wheelFontByStep[(0, import_theme2.sizeTokenStep)(knobProps.sizeToken)];
-  var itemHeight = (_ref = itemHeightProp !== null && itemHeightProp !== void 0 ? itemHeightProp : knobProps.nestedControl.px) !== null && _ref !== void 0 ? _ref : 32;
-  var columnWidth = widthProp !== null && widthProp !== void 0 ? widthProp : defaultColumnWidth;
+    knobProps,
+    size,
+    itemHeight,
+    snapDurationMs,
+    highlightStyle,
+    highlightClassName
+  } = (0, import_wheelShared.useWheelLayout)(props);
+  var columnWidth = widthProp !== null && widthProp !== void 0 ? widthProp : import_wheelShared.defaultColumnWidth;
   ensureWheelFocusStyles();
-  var motionTransition = knobProps.motion.control.transition;
-  var snapDurationMs = (0, import_theme.motionDurationMs)(motionTransition);
   var containerRef = (0, import_react.useRef)(null);
   var [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
   var [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -220,7 +151,7 @@ function Wheel(param) {
   var paddingItems = Math.floor(visibleItems / 2);
   var minOffset = 0;
   var maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
-  var liveDataIndex = n === 0 ? 0 : loopEnabled ? modIndex(Math.round(scrollOffset / itemHeight), n) : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+  var liveDataIndex = n === 0 ? 0 : loopEnabled ? (0, import_wheelShared.modIndex)(Math.round(scrollOffset / itemHeight), n) : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
   var lastCrossIndexRef = (0, import_react.useRef)(null);
   var onItemCrossRef = (0, import_react.useRef)(onItemCross);
   onItemCrossRef.current = onItemCross;
@@ -235,7 +166,7 @@ function Wheel(param) {
     lastCrossIndexRef.current = liveDataIndex;
     var item = items[liveDataIndex];
     if (item === void 0) return;
-    (_onItemCrossRef_current = onItemCrossRef.current) === null || _onItemCrossRef_current === void 0 ? void 0 : _onItemCrossRef_current.call(onItemCrossRef, getItemValue(item), liveDataIndex);
+    (_onItemCrossRef_current = onItemCrossRef.current) === null || _onItemCrossRef_current === void 0 ? void 0 : _onItemCrossRef_current.call(onItemCrossRef, (0, import_wheelShared.getItemValue)(item), liveDataIndex);
     (0, import_haptic.fireSelectionHaptic)();
   }, [liveDataIndex, items, n]);
   var runSnapComplete = (0, import_react.useCallback)(function (finalOffset, dataIndex) {
@@ -244,7 +175,7 @@ function Wheel(param) {
     scrollOffsetRef.current = settled;
     setScrollOffset(settled);
     setSelectedIndex(safeIdx);
-    onChange === null || onChange === void 0 ? void 0 : onChange(getItemValue(items[safeIdx]));
+    onChange === null || onChange === void 0 ? void 0 : onChange((0, import_wheelShared.getItemValue)(items[safeIdx]));
     isAnimatingRef.current = false;
   }, [items, n, onChange, loopEnabled, itemHeight]);
   var animateToOffset = (0, import_react.useCallback)(function (targetOffset, dataIndex, animated) {
@@ -288,15 +219,15 @@ function Wheel(param) {
       return;
     }
     var currentR = Math.round(scrollOffsetRef.current / itemHeight);
-    var targetR = nearestRowForDataIndex(currentR, clampedData, n);
+    var targetR = (0, import_wheelShared.nearestRowForDataIndex)(currentR, clampedData, n);
     var targetOffset1 = targetR * itemHeight;
-    var dataIdx = modIndex(targetR, n);
+    var dataIdx = (0, import_wheelShared.modIndex)(targetR, n);
     animateToOffset(targetOffset1, dataIdx, animated);
   }, [n, itemHeight, loopEnabled, animateToOffset]);
   (0, import_react.useEffect)(function () {
     if (value === void 0) return;
     var index = items.findIndex(function (item) {
-      return getItemValue(item) === value;
+      return (0, import_wheelShared.getItemValue)(item) === value;
     });
     if (index === -1) return;
     if (!hasMountedRef.current) {
@@ -323,7 +254,7 @@ function Wheel(param) {
     var r = Math.round(scrollOffsetRef.current / itemHeight);
     if (loopEnabled) {
       var targetOffset = r * itemHeight;
-      var dataIdx = modIndex(r, n);
+      var dataIdx = (0, import_wheelShared.modIndex)(r, n);
       animateToOffset(targetOffset, dataIdx, animated);
     } else {
       var dataIdx1 = Math.max(0, Math.min(r, n - 1));
@@ -338,7 +269,7 @@ function Wheel(param) {
     var best = null;
     for (var vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
       if (!loopEnabled && (vr < 0 || vr >= n)) continue;
-      var dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+      var dataIndex = loopEnabled ? (0, import_wheelShared.modIndex)(vr, n) : vr;
       var {
         translateY
       } = getItemTransform(vr, offset, itemHeight, containerHeight);
@@ -436,11 +367,11 @@ function Wheel(param) {
       containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
     }
     if (dragDistanceRef.current < tapSlopPx) {
-      var _ref2;
+      var _ref;
       var _containerRef_current;
       var localY = e.locationY;
       var rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
-      var tapY = typeof localY === "number" ? localY : e.clientY - ((_ref2 = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _ref2 !== void 0 ? _ref2 : 0);
+      var tapY = typeof localY === "number" ? localY : e.clientY - ((_ref = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _ref !== void 0 ? _ref : 0);
       var tapped = hitTestDataIndex(tapY);
       if (tapped != null) {
         snapToIndex(tapped, true);
@@ -461,59 +392,6 @@ function Wheel(param) {
       snapToNearestRow(true);
     }
   }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
-  var disabledRef = (0, import_react.useRef)(disabled);
-  disabledRef.current = disabled;
-  var pointerDownRef = (0, import_react.useRef)(handlePointerDown);
-  pointerDownRef.current = handlePointerDown;
-  var pointerMoveRef = (0, import_react.useRef)(handlePointerMove);
-  pointerMoveRef.current = handlePointerMove;
-  var pointerUpRef = (0, import_react.useRef)(handlePointerUp);
-  pointerUpRef.current = handlePointerUp;
-  var panResponder = (0, import_react.useMemo)(function () {
-    if (import_tamagui.isWeb) return {
-      panHandlers: {}
-    };
-    return import_react_native.PanResponder.create({
-      onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
-        return !disabledRef.current;
-      },
-      onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder(_, gesture) {
-        return Math.abs(gesture.dy) > 1;
-      },
-      onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
-        return false;
-      },
-      onShouldBlockNativeResponder: function onShouldBlockNativeResponder() {
-        return true;
-      },
-      onPanResponderGrant: function onPanResponderGrant(evt) {
-        pointerDownRef.current({
-          clientY: evt.nativeEvent.pageY,
-          pointerId: 1
-        });
-      },
-      onPanResponderMove: function onPanResponderMove(evt) {
-        pointerMoveRef.current({
-          clientY: evt.nativeEvent.pageY,
-          pointerId: 1
-        });
-      },
-      onPanResponderRelease: function onPanResponderRelease(evt) {
-        pointerUpRef.current({
-          clientY: evt.nativeEvent.pageY,
-          pointerId: 1,
-          locationY: evt.nativeEvent.locationY
-        });
-      },
-      onPanResponderTerminate: function onPanResponderTerminate(evt) {
-        pointerUpRef.current({
-          clientY: evt.nativeEvent.pageY,
-          pointerId: 1,
-          locationY: evt.nativeEvent.locationY
-        });
-      }
-    });
-  }, []);
   var handleWheel = (0, import_react.useCallback)(function (e) {
     if (disabled) return;
     e.preventDefault();
@@ -573,7 +451,7 @@ function Wheel(param) {
     }
     e.preventDefault();
     if (loopEnabled) {
-      var newIndex = modIndex(selectedIndex + delta, n);
+      var newIndex = (0, import_wheelShared.modIndex)(selectedIndex + delta, n);
       snapToIndex(newIndex);
     } else {
       var newIndex1 = Math.max(0, Math.min(selectedIndex + delta, n - 1));
@@ -603,39 +481,25 @@ function Wheel(param) {
   }, []);
   var renderRows = (0, import_react.useMemo)(function () {
     if (n === 0) return [];
-    if (loopEnabled) {
-      var centerRow = Math.round(scrollOffset / itemHeight);
-      var rowBuffer = paddingItems + 5;
-      var list = [];
-      for (var vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
-        list.push({
-          virtualRow: vr,
-          dataIndex: modIndex(vr, n)
-        });
-      }
-      return list;
+    var span = Math.ceil((0, import_wheelShared.drumReachRows)(itemHeight, containerHeight));
+    var centerRow = Math.round(scrollOffset / itemHeight);
+    var first = loopEnabled ? centerRow - span : Math.max(0, centerRow - span);
+    var last = loopEnabled ? centerRow + span : Math.min(n - 1, centerRow + span);
+    var list = [];
+    for (var vr = first; vr <= last; vr++) {
+      list.push({
+        virtualRow: vr,
+        dataIndex: (0, import_wheelShared.modIndex)(vr, n)
+      });
     }
-    var start = Math.max(0, Math.floor(scrollOffset / itemHeight) - paddingItems - 1);
-    var end = Math.min(n - 1, Math.ceil((scrollOffset + containerHeight) / itemHeight) + paddingItems + 1);
-    return Array.from({
-      length: end - start + 1
-    }, function (_, i) {
-      var virtualRow = start + i;
-      return {
-        virtualRow,
-        dataIndex: virtualRow
-      };
-    });
-  }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+    return list;
+  }, [n, loopEnabled, scrollOffset, itemHeight, containerHeight]);
   var itemColor = function itemColor2(isSelected) {
     return disabled ? "$color10" : isSelected ? "$color12" : "$color11";
   };
-  var radiusToken = knobProps.borderRadius.borderRadius;
-  var highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
-  var highlightSmoothClass = "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string" ? knobProps.borderRadius.className : void 0;
   var renderItemNode = function renderItemNode2(dataIndex, isSelected) {
     var item = items[dataIndex];
-    var itemValue = getItemValue(item);
+    var itemValue = (0, import_wheelShared.getItemValue)(item);
     if (renderItem) return renderItem(itemValue, dataIndex, isSelected);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...knobProps.body,
@@ -645,7 +509,7 @@ function Wheel(param) {
       ellipsizeMode: "tail",
       maxWidth: "100%",
       paddingHorizontal: "$2",
-      children: getItemLabel(item)
+      children: (0, import_wheelShared.getItemLabel)(item)
     });
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WheelContainer, {
@@ -659,14 +523,14 @@ function Wheel(param) {
     opacity: 1,
     children: [/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */
     /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
-      className: highlightSmoothClass,
+      className: highlightClassName,
       backgroundColor: "$color4",
       top: paddingItems * itemHeight,
       height: itemHeight,
       style: highlightStyle,
       "data-testid": "wheel-selection"
     }), /* Interactive container */
-    import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
       ref: containerRef,
       className: "mp1-wheel-wrapper",
       tabIndex: disabled ? -1 : 0,
@@ -676,14 +540,14 @@ function Wheel(param) {
       "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-valuetext": items[selectedIndex] !== void 0 ? (0, import_wheelShared.getItemLabel)(items[selectedIndex]) : void 0,
       "aria-disabled": disabled || void 0,
       "data-disabled": disabled ? true : void 0,
       style: {
         width: "100%",
         height: containerHeight,
         position: "relative",
-        perspective: `${perspectivePx}px`,
+        perspective: `${containerHeight * 4}px`,
         perspectiveOrigin: "center center",
         overflow: "hidden",
         userSelect: "none",
@@ -697,11 +561,11 @@ function Wheel(param) {
       onPointerCancel: handlePointerUp,
       onKeyDown: handleKeyDown,
       "data-testid": "wheel-wrapper",
-      children: renderRows.map(function (param2) {
+      children: renderRows.map(function (param) {
         var {
           virtualRow,
           dataIndex
-        } = param2;
+        } = param;
         var isSelected = dataIndex === liveDataIndex;
         var transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
@@ -728,44 +592,6 @@ function Wheel(param) {
           children: renderItemNode(dataIndex, isSelected)
         }, `${dataIndex}-${virtualRow}`);
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      width: "100%",
-      height: containerHeight,
-      position: "relative",
-      overflow: "hidden",
-      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(function (param2) {
-        var {
-          virtualRow,
-          dataIndex
-        } = param2;
-        var isSelected = dataIndex === liveDataIndex;
-        var transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
-        if (Math.abs(transform.rotateX) > 85) return null;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          height: itemHeight,
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: transform.opacity,
-          pointerEvents: "none",
-          y: transform.translateY,
-          scale: transform.scale,
-          rotateX: `${transform.rotateX}deg`,
-          "data-testid": "wheel-item",
-          "data-index": dataIndex,
-          "data-selected": isSelected ? true : void 0,
-          children: renderItemNode(dataIndex, isSelected)
-        }, `${dataIndex}-${virtualRow}`);
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WheelEdgeFade.WheelEdgeFade, {
-        height: paddingItems * itemHeight
-      })]
     })]
   });
 }