@jobber/components-native 0.74.1-node22-3bf0edd.11 → 0.75.1

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./Divider.style";
+import { horizontalStyles } from "./DividerHorizontal.style";
+import { verticalStyles } from "./DividerVertical.style";
 
 interface DividerProps {
   /**
@@ -8,15 +9,32 @@ interface DividerProps {
    *
    * @default "base"
    */
-  readonly size?: keyof typeof styles;
+  readonly size?: "base" | "large" | "larger" | "largest";
+  /**
+   * The direction of the divider
+   *
+   * @default "horizontal"
+   */
+  readonly direction?: "horizontal" | "vertical";
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  readonly testID?: string;
 }
 
-export function Divider({ size = "base" }: DividerProps): JSX.Element {
+export function Divider({
+  size = "base",
+  direction = "horizontal",
+  testID = "Divider",
+}: DividerProps): JSX.Element {
+  const directionalStyles =
+    direction === "horizontal" ? horizontalStyles : verticalStyles;
   const style = [
-    styles.base,
-    size === "large" && styles.large,
-    size === "largest" && styles.largest,
+    directionalStyles.base,
+    size === "large" && directionalStyles.large,
+    size === "larger" && directionalStyles.larger,
+    size === "largest" && directionalStyles.largest,
   ];
 
-  return <View testID="Divider" style={style} />;
+  return <View testID={testID} style={style} />;
 }

package/src/Divider/{Divider.style.ts → DividerHorizontal.style.ts}

@@ -1,19 +1,24 @@
 import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 
-export const styles = StyleSheet.create({
+export const horizontalStyles = StyleSheet.create({
   base: {
-    height: tokens["space-minuscule"],
+    height: 1,
     margin: 0,
-    borderBottomWidth: tokens["border-base"],
+    width: "auto",
     borderBottomColor: tokens["color-border"],
+    borderBottomWidth: tokens["border-base"],
   },
   large: {
     borderBottomWidth: tokens["border-thick"],
     opacity: 0.875,
   },
+  larger: {
+    borderBottomWidth: tokens["border-thicker"],
+    opacity: 0.625,
+  },
   largest: {
-    borderBottomWidth: tokens["space-small"],
+    borderBottomWidth: tokens["border-thickest"],
     opacity: 0.375,
   },
 });

package/src/Divider/DividerVertical.style.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const verticalStyles = StyleSheet.create({
+  base: {
+    margin: 0,
+    height: "100%",
+    width: 1,
+    borderRightWidth: tokens["border-base"],
+    borderRightColor: tokens["color-border"],
+  },
+  large: {
+    borderRightWidth: tokens["border-thick"],
+    opacity: 0.875,
+  },
+  larger: {
+    borderRightWidth: tokens["border-thicker"],
+    opacity: 0.625,
+  },
+  largest: {
+    borderRightWidth: tokens["border-thickest"],
+    opacity: 0.375,
+  },
+  vertical: {
+    borderRightColor: tokens["color-border"],
+  },
+});

package/src/Form/components/FormCache/FormCache.tsx

@@ -41,8 +41,6 @@ export function FormCache<T extends FieldValues>({
       // https://github.com/react-hook-form/react-hook-form/issues/2978
       setLocalCache(omit(formData, localCacheExclude));
     } else {
-      // @ts-expect-error Typescript thinks that the FieldValues defined in useWatch is different
-      // from the one in useFormContext
       setLocalCache(formData);
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);