@jobber/components-native 0.91.3 → 0.92.0

package/dist/types/src/Form/context/types.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 export interface UseConfirmBeforeBackProps {
     alwaysPreventBack: boolean;
@@ -16,7 +16,7 @@ interface LocalCacheOptions {
     readonly id?: string | string[];
 }
 export interface AtlantisFormContextProps {
-    useConfirmBeforeBack: (props: UseConfirmBeforeBackProps) => MutableRefObject<() => void>;
+    useConfirmBeforeBack: (props: UseConfirmBeforeBackProps) => RefObject<() => void>;
     useInternalFormLocalCache: <TData extends FieldValues>(formMethods: UseFormReturn<TData>, cacheKey?: string, options?: LocalCacheOptions) => {
         setLocalCache: (data: DeepPartial<TData>) => void;
         removeLocalCache: () => void;

package/dist/types/src/Form/hooks/useInternalForm.d.ts

@@ -1,5 +1,5 @@
 import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { InternalFormProps } from "../types";
 type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<InternalFormProps<T, SubmitResponseType>, "mode" | "reValidateMode" | "initialValues" | "formRef" | "localCacheKey" | "localCacheExclude" | "localCacheId" | "UNSAFE_allowDiscardLocalCacheWhenOffline"> & {
@@ -12,7 +12,7 @@ interface UseInternalForm<T extends FieldValues> {
     readonly handleSubmit: UseFormHandleSubmit<T>;
     readonly isSubmitting: boolean;
     readonly isDirty: boolean;
-    readonly removeListenerRef: MutableRefObject<() => void>;
+    readonly removeListenerRef: RefObject<() => void>;
     readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, UNSAFE_allowDiscardLocalCacheWhenOffline, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;

package/dist/types/src/Menu/types.d.ts

@@ -1,5 +1,5 @@
-import type { IconColorNames, IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
+import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 export interface MenuOptionProps {
     readonly label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.91.3",
+  "version": "0.92.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@react-native-community/datetimepicker": "^8.4.5",
-    "@react-native/babel-preset": "^0.81.1",
+    "@react-native/babel-preset": "^0.82.1",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
@@ -66,14 +66,14 @@
     "@types/react-test-renderer": "19.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react-native": "^0.81.4",
-    "react-native-gesture-handler": "^2.28.0",
+    "react-native": "^0.82.1",
+    "react-native-gesture-handler": "^2.29.1",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": "^15.1.0",
     "react-native-web": "^0.20.0",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "^19.1.1",
     "storybook": "^9.1.2"
   },
   "peerDependencies": {
@@ -82,7 +82,7 @@
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react": "^18 || ^19.1.0",
+    "react": "^19",
     "react-intl": "^6 || ^7",
     "react-native": ">=0.79.5",
     "react-native-gesture-handler": ">=2.22.0",
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "4b120bbb1789aa1b6b9a8eaf157be90d4ea15efc"
+  "gitHead": "1ca01305080db58e135d5224ab329a8df4ad92ff"
 }

package/src/Chip/Chip.style.ts

@@ -12,7 +12,7 @@ export const useStyles = buildThemedStyles(tokens => {
       justifyContent: "center",
       marginHorizontal: tokens["space-smaller"],
       marginTop: tokens["space-small"],
-      paddingHorizontal: tokens["space-small"],
+      paddingHorizontal: tokens["space-base"],
     },
     iconLeft: {
       marginHorizontal: tokens["space-smallest"],

package/src/Chip/Chip.tsx

@@ -5,6 +5,7 @@ import type { IconNames } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
+import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
@@ -86,6 +87,7 @@ export function Chip({
             : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
+      getBorderStyle(inactiveBackgroundColor, tokens),
     ];
     const dismiss =
       (isActive || inactiveBackgroundColor === "surface") &&
@@ -96,7 +98,7 @@ export function Chip({
       iconCustomColor: iconColor,
       dismissColor: dismiss,
     };
-  }, [accent, isActive, inactiveBackgroundColor]);
+  }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
@@ -145,3 +147,19 @@ export function Chip({
     </Pressable>
   );
 }
+
+function getBorderStyle(
+  inactiveBackgroundColor: "surface" | "background",
+  tokens: AtlantisThemeContextValue["tokens"],
+) {
+  let borderColor = "transparent";
+
+  if (inactiveBackgroundColor === "surface") {
+    borderColor = tokens["color-border"];
+  }
+
+  return {
+    borderColor,
+    borderWidth: tokens["border-base"],
+  };
+}

package/src/Form/context/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
@@ -21,7 +21,7 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
   useConfirmBeforeBack: (
     props: UseConfirmBeforeBackProps,
-  ) => MutableRefObject<() => void>;
+  ) => RefObject<() => void>;
   useInternalFormLocalCache: <TData extends FieldValues>(
     formMethods: UseFormReturn<TData>,
     cacheKey?: string,

package/src/Form/hooks/useInternalForm.ts

@@ -5,7 +5,7 @@ import type {
   UseFormReturn,
 } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
@@ -32,7 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly handleSubmit: UseFormHandleSubmit<T>;
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
-  readonly removeListenerRef: MutableRefObject<() => void>;
+  readonly removeListenerRef: RefObject<() => void>;
   readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 

package/src/Menu/types.ts

@@ -1,5 +1,5 @@
-import type { IconColorNames, IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
+import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 
 export interface MenuOptionProps {