@jobber/components-native 0.115.0 → 0.115.2-codexjob--9905233.7

package/dist/docs/ProgressIndicator/ProgressIndicator.md

@@ -58,13 +58,10 @@ The indicator does not participate in the keyboard tab order.
 
 ### Reduced motion
 
-The width transition between `value` updates is intentionally **preserved**
-under
+The width transition between `value` updates is disabled under
 [`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion).
-The slide between progress values conveys functional information about progress,
-direction, and magnitude — it is exempt under
-[WCAG 2.3.3 ("Animation from Interactions")](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).
-Removing the transition would make progress harder to perceive, not easier.
+The fill updates immediately to the new value, so current progress remains
+visible without interpolation. The stepped variation does not animate.
 
 ## Relationship to ProgressBar
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.115.0",
+    "version": "0.115.2-codexjob--9905233.7+9905233c",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "9f20f1b3aa82b280fb9f24b5fd98be3da946c130"
+    "gitHead": "9905233c18ce012134f57ba140fabba5225e18a6"
 }

package/dist/src/Chip/Chip.js

@@ -1,16 +1,31 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
+import { allColors } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor = "background", accessibilityLabel, accessibilityRole = "radio", accent, }) {
     const styles = useStyles();
-    const { tokens } = useAtlantisTheme();
-    const defaultAccentColor = tokens["color-surface--reverse"];
-    const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
-        const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
-        const iconColor = isActive ? tokens["color-surface"] : accentColor;
+    const { tokens, effectiveTheme } = useAtlantisTheme();
+    const { chipStyle, iconCustomColor, labelStyle, dismissColor } = useMemo(() => {
+        const accentColor = accent
+            ? tokens[`color-${accent}`]
+            : tokens["color-surface--reverse"];
+        let backgroundColor = accentColor;
+        let iconColor = isActive ? tokens["color-surface"] : accentColor;
+        let selectedLabelStyle;
+        if (isActive && accent) {
+            const selected = getSelectedAccentColors(accent, {
+                tokens,
+                effectiveTheme,
+            });
+            backgroundColor = selected.background;
+            iconColor = selected.foreground;
+            selectedLabelStyle = {
+                textStyle: { color: selected.foreground },
+            };
+        }
         const chip = [
             styles.container,
             {
@@ -18,7 +33,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
                     ? tokens["color-surface"]
                     : tokens["color-interactive--background"],
             },
-            isActive && { backgroundColor: accentColor },
+            isActive && { backgroundColor },
             getBorderStyle(inactiveBackgroundColor, tokens),
         ];
         const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
@@ -26,9 +41,17 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         return {
             chipStyle: chip,
             iconCustomColor: iconColor,
+            labelStyle: selectedLabelStyle,
             dismissColor: dismiss,
         };
-    }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
+    }, [
+        accent,
+        isActive,
+        inactiveBackgroundColor,
+        styles,
+        tokens,
+        effectiveTheme,
+    ]);
     const accessibilityState = useMemo(() => {
         const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
         if (checkableRoles.includes(accessibilityRole)) {
@@ -40,10 +63,24 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         icon && (React.createElement(View, { style: styles.iconLeft },
             React.createElement(Icon, { name: icon, size: "base", customColor: iconCustomColor }))),
         label && (React.createElement(View, { style: styles.chipText },
-            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
+            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive && !accent, UNSAFE_style: labelStyle }, label))),
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
             React.createElement(Icon, { name: "cross", size: "small" })))));
 }
+// Object labels and leading icons share the selected foreground.
+function getSelectedAccentColors(accent, { tokens, effectiveTheme, }) {
+    const colors = {
+        background: allColors[`color-${accent}`],
+        foreground: allColors["color-text--reverse"],
+    };
+    if (accent === "client") {
+        colors.background = tokens["color-client"];
+        if (effectiveTheme === "dark") {
+            colors.foreground = allColors["color-text"];
+        }
+    }
+    return colors;
+}
 function getBorderStyle(inactiveBackgroundColor, tokens) {
     let borderColor = "transparent";
     if (inactiveBackgroundColor === "surface") {

package/dist/src/Chip/Chip.test.js

@@ -1,6 +1,9 @@
 import React from "react";
+import { allColors, darkTokens } from "@jobber/design";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
 import { Chip } from "./Chip";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
 import { tokens } from "../utils/design";
 it("renders an active Chip", () => {
     const { getByText, getByLabelText } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), accessibilityLabel: "Foo chip", isActive: true }));
@@ -67,3 +70,53 @@ describe("accent", () => {
         });
     });
 });
+describe("selection color transitions", () => {
+    function example(theme, props = {}) {
+        return (React.createElement(AtlantisThemeContextProvider, { theme: theme },
+            React.createElement(Chip, Object.assign({ label: "Object", icon: "request", isActive: true }, props))));
+    }
+    function expectColors(view, background, text, icon = text) {
+        expect(view.getByTestId("chipTest")).toHaveStyle({
+            backgroundColor: background,
+        });
+        expect(view.getByText("Object")).toHaveStyle({ color: text });
+        const paths = view.UNSAFE_root.findAllByType(Path);
+        expect(paths.length).toBeGreaterThan(0);
+        for (const path of paths) {
+            expect(path.props.fill).toBe(icon);
+        }
+    }
+    it.each(["request", "quote", "job", "invoice"])("keeps the selected %s fill and white content when the theme changes", accent => {
+        expect.hasAssertions();
+        const props = { accent, icon: accent };
+        const view = render(example("light", props));
+        for (const theme of ["light", "dark", "light"]) {
+            view.rerender(example(theme, props));
+            expectColors(view, allColors[`color-${accent}`], allColors["color-text--reverse"]);
+        }
+    });
+    it("changes the selected client fill and foreground together with the theme", () => {
+        expect.hasAssertions();
+        const props = { accent: "client", icon: "clients" };
+        const view = render(example("light", props));
+        expectColors(view, allColors["color-client"], allColors["color-text--reverse"]);
+        view.rerender(example("dark", props));
+        expectColors(view, darkTokens["color-client"], allColors["color-text"]);
+        view.rerender(example("light", props));
+        expectColors(view, allColors["color-client"], allColors["color-text--reverse"]);
+    });
+    it.each(["request", "client"])("restores the theme's normal colors when %s is deselected", accent => {
+        const view = render(example("dark", { accent }));
+        view.rerender(example("dark", { accent, isActive: false }));
+        expectColors(view, darkTokens["color-interactive--background"], darkTokens["color-text"], darkTokens[`color-${accent}`]);
+        expect(view.getByTestId("chipTest").props.accessibilityState.checked).toBe(false);
+    });
+    it("preserves default selected colors when an accent is removed and the theme changes", () => {
+        expect.hasAssertions();
+        const view = render(example("dark", { accent: "request" }));
+        view.rerender(example("dark"));
+        expectColors(view, darkTokens["color-surface--reverse"], darkTokens["color-text--reverse"], darkTokens["color-surface"]);
+        view.rerender(example("light"));
+        expectColors(view, allColors["color-surface--reverse"], allColors["color-text--reverse"], allColors["color-surface"]);
+    });
+});

package/dist/src/Select/SelectRoot.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { render, screen, within } from "@testing-library/react-native";
+import { fireEvent, render, screen, within, } from "@testing-library/react-native";
+import { Pressable } from "react-native";
 import { SelectRoot } from "./SelectRoot";
 import { SelectTrigger } from "./components/SelectTrigger";
 import { SelectLabel } from "./components/SelectLabel";
@@ -12,6 +13,34 @@ function renderRoot(props = {}) {
             React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
 }
 describe("SelectRoot chrome", () => {
+    it("shows the placeholder when a controlled value is cleared to undefined", () => {
+        function ControlledSelect() {
+            const [value, setValue] = React.useState();
+            return (React.createElement(React.Fragment, null,
+                React.createElement(SelectRoot, { value: value, onValueChange: setValue },
+                    React.createElement(SelectTrigger, null,
+                        React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+                    React.createElement(SelectPrimitive.Item, { testID: "toronto-option", value: "tor", label: "Toronto" })),
+                React.createElement(Pressable, { testID: "clear-value", onPress: () => setValue(undefined) })));
+        }
+        render(React.createElement(ControlledSelect, null));
+        fireEvent.press(screen.getByTestId("toronto-option"));
+        expect(screen.getByText("Toronto")).toBeDefined();
+        fireEvent.press(screen.getByTestId("clear-value"));
+        expect(screen.queryByText("Toronto")).toBeNull();
+        expect(screen.getByText("Select an option")).toHaveStyle({
+            color: tokens["color-text--secondary"],
+        });
+    });
+    it("preserves an uncontrolled default value across rerenders", () => {
+        const { rerender } = renderRoot({
+            defaultValue: { value: "tor", label: "Toronto" },
+        });
+        rerender(React.createElement(SelectRoot, { defaultValue: { value: "tor", label: "Toronto" } },
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(screen.getByText("Toronto")).toBeDefined();
+    });
     it("renders a composed label (visible, hidden from assistive tech)", () => {
         render(React.createElement(SelectRoot, null,
             React.createElement(SelectLabel, null, "City"),

package/dist/src/primitives/Select/SelectPrimitive.js

@@ -21,9 +21,16 @@ export const SELECT_TRIGGER_DEFAULT_TEST_ID = "ATL-Select-Trigger";
 function useIsDarkTheme() {
     return useAtlantisTheme().effectiveTheme === "dark";
 }
-function SelectPrimitiveRoot(_a) {
-    var props = __rest(_a, []);
-    return React.createElement(Primitive.Root, Object.assign({}, props));
+// @rn-primitives/select treats `undefined` as uncontrolled. Keep an explicitly
+// controlled empty value defined so clearing the prop cannot reveal stale
+// internal state. Its undefined fields cannot match a public string item value.
+const EMPTY_CONTROLLED_VALUE = {};
+function SelectPrimitiveRoot(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    const value = isControlled && props.value === undefined
+        ? EMPTY_CONTROLLED_VALUE
+        : props.value;
+    return React.createElement(Primitive.Root, Object.assign({}, props, { value: value }));
 }
 /**
  * Styled trigger field. Renders only its `children` — compose

package/dist/src/primitives/Select/SelectPrimitive.test.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React from "react";
 import { render, screen, userEvent, within, } from "@testing-library/react-native";
+import { Pressable } from "react-native";
 import { darkTokens } from "@jobber/design";
 import { PortalHost } from "@rn-primitives/portal";
 import { SelectPrimitive } from "./SelectPrimitive";
@@ -30,6 +31,35 @@ function renderSelect({ defaultValue, onOpenChange, disabled, invalid, testID, t
         React.createElement(SelectPrimitive.Trigger, { ref: triggerRef, testID: testID, invalid: invalid },
             React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
 }
+describe("SelectPrimitive.Root", () => {
+    it("does not select an empty-string item when a controlled value is cleared", () => __awaiter(void 0, void 0, void 0, function* () {
+        function ControlledSelect() {
+            const [value, setValue] = React.useState({ value: "tor", label: "Toronto" });
+            return (React.createElement(React.Fragment, null,
+                React.createElement(SelectPrimitive.Root, { value: value, onValueChange: setValue },
+                    React.createElement(SelectPrimitive.Trigger, null,
+                        React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+                    React.createElement(SelectPrimitive.Portal, null,
+                        React.createElement(SelectPrimitive.Overlay, null),
+                        React.createElement(SelectPrimitive.Content, null,
+                            React.createElement(SelectPrimitive.Viewport, null,
+                                React.createElement(SelectPrimitive.Item, { testID: "empty-option", value: "", label: "Empty" },
+                                    React.createElement(SelectPrimitive.ItemText, null),
+                                    React.createElement(SelectPrimitive.ItemIndicator, null,
+                                        React.createElement(Icon, { name: "checkmark" }))),
+                                React.createElement(SelectPrimitive.Item, { value: "tor", label: "Toronto" },
+                                    React.createElement(SelectPrimitive.ItemText, null),
+                                    React.createElement(SelectPrimitive.ItemIndicator, null,
+                                        React.createElement(Icon, { name: "checkmark" }))))))),
+                React.createElement(Pressable, { testID: "clear-value", onPress: () => setValue(undefined) })));
+        }
+        render(React.createElement(ControlledSelect, null), { wrapper: PortalHostWrapper });
+        yield user.press(screen.getByTestId("clear-value"));
+        yield openSelect();
+        expect(screen.getByTestId("empty-option").props.accessibilityState).toMatchObject({ checked: false });
+        expect(screen.queryByTestId("checkmark")).toBeNull();
+    }));
+});
 describe("SelectPrimitive.Trigger", () => {
     it("renders with the default testID", () => {
         renderSelect();