@jobber/components-native 0.86.1-JOB-136074-a7a2b82.0 → 0.86.2-JOB-89949-9a8f51e.6

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

@@ -1,11 +1,12 @@
+import React from "react";
 import type { TextAlign, TextColor } from "../Typography";
 export type ActionLabelVariation = Extract<TextColor, "interactive" | "destructive" | "learning" | "subtle" | "onPrimary">;
 type ActionLabelType = "default" | "cardTitle";
 interface ActionLabelProps {
     /**
-     * Text to display
+     * Text to display. Supports strings, numbers, and nested text nodes.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * Set the display text to disabled color
      */

package/dist/types/src/Form/components/FormCache/FormCache.d.ts

@@ -1,9 +1,9 @@
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
     readonly localCacheId?: string | string[];
     readonly localCacheKey?: string;
     readonly localCacheExclude?: string[];
-    readonly setLocalCache: (data: T) => void;
+    readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function FormCache<T extends FieldValues>({ localCacheExclude, localCacheKey, setLocalCache, }: FormCacheProps<T>): JSX.Element;
 export {};

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

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

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

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

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

@@ -1,8 +1,8 @@
 import type { MutableRefObject, RefObject } from "react";
-import type { ControllerProps, DeepPartial, FieldPath, FieldValues, Mode, UnpackNestedValue, UseFormReturn } from "react-hook-form";
+import type { ControllerProps, DefaultValues, FieldPath, FieldValues, Mode, UseFormReturn } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 export declare enum FormSubmitErrorType {
@@ -81,7 +81,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * The initial values of the form inputs
      * This should be available as soon as initialLoading is set to false
      */
-    initialValues?: FormValues<DeepPartial<T>>;
+    initialValues?: DefaultValues<T>;
     /**
      * When the validation should happen.
      * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".

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

@@ -1,11 +1,12 @@
+import React from "react";
 import type { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
 type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
 export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
 interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"base">, "selectable"> {
     /**
-     * Text to display.
+     * Text to display. Supports strings, numbers, and nested text nodes.
      */
-    readonly children: string;
+    readonly children: React.ReactNode;
     /**
      * The type of heading, e.g., "Title"
      */

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { OnTextLayoutEvent, TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
 import type { TypographyUnsafeStyle } from "../Typography/Typography";
 export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
@@ -31,9 +32,9 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
      */
     readonly align?: TextAlign;
     /**
-     * Text to display
+     * Text to display. Supports strings, numbers, and nested text nodes.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * Reverse theme for better display on dark background
      */

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

@@ -24,9 +24,9 @@ export interface TypographyProps<T extends FontFamily> {
      */
     readonly size?: TextSize;
     /**
-     * Text to display
+     * Text to display. Supports strings, numbers, and nested text nodes.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * The maximum amount of lines the text can occupy before being truncated with "...".
      * Uses predefined string values that correspond to a doubling scale for the amount of lines.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.86.1-JOB-136074-a7a2b82.0+a7a2b8288",
+  "version": "0.86.2-JOB-89949-9a8f51e.6+9a8f51e76",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -43,7 +43,7 @@
     "autolinker": "^4.0.0",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.30.0",
+    "react-hook-form": "^7.52.0",
     "react-intl": "^6.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
@@ -86,7 +86,6 @@
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
     "react-native": ">=0.76.0",
-    "react-native-build-config": "^0.3.2",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -96,10 +95,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "peerDependenciesMeta": {
-    "react-native-build-config": {
-      "optional": true
-    }
-  },
-  "gitHead": "a7a2b828816e7a2eae21ead0e0eba40d494e284a"
+  "gitHead": "9a8f51e766a4207a1f53367c96c62685d336868d"
 }

package/src/ActionLabel/ActionLabel.test.tsx

@@ -117,6 +117,18 @@ describe("ActionLabel", () => {
       });
     });
   });
+
+  it("supports nested inline content", () => {
+    const { Text } = require("../Text");
+    const { getByText, toJSON } = render(
+      <ActionLabel>
+        Before <Text variation="interactive">Inner</Text> After
+      </ActionLabel>,
+    );
+
+    expect(getByText("Inner")).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 function getStyleObject(el: ReactTestInstance) {

package/src/ActionLabel/ActionLabel.tsx

@@ -12,9 +12,9 @@ type ActionLabelType = "default" | "cardTitle";
 
 interface ActionLabelProps {
   /**
-   * Text to display
+   * Text to display. Supports strings, numbers, and nested text nodes.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Set the display text to disabled color

package/src/ActionLabel/__snapshots__/ActionLabel.test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionLabel supports nested inline content 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.125}
+  selectable={false}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "hsl(107, 58%, 33%)",
+      },
+      {
+        "textAlign": "center",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 18,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-regular",
+        },
+        {
+          "color": "hsl(107, 58%, 33%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   After
+</Text>
+`;

package/src/Form/Form.tsx

@@ -26,7 +26,6 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
-import { isEdgeToEdgeEnabled } from "../utils/buildConfig/isEdgeToEdgeEnabled";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -135,9 +134,6 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
-  // Check if edge-to-edge is enabled using utility function
-  const edgeToEdgeEnabled = isEdgeToEdgeEnabled();
-
   return (
     <FormProvider {...formMethods}>
       <>
@@ -165,7 +161,6 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
-            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -173,7 +168,6 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
-            extraScrollHeight={edgeToEdgeEnabled ? 20 : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
@@ -7,7 +7,7 @@ interface FormCacheProps<T extends FieldValues> {
   readonly localCacheId?: string | string[];
   readonly localCacheKey?: string;
   readonly localCacheExclude?: string[];
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function FormCache<T extends FieldValues>({
@@ -18,7 +18,7 @@ export function FormCache<T extends FieldValues>({
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 
-  const formData = useWatch<T>({ control });
+  const formData = useWatch({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,5 +46,6 @@ export function FormCache<T extends FieldValues>({
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 }

package/src/Form/context/types.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -27,7 +27,7 @@ export interface AtlantisFormContextProps {
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: TData) => void;
+    setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
 }

package/src/Form/hooks/useInternalForm.ts

@@ -1,4 +1,5 @@
 import type {
+  DeepPartial,
   FieldValues,
   UseFormHandleSubmit,
   UseFormReturn,
@@ -31,7 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
   readonly removeListenerRef: MutableRefObject<() => void>;
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function useInternalForm<T extends FieldValues, SubmitResponseType>({

package/src/Form/types.ts

@@ -1,17 +1,16 @@
 import type { MutableRefObject, RefObject } from "react";
 import type {
   ControllerProps,
-  DeepPartial,
+  DefaultValues,
   FieldPath,
   FieldValues,
   Mode,
-  UnpackNestedValue,
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -109,7 +108,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * The initial values of the form inputs
    * This should be available as soon as initialLoading is set to false
    */
-  initialValues?: FormValues<DeepPartial<T>>;
+  initialValues?: DefaultValues<T>;
 
   /**
    * When the validation should happen.

package/src/Heading/Heading.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Heading } from "./Heading";
+import { Text } from "../Text";
 
 describe("when Heading called with text as the only prop", () => {
   it("should match snapshot", () => {
@@ -81,3 +82,15 @@ describe("when Heading called with maxLines", () => {
     expect(view).toMatchSnapshot();
   });
 });
+
+describe("when Heading contains nested inline text", () => {
+  it("renders nested Text within Heading", () => {
+    const view = render(
+      <Heading>
+        Heading before <Text emphasis="strong">Inner</Text> after
+      </Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});

package/src/Heading/Heading.tsx

@@ -19,9 +19,9 @@ export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
 interface HeadingProps<T extends HeadingLevel>
   extends Pick<TypographyProps<"base">, "selectable"> {
   /**
-   * Text to display.
+   * Text to display. Supports strings, numbers, and nested text nodes.
    */
-  readonly children: string;
+  readonly children: React.ReactNode;
 
   /**
    * The type of heading, e.g., "Title"

package/src/Heading/__snapshots__/Heading.test.tsx.snap

@@ -268,3 +268,68 @@ exports[`when Heading called with title variation should match snapshot 1`] = `
   Title Heading
 </Text>
 `;
+
+exports[`when Heading contains nested inline text renders nested Text within Heading 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-bold",
+      },
+      {
+        "color": "hsl(197, 90%, 12%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Heading before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-semibold",
+        },
+        {
+          "color": "hsl(198, 35%, 21%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   after
+</Text>
+`;

package/src/InputCurrency/InputCurrency.tsx

@@ -80,6 +80,56 @@ const getKeyboard = (props: InputCurrencyProps) => {
   }
 };
 
+const computeDisplayFromNumericInput = (
+  numberedValue: number,
+  decimalNumbers: string,
+  decimalCount: number,
+  maxLength: number,
+  maxDecimalPlaces: number,
+  decimalPlaces: number,
+  formatNumber: (
+    value: number,
+    opts?: FormatNumberOptions | undefined,
+  ) => string,
+): {
+  onChangeValue: number | string;
+  displayValue: string;
+} => {
+  const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+  const stringValue =
+    decimalNumbers !== ""
+      ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+      : transformedValue.toString();
+
+  if (checkLastChar(stringValue)) {
+    const roundedDecimal = configureDecimal(
+      decimalCount,
+      maxDecimalPlaces,
+      stringValue,
+      decimalPlaces,
+    );
+    const internationalizedValueToDisplay = formatNumber(roundedDecimal, {
+      maximumFractionDigits: maxDecimalPlaces,
+    });
+
+    return {
+      onChangeValue: roundedDecimal,
+      displayValue: internationalizedValueToDisplay,
+    };
+  } else {
+    const internationalizedValueToDisplay =
+      formatNumber(transformedValue, {
+        maximumFractionDigits: maxDecimalPlaces,
+      }) + decimalNumbers;
+
+    return {
+      onChangeValue:
+        transformedValue.toString() + "." + decimalNumbers.slice(1),
+      displayValue: internationalizedValueToDisplay,
+    };
+  }
+};
+
 export function InputCurrency(props: InputCurrencyProps): JSX.Element {
   const {
     showCurrencySymbol = true,
@@ -99,54 +149,6 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
     internalValue,
   );
 
-  const setOnChangeAndDisplayValues = (
-    onChangeValue: number | string | undefined,
-    valueToDisplay: string | undefined,
-  ) => {
-    props.onChange?.(onChangeValue);
-    setDisplayValue(valueToDisplay);
-  };
-
-  const checkDecimalAndI18nOfDisplayValue = (
-    numberedValue: number,
-    decimalNumbers: string,
-    decimalCount: number,
-  ) => {
-    const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
-    const stringValue =
-      decimalNumbers !== ""
-        ? transformedValue.toString() + "." + decimalNumbers.slice(1)
-        : transformedValue.toString();
-
-    if (checkLastChar(stringValue)) {
-      const roundedDecimal = configureDecimal(
-        decimalCount,
-        maxDecimalPlaces,
-        stringValue,
-        decimalPlaces,
-      );
-      const internationalizedValueToDisplay = intl.formatNumber(
-        roundedDecimal,
-        {
-          maximumFractionDigits: maxDecimalPlaces,
-        },
-      );
-      setOnChangeAndDisplayValues(
-        roundedDecimal,
-        internationalizedValueToDisplay,
-      );
-    } else {
-      const internationalizedValueToDisplay =
-        intl.formatNumber(transformedValue, {
-          maximumFractionDigits: maxDecimalPlaces,
-        }) + decimalNumbers;
-      setOnChangeAndDisplayValues(
-        transformedValue.toString() + "." + decimalNumbers.slice(1),
-        internationalizedValueToDisplay,
-      );
-    }
-  };
-
   const handleChange = (newValue: string | undefined) => {
     const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(
       newValue,
@@ -158,19 +160,37 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
       : wholeIntegerValue;
 
     if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-      checkDecimalAndI18nOfDisplayValue(
+      const result = computeDisplayFromNumericInput(
         numberedValue,
         decimalNumbers,
         decimalCount,
+        maxLength,
+        maxDecimalPlaces,
+        decimalPlaces,
+        intl.formatNumber,
       );
+      const { onChangeValue, displayValue: valueToDisplay } = result;
+      props.onChange?.(onChangeValue);
+      setDisplayValue(valueToDisplay);
     } else {
       const value = numberedValue?.toString() + decimalNumbers;
-      setOnChangeAndDisplayValues(value, value);
+      props.onChange?.(value);
+      setDisplayValue(value);
     }
   };
 
   const { t } = useAtlantisI18n();
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -187,13 +207,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
             .replace(floatSeparators.decimal, ".");
         },
       }}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
       onBlur={() => {
         props.onBlur?.();