@expofp/ui 0.0.0-experimental.2d6c681

package/dist/shared/hooks/useSheetDrag.js

@@ -0,0 +1,274 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, } from 'react';
+/**
+ * Bottom-sheet drag physics ported from `vaul` v1.1.2 (not a dependency: it
+ * injects styles into `document.head`, which never reaches our shadow root).
+ * At rest the sheet is height-driven; during a gesture it is frozen at its
+ * tallest point and moved with `translate3d`, off the React/layout path.
+ */
+/** px/ms: above this the sheet flies to the far end regardless of distance. */
+const FLING_VELOCITY = 2;
+/** px/ms: above this a short drag steps exactly one snap point. */
+const STEP_VELOCITY = 0.4;
+const STEP_DISTANCE_RATIO = 0.4;
+const SCROLL_LOCK_TIMEOUT = 100;
+const OPEN_LOCK_TIMEOUT = 500;
+const MOVE_TOLERANCE = 2;
+/** Matches SHEET_TRANSITION, with room for a `transitionend` that may not come. */
+const SETTLE_TIMEOUT = 550;
+const SHEET_TRANSITION = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
+/** Resistance past the end stops (vaul's curve). */
+const dampen = (distance) => Math.max(8 * (Math.log(distance + 1) - 2), 0);
+const readOffset = (panel) => {
+    if (!panel || typeof DOMMatrixReadOnly !== 'function')
+        return null;
+    const { transform } = getComputedStyle(panel);
+    if (!transform || transform === 'none')
+        return null;
+    try {
+        return new DOMMatrixReadOnly(transform).m42;
+    }
+    catch {
+        return null;
+    }
+};
+/** Whether a horizontal scroller — a chip row, a gallery strip — sits under the finger. */
+const scrollsSideways = (target, panel) => {
+    let element = target instanceof Element ? target : null;
+    while (element && panel?.contains(element)) {
+        if (element.scrollWidth > element.clientWidth) {
+            const { overflowX } = getComputedStyle(element);
+            if (overflowX === 'auto' || overflowX === 'scroll')
+                return true;
+        }
+        element = element.parentElement;
+    }
+    return false;
+};
+export function useSheetDrag({ enabled, panelRef, scrollElement, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }) {
+    const gestureRef = useRef(null);
+    const scrollBlockedAtRef = useRef(0);
+    const settleRef = useRef(null);
+    // Detaches the window listeners of a gesture still in flight, without snapping.
+    const stopGestureRef = useRef(null);
+    // Mirrored after paint so a concurrent re-render cannot observe a torn value.
+    const stateRef = useRef({ enabled, snapPoints, current });
+    useLayoutEffect(() => {
+        stateRef.current = { enabled, snapPoints, current };
+    }, [enabled, snapPoints, current]);
+    const callbacksRef = useRef({ onDragStart, onSnap, onSettle, onHandleTap });
+    useLayoutEffect(() => {
+        callbacksRef.current = { onDragStart, onSnap, onSettle, onHandleTap };
+    }, [onDragStart, onSnap, onSettle, onHandleTap]);
+    const offsetOf = useCallback((name) => {
+        const { snapPoints } = stateRef.current;
+        const tallest = snapPoints[snapPoints.length - 1].height;
+        const point = snapPoints.find((snapPoint) => snapPoint.name === name);
+        return tallest - (point?.height ?? tallest);
+    }, []);
+    const writeOffset = useCallback((offset, transition) => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        panel.style.transition = transition;
+        panel.style.transform = `translate3d(0, ${offset}px, 0)`;
+    }, [panelRef]);
+    /** Vaul's `shouldDrag`; runs on the first move — the answer depends on direction. */
+    const shouldDrag = useCallback((target, draggingDown) => {
+        const now = performance.now();
+        const openedAt = openedAtRef.current;
+        if (openedAt !== undefined && now - openedAt < OPEN_LOCK_TIMEOUT)
+            return false;
+        if (now - scrollBlockedAtRef.current < SCROLL_LOCK_TIMEOUT)
+            return false;
+        if (window.getSelection()?.toString())
+            return false;
+        let element = target instanceof Element ? target : null;
+        if (element?.closest('[data-no-drag]'))
+            return false;
+        const { snapPoints, current } = stateRef.current;
+        if (!draggingDown && current === snapPoints[snapPoints.length - 1].name) {
+            scrollBlockedAtRef.current = now;
+            return false;
+        }
+        const panel = panelRef.current;
+        while (element && panel?.contains(element)) {
+            if (element.scrollHeight > element.clientHeight && element.scrollTop !== 0) {
+                scrollBlockedAtRef.current = now;
+                return false;
+            }
+            element = element.parentElement;
+        }
+        return true;
+    }, [openedAtRef, panelRef]);
+    const resolveTarget = useCallback((offset, distance, velocity) => {
+        const { snapPoints, current } = stateRef.current;
+        const draggedUp = distance > 0;
+        if (velocity > FLING_VELOCITY) {
+            return draggedUp ? snapPoints[snapPoints.length - 1].name : snapPoints[0].name;
+        }
+        if (velocity > STEP_VELOCITY &&
+            Math.abs(distance) < window.innerHeight * STEP_DISTANCE_RATIO) {
+            const index = snapPoints.findIndex((snapPoint) => snapPoint.name === current);
+            const stepped = index + (draggedUp ? 1 : -1);
+            return snapPoints[Math.min(Math.max(stepped, 0), snapPoints.length - 1)].name;
+        }
+        return snapPoints.reduce((closest, snapPoint) => Math.abs(offsetOf(snapPoint.name) - offset) < Math.abs(offsetOf(closest.name) - offset)
+            ? snapPoint
+            : closest).name;
+    }, [offsetOf]);
+    const flushSettle = useCallback(() => {
+        settleRef.current?.flush();
+    }, []);
+    const scheduleSettle = useCallback(() => {
+        const panel = panelRef.current;
+        const cancel = () => {
+            settleRef.current = null;
+            clearTimeout(timer);
+            panel?.removeEventListener('transitionend', onTransitionEnd);
+        };
+        const flush = () => {
+            cancel();
+            callbacksRef.current.onSettle();
+        };
+        const onTransitionEnd = (event) => {
+            if (event.target === panel && event.propertyName === 'transform')
+                flush();
+        };
+        // No `transitionend` when the sheet is released where it started.
+        const timer = setTimeout(flush, SETTLE_TIMEOUT);
+        panel?.addEventListener('transitionend', onTransitionEnd);
+        settleRef.current = { flush, cancel };
+    }, [panelRef]);
+    // A sheet unmounted mid-gesture takes its timers and window listeners with
+    // it, silently — no onSnap/onSettle into a dead tree.
+    useEffect(() => () => {
+        settleRef.current?.cancel();
+        stopGestureRef.current?.();
+    }, []);
+    const onPointerDown = useCallback((event) => {
+        if (!stateRef.current.enabled || gestureRef.current)
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        const liveOffset = settleRef.current ? readOffset(panelRef.current) : null;
+        flushSettle();
+        const startOffset = liveOffset ?? offsetOf(stateRef.current.current);
+        const gesture = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            lastY: event.clientY,
+            startTime: performance.now(),
+            startOffset,
+            offset: startOffset,
+            committed: false,
+            commit: (clientX, clientY) => {
+                if (gesture.committed)
+                    return true;
+                const deltaX = clientX - gesture.startX;
+                const deltaY = clientY - gesture.startY;
+                if (Math.hypot(deltaX, deltaY) < MOVE_TOLERANCE)
+                    return false;
+                if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                    // A sideways move belongs to a chip row or gallery strip under the finger. Anywhere
+                    // else it is the finger settling, which says nothing about the direction yet.
+                    if (scrollsSideways(event.target, panelRef.current))
+                        stop();
+                    return false;
+                }
+                if (!shouldDrag(event.target, deltaY > 0)) {
+                    stop();
+                    return false;
+                }
+                gesture.committed = true;
+                try {
+                    panelRef.current?.setPointerCapture(gesture.pointerId);
+                }
+                catch {
+                    // Throws when the pointer is already gone; the window listeners
+                    // below carry the gesture either way.
+                }
+                if (scrollElement)
+                    scrollElement.style.overflow = 'hidden';
+                callbacksRef.current.onDragStart();
+                return true;
+            },
+        };
+        gestureRef.current = gesture;
+        const stop = () => {
+            window.removeEventListener('pointermove', handleMove);
+            window.removeEventListener('pointerup', finish);
+            window.removeEventListener('pointercancel', finish);
+            gestureRef.current = null;
+            stopGestureRef.current = null;
+        };
+        const finish = (endEvent) => {
+            // A second finger releasing must not end the first finger's gesture.
+            if (endEvent.pointerId !== gesture.pointerId)
+                return;
+            stop();
+            if (scrollElement)
+                scrollElement.style.removeProperty('overflow');
+            if (!gesture.committed) {
+                const target = event.target;
+                if (target instanceof Element && target.closest('[data-sheet-handle]')) {
+                    callbacksRef.current.onHandleTap();
+                }
+                return;
+            }
+            const distance = gesture.startY - gesture.lastY;
+            const elapsed = Math.max(performance.now() - gesture.startTime, 1);
+            const velocity = Math.abs(distance) / elapsed;
+            const target = resolveTarget(gesture.offset, distance, velocity);
+            writeOffset(offsetOf(target), SHEET_TRANSITION);
+            scheduleSettle();
+            callbacksRef.current.onSnap(target);
+        };
+        const handleMove = (moveEvent) => {
+            if (moveEvent.pointerId !== gesture.pointerId)
+                return;
+            gesture.lastY = moveEvent.clientY;
+            if (!gesture.commit(moveEvent.clientX, moveEvent.clientY))
+                return;
+            const delta = moveEvent.clientY - gesture.startY;
+            const limit = offsetOf(stateRef.current.snapPoints[0].name);
+            const raw = gesture.startOffset + delta;
+            const offset = raw < 0 ? -dampen(-raw) : raw > limit ? limit + dampen(raw - limit) : raw;
+            gesture.offset = offset;
+            writeOffset(offset, 'none');
+        };
+        window.addEventListener('pointermove', handleMove);
+        window.addEventListener('pointerup', finish);
+        window.addEventListener('pointercancel', finish);
+        stopGestureRef.current = stop;
+    }, [
+        flushSettle,
+        offsetOf,
+        panelRef,
+        resolveTarget,
+        scheduleSettle,
+        scrollElement,
+        shouldDrag,
+        writeOffset,
+    ]);
+    // Non-passive, so bound natively (React's touch listeners are passive), and in place before the
+    // touch starts. A drag that starts on the content must keep the browser from scrolling it: a
+    // native scroll takes the touch over and cancels the pointer mid-drag (#1686). Once that scroll
+    // starts, touchmoves are no longer cancelable, and a pointermove can arrive a frame after its
+    // touchmove, so the drag is decided here as well.
+    useEffect(() => {
+        if (!scrollElement || !enabled)
+            return;
+        const handleTouchMove = (event) => {
+            const gesture = gestureRef.current;
+            const touch = event.targetTouches[0];
+            if (!gesture || !touch || !event.cancelable)
+                return;
+            if (gesture.commit(touch.clientX, touch.clientY))
+                event.preventDefault();
+        };
+        scrollElement.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => scrollElement.removeEventListener('touchmove', handleTouchMove);
+    }, [scrollElement, enabled]);
+    return { onPointerDown };
+}

package/dist/shared/hooks/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=useWindowSize.d.ts.map

package/dist/shared/hooks/useWindowSize.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+/**
+ * How long the window size must hold still before consumers see it. A live window drag fires
+ * `resize` on every frame, and a state update per frame re-renders every consumer's subtree for
+ * the whole drag — for layout breakpoints, one update once the drag settles is enough.
+ */
+const RESIZE_DEBOUNCE_MS = 200;
+const measure = () => {
+    const isInIframe = window !== window.top;
+    if (isInIframe) {
+        return {
+            width: document.documentElement.clientWidth || window.innerWidth,
+            height: document.documentElement.clientHeight || window.innerHeight,
+        };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(measure);
+    useEffect(() => {
+        let timeoutId;
+        const handleResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => setWindowSize(measure()), RESIZE_DEBOUNCE_MS);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+    return windowSize;
+};

package/dist/shared/interactive.d.ts

@@ -0,0 +1,2 @@
+export declare function isInteractiveTarget(target: Element | null): boolean;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/shared/interactive.js

@@ -0,0 +1,4 @@
+const INTERACTIVE_SELECTOR = 'button, input, select, textarea, a, [contenteditable="true"], [draggable="false"]';
+export function isInteractiveTarget(target) {
+    return Boolean(target?.closest(INTERACTIVE_SELECTOR));
+}

package/dist/shared/selector-option.d.ts

@@ -0,0 +1,7 @@
+export interface SelectorOption {
+    id: string;
+    label: string;
+    active: boolean;
+    disabled: boolean;
+}
+//# sourceMappingURL=selector-option.d.ts.map

package/dist/shared/selector-option.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@expofp/ui",
+  "version": "0.0.0-experimental.2d6c681",
+  "type": "module",
+  "description": "ExpoFP SDK internal: shared pure React UI components",
+  "homepage": "https://developer.expofp.com/",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@expofp/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo",
+    "!**/*.map"
+  ],
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.2.0",
+    "react-virtuoso": "^4.18.7",
+    "react-zoom-pan-pinch-sr": "^0.2.0",
+    "resize-observer": "^1.0.4",
+    "swiper": "^9.4.1",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser-playwright": "^4.1.9",
+    "playwright": "^1.61.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "sass-embedded": "^1.100.0",
+    "storybook": "10.4.6"
+  },
+  "nx": {
+    "targets": {
+      "test-storybook": {
+        "dependsOn": [
+          "^build"
+        ],
+        "command": "vitest run --config vitest.storybook.config.mts",
+        "options": {
+          "cwd": "packages/ui"
+        },
+        "cache": true
+      }
+    }
+  }
+}