@jobber/components-native 0.54.4-JOB-88641.9 → 0.54.4-fix-inline.6

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -13,9 +13,11 @@ import { styles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
+import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { TextVariation, typographyStyles } from "../Typography";
 import { Text } from "../Text";
+import { ActivityIndicator } from "../ActivityIndicator";
 
 export type Clearable = "never" | "while-editing" | "always";
 
@@ -88,8 +90,33 @@ export interface InputFieldWrapperProps {
    * Custom styling to override default style of the input field
    */
   readonly styleOverride?: InputFieldStyleOverride;
+
+  /**
+   * Add a toolbar below the input field for actions like rewriting the text.
+   */
+  readonly toolbar?: React.ReactNode;
+
+  /**
+   * Change the behaviour of when the toolbar becomes visible.
+   */
+  readonly toolbarVisibility?: "always" | "while-editing";
+
+  /**
+   * Show loading indicator.
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Change the type of loading indicator to spinner or glimmer.
+   */
+  readonly loadingType?: "spinner" | "glimmer";
 }
 
+export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID =
+  "ATL-InputFieldWrapper-Glimmers";
+export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID =
+  "ATL-InputFieldWrapper-Spinner";
+
 export function InputFieldWrapper({
   invalid,
   disabled,
@@ -105,11 +132,20 @@ export function InputFieldWrapper({
   onClear,
   showClearAction = false,
   styleOverride,
+  toolbar,
+  toolbarVisibility = "while-editing",
+  loading = false,
+  loadingType = "spinner",
 }: InputFieldWrapperProps): JSX.Element {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
   warnIfClearActionWithNoOnClear(onClear, showClearAction);
   const inputInvalid = Boolean(invalid) || Boolean(error);
+  const isToolbarVisible =
+    toolbar && (toolbarVisibility === "always" || focused);
+
+  const showLoadingSpinner = loading && loadingType === "spinner";
+  const showLoadingGlimmer = loading && loadingType === "glimmer";
 
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
@@ -123,78 +159,109 @@ export function InputFieldWrapper({
           styleOverride?.container,
         ]}
       >
-        {prefix?.icon && (
-          <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>
-          {prefix?.label && hasValue && (
-            <PrefixLabel
+        <View style={styles.field}>
+          {prefix?.icon && (
+            <PrefixIcon
               disabled={disabled}
               focused={focused}
               hasMiniLabel={hasMiniLabel}
               inputInvalid={inputInvalid}
-              label={prefix.label}
-              styleOverride={styleOverride?.prefixLabel}
+              icon={prefix.icon}
             />
           )}
-          {children}
-          {(showClearAction || suffix?.label || suffix?.icon) && (
-            <View style={styles.inputEndContainer}>
-              {showClearAction && (
-                <ClearAction
-                  hasMarginRight={!!suffix?.icon || !!suffix?.label}
-                  onPress={handleClear}
-                />
-              )}
-              {suffix?.label && hasValue && (
-                <SuffixLabel
-                  disabled={disabled}
-                  focused={focused}
-                  hasMiniLabel={hasMiniLabel}
-                  inputInvalid={inputInvalid}
-                  label={suffix.label}
-                  hasLeftMargin={!showClearAction}
-                  styleOverride={styleOverride?.suffixLabel}
-                />
-              )}
-              {suffix?.icon && (
-                <SuffixIcon
-                  disabled={disabled}
-                  focused={focused}
-                  hasMiniLabel={hasMiniLabel}
-                  hasLeftMargin={!!(!showClearAction || suffix?.label)}
-                  inputInvalid={inputInvalid}
-                  icon={suffix.icon}
-                  onPress={suffix.onPress}
-                />
-              )}
+          <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>
-          )}
+            {prefix?.label && hasValue && (
+              <PrefixLabel
+                disabled={disabled}
+                focused={focused}
+                hasMiniLabel={hasMiniLabel}
+                inputInvalid={inputInvalid}
+                label={prefix.label}
+                styleOverride={styleOverride?.prefixLabel}
+              />
+            )}
+            {children}
+
+            {showLoadingGlimmer && (
+              <View
+                testID={INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID}
+                style={[
+                  styles.loadingGlimmers,
+                  hasValue && styles.loadingGlimmersHasValue,
+                ]}
+              >
+                <Glimmer size="small" width="80%" />
+                <Glimmer size="small" />
+                <Glimmer size="small" width="70%" />
+              </View>
+            )}
+
+            {(showClearAction ||
+              suffix?.label ||
+              suffix?.icon ||
+              showLoadingSpinner) && (
+              <View style={styles.inputEndContainer}>
+                {showClearAction && (
+                  <ClearAction
+                    hasMarginRight={!!suffix?.icon || !!suffix?.label}
+                    onPress={handleClear}
+                  />
+                )}
+                {suffix?.label && hasValue && (
+                  <SuffixLabel
+                    disabled={disabled}
+                    focused={focused}
+                    hasMiniLabel={hasMiniLabel}
+                    inputInvalid={inputInvalid}
+                    label={suffix.label}
+                    hasLeftMargin={!showClearAction}
+                    styleOverride={styleOverride?.suffixLabel}
+                  />
+                )}
+
+                {showLoadingSpinner && (
+                  <View style={styles.loadingSpinner}>
+                    <ActivityIndicator
+                      testID={INPUT_FIELD_WRAPPER_SPINNER_TEST_ID}
+                    />
+                  </View>
+                )}
+
+                {suffix?.icon && (
+                  <SuffixIcon
+                    disabled={disabled}
+                    focused={focused}
+                    hasMiniLabel={hasMiniLabel}
+                    hasLeftMargin={!!(!showClearAction || suffix?.label)}
+                    inputInvalid={inputInvalid}
+                    icon={suffix.icon}
+                    onPress={suffix.onPress}
+                  />
+                )}
+              </View>
+            )}
+          </View>
         </View>
+
+        {isToolbarVisible && <View style={styles.toolbar}>{toolbar}</View>}
       </View>
       {assistiveText && !error && !invalid && (
         <Text

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

@@ -17,6 +17,7 @@ export function ClearAction({
   hasMarginRight = false,
 }: ClearActionProps): JSX.Element {
   const { t } = useAtlantisI18n();
+
   return (
     <Pressable
       style={[styles.container, hasMarginRight && styles.addedMargin]}

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -15,12 +15,12 @@ import { typographyStyles } from "../../../Typography";
 import { styles } from "../../InputFieldWrapper.style";
 
 export interface PrefixLabelProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid: boolean;
-  label: string;
-  styleOverride?: StyleProp<TextStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid: boolean;
+  readonly label: string;
+  readonly styleOverride?: StyleProp<TextStyle>;
 }
 
 export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
@@ -68,12 +68,12 @@ export function PrefixLabel({
 }
 
 export interface PrefixIconProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  icon: IconNames;
-  styleOverride?: StyleProp<ViewStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly icon: IconNames;
+  readonly styleOverride?: StyleProp<ViewStyle>;
 }
 
 export function PrefixIcon({

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -15,13 +15,13 @@ import { typographyStyles } from "../../../Typography";
 import { styles } from "../../InputFieldWrapper.style";
 
 export interface SuffixLabelProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  label: string;
-  hasLeftMargin?: boolean;
-  styleOverride?: StyleProp<TextStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly label: string;
+  readonly hasLeftMargin?: boolean;
+  readonly styleOverride?: StyleProp<TextStyle>;
 }
 
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
@@ -71,13 +71,13 @@ export function SuffixLabel({
 }
 
 export interface SuffixIconProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  icon: IconNames;
-  hasLeftMargin?: boolean;
-  onPress?: () => void;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly icon: IconNames;
+  readonly hasLeftMargin?: boolean;
+  readonly onPress?: () => void;
 }
 
 export function SuffixIcon({

package/src/InputNumber/InputNumber.tsx

@@ -36,12 +36,14 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
     }
   };
   const { t } = useAtlantisI18n();
+
   const handleChange = (newValue: number | string | undefined) => {
     props.onChange?.(newValue);
   };
 
   const { inputTransform: convertToString, outputTransform: convertToNumber } =
     useNumberTransform(props.value);
+
   return (
     <InputText
       {...props}
@@ -69,10 +71,12 @@ function hasPeriodAtEnd(value: string) {
   // matches patterns like ".", "0.", "12.", "+1.", and "-0."
   return !!value?.match(/^[-+]?[0-9]*\.$/);
 }
+
 function hasScientificNotationAtEnd(value: string) {
   // matches patterns like "1e", "+2e", "1.2e" and "-3e"
   return !!value?.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/);
 }
+
 function hasPlusMinusAtEnd(value: string) {
   // matches "+" and "-"
   return !!value?.match(/^[-+]+$/);
@@ -92,6 +96,7 @@ export function shouldShowUserValue(value: string): boolean {
   ];
   const isSpecial = (v: string) =>
     specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+
   return isSpecial(value);
 }
 
@@ -105,9 +110,11 @@ export function useNumberTransform(controlledValue: number | undefined): {
 
   const convertToNumber = (newValue: string) => {
     setTypedValue(newValue);
+
     if (newValue?.match?.(NUMBER_VALIDATION_REGEX)) {
       return parseFloat(newValue);
     }
+
     return newValue;
   };
 
@@ -115,6 +122,7 @@ export function useNumberTransform(controlledValue: number | undefined): {
     if (shouldShowUserValue(typedValue)) {
       return typedValue;
     }
+
     return internalValue?.toString() || undefined;
   };
 

package/src/InputPassword/InputPassword.test.tsx

@@ -8,6 +8,7 @@ jest.mock("../InputFieldWrapper", () => ({
   ...jest.requireActual("../InputFieldWrapper"),
   InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
     MockInputFieldWrapper(props);
+
     return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
   },
 }));

package/src/InputPassword/InputPassword.tsx

@@ -15,7 +15,7 @@ export interface InputPasswordProps
    *
    * @default true
    */
-  usePrivacyEye?: boolean;
+  readonly usePrivacyEye?: boolean;
 }
 
 function InputPasswordInternal(
@@ -43,6 +43,7 @@ function InputPasswordInternal(
         onPress: handleOnPress,
       };
     }
+
     return undefined;
   };
 

package/src/InputPressable/InputPressable.test.tsx

@@ -8,6 +8,7 @@ jest.mock("../InputFieldWrapper", () => ({
   ...jest.requireActual("../InputFieldWrapper"),
   InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
     MockInputFieldWrapper(props);
+
     return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
   },
 }));

package/src/InputSearch/InputSearch.tsx

@@ -54,6 +54,7 @@ function SearchInputInternal(
 
   useEffect(() => {
     delayedSearch(value);
+
     return delayedSearch.cancel;
   }, [value, delayedSearch]);
 

package/src/InputText/InputText.test.tsx

@@ -75,6 +75,17 @@ describe("InputText", () => {
       );
     });
 
+    describe("readonly", () => {
+      it.each([[false], [true]])("sets the readOnly to %s", expected => {
+        const { getByTestId } = renderInputText({
+          testID: "InputText",
+          readonly: expected,
+        });
+
+        expect(getByTestId("InputText").props.readOnly).toBe(expected);
+      });
+    });
+
     it("renders a InputText with placeholder", () => {
       const props = { placeholder: "Foobar" };
       renderInputText(props);

package/src/InputText/InputText.tsx

@@ -25,11 +25,18 @@ import { Clearable, useShowClear } from "@jobber/hooks";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
-import { InputFieldStyleOverride } from "../InputFieldWrapper/InputFieldWrapper";
+import {
+  InputFieldStyleOverride,
+  InputFieldWrapperProps,
+} from "../InputFieldWrapper/InputFieldWrapper";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 
-export interface InputTextProps {
+export interface InputTextProps
+  extends Pick<
+    InputFieldWrapperProps,
+    "toolbar" | "toolbarVisibility" | "loading" | "loadingType"
+  > {
   /**
    * Highlights the field red and shows message below (if string) to indicate an error
    */
@@ -40,6 +47,11 @@ export interface InputTextProps {
    */
   readonly disabled?: boolean;
 
+  /**
+   * Makes the input read-only
+   */
+  readonly readonly?: boolean;
+
   /**
    * Name of the input.
    */
@@ -233,6 +245,7 @@ function InputTextInternal(
   {
     invalid,
     disabled,
+    readonly = false,
     name,
     placeholder,
     assistiveText,
@@ -260,6 +273,10 @@ function InputTextInternal(
     testID,
     secureTextEntry,
     styleOverride,
+    toolbar,
+    toolbarVisibility,
+    loading,
+    loadingType,
   }: InputTextProps,
   ref: Ref<InputTextRef>,
 ) {
@@ -361,6 +378,10 @@ function InputTextInternal(
       onClear={handleClear}
       showClearAction={showClear}
       styleOverride={styleOverride}
+      toolbar={toolbar}
+      toolbarVisibility={toolbarVisibility}
+      loading={loading}
+      loadingType={loadingType}
     >
       <TextInput
         inputAccessoryViewID={inputAccessoryID || undefined}
@@ -377,7 +398,10 @@ function InputTextInternal(
           multiline && Platform.OS === "ios" && styles.multilineInputiOS,
           multiline && hasMiniLabel && styles.multiLineInputWithMini,
           styleOverride?.inputText,
+          loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
+        // @ts-expect-error - does exist on 0.71 and up https://github.com/facebook/react-native/pull/39281
+        readOnly={readonly}
         editable={!disabled}
         keyboardType={keyboard}
         value={inputTransform(internalValue)}
@@ -392,6 +416,7 @@ function InputTextInternal(
         blurOnSubmit={shouldBlurOnSubmit}
         accessibilityLabel={accessibilityLabel || placeholder}
         accessibilityHint={accessibilityHint}
+        accessibilityState={{ busy: loading }}
         secureTextEntry={secureTextEntry}
         {...androidA11yProps}
         onFocus={event => {

package/src/InputText/context/InputAccessoriesProvider.test.tsx

@@ -31,7 +31,7 @@ describe("InputAccessories", () => {
   const mockInputOneFocus = jest.fn();
   const mockInputTwoFocus = jest.fn();
 
-  function InputWrapper({ focusedInput }: { focusedInput: string }) {
+  function InputWrapper({ focusedInput }: { readonly focusedInput: string }) {
     const { register, setFocusedInput, unregister } = useContext(
       InputAccessoriesContext,
     );
@@ -40,12 +40,14 @@ describe("InputAccessories", () => {
       register(inputOneName, () => mockInputOneFocus());
       register(inputTwoName, () => mockInputTwoFocus());
       setFocusedInput(focusedInput);
+
       return () => {
         unregister(inputOneName);
         unregister(inputTwoName);
         setFocusedInput("");
       };
     }, [register, setFocusedInput, unregister, focusedInput]);
+
     return (
       <>
         <InputText
@@ -58,6 +60,7 @@ describe("InputAccessories", () => {
       </>
     );
   }
+
   function SetupInputAccessoriesTest(focusedInput: string) {
     mockUseFormController.mockImplementation(({ name, value, validations }) => {
       const { field, error } = actualUseFormController({
@@ -65,8 +68,10 @@ describe("InputAccessories", () => {
         value,
         validations,
       });
+
       return { field, error };
     });
+
     return render(<InputWrapper focusedInput={focusedInput} />, {
       wrapper: InputAccessoriesProvider,
     });

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -15,7 +15,7 @@ import { styles } from "./InputAccessoriesProvider.style";
 export function InputAccessoriesProvider({
   children,
 }: {
-  children: ReactNode;
+  readonly children: ReactNode;
 }): JSX.Element {
   const inputAccessoryID = useRef(v4()).current;
   const {

package/src/InputTime/utils/index.ts

@@ -15,6 +15,7 @@ export function roundUpToNearestMinutes(
   minutes: MinutesIncrement,
 ): Date {
   const ms = 1000 * 60 * minutes;
+
   return new Date(Math.ceil(date.getTime() / ms) * ms);
 }
 

package/src/Menu/Menu.style.ts

@@ -9,7 +9,7 @@ export const styles = StyleSheet.create({
     backgroundColor: tokens["color-surface"],
     paddingHorizontal: tokens["space-small"],
     paddingVertical: tokens["space-small"] + tokens["space-smallest"],
-    borderRadius: tokens["radius-larger"],
+    borderRadius: tokens["radius-base"],
     width: menuWidth,
     ...tokens["shadow-high"],
   },

package/src/Menu/Menu.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useRef, useState } from "react";
 import {
+  Keyboard,
   LayoutRectangle,
+  Platform,
   Pressable,
   View,
   useWindowDimensions,
@@ -33,7 +35,7 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
     }
   }, [screenInfo, activatorLayout]);
 
-  const activatorOnPress = (onPress?: () => void) => {
+  const openMenu = () => {
     menuButtonRef.current?.measureInWindow(
       (x: number, y: number, width: number, height: number) => {
         activatorLayout.current = {
@@ -44,11 +46,23 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
         };
         findMenuLayout();
         setOpen(true);
-        onPress && onPress();
       },
     );
   };
 
+  const activatorOnPress = (onPress?: () => void) => {
+    onPress && onPress();
+
+    if (Platform.OS === "ios" && Keyboard.isVisible()) {
+      // On iOS, the keyboard height causes problems with the menu positioning logic.
+      // Wait until the keyboard is fully hidden before we show the menu.
+      onKeyboardDidHide(openMenu);
+      Keyboard.dismiss();
+    } else {
+      openMenu();
+    }
+  };
+
   return (
     <>
       <View
@@ -113,3 +127,10 @@ function useScreenInformation() {
 
   return { headerHeight, windowWidth, windowHeight };
 }
+
+function onKeyboardDidHide(callback: () => void) {
+  const listener = Keyboard.addListener("keyboardDidHide", () => {
+    listener.remove();
+    callback();
+  });
+}

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -20,6 +20,7 @@ export function MenuOption({
 }: MenuOptionInternalProps): JSX.Element {
   const destructiveColor = "critical";
   const textVariation = destructive ? destructiveColor : "heading";
+
   return (
     <View testID="ATL-MENU-OPTIONS">
       <Pressable