@astryxdesign/core 0.4.4-canary.eb069fd → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.4-canary.eb069fd",
+  "version": "0.4.4",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -656,7 +656,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.4-canary.eb069fd",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
@@ -665,7 +664,8 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "@astryxdesign/cli": "0.4.4"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/BottomSheet/useSheetGestures.test.ts

@@ -726,51 +726,6 @@ describe('useSheetGestures', () => {
       return el;
     }
 
-    // iOS Safari raises PointerEvents for a finger under the SAME numeric id
-    // it puts in `Touch.identifier`, so a drag the touch path starts is keyed
-    // to a live pointer. WebKit takes that pointer's capture straight back,
-    // and the `lostpointercapture` that follows used to cancel the drag one
-    // event after it began — leaving the sheet inert for the rest of the pull
-    // while the handle still worked. Every browser that keeps the two id
-    // spaces apart hides this, which is why it only showed up on device.
-    it('survives a lostpointercapture for the finger driving it', () => {
-      const {hook} = setup({snapHeights: () => [200]});
-      const el = midDetentScroller(hook, 600); // parked at the content end
-      act(() => {
-        touch(el, 'touchstart', 500, 7);
-        touch(el, 'touchmove', 450, 7); // promotes at the armed bottom edge
-      });
-      expect(hook.result.current.isDragging).toBe(true);
-      act(() => {
-        hook.result.current.bodyProps.onLostPointerCapture(
-          pointerEvent(450, 0, el, 7), // same id as the touch: iOS does this
-        );
-      });
-      expect(hook.result.current.isDragging).toBe(true);
-      act(() => {
-        touch(el, 'touchmove', 400, 7);
-      });
-      // 100px of pull past the touchstart, from the 200px detent.
-      expect(hook.result.current.dragOffset).toBe(100);
-    });
-
-    // `pointercancel` for that same finger arrives the moment WebKit claims
-    // the gesture. Ending the drag on it settles the sheet mid-pull.
-    it('does not end the touch drag on a pointercancel for that finger', () => {
-      const {hook} = setup({snapHeights: () => [200]});
-      const el = midDetentScroller(hook, 600);
-      act(() => {
-        touch(el, 'touchstart', 500, 7);
-        touch(el, 'touchmove', 450, 7);
-      });
-      act(() => {
-        hook.result.current.bodyProps.onPointerCancel(
-          pointerEvent(450, 0, el, 7),
-        );
-      });
-      expect(hook.result.current.isDragging).toBe(true);
-    });
-
     it('hands off when the content runs out under a moving finger', () => {
       const {hook} = setup({snapHeights: () => [200]});
       const el = midDetentScroller(hook, 300); // finger lands mid-content

package/src/BottomSheet/useSheetGestures.ts

@@ -82,19 +82,6 @@ const DISMISS_OVERSHOOT_RATIO = 0.4;
 // Within this many px of a detent, the live drag is magnetically eased toward
 // it so it "clicks" into place instead of hovering just off the mark.
 const MAGNET_RANGE = 40;
-// The touch path drives the sheet through the same machinery the pointer path
-// uses, by handing it a pointer-shaped object built from a `Touch`. On iOS
-// Safari that object is indistinguishable from the real thing: WebKit raises
-// PointerEvents for a finger under the SAME numeric id it puts in
-// `Touch.identifier`, so such a drag is keyed to a live pointer and the
-// handlers that guard a mouse drag fire against it. Mark the synthetic object
-// so they can tell the two apart.
-type SyntheticTouchPointer = ReactPointerEvent & {syntheticTouch?: true};
-
-function isSyntheticTouch(event: ReactPointerEvent): boolean {
-  return (event as SyntheticTouchPointer).syntheticTouch === true;
-}
-
 // Rubber-band factor for dragging up past fully-open, capped at OVERSCROLL_MAX
 // (the sheet reserves that much bottom padding for the lift to reveal).
 const OVERSCROLL_RESISTANCE = 0.35;
@@ -447,10 +434,6 @@ export function useSheetGestures({
 
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
   const dragStateRef = useRef<{
-    // Whether the touch path drives this drag. Such a drag holds no pointer
-    // capture and takes its events from `touchmove`, so every real-pointer
-    // handler has to leave it alone.
-    syntheticTouch: boolean;
     pointerId: number;
     startCoord: number;
     lastCoord: number;
@@ -872,16 +855,7 @@ export function useSheetGestures({
   const beginDrag = useCallback(
     (event: ReactPointerEvent, sheetHeight: number, startCoord?: number) => {
       const target = event.currentTarget as HTMLElement;
-      const syntheticTouch = isSyntheticTouch(event);
-      // Never capture for a touch drag. The id came from `Touch.identifier`,
-      // which on iOS names a live pointer: the capture succeeds, WebKit takes
-      // it straight back for its own gesture handling, and the
-      // `lostpointercapture` a millisecond later cancels the drag that just
-      // started. Touch drags need no capture — the listener is on the
-      // scroller itself.
-      if (!syntheticTouch) {
-        target.setPointerCapture?.(event.pointerId);
-      }
+      target.setPointerCapture?.(event.pointerId);
       // `startCoord` lets a body-overscroll drag anchor at the original
       // pointer-down position (not the promotion point), so the first frame's
       // delta reflects the full pull distance.
@@ -889,7 +863,6 @@ export function useSheetGestures({
       const naturalEndGap = naturalEndGapFor(bodyNodeRef.current);
       const baseLayoutOffset = settledLayoutOffsetRef.current;
       dragStateRef.current = {
-        syntheticTouch,
         pointerId: event.pointerId,
         startCoord: start,
         lastCoord: event.clientY,
@@ -944,12 +917,6 @@ export function useSheetGestures({
 
   const handleLostPointerCapture = useCallback(
     (event: ReactPointerEvent) => {
-      // A touch drag never took capture, so this is WebKit reclaiming its own
-      // pointer for the finger doing the dragging — not the drag losing its
-      // grip.
-      if (dragStateRef.current?.syntheticTouch) {
-        return;
-      }
       if (dragStateRef.current?.pointerId === event.pointerId) {
         cancelDrag();
       }
@@ -963,11 +930,6 @@ export function useSheetGestures({
       if (!state || state.pointerId !== event.pointerId) {
         return;
       }
-      // Same finger, real pointer event: the touch path already drove this
-      // move. Let it own the drag rather than driving it twice.
-      if (state.syntheticTouch && !isSyntheticTouch(event)) {
-        return;
-      }
       const delta = event.clientY - state.startCoord;
       const dt = event.timeStamp - state.lastTime;
       if (dt > 0) {
@@ -1029,20 +991,12 @@ export function useSheetGestures({
       if (!state || state.pointerId !== event.pointerId) {
         return;
       }
-      // `pointercancel` fires for the finger the moment WebKit claims the
-      // gesture; ending a touch drag on it settles the sheet mid-pull. The
-      // touchend handler is what finishes a touch drag.
-      if (state.syntheticTouch && !isSyntheticTouch(event)) {
-        return;
-      }
       const target = event.currentTarget as HTMLElement;
       const delta = event.clientY - state.startCoord;
       const offset = Math.max(0, state.baseOffset + delta);
       const dir = delta === 0 ? 0 : delta > 0 ? 1 : -1;
       dragStateRef.current = null;
-      if (!state.syntheticTouch) {
-        target.releasePointerCapture?.(event.pointerId);
-      }
+      target.releasePointerCapture?.(event.pointerId);
       setIsDragging(false);
       settleFromDrag(
         offset,
@@ -1113,11 +1067,6 @@ export function useSheetGestures({
   const handleBodyEnd = useCallback(
     (event: ReactPointerEvent) => {
       armedBodyRef.current = null;
-      // The pointerup/pointercancel for a finger already driving a touch drag
-      // arrives here carrying that drag's own id; touchend ends those.
-      if (dragStateRef.current?.syntheticTouch) {
-        return;
-      }
       if (dragStateRef.current) {
         endDrag(event);
       }
@@ -1169,7 +1118,6 @@ export function useSheetGestures({
   const bodyRef = useCallback((node: HTMLElement | null) => {
     const asPointer = (touch: Touch, target: HTMLElement) =>
       ({
-        syntheticTouch: true,
         pointerId: touch.identifier,
         clientY: touch.clientY,
         timeStamp: Date.now(),