@jobber/components-native 0.113.0 → 0.113.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.0",
+    "version": "0.113.2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -53,8 +53,7 @@
         "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
         "storybook": "storybook dev -p 6008 --disable-telemetry",
-        "storybook:build": "storybook build --disable-telemetry",
-        "lint:locales": "node scripts/check-locale-parity.mjs"
+        "storybook:build": "storybook build --disable-telemetry"
     },
     "dependencies": {
         "@react-native-clipboard/clipboard": "^1.11.2",
@@ -125,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "25cd8815738e86b9f49311096e7d4ffd02d843b5"
+    "gitHead": "106e281adc9a3b0e87e125e1a9f1c945ce2de3cd"
 }

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/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) {