@jobber/components-native 0.113.1 → 0.113.3

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.1",
+    "version": "0.113.3",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "06559aba2040cdb7808c71ac988826c60c9e7cd9"
+    "gitHead": "895ad886700e1a7e11927702a0e5f49cb554c4e3"
 }

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -19,6 +19,26 @@ const RADIUS = 20;
 // "200" used as the gap value exceeds the circumference, ensuring only
 // one stroke segment is visible at a time.
 const GAP = 200;
+/**
+ * Per-size motion profile. Adding a size is an additive map entry — not a
+ * new boolean branch. `layers: 1` is Layer 1 only (fixed arc); `layers: 3`
+ * runs the full Material 3 indeterminate ring (Layers 1–3).
+ *
+ * Small matches web's ActivityIndicator.module.css (`.small .svg` /
+ * `.small .arc`): Layer 1 only, spun ~1.8× faster. Web hardcodes 1000ms
+ * (≈1803ms ÷ 1.8); we match that absolute duration.
+ */
+const MOTION_BY_SIZE = {
+    small: {
+        layers: 1,
+        linearRotateMs: 1000,
+        dasharray: `40, ${GAP}`,
+    },
+    base: {
+        layers: 3,
+        linearRotateMs: tokens["timing-indicator--linear-rotate"],
+    },
+};
 function resolveLegacySize(size) {
     if (size === "large") {
         if (__DEV__) {
@@ -61,23 +81,28 @@ export function ActivityIndicator({ size = "base", accessibilityLabel, style, te
     if (reducedMotion) {
         return (React.createElement(ReducedMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, ringColor: themeTokens["color-icon"], style: style, testID: testID, a11yProps: a11yProps }));
     }
-    return (React.createElement(FullMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, arcColor: themeTokens["color-icon"], trackColor: themeTokens["color-surface--active"], style: style, testID: testID, a11yProps: a11yProps }));
+    return (React.createElement(FullMotionRing, { size: resolvedSize, pixelSize: pixelSize, strokeWidth: strokeWidth, arcColor: themeTokens["color-icon"], trackColor: themeTokens["color-surface--active"], style: style, testID: testID, a11yProps: a11yProps }));
 }
-function FullMotionRing({ pixelSize, strokeWidth, arcColor, trackColor, style, testID, a11yProps, }) {
+function FullMotionRing({ size, pixelSize, strokeWidth, arcColor, trackColor, style, testID, a11yProps, }) {
+    const motion = MOTION_BY_SIZE[size];
     // Layer 1 — outer linear rotation. Continuous, constant speed.
     const outerRotate = useSharedValue(0);
     // Layer 2 — inner 8-phase rotation. Eight 135° eased segments per cycle
     // (totalling 1080° over `timing-indicator--cycle`) reproduce the
-    // canonical Material Web "8-phase" rhythm.
+    // canonical Material Web "8-phase" rhythm. Only when motion.layers === 3.
     const innerRotate = useSharedValue(0);
     // Layer 3 — arc length and dash offset. Drives the visible arc growing
     // from ~1 viewBox-unit to ~90 viewBox-units and sliding around the ring.
+    // Only when motion.layers === 3; fixed-arc sizes use motion.dasharray.
     const arcProgress = useSharedValue(0);
     useEffect(() => {
         outerRotate.value = withRepeat(withTiming(360, {
-            duration: tokens["timing-indicator--linear-rotate"],
+            duration: motion.linearRotateMs,
             easing: Easing.linear,
         }), -1);
+        if (motion.layers === 1) {
+            return;
+        }
         const phaseDuration = tokens["timing-indicator--cycle"] / 8;
         const phaseEasing = Easing.bezier(0.4, 0, 0.2, 1);
         innerRotate.value = withRepeat(withSequence(withTiming(135, { duration: phaseDuration, easing: phaseEasing }), withTiming(270, { duration: phaseDuration, easing: phaseEasing }), withTiming(405, { duration: phaseDuration, easing: phaseEasing }), withTiming(540, { duration: phaseDuration, easing: phaseEasing }), withTiming(675, { duration: phaseDuration, easing: phaseEasing }), withTiming(810, { duration: phaseDuration, easing: phaseEasing }), withTiming(945, { duration: phaseDuration, easing: phaseEasing }), withTiming(1080, { duration: phaseDuration, easing: phaseEasing })), -1);
@@ -87,7 +112,7 @@ function FullMotionRing({ pixelSize, strokeWidth, arcColor, trackColor, style, t
         }), -1);
         // We intentionally do not include the shared values in the dependency
         // array — they are stable references created by useSharedValue.
-    }, []);
+    }, [motion]);
     const outerStyle = useAnimatedStyle(() => ({
         transform: [{ rotate: `${outerRotate.value}deg` }],
     }));
@@ -123,12 +148,17 @@ function FullMotionRing({ pixelSize, strokeWidth, arcColor, trackColor, style, t
             strokeDashoffset: offset,
         };
     });
+    const track = (React.createElement(Circle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }));
+    const ring = motion.layers === 1 ? (
+    // Fixed-length arc, Layer 1 rotation only — no Layer 2 wrapper.
+    React.createElement(Svg, { width: pixelSize, height: pixelSize, viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}` },
+        track,
+        React.createElement(Circle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: arcColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: motion.dasharray, strokeDashoffset: 0 }))) : (React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, innerStyle] },
+        React.createElement(Svg, { width: pixelSize, height: pixelSize, viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}` },
+            track,
+            React.createElement(AnimatedCircle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: arcColor, strokeWidth: strokeWidth, strokeLinecap: "round", animatedProps: arcAnimatedProps }))));
     return (React.createElement(Animated.View, Object.assign({ style: [{ justifyContent: "center", alignItems: "center" }, style] }, a11yProps, { testID: testID }),
-        React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, outerStyle] },
-            React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, innerStyle] },
-                React.createElement(Svg, { width: pixelSize, height: pixelSize, viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}` },
-                    React.createElement(Circle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }),
-                    React.createElement(AnimatedCircle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: arcColor, strokeWidth: strokeWidth, strokeLinecap: "round", animatedProps: arcAnimatedProps }))))));
+        React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, outerStyle] }, ring)));
 }
 function ReducedMotionRing({ pixelSize, strokeWidth, ringColor, style, testID, a11yProps, }) {
     // Reduced motion: hide rotation entirely, render one static ring in the

package/dist/src/ActivityIndicator/ActivityIndicator.test.js

@@ -60,6 +60,41 @@ describe("ActivityIndicator", () => {
             expect(flattenedStyle.width).toBe(44);
             expect(flattenedStyle.height).toBe(44);
         });
+        it("uses a fixed-length arc for small (no Layer 2/3 wrappers)", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { size: "small" }));
+            const outer = getByTestId(testId).children[0];
+            const outerChildren = React.Children.toArray(outer.props.children);
+            function typeName(node) {
+                var _a, _b;
+                if (!node || typeof node !== "object")
+                    return "";
+                const element = node;
+                return ((_a = element.type) === null || _a === void 0 ? void 0 : _a.displayName) || ((_b = element.type) === null || _b === void 0 ? void 0 : _b.name) || "";
+            }
+            // Small: outer rotation wrapper → Svg directly (no inner Layer 2 view).
+            expect(outerChildren.some(child => typeName(child).startsWith("Svg"))).toBe(true);
+            function findArcCircle(node) {
+                var _a, _b;
+                if (!node || typeof node !== "object")
+                    return undefined;
+                const element = node;
+                const name = typeName(element);
+                if ((name === "Circle" || name === "RNSVGCircle") &&
+                    element.props.strokeDasharray === "40, 200") {
+                    return element;
+                }
+                const kids = React.Children.toArray((_b = (_a = element.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+                for (const kid of kids) {
+                    const found = findArcCircle(kid);
+                    if (found)
+                        return found;
+                }
+                return undefined;
+            }
+            const arc = findArcCircle(outer);
+            expect(arc).toBeTruthy();
+            expect(arc === null || arc === void 0 ? void 0 : arc.props.strokeDashoffset).toBe(0);
+        });
     });
     describe('deprecated size="large" alias', () => {
         let warnSpy;

package/dist/src/Form/Form.js

@@ -96,20 +96,9 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setKeyboardScreenY(windowHeight - event.height);
     }, [windowHeight]);
     const handleKeyboardHide = useCallback(() => {
-        var _a;
-        (_a = bottomViewRef === null || bottomViewRef === void 0 ? void 0 : bottomViewRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        (_x, y, _width, _height) => {
-            var _a;
-            // This fixes extra whitespace below the form if it was scrolled down while the keyboard was open
-            // i.e. a View below the form is higher than the bottom of the window
-            if (y < windowHeight) {
-                (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd();
-            }
-        });
         setKeyboardHeight(0);
         setKeyboardScreenY(0);
-    }, [bottomViewRef, scrollViewRef, windowHeight]);
+    }, []);
     useEffect(() => {
         const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
         const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";

package/dist/src/Form/Form.test.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
+import { KeyboardEvents } from "react-native-keyboard-controller";
 import { Form, FormBannerMessageType } from ".";
 import { FormSubmitErrorType } from "./types";
 import { atlantisContextDefaultValues } from "../AtlantisContext";
@@ -35,14 +36,34 @@ const onChangeMock = jest.fn();
 const onChangeSelectMock = jest.fn();
 const onChangeSwitchMock = jest.fn();
 const mockScrollTo = jest.fn();
+const mockScrollToEnd = jest.fn();
 const mockScrollToTop = jest.fn();
+const mockMeasureInWindow = jest.fn((callback) => {
+    callback(0, 0, 0, 0);
+});
+const mockScrollViewRef = {
+    get current() {
+        return { scrollTo: mockScrollTo, scrollToEnd: mockScrollToEnd };
+    },
+    // React assigns the ref while rendering KeyboardAwareScrollView. Keep the
+    // test double available to the keyboard-hide callback instead.
+    set current(value) {
+        void value;
+    },
+};
+const mockBottomViewRef = {
+    get current() {
+        return { measureInWindow: mockMeasureInWindow };
+    },
+    set current(value) {
+        void value;
+    },
+};
 jest.mock("./hooks/useFormViewRefs", () => ({
     useFormViewRefs: () => {
         return {
-            scrollViewRef: {
-                current: { scrollTo: mockScrollTo },
-            },
-            bottomViewRef: { current: {} },
+            scrollViewRef: mockScrollViewRef,
+            bottomViewRef: mockBottomViewRef,
             scrollToTop: mockScrollToTop,
         };
     },
@@ -321,6 +342,30 @@ describe("Form", () => {
             expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
         });
     });
+    describe("Keyboard dismissal", () => {
+        it("does not imperatively scroll the form to its end", () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const listeners = new Map();
+            const addListener = KeyboardEvents.addListener;
+            const registerListener = (eventName, listener) => {
+                listeners.set(eventName, listener);
+                return { remove: jest.fn() };
+            };
+            addListener
+                .mockImplementationOnce(registerListener)
+                .mockImplementationOnce(registerListener);
+            render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const hideListener = (_a = [...listeners.entries()].find(([eventName]) => eventName.endsWith("Hide"))) === null || _a === void 0 ? void 0 : _a[1];
+            expect(hideListener).toBeDefined();
+            if (!hideListener) {
+                throw new Error("Expected a keyboard hide listener");
+            }
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                hideListener();
+            }));
+            expect(mockScrollToEnd).not.toHaveBeenCalled();
+        }));
+    });
     describe("Leaving the form", () => {
         let mockUseConfirmBeforeBack;
         let mockRemoveLocalCache;

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -63,11 +63,12 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
                 handleMediaLoadEnd();
                 setDecodeFailed(true);
             } },
-            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
+            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles, styleInGrid: styleInGrid }))));
 }
-function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {
-    if (isLoading)
-        return React.createElement(ActivityIndicator, null);
+function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, styleInGrid, }) {
+    if (isLoading) {
+        return React.createElement(ActivityIndicator, { size: styleInGrid ? "small" : "base" });
+    }
     if (hasError)
         return React.createElement(ErrorOverlay, { styles: styles });
     if (showOverlay) {
@@ -97,11 +98,12 @@ function VideoPlaceholder({ a11yLabel, styleInGrid, surfaceColor, styles, isLoad
             surfaceColor ? { backgroundColor: surfaceColor } : undefined,
         ], testID: "format-file-video-placeholder" },
         file.showFileTypeIndicator && React.createElement(Icon, { name: "videoFile", size: "large" }),
-        React.createElement(PlaceholderStatusOverlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles })));
+        React.createElement(PlaceholderStatusOverlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles, styleInGrid: styleInGrid })));
 }
-function PlaceholderStatusOverlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {
-    if (isLoading)
-        return React.createElement(ActivityIndicator, null);
+function PlaceholderStatusOverlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, styleInGrid, }) {
+    if (isLoading) {
+        return React.createElement(ActivityIndicator, { size: styleInGrid ? "small" : "base" });
+    }
     if (hasError)
         return React.createElement(ErrorOverlay, { styles: styles });
     if (showOverlay) {