@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/src/Glimmer/Glimmer.test.tsx

@@ -46,7 +46,7 @@ describe("Glimmer", () => {
     );
   });
 
-  it("renders sets the correct width", () => {
+  it("renders sets the correct width", async () => {
     jest.useFakeTimers();
 
     // Spy on Animated.timing to verify the animation configuration
@@ -54,7 +54,7 @@ describe("Glimmer", () => {
 
     render(<Glimmer />);
 
-    act(() => {
+    await act(async () => {
       fireEvent(screen.getByTestId(GLIMMER_TEST_ID), "onLayout", {
         nativeEvent: { layout: { width: 300 } },
       });

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 nesting text elements.
    */
-  readonly children: string;
+  readonly children: React.ReactNode;
 
   /**
    * The type of heading, e.g., "Title"
@@ -71,7 +71,7 @@ export function Heading<T extends HeadingLevel = "heading">({
   maxLines = "unlimited",
   allowFontScaling = true,
   selectable,
-}: HeadingProps<T>): JSX.Element {
+}: HeadingProps<T>) {
   const headingStyle = getHeadingStyle(level, variation);
   const accessibilityRole = "header";
 

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/Icon/Icon.tsx

@@ -37,7 +37,7 @@ export function Icon({
   size = "base",
   customColor,
   testID,
-}: IconProps): JSX.Element {
+}: IconProps) {
   const { svgStyle, paths, viewBox } = getIcon({
     name,
     color,

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

@@ -433,6 +433,13 @@ exports[`renders thumbsDown icon 1`] = `
     ]
   }
   testID="thumbsDown"
+  transform={
+    [
+      {
+        "scaleY": -1,
+      },
+    ]
+  }
   vbHeight={24}
   vbWidth={24}
 >

package/src/IconButton/IconButton.tsx

@@ -50,7 +50,7 @@ export function IconButton({
   onPress,
   accessibilityLabel,
   testID,
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps) {
   const styles = useStyles();
 
   return (

package/src/InputCurrency/InputCurrency.tsx

@@ -80,7 +80,57 @@ const getKeyboard = (props: InputCurrencyProps) => {
   }
 };
 
-export function InputCurrency(props: InputCurrencyProps): JSX.Element {
+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) {
   const {
     showCurrencySymbol = true,
     maxDecimalPlaces = 5,
@@ -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?.();
 

package/src/InputDate/InputDate.tsx

@@ -8,9 +8,11 @@ import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import type { InputPressableProps } from "../InputPressable/InputPressable";
 
 interface BaseInputDateProps
-  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">,
+    Pick<InputPressableProps, "showMiniLabel"> {
   /**
    * Defaulted to "always" so user can clear the dates whenever there's a value.
    */
@@ -109,7 +111,7 @@ const display = Platform.OS === "ios" ? "inline" : "default";
 /**
  * Allow users to select a date using the device date picker.
  */
-export function InputDate(props: InputDateProps): JSX.Element {
+export function InputDate(props: InputDateProps) {
   if (props.name) {
     return (
       <FormField<Date>
@@ -145,11 +147,12 @@ function InternalInputDate({
   minDate,
   placeholder,
   value,
+  showMiniLabel = true,
   name,
   onChange,
   accessibilityLabel,
   accessibilityHint,
-}: InputDateProps): JSX.Element {
+}: InputDateProps) {
   const [showPicker, setShowPicker] = useState(false);
   const { t, locale, formatDate } = useAtlantisI18n();
 
@@ -174,6 +177,7 @@ function InternalInputDate({
   return (
     <>
       <InputPressable
+        showMiniLabel={showMiniLabel}
         focused={showPicker}
         clearable={canClearDate}
         disabled={disabled}

package/src/InputEmail/InputEmail.tsx

@@ -2,11 +2,25 @@ import type { Ref } from "react";
 import React, { forwardRef } from "react";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export const InputEmail = forwardRef(InputEmailInternal);
 type InputEmailProps = Omit<InputTextProps, "keyboard">;
 
 function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
+  const { t } = useAtlantisI18n();
+
+  const defaultValidations = {
+    pattern: {
+      value:
+        /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
+      message: t("InputEmail.enterEmail"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -14,14 +28,7 @@ function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
       autoCapitalize="none"
       autoCorrect={false}
       keyboard={"email-address"}
-      validations={{
-        pattern: {
-          value:
-            /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
-          message: "Enter a valid email address (email@example.com)",
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -43,6 +43,7 @@ export const useStyles = buildThemedStyles(tokens => {
       right: 0,
       bottom: 0,
       left: 0,
+      zIndex: 1,
     },
 
     miniLabel: {
@@ -53,7 +54,6 @@ export const useStyles = buildThemedStyles(tokens => {
       maxHeight:
         (typographyStyles.defaultSize.lineHeight || 0) +
         tokens["space-smaller"],
-      zIndex: 1,
     },
     // Prevents the miniLabel from cutting off the ClearAction button
     miniLabelShowClearAction: {

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render, renderHook } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react-native";
 import type { ViewStyle } from "react-native";
 import { Text } from "react-native";
 import type { InputFieldWrapperProps } from ".";
@@ -311,4 +316,46 @@ describe("InputFieldWrapper", () => {
       expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
     });
   });
+
+  describe("placeholderMode", () => {
+    it("renders the placeholder in its normal position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "normal",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.defaultSize,
+      );
+    });
+
+    it("renders the placeholder in its mini label position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "mini",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.smallSize,
+      );
+    });
+
+    it("does not render the placeholder", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "hidden",
+      });
+      expect(
+        screen.queryByText("placeholder", {
+          includeHiddenElements: true,
+        }),
+      ).toBeNull();
+    });
+  });
 });

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -43,7 +43,14 @@ export interface InputFieldWrapperProps {
    */
   readonly assistiveText?: string;
 
-  readonly hasMiniLabel?: boolean;
+  /**
+   * Controls how the placeholder text is displayed.
+   * - normal: the placeholder text will be displayed in the normal placeholder position
+   * - mini: the placeholder text will float above the input value
+   * - hidden: the placeholder text will not be displayed
+   * @default "normal"
+   */
+  readonly placeholderMode?: "normal" | "mini" | "hidden";
 
   readonly hasValue?: boolean;
 
@@ -119,7 +126,7 @@ export function InputFieldWrapper({
   assistiveText,
   prefix,
   suffix,
-  hasMiniLabel = false,
+  placeholderMode = "normal",
   hasValue = false,
   error,
   focused = false,
@@ -131,7 +138,7 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
-}: InputFieldWrapperProps): JSX.Element {
+}: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
   warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -143,6 +150,9 @@ export function InputFieldWrapper({
   const showLoadingGlimmer = loading && loadingType === "glimmer";
   const styles = useStyles();
 
+  const placeholderVisible = placeholderMode !== "hidden";
+  const miniLabelActive = placeholderMode === "mini";
+
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
       <View
@@ -160,35 +170,36 @@ export function InputFieldWrapper({
             <PrefixIcon
               disabled={disabled}
               focused={focused}
-              hasMiniLabel={hasMiniLabel}
               inputInvalid={inputInvalid}
               icon={prefix.icon}
             />
           )}
           <View style={[styles.inputContainer]}>
-            <View
-              style={[
-                !!placeholder && styles.label,
-                hasMiniLabel && styles.miniLabel,
-                disabled && styles.disabled,
-                hasMiniLabel &&
-                  showClearAction &&
-                  styles.miniLabelShowClearAction,
-              ]}
-              pointerEvents="none"
-            >
-              <Placeholder
-                placeholder={placeholder}
-                labelVariation={getLabelVariation(error, invalid, disabled)}
-                hasMiniLabel={hasMiniLabel}
-                styleOverride={styleOverride?.placeholderText}
-              />
-            </View>
+            {placeholderVisible && (
+              <View
+                style={[
+                  !!placeholder && styles.label,
+                  miniLabelActive && styles.miniLabel,
+                  disabled && styles.disabled,
+                  miniLabelActive &&
+                    showClearAction &&
+                    styles.miniLabelShowClearAction,
+                ]}
+                pointerEvents="none"
+              >
+                <Placeholder
+                  placeholder={placeholder}
+                  labelVariation={getLabelVariation(error, invalid, disabled)}
+                  miniLabelActive={miniLabelActive}
+                  styleOverride={styleOverride?.placeholderText}
+                />
+              </View>
+            )}
             {prefix?.label && hasValue && (
               <PrefixLabel
                 disabled={disabled}
                 focused={focused}
-                hasMiniLabel={hasMiniLabel}
+                miniLabelActive={miniLabelActive}
                 inputInvalid={inputInvalid}
                 label={prefix.label}
                 styleOverride={styleOverride?.prefixLabel}
@@ -225,7 +236,7 @@ export function InputFieldWrapper({
                   <SuffixLabel
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
+                    miniLabelActive={miniLabelActive}
                     inputInvalid={inputInvalid}
                     label={suffix.label}
                     hasLeftMargin={!showClearAction}
@@ -245,7 +256,6 @@ export function InputFieldWrapper({
                   <SuffixIcon
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
                     hasLeftMargin={!!(!showClearAction || suffix?.label)}
                     inputInvalid={inputInvalid}
                     icon={suffix.icon}
@@ -332,12 +342,12 @@ function Placeholder({
   placeholder,
   styleOverride,
   labelVariation,
-  hasMiniLabel,
+  miniLabelActive,
 }: {
   readonly placeholder?: string;
   readonly styleOverride: StyleProp<TextStyle>;
   readonly labelVariation: TextVariation;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
 }) {
   const typographyStyles = useTypographyStyles();
 
@@ -348,7 +358,7 @@ function Placeholder({
           hideFromScreenReader={true}
           maxLines="single"
           variation={labelVariation}
-          level={hasMiniLabel ? "textSupporting" : "text"}
+          level={miniLabelActive ? "textSupporting" : "text"}
         >
           {placeholder}
         </Text>
@@ -361,7 +371,7 @@ function Placeholder({
           style={[
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
               ? typographyStyles.smallSize
               : typographyStyles.defaultSize,
             styleOverride,

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -15,7 +15,7 @@ interface ClearActionProps {
 export function ClearAction({
   onPress,
   hasMarginRight = false,
-}: ClearActionProps): JSX.Element {
+}: ClearActionProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();