@multiplatform.one/forms 7.35.0 → 7.37.0

package/dist/cjs/Wheel/index.cjs

@@ -25,29 +25,18 @@ __export(Wheel_exports, {
   Wheel: () => Wheel
 });
 module.exports = __toCommonJS(Wheel_exports);
-var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var import_react_native = require("react-native-web");
-var import_theme2 = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_t = require("../shared/t.cjs");
 var import_haptic = require("./haptic.cjs");
-var import_WheelEdgeFade = require("./WheelEdgeFade.cjs");
+var import_NativeWheel = require("./NativeWheel.cjs");
+var import_wheelShared = require("./wheelShared.cjs");
 var import_jsx_runtime = require("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 wheelFontByStep = {
-  [-1]: "$6",
-  0: "$8",
-  1: "$9"
-};
 const WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
 function ensureWheelFocusStyles() {
   if (!import_tamagui.isWeb || typeof document === "undefined") return;
@@ -83,43 +72,15 @@ const SelectionIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   right: 0,
   pointerEvents: "none"
 });
-function normalizeItem(item) {
-  if (typeof item === "object" && item !== null && "value" in item) {
-    return item;
-  }
-  return {
-    value: item,
-    label: String(item)
-  };
-}
-function getItemLabel(item) {
-  const normalized = normalizeItem(item);
-  return normalized.label ?? String(normalized.value);
-}
-function getItemValue(item) {
-  const 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;
   const rT = Math.round(targetOffset / itemHeight);
-  const m = modIndex(rT, n);
+  const m = (0, import_wheelShared.modIndex)(rT, n);
   const span = n * itemHeight;
   const base = m * itemHeight;
   const k = Math.round((referenceOffset - base) / span);
   return base + k * span;
 }
-function nearestRowForDataIndex(currentRow, targetDataIndex, n) {
-  const currentMod = modIndex(currentRow, n);
-  let delta = targetDataIndex - currentMod;
-  if (delta > n / 2) delta -= n;
-  if (delta < -n / 2) delta += n;
-  return currentRow + delta;
-}
 function rubberBand(offset, dimension) {
   const c = rubberBandConstant;
   const x = Math.abs(offset);
@@ -127,66 +88,45 @@ function rubberBand(offset, dimension) {
   return offset < 0 ? -result : result;
 }
 function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  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)));
+  const 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) {
-  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(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({
-  items,
-  value,
-  onChange,
-  visibleItems = 5,
-  itemHeight: itemHeightProp,
-  width: widthProp,
-  renderItem,
-  disabled = false,
-  size: sizeProp,
-  loop = false,
-  highlightEdges = "all",
-  flex,
-  onItemCross,
-  "aria-label": ariaLabel
-}) {
+function WebWheel(props) {
   const {
-    knobProps
-  } = (0, import_theme2.useResolvedKnobs)();
-  const size = sizeProp ?? wheelFontByStep[(0, import_theme2.sizeTokenStep)(knobProps.sizeToken)];
-  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
-  const columnWidth = widthProp ?? defaultColumnWidth;
+    items,
+    value,
+    onChange,
+    visibleItems = 5,
+    width: widthProp,
+    renderItem,
+    disabled = false,
+    loop = false,
+    flex,
+    onItemCross,
+    "aria-label": ariaLabel
+  } = props;
+  const {
+    knobProps,
+    size,
+    itemHeight,
+    snapDurationMs,
+    highlightStyle,
+    highlightClassName
+  } = (0, import_wheelShared.useWheelLayout)(props);
+  const columnWidth = widthProp ?? import_wheelShared.defaultColumnWidth;
   ensureWheelFocusStyles();
-  const motionTransition = knobProps.motion.control.transition;
-  const snapDurationMs = (0, import_theme.motionDurationMs)(motionTransition);
   const containerRef = (0, import_react.useRef)(null);
   const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -209,7 +149,7 @@ function Wheel({
   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 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));
   const lastCrossIndexRef = (0, import_react.useRef)(null);
   const onItemCrossRef = (0, import_react.useRef)(onItemCross);
   onItemCrossRef.current = onItemCross;
@@ -223,7 +163,7 @@ function Wheel({
     lastCrossIndexRef.current = liveDataIndex;
     const item = items[liveDataIndex];
     if (item === void 0) return;
-    onItemCrossRef.current?.(getItemValue(item), liveDataIndex);
+    onItemCrossRef.current?.((0, import_wheelShared.getItemValue)(item), liveDataIndex);
     (0, import_haptic.fireSelectionHaptic)();
   }, [liveDataIndex, items, n]);
   const runSnapComplete = (0, import_react.useCallback)((finalOffset, dataIndex) => {
@@ -232,7 +172,7 @@ function Wheel({
     scrollOffsetRef.current = settled;
     setScrollOffset(settled);
     setSelectedIndex(safeIdx);
-    onChange?.(getItemValue(items[safeIdx]));
+    onChange?.((0, import_wheelShared.getItemValue)(items[safeIdx]));
     isAnimatingRef.current = false;
   }, [items, n, onChange, loopEnabled, itemHeight]);
   const animateToOffset = (0, import_react.useCallback)((targetOffset, dataIndex, animated) => {
@@ -275,14 +215,14 @@ function Wheel({
       return;
     }
     const currentR = Math.round(scrollOffsetRef.current / itemHeight);
-    const targetR = nearestRowForDataIndex(currentR, clampedData, n);
+    const targetR = (0, import_wheelShared.nearestRowForDataIndex)(currentR, clampedData, n);
     const targetOffset = targetR * itemHeight;
-    const dataIdx = modIndex(targetR, n);
+    const dataIdx = (0, import_wheelShared.modIndex)(targetR, n);
     animateToOffset(targetOffset, dataIdx, animated);
   }, [n, itemHeight, loopEnabled, animateToOffset]);
   (0, import_react.useEffect)(() => {
     if (value === void 0) return;
-    const index = items.findIndex(item => getItemValue(item) === value);
+    const index = items.findIndex(item => (0, import_wheelShared.getItemValue)(item) === value);
     if (index === -1) return;
     if (!hasMountedRef.current) {
       hasMountedRef.current = true;
@@ -307,7 +247,7 @@ function Wheel({
     const r = Math.round(scrollOffsetRef.current / itemHeight);
     if (loopEnabled) {
       const targetOffset = r * itemHeight;
-      const dataIdx = modIndex(r, n);
+      const dataIdx = (0, import_wheelShared.modIndex)(r, n);
       animateToOffset(targetOffset, dataIdx, animated);
     } else {
       const dataIdx = Math.max(0, Math.min(r, n - 1));
@@ -322,7 +262,7 @@ function Wheel({
     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 dataIndex = loopEnabled ? (0, import_wheelShared.modIndex)(vr, n) : vr;
       const {
         translateY
       } = getItemTransform(vr, offset, itemHeight, containerHeight);
@@ -441,51 +381,6 @@ function Wheel({
       snapToNearestRow(true);
     }
   }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
-  const disabledRef = (0, import_react.useRef)(disabled);
-  disabledRef.current = disabled;
-  const pointerDownRef = (0, import_react.useRef)(handlePointerDown);
-  pointerDownRef.current = handlePointerDown;
-  const pointerMoveRef = (0, import_react.useRef)(handlePointerMove);
-  pointerMoveRef.current = handlePointerMove;
-  const pointerUpRef = (0, import_react.useRef)(handlePointerUp);
-  pointerUpRef.current = handlePointerUp;
-  const panResponder = (0, import_react.useMemo)(() => {
-    if (import_tamagui.isWeb) return {
-      panHandlers: {}
-    };
-    return import_react_native.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 = (0, import_react.useCallback)(e => {
     if (disabled) return;
     e.preventDefault();
@@ -545,7 +440,7 @@ function Wheel({
     }
     e.preventDefault();
     if (loopEnabled) {
-      const newIndex = modIndex(selectedIndex + delta, n);
+      const newIndex = (0, import_wheelShared.modIndex)(selectedIndex + delta, n);
       snapToIndex(newIndex);
     } else {
       const newIndex = Math.max(0, Math.min(selectedIndex + delta, n - 1));
@@ -573,37 +468,23 @@ function Wheel({
   }, []);
   const renderRows = (0, import_react.useMemo)(() => {
     if (n === 0) return [];
-    if (loopEnabled) {
-      const centerRow = Math.round(scrollOffset / itemHeight);
-      const rowBuffer = paddingItems + 5;
-      const list = [];
-      for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
-        list.push({
-          virtualRow: vr,
-          dataIndex: modIndex(vr, n)
-        });
-      }
-      return list;
+    const span = Math.ceil((0, import_wheelShared.drumReachRows)(itemHeight, containerHeight));
+    const centerRow = Math.round(scrollOffset / itemHeight);
+    const first = loopEnabled ? centerRow - span : Math.max(0, centerRow - span);
+    const last = loopEnabled ? centerRow + span : Math.min(n - 1, centerRow + span);
+    const list = [];
+    for (let vr = first; vr <= last; vr++) {
+      list.push({
+        virtualRow: vr,
+        dataIndex: (0, import_wheelShared.modIndex)(vr, n)
+      });
     }
-    const start = Math.max(0, Math.floor(scrollOffset / itemHeight) - paddingItems - 1);
-    const end = Math.min(n - 1, Math.ceil((scrollOffset + containerHeight) / itemHeight) + paddingItems + 1);
-    return Array.from({
-      length: end - start + 1
-    }, (_, i) => {
-      const virtualRow = start + i;
-      return {
-        virtualRow,
-        dataIndex: virtualRow
-      };
-    });
-  }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+    return list;
+  }, [n, loopEnabled, scrollOffset, itemHeight, 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);
+    const 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,
@@ -613,7 +494,7 @@ function Wheel({
       ellipsizeMode: "tail",
       maxWidth: "100%",
       paddingHorizontal: "$2",
-      children: getItemLabel(item)
+      children: (0, import_wheelShared.getItemLabel)(item)
     });
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WheelContainer, {
@@ -626,13 +507,13 @@ function Wheel({
     "aria-disabled": disabled || void 0,
     opacity: 1,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
-      className: highlightSmoothClass,
+      className: highlightClassName,
       backgroundColor: "$color4",
       top: paddingItems * itemHeight,
       height: itemHeight,
       style: highlightStyle,
       "data-testid": "wheel-selection"
-    }), 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,
@@ -642,14 +523,14 @@ function Wheel({
       "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",
@@ -693,43 +574,6 @@ function Wheel({
           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(({
-        virtualRow,
-        dataIndex
-      }) => {
-        const isSelected = dataIndex === liveDataIndex;
-        const 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
-      })]
     })]
   });
 }