yeet

design/components/ContextMenu/native/ContextMenu.native.tsx

@@ -0,0 +1,460 @@
+// Metro module 9299 (f9300).
+import { useEffect, useMemo, useRef, useLayoutEffect, useCallback } from "react";
+import { isFabric } from "../../../../utils/native/FabricUtils";
+import * as _PlatformUtils from "../../../../utils/PlatformUtils";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import { useAnimatedRef, useSharedValue, runOnUI } from "../../../../modules/reanimated/ReanimatedRexport";
+import useWindowDimensions_native from "../../../../modules/screen/useWindowDimensions.native";
+import * as _ContextMenuState_native from "./ContextMenuState.native";
+import { useContextMenuState, useActiveContextMenu, resetContextMenuState, hideContextMenu, showContextMenu } from "./ContextMenuState.native";
+import { useFontScale } from "../../../../modules/screen/native/useFontScale";
+import * as _ContextMenuConstants_native from "./ContextMenuConstants.native";
+import { CONTEXT_MENU_ITEM_BASE_HEIGHT, CONTEXT_MENU_ITEM_PADDING, CONTEXT_MENU_LONG_PRESS_DURATION_MS } from "./ContextMenuConstants.native";
+import { setAccessibilityFocus } from "../../../../modules/a11y/native/setAccessibilityFocus.android";
+import { uid } from "../../../../modules/core/web/UID";
+import { AccessibilityAnnouncer } from "../../../shared";
+import * as _index_native from "../../../../intl/index.native";
+import { intl } from "../../../../intl/index.native";
+import * as _FWOMeasureUtils from "../../../../modules/screen/native/FWOMeasureUtils";
+import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
+import * as _HapticUtils_native from "../../../../modules/haptics/HapticUtils.native";
+import { getIsScreenReaderEnabled } from "../../../../modules/a11y/native/useIsScreenReaderEnabled.native";
+const isIOS = isFabric() && _PlatformUtils.isIOS();
+const __initData = {
+  code: "function ContextMenuNativeTsx1(){const{_isFabricIOS,buttonTagSV,measureInWindowForFWO,measure,buttonRef,title,itemCount,dividerIndexes,approximateItemHeight,CONTEXT_MENU_DIVIDER_HEIGHT,CONTEXT_MENU_OFFSET,screenHeight,CONTEXT_MENU_EDGE_OFFSET,screenWidth,CONTEXT_MENU_MIN_WIDTH,menuAlign,runOnJS,showMenu}=this.__closure;let pageX;let pageY;let width;let height;if(_isFabricIOS){const tag=buttonTagSV.get();if(tag===-1)return;const m=measureInWindowForFWO(tag);if(m==null)return;pageX=m.x;pageY=m.y;width=m.width;height=m.height;}else{const m=measure(buttonRef);if(m==null)return;pageX=m.pageX;pageY=m.pageY;width=m.width;height=m.height;}const rowCount=title!=null?itemCount+1:itemCount;const dividerCount=(title!=null?1:0)+dividerIndexes.length;const menuHeight=approximateItemHeight.get()*rowCount+CONTEXT_MENU_DIVIDER_HEIGHT*dividerCount;const positionBelowOffset=pageY+height+CONTEXT_MENU_OFFSET;const positionAboveOffset=screenHeight-pageY+CONTEXT_MENU_OFFSET;const availableSpaceBelow=screenHeight-positionBelowOffset-CONTEXT_MENU_EDGE_OFFSET;const availableSpaceAbove=pageY-CONTEXT_MENU_EDGE_OFFSET;const wouldOverflowBelow=availableSpaceBelow<menuHeight;const wouldOverflowAbove=availableSpaceAbove<menuHeight;const minimumRightPosition=Math.max(screenWidth-pageX-width,CONTEXT_MENU_EDGE_OFFSET);function autoPositionVertical(offset){'worklet';let positionY='below';let y=pageY+height+CONTEXT_MENU_OFFSET;if(wouldOverflowBelow===wouldOverflowAbove){if(availableSpaceBelow>availableSpaceAbove){positionY='below';}else{positionY='above';}}else if(wouldOverflowBelow){positionY='above';}else{positionY='below';}y=(positionY==='above'?positionAboveOffset:positionBelowOffset)+(offset!==null&&offset!==void 0?offset:0);return{y:y,positionY:positionY};}function autoPositionHorizontal(){'worklet';const distanceFromLeftEdge=pageX-CONTEXT_MENU_EDGE_OFFSET;const distanceFromRightEdge=screenWidth-CONTEXT_MENU_EDGE_OFFSET-(pageX+CONTEXT_MENU_MIN_WIDTH);let positionX='left';let x=pageX;if(distanceFromLeftEdge>distanceFromRightEdge){positionX='right';x=minimumRightPosition;}return{x:x,positionX:positionX};}if(menuAlign==='auto'){const{y:y,positionY:positionY}=autoPositionVertical();const{x:x,positionX:positionX}=autoPositionHorizontal();runOnJS(showMenu)(x,y,positionX,positionY,menuHeight,width);}else if(menuAlign==='above'||menuAlign==='below'){const positionY=menuAlign;const y=positionY==='above'?positionAboveOffset:positionBelowOffset;const{x:x,positionX:positionX}=autoPositionHorizontal();runOnJS(showMenu)(x,y,positionX,positionY,menuHeight,width);}else{const positionX=menuAlign==='left'?'right':'left';const x=positionX==='left'?pageX+width+CONTEXT_MENU_OFFSET:minimumRightPosition+width+CONTEXT_MENU_OFFSET;const{y:y,positionY:positionY}=autoPositionVertical(-1*(CONTEXT_MENU_OFFSET+height));runOnJS(showMenu)(x,y,positionX,positionY,menuHeight,width);}}"
+};
+const __initData2 = {
+  code: "function autoPositionVertical_ContextMenuNativeTsx2(offset){const{pageY,height,CONTEXT_MENU_OFFSET,wouldOverflowBelow,wouldOverflowAbove,availableSpaceBelow,availableSpaceAbove,positionAboveOffset,positionBelowOffset}=this.__closure;let positionY='below';let y=pageY+height+CONTEXT_MENU_OFFSET;if(wouldOverflowBelow===wouldOverflowAbove){if(availableSpaceBelow>availableSpaceAbove){positionY='below';}else{positionY='above';}}else if(wouldOverflowBelow){positionY='above';}else{positionY='below';}y=(positionY==='above'?positionAboveOffset:positionBelowOffset)+(offset!==null&&offset!==void 0?offset:0);return{y:y,positionY:positionY};}"
+};
+const __initData3 = {
+  code: "function autoPositionHorizontal_ContextMenuNativeTsx3(){const{pageX,CONTEXT_MENU_EDGE_OFFSET,screenWidth,CONTEXT_MENU_MIN_WIDTH,minimumRightPosition}=this.__closure;const distanceFromLeftEdge=pageX-CONTEXT_MENU_EDGE_OFFSET;const distanceFromRightEdge=screenWidth-CONTEXT_MENU_EDGE_OFFSET-(pageX+CONTEXT_MENU_MIN_WIDTH);let positionX='left';let x=pageX;if(distanceFromLeftEdge>distanceFromRightEdge){positionX='right';x=minimumRightPosition;}return{x:x,positionX:positionX};}"
+};
+const __initData4 = {
+  code: "function onPanGestureEnd_ContextMenuNativeTsx4(){const{state,runOnJS,requestClose}=this.__closure;const{activeIndex:activeIndex}=state;const isDismiss=activeIndex.get()===-1;runOnJS(requestClose)(isDismiss);}"
+};
+const __initData5 = {
+  code: "function ContextMenuNativeTsx5(e){const{updateContextMenuState,state}=this.__closure;updateContextMenuState(e.absoluteX,e.absoluteY,state);}"
+};
+const __initData6 = {
+  code: "function ContextMenuNativeTsx6(){const{runOnJS,triggerHapticFeedback,CONTEXT_MENU_OPEN_HAPTIC,measureButtonAndShowMenu}=this.__closure;runOnJS(triggerHapticFeedback)(CONTEXT_MENU_OPEN_HAPTIC);measureButtonAndShowMenu();}"
+};
+const __initData7 = {
+  code: "function ContextMenuNativeTsx7(){const{measureButtonAndShowMenu}=this.__closure;measureButtonAndShowMenu();}"
+};
+const __initData8 = {
+  code: "function ContextMenuNativeTsx8(e){const{updateContextMenuState,state}=this.__closure;updateContextMenuState(e.absoluteX,e.absoluteY,state);}"
+};
+const __initData9 = {
+  code: "function ContextMenuNativeTsx9(){const{runOnJS,triggerHapticFeedback,CONTEXT_MENU_OPEN_HAPTIC,measureButtonAndShowMenu}=this.__closure;runOnJS(triggerHapticFeedback)(CONTEXT_MENU_OPEN_HAPTIC);measureButtonAndShowMenu();}"
+};
+export function ContextMenu(props) {
+  let items2, dividerIndexes, length, width, height, contextMenuState, activeIndex, activeContextMenu, sharedValue2, ref, callback, callback2, callback3, callback4;
+  const { children, items, triggerOnLongPress = false } = props;
+  let c17122_1 = triggerOnLongPress;
+  let triggerOnTap = props.triggerOnTap;
+  if (triggerOnTap === void 0) {
+    triggerOnTap = false;
+  }
+  let c17122_2 = triggerOnTap;
+  const { disableGesture = false, align = "auto" } = props;
+  let c17122_3 = align;
+  const { title, onOpen, onClose, keyboardShouldPersistTaps } = props;
+  let returnRef2 = props.returnRef;
+  let returnRef = returnRef2;
+  let enabled = props.enabled;
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  let c17122_9 = enabled;
+  let buttonRef2 = props.buttonRef;
+  let buttonRef = buttonRef2;
+  items2 = void 0;
+  dividerIndexes = void 0;
+  length = void 0;
+  width = void 0;
+  height = void 0;
+  contextMenuState = void 0;
+  activeIndex = void 0;
+  activeContextMenu = void 0;
+  sharedValue2 = void 0;
+  ref = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  callback3 = void 0;
+  callback4 = void 0;
+  const animatedRef = useAnimatedRef();
+  if (buttonRef2 == null) {
+    buttonRef2 = animatedRef;
+  }
+  buttonRef = buttonRef2;
+  const sharedValue = useSharedValue(-1);
+  useEffect(() => buttonRef.observe((a0) => {
+    if (a0 != null) {
+      sharedValue.set(a0);
+    }
+  }), [buttonRef2, sharedValue]);
+  const memo = useMemo(() => {
+    const isArray = Array.isArray(items[0]);
+    const items3 = isArray ? items.flat() : items;
+    let c26416_0 = items3;
+    const dividerIndexes2 = [];
+    let c26416_1 = dividerIndexes2;
+    if (isArray) {
+      items.forEach((item, index) => {
+        if (index > 0) {
+          c26416_1.push(c26416_0.indexOf(item[0]));
+        }
+      });
+    }
+    return {
+      items: items3,
+      dividerIndexes: dividerIndexes2
+    };
+  }, [items]);
+  items2 = memo.items;
+  dividerIndexes = memo.dividerIndexes;
+  length = items2.length;
+  const windowDimensions_native = useWindowDimensions_native({
+    ignoreKeyboard: isAndroid()
+  });
+  width = windowDimensions_native.width;
+  height = windowDimensions_native.height;
+  contextMenuState = useContextMenuState();
+  activeIndex = contextMenuState.activeIndex;
+  const fontScale = useFontScale();
+  if (returnRef2 === void 0) {
+    returnRef2 = buttonRef2;
+  }
+  returnRef = returnRef2;
+  activeContextMenu = useActiveContextMenu();
+  sharedValue2 = useSharedValue(Math.max((CONTEXT_MENU_ITEM_BASE_HEIGHT - 2 * CONTEXT_MENU_ITEM_PADDING) * fontScale + 2 * CONTEXT_MENU_ITEM_PADDING, CONTEXT_MENU_ITEM_BASE_HEIGHT));
+  ref = useRef(items2);
+  useLayoutEffect(() => {
+    ref.current = items2;
+  }, [items2]);
+  useLayoutEffect(() => {
+    if (activeContextMenu == null) {
+      resetContextMenuState(contextMenuState);
+    }
+  }, [activeContextMenu, contextMenuState]);
+  callback = useCallback((a0) => {
+    if (onClose != null) {
+      onClose(a0);
+    }
+    hideContextMenu();
+    const r17 = activeIndex.get();
+    if (r17 !== -1) {
+      const r20 = ref.current[r17];
+      if (r20 != null) {
+        r20.action();
+      }
+    }
+  }, [activeIndex, onClose]);
+  callback2 = useCallback(() => {
+    setAccessibilityFocus({
+      ref: returnRef
+    });
+  }, [returnRef2]);
+  callback3 = useCallback((a0, a1, a2, a3, a4, a5) => {
+    if (onOpen != null) {
+      onOpen();
+    }
+    showContextMenu({
+      key: uid(),
+      x: a0,
+      y: a1,
+      positionX: a2,
+      positionY: a3,
+      height: a4,
+      width: a5,
+      state: contextMenuState,
+      items: items2,
+      title,
+      keyboardShouldPersistTaps,
+      requestClose: callback,
+      onClose: callback2,
+      dividerIndexes
+    });
+    if (isAndroid()) {
+      AccessibilityAnnouncer.announce(intl.string(_index_native.t.ZqK0uI));
+    }
+  }, [onOpen, contextMenuState, items2, title, keyboardShouldPersistTaps, callback, callback2, dividerIndexes]);
+  const V = function V() {
+    let r12, r16, r20, r41, height2, pageX3, pageY, width2;
+    let pageX, c26417_1, c26417_2, c26417_3, c26417_4, c26417_5, c26417_6, c26417_7;
+    if (isIOS) {
+      const r15 = sharedValue.get();
+      if (r15 === -1) {
+        return void 0;
+      }
+      const r18 = _FWOMeasureUtils.measureInWindowForFWO(r15);
+      if (r18 == null) {
+        return void 0;
+      }
+      const r51 = r18.x;
+      pageX = r51;
+      pageY = r18.y;
+      width2 = r18.width;
+      height2 = r18.height;
+      r12 = r51;
+      pageX3 = r12;
+      r20 = height2;
+      r16 = pageY;
+      r41 = pageX3;
+    } else {
+      const r39 = _ReanimatedRexport.measure(buttonRef);
+      if (r39 == null) {
+        return void 0;
+      }
+      const pageX2 = r39.pageX;
+      pageX = pageX2;
+      pageY = r39.pageY;
+      width2 = r39.width;
+      height2 = r39.height;
+      r12 = pageX2;
+      pageX3 = r12;
+      r20 = height2;
+      r16 = pageY;
+      r41 = pageX3;
+    }
+    const r54 = title != null ? length + 1 : length;
+    const r58 = title != null ? 1 : 0;
+    L47: {
+      const r61 = r58 + dividerIndexes.length;
+      const r73 = sharedValue2.get() * r54 + _ContextMenuConstants_native.CONTEXT_MENU_DIVIDER_HEIGHT * r61;
+      let positionBelowOffset = r16 + r20 + _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+      c26417_1 = positionBelowOffset;
+      const positionAboveOffset = height - r16 + _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+      c26417_2 = positionAboveOffset;
+      const availableSpaceBelow = height - positionBelowOffset - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET;
+      c26417_3 = availableSpaceBelow;
+      const availableSpaceAbove = r16 - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET;
+      c26417_4 = availableSpaceAbove;
+      const wouldOverflowBelow = availableSpaceBelow < r73;
+      c26417_5 = wouldOverflowBelow;
+      const wouldOverflowAbove = availableSpaceAbove < r73;
+      c26417_6 = wouldOverflowAbove;
+      const minimumRightPosition = Math.max(width - r41 - width2, _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET);
+      c26417_7 = minimumRightPosition;
+      const autoPositionVertical = function autoPositionVertical(a0) {
+        _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+        const positionY = c26417_5 === c26417_6 ? c26417_3 > c26417_4 ? "below" : "above" : c26417_5 ? "above" : "below";
+        return {
+          y: (positionY === "above" ? c26417_2 : c26417_1) + (a0 == null ? 0 : a0),
+          positionY
+        };
+      };
+      autoPositionVertical.__closure = {
+        pageY,
+        height: height2,
+        CONTEXT_MENU_OFFSET: _ContextMenuConstants_native.CONTEXT_MENU_OFFSET,
+        wouldOverflowBelow,
+        wouldOverflowAbove,
+        availableSpaceBelow,
+        availableSpaceAbove,
+        positionAboveOffset,
+        positionBelowOffset
+      };
+      autoPositionVertical.__workletHash = 15309589830995;
+      autoPositionVertical.__initData = __initData2;
+      const autoPositionHorizontal = function autoPositionHorizontal() {
+        let r3 = pageX;
+        const r5 = r3 - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET;
+        const r20 = width - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET - (r3 + _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH);
+        let positionX = "left";
+        if (r5 > r20) {
+          r3 = c26417_7;
+          positionX = "right";
+        }
+        return {
+          x: r3,
+          positionX
+        };
+      };
+      autoPositionHorizontal.__closure = {
+        pageX: pageX3,
+        CONTEXT_MENU_EDGE_OFFSET: _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET,
+        screenWidth: width,
+        CONTEXT_MENU_MIN_WIDTH: _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH,
+        minimumRightPosition
+      };
+      autoPositionHorizontal.__workletHash = 14761866330436;
+      autoPositionHorizontal.__initData = __initData3;
+      if (c17122_3 === "auto") {
+        _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+        const r216 = wouldOverflowBelow === wouldOverflowAbove ? availableSpaceBelow > availableSpaceAbove ? "below" : "above" : wouldOverflowBelow ? "above" : "below";
+        if (r216 === "above") {
+          positionBelowOffset = positionAboveOffset;
+        }
+        const r219 = positionBelowOffset + 0;
+        const r225 = r12 - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET;
+        const r238 = width - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET - (r12 + _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH);
+        let r239 = "left";
+        if (r225 > r238) {
+          r239 = "right";
+          r12 = minimumRightPosition;
+        }
+        _ReanimatedRexport.runOnJS(callback3)(r12, r219, r239, r216, r73, width2);
+      } else {
+        const r5 = c17122_3 === "above";
+        if (!r5 && c17122_3 !== "below") {
+          const r136 = c17122_3 === "left" ? "right" : "left";
+          const r143 = r136 === "left" ? r41 + width2 + _ContextMenuConstants_native.CONTEXT_MENU_OFFSET : minimumRightPosition + width2 + _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+          const r157 = -1 * (_ContextMenuConstants_native.CONTEXT_MENU_OFFSET + r20);
+          _ContextMenuConstants_native.CONTEXT_MENU_OFFSET;
+          const r163 = wouldOverflowBelow === wouldOverflowAbove ? availableSpaceBelow > availableSpaceAbove ? "below" : "above" : wouldOverflowBelow ? "above" : "below";
+          const r32 = (r163 === "above" ? positionAboveOffset : positionBelowOffset) + r157;
+          _ReanimatedRexport.runOnJS(callback3)(r143, r32, r136, r163, r73, width2);
+          break L47;
+        }
+        const r174 = r5 ? positionAboveOffset : positionBelowOffset;
+        const r180 = r12 - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET;
+        const r193 = width - _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET - (r12 + _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH);
+        let r194 = "left";
+        let r195 = r12;
+        if (r180 > r193) {
+          r194 = "right";
+          r195 = minimumRightPosition;
+        }
+        _ReanimatedRexport.runOnJS(callback3)(r195, r174, r194, c17122_3, r73, width2);
+      }
+    }
+  };
+  V.__closure = {
+    _isFabricIOS: isIOS,
+    buttonTagSV: sharedValue,
+    measureInWindowForFWO: _FWOMeasureUtils.measureInWindowForFWO,
+    measure: _ReanimatedRexport.measure,
+    buttonRef: buttonRef2,
+    title,
+    itemCount: length,
+    dividerIndexes,
+    approximateItemHeight: sharedValue2,
+    CONTEXT_MENU_DIVIDER_HEIGHT: _ContextMenuConstants_native.CONTEXT_MENU_DIVIDER_HEIGHT,
+    CONTEXT_MENU_OFFSET: _ContextMenuConstants_native.CONTEXT_MENU_OFFSET,
+    screenHeight: height,
+    CONTEXT_MENU_EDGE_OFFSET: _ContextMenuConstants_native.CONTEXT_MENU_EDGE_OFFSET,
+    screenWidth: width,
+    CONTEXT_MENU_MIN_WIDTH: _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH,
+    menuAlign: align,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    showMenu: callback3
+  };
+  V.__workletHash = 6408542373252;
+  V.__initData = __initData;
+  callback4 = useCallback(V, [buttonRef2, sharedValue, sharedValue2, title, length, height, align, callback3, width, dividerIndexes]);
+  const memo2 = useMemo(() => {
+    let r51;
+    const onPanGestureEnd = function onPanGestureEnd() {
+      const r8 = contextMenuState.activeIndex.get();
+      _ReanimatedRexport.runOnJS(callback)(r8 === -1);
+    };
+    onPanGestureEnd.__closure = {
+      state: contextMenuState,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      requestClose: callback
+    };
+    onPanGestureEnd.__workletHash = 12851223476540;
+    onPanGestureEnd.__initData = __initData4;
+    if (c17122_1) {
+      const r67 = Gesture.Pan();
+      const r70 = r67.enabled(c17122_9);
+      const i = function i(a0) {
+        _ContextMenuState_native.updateContextMenuState(a0.absoluteX, a0.absoluteY, contextMenuState);
+      };
+      i.__closure = {
+        updateContextMenuState: _ContextMenuState_native.updateContextMenuState,
+        state: contextMenuState
+      };
+      i.__workletHash = 2460213213323;
+      i.__initData = __initData5;
+      const r81 = r70.onUpdate(i).onEnd(onPanGestureEnd);
+      const shouldCancelWhenOutside = Gesture.LongPress().enabled(c17122_9).minDuration(CONTEXT_MENU_LONG_PRESS_DURATION_MS).shouldCancelWhenOutside(false);
+      const n = function n() {
+        _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_ContextMenuConstants_native.CONTEXT_MENU_OPEN_HAPTIC);
+        callback4();
+      };
+      n.__closure = {
+        runOnJS: _ReanimatedRexport.runOnJS,
+        triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+        CONTEXT_MENU_OPEN_HAPTIC: _ContextMenuConstants_native.CONTEXT_MENU_OPEN_HAPTIC,
+        measureButtonAndShowMenu: callback4
+      };
+      n.__workletHash = 13919366908951;
+      n.__initData = __initData6;
+      return Gesture.Simultaneous(shouldCancelWhenOutside.onStart(n), r81);
+    }
+    if (c17122_2) {
+      const r56 = Gesture.Tap().enabled(c17122_9);
+      const r58 = function() {
+        callback4();
+      };
+      r58.__closure = {
+        measureButtonAndShowMenu: callback4
+      };
+      r58.__workletHash = 13410382812897;
+      r58.__initData = __initData7;
+      r51 = r56.onStart(r58);
+    } else {
+      const r26 = Gesture.Pan().enabled(c17122_9);
+      const t = function t() {
+        _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_ContextMenuConstants_native.CONTEXT_MENU_OPEN_HAPTIC);
+        callback4();
+      };
+      t.__closure = {
+        runOnJS: _ReanimatedRexport.runOnJS,
+        triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+        CONTEXT_MENU_OPEN_HAPTIC: _ContextMenuConstants_native.CONTEXT_MENU_OPEN_HAPTIC,
+        measureButtonAndShowMenu: callback4
+      };
+      t.__workletHash = 11906156003448;
+      t.__initData = __initData9;
+      const r40 = r26.onBegin(t);
+      const e = function e(a0) {
+        _ContextMenuState_native.updateContextMenuState(a0.absoluteX, a0.absoluteY, contextMenuState);
+      };
+      e.__closure = {
+        updateContextMenuState: _ContextMenuState_native.updateContextMenuState,
+        state: contextMenuState
+      };
+      e.__workletHash = 17473642675622;
+      e.__initData = __initData8;
+      r51 = r40.onUpdate(e).onEnd(onPanGestureEnd);
+    }
+    return r51;
+  }, [triggerOnLongPress, triggerOnTap, callback, enabled, contextMenuState, callback4]);
+  const memo3 = useMemo(() => items2.map((item) => ({
+    name: item.label,
+    label: item.label
+  })), [items2]);
+  const callback5 = useCallback((c26418_0) => {
+    const r7 = items2.find((item) => item.label === c26418_0.nativeEvent.actionName);
+    if (r7 != null) {
+      const action = r7.action;
+      if (action != null) {
+        action.call(r7);
+      }
+    }
+  }, [items2]);
+  const callback6 = useCallback(() => {
+    if (isAndroid() && getIsScreenReaderEnabled()) {
+      runOnUI(callback4)();
+    }
+  }, [callback4]);
+  const callback7 = useCallback(() => {
+    runOnUI(callback4)();
+  }, [callback4]);
+  const r162 = {
+    ref: buttonRef2,
+    onPress: callback6,
+    onLongPress: triggerOnLongPress ? disableGesture ? callback7 : void 0 : void 0,
+    accessibilityActions: memo3,
+    onAccessibilityAction: callback5
+  };
+  return disableGesture ? <>
+    {children(r162)}
+  </> : <GestureDetector gesture={memo2}>
+    {children(r162)}
+  </GestureDetector>;
+}

design/components/ContextMenu/native/ContextMenuConstants.native.tsx

@@ -0,0 +1,20 @@
+// Metro module 9301 (f9302).
+import { isIOS } from "../../../../utils/PlatformUtils";
+import { HapticFeedbackTypes } from "../../../../modules/haptics/HapticUtils.native";
+const r19 = isIOS() ? HapticFeedbackTypes.IMPACT_HEAVY : HapticFeedbackTypes.IMPACT_MEDIUM;
+export const CONTEXT_MENU_LONG_PRESS_DURATION_MS = 300;
+export { r19 as CONTEXT_MENU_OPEN_HAPTIC };
+export const CONTEXT_MENU_ITEM_PADDING = 12;
+export const CONTEXT_MENU_ITEM_BASE_HEIGHT = 42;
+export const CONTEXT_MENU_DIVIDER_HEIGHT = 4;
+export const CONTEXT_MENU_EDGE_OFFSET = 12;
+export const CONTEXT_MENU_MIN_WIDTH = 220;
+export const CONTEXT_MENU_OFFSET = 10;
+export const CONTEXT_MENU_MIN_SCALE = 0.5;
+export const CONTEXT_MENU_SPRING = {
+  mass: 0.3,
+  damping: 20,
+  stiffness: 200,
+  overshootClamping: true,
+  restDisplacementThreshold: 0.001
+};

design/components/ContextMenu/native/ContextMenuContainer.native.tsx

@@ -0,0 +1,51 @@
+// Metro module 13210 (f13211).
+import { useEffect, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { createStyles } from "../../Styles/native/createStyles";
+import { ContextMenuPopout } from "./ContextMenuPopout.native";
+import { useActiveContextMenu, hideContextMenu } from "./ContextMenuState.native";
+import { KeyboardEvents } from "../../../../_bundle/Module1595";
+import OverlayView from "../../../void/OverlayView/native/OverlayView";
+import { Dialog } from "../../Dialog/native/Dialog.native";
+import { TransitionGroup } from "../../TransitionGroup/TransitionGroup";
+let useStyles, c9160_7, EMPTY_CALLBACK, renderItem;
+const getItemKey = function getItemKey(a0) {
+  return a0.key;
+};
+useStyles = createStyles({
+  overlayView: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 99999
+  },
+  wrapperView: StyleSheet.absoluteFillObject
+});
+c9160_7 = [];
+EMPTY_CALLBACK = () => {};
+renderItem = (a0, a1, a2, a3) => <ContextMenuPopout key={a0} menu={a1} transitionState={a2} cleanUp={a3} />;
+export function ContextMenuContainer() {
+  let callback;
+  const styles = useStyles();
+  const activeContextMenu = useActiveContextMenu();
+  const items = activeContextMenu != null ? [activeContextMenu] : c9160_7;
+  let r18 = activeContextMenu?.requestClose;
+  if (r18 == null) {
+    r18 = EMPTY_CALLBACK;
+  }
+  const EMPTY_CALLBACK2 = r18;
+  useEffect(() => {
+    let c27416_0 = KeyboardEvents.addListener("keyboardDidHide", hideContextMenu);
+    return () => {
+      c27416_0.remove();
+    };
+  }, []);
+  callback = useCallback(() => {
+    EMPTY_CALLBACK2(true);
+  }, [EMPTY_CALLBACK2]);
+  return <TransitionGroup wrapChildren={useCallback((a0, a1) => <OverlayView style={styles.overlayView}>
+    <View pointerEvents={a1.length === 0 ? "none" : "auto"} style={styles.wrapperView}>
+      <Dialog onDismiss={callback}>
+        {a0}
+      </Dialog>
+    </View>
+  </OverlayView>, [callback, styles.overlayView, styles.wrapperView])} items={items} renderItem={renderItem} getItemKey={getItemKey} />;
+}

design/components/ContextMenu/native/ContextMenuItem.native.tsx

@@ -0,0 +1,160 @@
+// Metro module 13209 (f13210).
+import { useCallback } from "react";
+import { Pressable } from "react-native";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedRef, useSharedValue, useAnimatedReaction, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import { createStyles } from "../../Styles/native/createStyles";
+import { CONTEXT_MENU_ITEM_PADDING, CONTEXT_MENU_ITEM_BASE_HEIGHT } from "./ContextMenuConstants.native";
+import Module712 from "../../../../_bundle/Module712";
+import MobileVisualRefreshExperiment from "../../../../modules/themes/experiments/MobileVisualRefreshExperiment";
+import * as _ContextMenuState_native from "./ContextMenuState.native";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+import Icon from "../../../void/Icon/native/Icon";
+import { Text } from "../../Text/native/Text";
+let __initData, __initData2, __initData3;
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
+const useStyles = createStyles((a0) => ({
+  container: {
+    padding: CONTEXT_MENU_ITEM_PADDING,
+    minHeight: CONTEXT_MENU_ITEM_BASE_HEIGHT,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 8
+  },
+  containerRefresh: {
+    justifyContent: "flex-start"
+  },
+  roundedTop: {
+    borderTopLeftRadius: Module712.radii.lg,
+    borderTopRightRadius: Module712.radii.lg
+  },
+  roundedBottom: {
+    borderBottomLeftRadius: Module712.radii.lg,
+    borderBottomRightRadius: Module712.radii.lg
+  },
+  border: {
+    borderBottomWidth: 1,
+    borderBottomColor: Module712.colors.BORDER_SUBTLE
+  },
+  pressed: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    tintColor: a0 === "destructive" ? Module712.colors.TEXT_FEEDBACK_CRITICAL : Module712.colors.TEXT_STRONG
+  },
+  label: {
+    flexShrink: 1
+  },
+  trailingIndicator: {
+    marginLeft: "auto"
+  }
+}));
+__initData = {
+  code: "function ContextMenuItemNativeTsx1(){const{pan}=this.__closure;return pan.get();}"
+};
+__initData2 = {
+  code: "function ContextMenuItemNativeTsx2(_current,previous){const{measure,ref,index,INDEX_BOUNDS_OFFSET,itemMeasurements,INDEX_BOUNDS_PAGE_X_OFFSET,INDEX_BOUNDS_PAGE_Y_OFFSET,INDEX_BOUNDS_WIDTH_OFFSET,INDEX_BOUNDS_HEIGHT_OFFSET}=this.__closure;if(previous==null||_current===previous)return;const measurements=measure(ref);if(measurements!=null){const{pageX:pageX,pageY:pageY,width:width,height:height}=measurements;const offset=index*INDEX_BOUNDS_OFFSET;itemMeasurements.get()[offset+INDEX_BOUNDS_PAGE_X_OFFSET]=pageX;itemMeasurements.get()[offset+INDEX_BOUNDS_PAGE_Y_OFFSET]=pageY;itemMeasurements.get()[offset+INDEX_BOUNDS_WIDTH_OFFSET]=width;itemMeasurements.get()[offset+INDEX_BOUNDS_HEIGHT_OFFSET]=height;}}"
+};
+__initData3 = {
+  code: "function ContextMenuItemNativeTsx3(){const{activeIndex,index,pressed,withSpring,backgroundColor,SUBTLE_SPRING}=this.__closure;const isActive=activeIndex.get()===index||pressed.get()===1;return{backgroundColor:withSpring(isActive?backgroundColor:'transparent',SUBTLE_SPRING,'animate-always')};}"
+};
+export function ContextMenuItem(props) {
+  let backgroundColor;
+  const { label, IconComponent, trailingIndicator: TrailingIndicator, iconSource } = props;
+  let start = props.start;
+  let end = props.end;
+  const { lastInSection, index, state, onPress, variant = "default", accessibilityRole = "button" } = props;
+  backgroundColor = void 0;
+  const animatedRef = useAnimatedRef();
+  const styles = useStyles(variant);
+  const r38 = MobileVisualRefreshExperiment("ContextMenuItem");
+  const { pan, itemMeasurements, activeIndex } = state;
+  const sharedValue = useSharedValue(0);
+  const U = () => pan.get();
+  U.__closure = {
+    pan
+  };
+  U.__workletHash = 11852115418144;
+  U.__initData = __initData;
+  const r47 = function(a0, a1) {
+    if (a1 != null && a0 !== a1) {
+      const r16 = _ReanimatedRexport.measure(animatedRef);
+      if (r16 != null) {
+        const { pageX, pageY, width, height } = r16;
+        const r22 = index * _ContextMenuState_native.INDEX_BOUNDS_OFFSET;
+        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_PAGE_X_OFFSET] = pageX;
+        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_PAGE_Y_OFFSET] = pageY;
+        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET] = width;
+        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET] = height;
+      }
+    }
+  };
+  r47.__closure = {
+    measure: _ReanimatedRexport.measure,
+    ref: animatedRef,
+    index,
+    INDEX_BOUNDS_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_OFFSET,
+    itemMeasurements,
+    INDEX_BOUNDS_PAGE_X_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_PAGE_X_OFFSET,
+    INDEX_BOUNDS_PAGE_Y_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_PAGE_Y_OFFSET,
+    INDEX_BOUNDS_WIDTH_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET,
+    INDEX_BOUNDS_HEIGHT_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET
+  };
+  r47.__workletHash = 9571959267234;
+  r47.__initData = __initData2;
+  useAnimatedReaction(U, r47);
+  backgroundColor = styles.pressed.backgroundColor;
+  const R = function R() {
+    return {
+      backgroundColor: _spring.withSpring(activeIndex.get() === index || sharedValue.get() === 1 ? backgroundColor : "transparent", _springPresets.SUBTLE_SPRING, "animate-always")
+    };
+  };
+  R.__closure = {
+    activeIndex,
+    index,
+    pressed: sharedValue,
+    withSpring: _spring.withSpring,
+    backgroundColor,
+    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING
+  };
+  R.__workletHash = 624481847983;
+  R.__initData = __initData3;
+  const animatedStyle = useAnimatedStyle(R);
+  const r85 = IconComponent != null ? <IconComponent size="sm" color={styles.icon.tintColor} /> : iconSource != null ? <Icon source={iconSource} style={styles.icon} /> : null;
+  const r96 = TrailingIndicator != null ? <TrailingIndicator size="sm" color={styles.icon.tintColor} /> : null;
+  const callback = useCallback((a0) => {
+    const layout = a0.nativeEvent.layout;
+    const { height, width } = layout;
+    if (height !== 0 && width !== 0) {
+      const r16 = index * _ContextMenuState_native.INDEX_BOUNDS_OFFSET;
+      itemMeasurements.get()[r16 + _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET] = height;
+      itemMeasurements.get()[r16 + _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET] = width;
+    }
+  }, [index, itemMeasurements]);
+  const callback2 = useCallback(() => {
+    activeIndex.set(index);
+  }, [activeIndex, index]);
+  const callback3 = useCallback(() => {
+    activeIndex.set(-1);
+  }, [activeIndex]);
+  const style = [styles.container, r38 ? styles.containerRefresh : r38, (end ? !end : !lastInSection) && styles.border, , , ,];
+  if (start) {
+    start = styles.roundedTop;
+  }
+  style[3] = start;
+  if (end) {
+    end = styles.roundedBottom;
+  }
+  style[4] = end;
+  style[5] = animatedStyle;
+  return <AnimatedComponent ref={animatedRef} style={style} onLayout={callback} onPressIn={callback2} onPressOut={callback3} onPress={onPress} accessibilityRole={accessibilityRole}>
+    {r38 && <ReanimatedRexport.View>{r85}</ReanimatedRexport.View>}
+    <Text animated variant="text-md/medium" style={styles.label} color={variant === "destructive" ? "text-feedback-critical" : "text-strong"}>{label}</Text>
+    {r38 ? !r38 : <ReanimatedRexport.View>{r85}</ReanimatedRexport.View>}
+    {r96 != null && <ReanimatedRexport.View style={styles.trailingIndicator}>{r96}</ReanimatedRexport.View>}
+  </AnimatedComponent>;
+}

design/components/ContextMenu/native/ContextMenuPopout.native.tsx

@@ -0,0 +1,235 @@
+// Metro module 13211 (f13212).
+import { useEffect, useState, useMemo, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import * as _ContextMenuConstants_native from "./ContextMenuConstants.native";
+import { CONTEXT_MENU_ITEM_PADDING, CONTEXT_MENU_DIVIDER_HEIGHT, CONTEXT_MENU_EDGE_OFFSET } from "./ContextMenuConstants.native";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle, useSharedValue } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _TransitionGroup from "../../TransitionGroup/TransitionGroup";
+import useSafeAreaInsetsKeyboardAware_native from "../../../../modules/safe_area/useSafeAreaInsetsKeyboardAware.native";
+import useWindowDimensions_native from "../../../../modules/screen/useWindowDimensions.native";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _ContextMenuState_native from "./ContextMenuState.native";
+import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
+import { Text } from "../../Text/native/Text";
+import { ContextMenuItem } from "./ContextMenuItem.native";
+import { getIsScreenReaderEnabled } from "../../../../modules/a11y/native/useIsScreenReaderEnabled.native";
+import { Backdrop } from "../../Backdrop/native/Backdrop.native";
+import * as _index_native from "../../../../intl/index.native";
+import { intl } from "../../../../intl/index.native";
+let useStyles, __initData, __initData2, __initData3, __initData4, useStyles2, __initData5, ContextMenuBackdrop;
+const ContextMenuDivider = function ContextMenuDivider() {
+  return <View style={useStyles().divider} />;
+};
+ContextMenuBackdrop = function ContextMenuBackdrop(props) {
+  const { onPress: onPress2, visible } = props;
+  const styles2 = useStyles2();
+  const n = function n() {
+    return {
+      opacity: _spring.withSpring(visible.get(), _ContextMenuConstants_native.CONTEXT_MENU_SPRING)
+    };
+  };
+  n.__closure = {
+    withSpring: _spring.withSpring,
+    visible,
+    CONTEXT_MENU_SPRING: _ContextMenuConstants_native.CONTEXT_MENU_SPRING
+  };
+  n.__workletHash = 6862317967896;
+  n.__initData = __initData5;
+  return <Backdrop blur="none" style={useAnimatedStyle(n)} accessibleDismissStyle={styles2.accessibleDismiss} onDismiss={onPress2} accessibilityLabel={isAndroid() ? intl.string(_index_native.t.hPBScv) : intl.string(_index_native.t.xs0juG)} />;
+};
+useStyles = createStyles({
+  container: {
+    position: "absolute",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.lg,
+    minWidth: _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH,
+    ...Module712.shadows.SHADOW_HIGH
+  },
+  titleContainer: {
+    padding: CONTEXT_MENU_ITEM_PADDING
+  },
+  divider: {
+    borderBottomWidth: CONTEXT_MENU_DIVIDER_HEIGHT,
+    borderBottomColor: Module712.colors.BORDER_SUBTLE
+  }
+});
+__initData = {
+  code: "function ContextMenuPopoutNativeTsx1(){const{maxHeight,height,CONTEXT_MENU_MIN_WIDTH,positionY,positionX,CONTEXT_MENU_MIN_SCALE,withSpring,interpolate,visible,CONTEXT_MENU_SPRING,transitionState,TransitionStates,runOnJS,cleanUp,onClose}=this.__closure;const visibleHeight=Math.min(maxHeight,height);const halfHeight=visibleHeight/2;const halfWidth=CONTEXT_MENU_MIN_WIDTH/2;const translateYDirection=positionY==='below'?-1:1;const translateXDirection=positionX==='left'?-1:1;const translateY=translateYDirection*halfHeight+CONTEXT_MENU_MIN_SCALE*-translateYDirection*halfHeight;const translateX=translateXDirection*halfWidth+CONTEXT_MENU_MIN_SCALE*-translateXDirection*halfWidth;return{opacity:withSpring(interpolate(visible.get(),[0,1],[0,1]),CONTEXT_MENU_SPRING,'respect-motion-settings',function(finished){if(finished&&transitionState===TransitionStates.YEETED){runOnJS(cleanUp)();runOnJS(onClose)();}}),transform:[{translateX:withSpring(interpolate(visible.get(),[0,1],[translateX,0]),CONTEXT_MENU_SPRING)},{translateY:withSpring(interpolate(visible.get(),[0,1],[translateY,0]),CONTEXT_MENU_SPRING)},{scale:withSpring(interpolate(visible.get(),[0,1],[CONTEXT_MENU_MIN_SCALE,1]),CONTEXT_MENU_SPRING)}]};}"
+};
+__initData2 = {
+  code: "function ContextMenuPopoutNativeTsx2(finished){const{transitionState,TransitionStates,runOnJS,cleanUp,onClose}=this.__closure;if(finished&&transitionState===TransitionStates.YEETED){runOnJS(cleanUp)();runOnJS(onClose)();}}"
+};
+__initData3 = {
+  code: "function update_ContextMenuPopoutNativeTsx3(e){const{updateContextMenuState,state}=this.__closure;updateContextMenuState(e.absoluteX,e.absoluteY,state);}"
+};
+__initData4 = {
+  code: "function ContextMenuPopoutNativeTsx4(){const{state,runOnJS,requestClose}=this.__closure;const{activeIndex:activeIndex}=state;const isDismiss=activeIndex.get()===-1;runOnJS(requestClose)(isDismiss);}"
+};
+useStyles2 = createStyles({
+  accessibleDismiss: {
+    ...StyleSheet.absoluteFillObject,
+    height: "auto"
+  }
+});
+__initData5 = {
+  code: "function ContextMenuPopoutNativeTsx5(){const{withSpring,visible,CONTEXT_MENU_SPRING}=this.__closure;return{opacity:withSpring(visible.get(),CONTEXT_MENU_SPRING)};}"
+};
+export function ContextMenuPopout(props) {
+  let c20412_9, state2, setState;
+  const { menu, transitionState, cleanUp } = props;
+  c20412_9 = void 0;
+  state2 = void 0;
+  setState = void 0;
+  const { x: r14, positionX, positionY, height, items: items2, state, requestClose, onClose, title: title2, keyboardShouldPersistTaps: keyboardShouldPersistTaps2 = "handled", dividerIndexes: dividerIndexes2, y: r18 } = menu;
+  const sharedValue = useSharedValue(transitionState === _TransitionGroup.TransitionStates.MOUNTED ? 1 : 0);
+  useEffect(() => {
+    if (transitionState === _TransitionGroup.TransitionStates.YEETED) {
+      sharedValue.set(0);
+    } else {
+      sharedValue.set(1);
+    }
+  }, [transitionState, sharedValue]);
+  const styles = useStyles();
+  const insets = useSafeAreaInsetsKeyboardAware_native({
+    includeKeyboardHeight: true
+  }).insets;
+  const { top, bottom } = insets;
+  const windowDimensions_native = useWindowDimensions_native({
+    ignoreKeyboard: isAndroid()
+  });
+  const { width, height: height2 } = windowDimensions_native;
+  const r4 = positionY === "below";
+  const r60 = height2 - r18;
+  const maxHeight = r4 ? r60 - bottom - CONTEXT_MENU_EDGE_OFFSET : r60 - top - CONTEXT_MENU_EDGE_OFFSET;
+  c20412_9 = maxHeight;
+  [state2, setState] = useState(height >= maxHeight);
+  const r77 = r4 ? "top" : "bottom";
+  const r78 = {};
+  r78[r77] = r18;
+  r78[positionX] = r14;
+  r78.maxHeight = maxHeight;
+  r78.maxWidth = width - CONTEXT_MENU_EDGE_OFFSET - r14;
+  const R = function R() {
+    const r5 = Math.min(c20412_9, height) / 2;
+    const r4 = _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH / 2;
+    const r1 = positionY === "below" ? -1 : 1;
+    const r2 = positionX === "left" ? -1 : 1;
+    const r41 = _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0, 1]);
+    const r44 = function t(a0) {
+      if (a0 ? transitionState === _TransitionGroup.TransitionStates.YEETED : a0) {
+        _ReanimatedRexport.runOnJS(cleanUp)();
+        _ReanimatedRexport.runOnJS(onClose)();
+      }
+    };
+    r44.__closure = {
+      transitionState,
+      TransitionStates: _TransitionGroup.TransitionStates,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      cleanUp,
+      onClose
+    };
+    r44.__workletHash = 4025068986009;
+    r44.__initData = __initData2;
+    return {
+      opacity: _spring.withSpring(r41, _ContextMenuConstants_native.CONTEXT_MENU_SPRING, "respect-motion-settings", r44),
+      transform: [{
+        translateX: _spring.withSpring(_ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [r2 * r4 + _ContextMenuConstants_native.CONTEXT_MENU_MIN_SCALE * -r2 * r4, 0]), _ContextMenuConstants_native.CONTEXT_MENU_SPRING)
+      }, {
+        translateY: _spring.withSpring(_ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [r1 * r5 + _ContextMenuConstants_native.CONTEXT_MENU_MIN_SCALE * -r1 * r5, 0]), _ContextMenuConstants_native.CONTEXT_MENU_SPRING)
+      }, {
+        scale: _spring.withSpring(_ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [_ContextMenuConstants_native.CONTEXT_MENU_MIN_SCALE, 1]), _ContextMenuConstants_native.CONTEXT_MENU_SPRING)
+      }]
+    };
+  };
+  R.__closure = {
+    maxHeight,
+    height,
+    CONTEXT_MENU_MIN_WIDTH: _ContextMenuConstants_native.CONTEXT_MENU_MIN_WIDTH,
+    positionY,
+    positionX,
+    CONTEXT_MENU_MIN_SCALE: _ContextMenuConstants_native.CONTEXT_MENU_MIN_SCALE,
+    withSpring: _spring.withSpring,
+    interpolate: _ReanimatedRexport.interpolate,
+    visible: sharedValue,
+    CONTEXT_MENU_SPRING: _ContextMenuConstants_native.CONTEXT_MENU_SPRING,
+    transitionState,
+    TransitionStates: _TransitionGroup.TransitionStates,
+    runOnJS: _ReanimatedRexport.runOnJS,
+    cleanUp,
+    onClose
+  };
+  R.__workletHash = 16778623591634;
+  R.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(R);
+  const memo = useMemo(() => {
+    const update = function update(a0) {
+      _ContextMenuState_native.updateContextMenuState(a0.absoluteX, a0.absoluteY, state);
+    };
+    update.__closure = {
+      updateContextMenuState: _ContextMenuState_native.updateContextMenuState,
+      state
+    };
+    update.__workletHash = 4218299258082;
+    update.__initData = __initData3;
+    const r25 = Gesture.Pan().enabled(!state2).onStart(update).onUpdate(update);
+    const r27 = function t() {
+      const r8 = state.activeIndex.get();
+      _ReanimatedRexport.runOnJS(requestClose)(r8 === -1);
+    };
+    r27.__closure = {
+      state,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      requestClose
+    };
+    r27.__workletHash = 14495067009140;
+    r27.__initData = __initData4;
+    return r25.onEnd(r27);
+  }, [state, requestClose, state2]);
+  const callback2 = useCallback((a0) => {
+    setState(Math.round(a0.nativeEvent.layout.height) >= Math.round(c20412_9));
+  }, [maxHeight]);
+  const callback3 = useCallback(() => {
+    requestClose(true);
+  }, [requestClose]);
+  const callback4 = useCallback(() => {
+    requestClose(false);
+  }, [requestClose]);
+  const r135 = [<ContextMenuBackdrop onPress={callback3} visible={sharedValue} />, ,];
+  const r146 = title2 != null ? <>
+    <View style={styles.titleContainer}>
+      <Text variant="text-md/bold" color="mobile-text-heading-primary" accessibilityRole="header">{title2}</Text>
+    </View>
+    <ContextMenuDivider />
+  </> : null;
+  const items = items2;
+  const title = title2;
+  const state3 = state;
+  const callback = callback4;
+  const dividerIndexes = dividerIndexes2;
+  r135[1] = <GestureDetector gesture={memo}>
+    <ReanimatedRexport.ScrollView onLayout={callback2} bounces={false} style={[styles.container, r78, animatedStyle]} keyboardShouldPersistTaps={keyboardShouldPersistTaps2} accessibilityRole="list">
+      {r146}
+      {items.map(({ label, action, iconSource, IconComponent, trailingIndicator, variant, accessibilityRole }, a1) => {
+        const r41 = <ContextMenuItem key={`${label}-${a1}`} index={a1} label={label} start={a1 === 0 && title == null} end={a1 === items.length - 1} lastInSection={dividerIndexes.includes(a1 + 1)} iconSource={iconSource} IconComponent={IconComponent} trailingIndicator={trailingIndicator} state={state3} onPress={(event) => {
+          if (isAndroid() && getIsScreenReaderEnabled()) {
+            action();
+          }
+          if (callback != null) {
+            callback(event);
+          }
+        }} variant={variant} accessibilityRole={accessibilityRole} />;
+        return dividerIndexes.includes(a1) ? <>
+          <ContextMenuDivider key={`divider-${a1}`} />
+          {r41}
+        </> : r41;
+      })}
+    </ReanimatedRexport.ScrollView>
+  </GestureDetector>;
+  return <>{r135}</>;
+}

design/components/ContextMenu/native/ContextMenuState.native.tsx

@@ -0,0 +1,87 @@
+// Metro module 9300 (f9301).
+import { useMemo } from "react";
+import { create } from "../../../../_bundle/Module644";
+import { batchUpdates } from "../../../../_bundle/Module705";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import { useSharedValue } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _HapticUtils_native from "../../../../modules/haptics/HapticUtils.native";
+let c6123_3 = create(() => ({
+  menu: null
+}));
+export function updateContextMenuState(a0, a1, { pan, itemMeasurements, activeIndex }) {
+  pan.set(a1);
+  const r20 = itemMeasurements.get();
+  const r8 = 0 < r20.length;
+  let r1 = 0;
+  if (r8) {
+    do {
+      const r22 = r20[r1 + 2];
+      const r16 = r20[r1 + 3];
+      const r15 = r20[r1 + 1];
+      const r26 = r20[r1 + 0];
+      const r27 = r1;
+      if (a1 >= r15 && a1 <= r15 + r16 && a0 >= r26 && a0 <= r26 + r22) {
+        const r35 = r27 / 4;
+        if (activeIndex.get() !== r35) {
+          activeIndex.set(r35);
+          _ReanimatedRexport.runOnJS(_HapticUtils_native.triggerHapticFeedback)(_HapticUtils_native.HapticFeedbackTypes.IMPACT_LIGHT);
+        }
+        return void 0;
+      }
+      r1 = r27 + 4;
+    } while (r1 < r20.length);
+  }
+  activeIndex.set(-1);
+}
+updateContextMenuState.__closure = {
+  INDEX_BOUNDS_WIDTH_OFFSET: 2,
+  INDEX_BOUNDS_HEIGHT_OFFSET: 3,
+  INDEX_BOUNDS_PAGE_Y_OFFSET: 1,
+  INDEX_BOUNDS_PAGE_X_OFFSET: 0,
+  INDEX_BOUNDS_OFFSET: 4,
+  runOnJS: _ReanimatedRexport.runOnJS,
+  triggerHapticFeedback: _HapticUtils_native.triggerHapticFeedback,
+  HapticFeedbackTypes: _HapticUtils_native.HapticFeedbackTypes
+};
+updateContextMenuState.__workletHash = 10158111154044;
+updateContextMenuState.__initData = {
+  code: "function updateContextMenuState_ContextMenuStateNativeTsx1(absoluteX,absoluteY,state){const{INDEX_BOUNDS_WIDTH_OFFSET,INDEX_BOUNDS_HEIGHT_OFFSET,INDEX_BOUNDS_PAGE_Y_OFFSET,INDEX_BOUNDS_PAGE_X_OFFSET,INDEX_BOUNDS_OFFSET,runOnJS,triggerHapticFeedback,HapticFeedbackTypes}=this.__closure;const{pan:pan,itemMeasurements:itemMeasurements,activeIndex:activeIndex}=state;pan.set(absoluteY);const bounds=itemMeasurements.get();let offset=0;while(offset<bounds.length){const width=bounds[offset+INDEX_BOUNDS_WIDTH_OFFSET];const height=bounds[offset+INDEX_BOUNDS_HEIGHT_OFFSET];const pageY=bounds[offset+INDEX_BOUNDS_PAGE_Y_OFFSET];const pageX=bounds[offset+INDEX_BOUNDS_PAGE_X_OFFSET];const lowerY=pageY;const upperY=pageY+height;const lowerX=pageX;const upperX=pageX+width;if(absoluteY>=lowerY&&absoluteY<=upperY&&absoluteX>=lowerX&&absoluteX<=upperX){const index=offset/INDEX_BOUNDS_OFFSET;if(activeIndex.get()!==index){activeIndex.set(index);runOnJS(triggerHapticFeedback)(HapticFeedbackTypes.IMPACT_LIGHT);}return;}offset+=INDEX_BOUNDS_OFFSET;}activeIndex.set(-1);}"
+};
+export const INDEX_BOUNDS_OFFSET = 4;
+export const INDEX_BOUNDS_PAGE_X_OFFSET = 0;
+export const INDEX_BOUNDS_PAGE_Y_OFFSET = 1;
+export const INDEX_BOUNDS_WIDTH_OFFSET = 2;
+export const INDEX_BOUNDS_HEIGHT_OFFSET = 3;
+export { c6123_3 as ContextMenuStore };
+export function showContextMenu(menu) {
+  batchUpdates(() => c6123_3.setState({
+    menu
+  }));
+}
+export function hideContextMenu() {
+  batchUpdates(() => {
+    c6123_3.setState((state) => state.menu != null ? {
+      menu: null
+    } : state);
+  });
+}
+export function useActiveContextMenu() {
+  return c6123_3((a0) => a0.menu);
+}
+export function useContextMenuState() {
+  const sharedValue = useSharedValue(-1);
+  const sharedValue2 = useSharedValue([]);
+  const sharedValue3 = useSharedValue(-1);
+  return useMemo(() => ({
+    pan: sharedValue,
+    itemMeasurements: sharedValue2,
+    activeIndex: sharedValue3
+  }), [sharedValue, sharedValue2, sharedValue3]);
+}
+export function resetContextMenuState({ activeIndex, pan, itemMeasurements }) {
+  activeIndex.set(-1);
+  pan.set(-1);
+  if (itemMeasurements.get().length > 0) {
+    itemMeasurements.set([]);
+  }
+}