@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

package/src/InputPressable/InputPressable.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from "react";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
@@ -7,6 +7,7 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import type { XOR } from "ts-xor";
 import { useStyles } from "./InputPressable.style";
+import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 
 interface BasicSuffix {
@@ -51,6 +52,15 @@ export interface InputPressableProps {
    */
   readonly invalid?: boolean | string;
 
+  /**
+   * Controls the visibility of the mini label that appears inside the input
+   * when a value is entered. By default, the placeholder text moves up to
+   * become a mini label. Set to false to disable this behavior.
+   *
+   * @default true
+   */
+  readonly showMiniLabel?: boolean;
+
   /**
    * Callback that is called when the text input is focused
    * @param event
@@ -105,6 +115,7 @@ export function InputPressableInternal(
     disabled,
     invalid,
     error,
+    showMiniLabel = true,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -115,13 +126,10 @@ export function InputPressableInternal(
     focused,
   }: InputPressableProps,
   ref: Ref<InputPressableRef>,
-): JSX.Element {
+) {
   const hasValue = !!value;
-  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
 
-  useEffect(() => {
-    setHasMiniLabel(Boolean(value));
-  }, [value]);
+  const placeholderMode = getPlaceholderMode(showMiniLabel, value);
 
   const showClear = useShowClear({
     clearable,
@@ -139,7 +147,7 @@ export function InputPressableInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       focused={focused}
       error={error}
       invalid={invalid}
@@ -160,7 +168,8 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            !hasMiniLabel && commonInputStyles.inputEmpty,
+            placeholderMode === "normal" && commonInputStyles.inputEmpty,
+            placeholderMode === "hidden" && styles.withoutMiniLabel,
             disabled && commonInputStyles.inputDisabled,
             (Boolean(invalid) || error) && styles.inputInvalid,
           ]}
@@ -176,3 +185,20 @@ export function InputPressableInternal(
     </InputFieldWrapper>
   );
 }
+
+function getPlaceholderMode(
+  isMiniLabelAllowed: boolean,
+  internalValue: string | undefined,
+): InputFieldWrapperProps["placeholderMode"] {
+  const hasValue = Boolean(internalValue);
+
+  if (hasValue) {
+    if (isMiniLabelAllowed) {
+      return "mini";
+    } else {
+      return "hidden";
+    }
+  } else {
+    return "normal";
+  }
+}

package/src/InputSearch/InputSearch.tsx

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import React, { forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import { useDebounce } from "@jobber/hooks/useDebounce";
+import { useDebounce } from "@jobber/hooks";
 import { styles } from "./InputSearch.style";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";
@@ -16,6 +16,7 @@ export interface InputSearchProps
     | "autoFocus"
     | "placeholder"
     | "prefix"
+    | "showMiniLabel"
   > {
   /**
    * A callback function that handles the update of the new value of the property value.

package/src/InputSearch/components/FilterButton.tsx

@@ -10,7 +10,7 @@ interface FilterButtonProps {
 export function FilterButton({
   accessibilityLabel,
   onClick,
-}: FilterButtonProps): JSX.Element {
+}: FilterButtonProps) {
   return (
     <IconButton
       onPress={() => {

package/src/InputText/InputText.style.ts

@@ -27,5 +27,10 @@ export const useStyles = buildThemedStyles(tokens => {
       paddingTop:
         (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
     },
+
+    multilineWithoutMiniLabel: {
+      paddingTop: tokens["space-base"] + tokens["space-smallest"],
+      paddingBottom: tokens["space-base"] + tokens["space-smallest"],
+    },
   };
 });

package/src/InputText/InputText.test.tsx

@@ -4,6 +4,7 @@ import {
   fireEvent,
   render,
   renderHook,
+  screen,
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
@@ -548,6 +549,80 @@ describe("InputText", () => {
       expect(styleOverride.inputText.color).toEqual(flattenedStyle.color);
     });
   });
+
+  describe("showMiniLabel", () => {
+    it("defaults to true", () => {
+      const props = { placeholder: "placeholder", value: "value" };
+      renderInputText(props);
+      expect(
+        screen.getByText("placeholder", { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining({
+          placeholderMode: "mini",
+        }),
+      );
+    });
+
+    describe("when true", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: true, placeholder: "placeholder" };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("renders the placeholder as a mini label when the input has a value", () => {
+        const props = {
+          showMiniLabel: true,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "mini",
+          }),
+        );
+      });
+    });
+
+    describe("when false", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: false, placeholder: "placeholder" };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("does not render the placeholder when the input has a value", () => {
+        const props = {
+          showMiniLabel: false,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        renderInputText(props);
+        expect(
+          screen.queryByText("placeholder", { includeHiddenElements: true }),
+        ).toBeNull();
+      });
+    });
+  });
 });
 
 describe("Transform", () => {

package/src/InputText/InputText.tsx

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import type {
-  NativeSyntheticEvent,
+  FocusEvent,
   ReturnKeyTypeOptions,
   StyleProp,
-  TextInputFocusEventData,
   TextInputProps,
   TextStyle,
 } from "react-native";
@@ -66,6 +65,15 @@ export interface InputTextProps
    */
   readonly assistiveText?: string;
 
+  /**
+   * Controls the visibility of the mini label that appears inside the input
+   * when a value is entered. By default, the placeholder text moves up to
+   * become a mini label. Set to false to disable this behavior.
+   *
+   * @default true
+   */
+  readonly showMiniLabel?: boolean;
+
   /**
    * Determines what keyboard is shown
    */
@@ -113,9 +121,7 @@ export interface InputTextProps
    * Callback that is called when the text input is focused
    * @param event
    */
-  readonly onFocus?: (
-    event?: NativeSyntheticEvent<TextInputFocusEventData>,
-  ) => void;
+  readonly onFocus?: (event?: FocusEvent) => void;
 
   /**
    * Callback that is called when the text input is blurred
@@ -248,6 +254,7 @@ function InputTextInternal(
     name,
     placeholder,
     assistiveText,
+    showMiniLabel = true,
     keyboard,
     value: controlledValue,
     defaultValue,
@@ -295,7 +302,8 @@ function InputTextInternal(
 
   const hasValue = internalValue !== "" && internalValue !== undefined;
   const [focused, setFocused] = useState(false);
-  const { hasMiniLabel } = useMiniLabel(internalValue);
+  const placeholderMode = getPlaceholderMode(showMiniLabel, internalValue);
+  const miniLabelActive = placeholderMode === "mini";
 
   const textInputRef = useTextInputRef({ ref, onClear: handleClear });
 
@@ -370,7 +378,7 @@ function InputTextInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       assistiveText={assistiveText}
       focused={focused}
       error={error}
@@ -394,11 +402,14 @@ function InputTextInternal(
         style={[
           commonInputStyles.input,
           styles.inputPaddingTop,
-          !hasMiniLabel && commonInputStyles.inputEmpty,
+          !miniLabelActive && commonInputStyles.inputEmpty,
           disabled && commonInputStyles.inputDisabled,
           multiline && styles.multiLineInput,
           multiline && Platform.OS === "ios" && styles.multilineInputiOS,
-          multiline && hasMiniLabel && styles.multiLineInputWithMini,
+          multiline && miniLabelActive && styles.multiLineInputWithMini,
+          multiline &&
+            placeholderMode === "hidden" &&
+            styles.multilineWithoutMiniLabel,
           styleOverride?.inputText,
           loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
@@ -513,13 +524,19 @@ function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
   return textInputRef;
 }
 
-function useMiniLabel(internalValue: string): {
-  hasMiniLabel: boolean;
-} {
-  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
-  useEffect(() => {
-    setHasMiniLabel(Boolean(internalValue));
-  }, [internalValue]);
+function getPlaceholderMode(
+  isMiniLabelAllowed: boolean,
+  internalValue: string,
+): InputFieldWrapperProps["placeholderMode"] {
+  const hasValue = Boolean(internalValue);
 
-  return { hasMiniLabel };
+  if (hasValue) {
+    if (isMiniLabelAllowed) {
+      return "mini";
+    } else {
+      return "hidden";
+    }
+  } else {
+    return "normal";
+  }
 }

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -16,7 +16,7 @@ export function InputAccessoriesProvider({
   children,
 }: {
   readonly children: ReactNode;
-}): JSX.Element {
+}) {
   const inputAccessoryID = useRef(v4()).current;
   const {
     focusedInput,

package/src/InputTime/InputTime.tsx

@@ -11,9 +11,11 @@ import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import type { InputPressableProps } from "../InputPressable/InputPressable";
 
 interface InputTimeBaseProps
-  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">,
+    Pick<InputPressableProps, "showMiniLabel"> {
   /**
    * Defaulted to "always" so user can clear the time whenever there's a value.
    */
@@ -97,7 +99,7 @@ function formatInvalidState(
   return Boolean(error);
 }
 
-export function InputTime(props: InputTimeProps): JSX.Element {
+export function InputTime(props: InputTimeProps) {
   if (props.name) {
     return (
       <FormField name={props.name} validations={props.validations}>
@@ -129,9 +131,10 @@ function InternalInputTime({
   value,
   name,
   type = "scheduling",
+  showMiniLabel = true,
   onChange,
   showIcon = true,
-}: InputTimeProps): JSX.Element {
+}: InputTimeProps) {
   const [showPicker, setShowPicker] = useState(false);
   const { t, formatTime } = useAtlantisI18n();
   const { timeZone, timeFormat } = useAtlantisContext();
@@ -156,6 +159,7 @@ function InternalInputTime({
   return (
     <View style={styles.container}>
       <InputPressable
+        showMiniLabel={showMiniLabel}
         clearable={canClearTime}
         disabled={disabled}
         invalid={invalid}

package/src/Menu/Menu.tsx

@@ -20,11 +20,11 @@ import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
+export function Menu({ menuOptions, customActivator }: MenuProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [menuPosition, setMenuPosition] = useState<object>();
-  const activatorLayout = useRef<LayoutRectangle>();
-  const menuButtonRef = useRef<View | null>();
+  const activatorLayout = useRef<LayoutRectangle>(null);
+  const menuButtonRef = useRef<View>(null);
   const screenInfo = useScreenInformation();
 
   const { t } = useAtlantisI18n();

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

@@ -17,7 +17,7 @@ export function MenuOption({
   textTransform = "capitalize",
   onPress,
   setOpen,
-}: MenuOptionInternalProps): JSX.Element {
+}: MenuOptionInternalProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "heading";
   const styles = useStyles();

package/src/Menu/components/Overlay/Overlay.tsx

@@ -3,7 +3,7 @@ import { Pressable, View } from "react-native";
 import { useStyles } from "./Overlay.style";
 import type { OverlayProp } from "../../types";
 
-export function Overlay({ setOpen }: OverlayProp): JSX.Element {
+export function Overlay({ setOpen }: OverlayProp) {
   const styles = useStyles();
 
   return (

package/src/Menu/types.ts

@@ -1,4 +1,5 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
+import type { ReactElement } from "react";
 import type { TextAlign } from "../Typography";
 
 export interface MenuOptionProps {
@@ -15,9 +16,14 @@ export interface MenuOptionInternalProps extends MenuOptionProps {
   setOpen: (bool: boolean) => void;
 }
 
+export interface CustomActivatorProps {
+  readonly onPress?: () => void;
+  readonly onLongPress?: () => void;
+}
+
 export interface MenuProps {
   readonly menuOptions?: MenuOptionProps[];
-  readonly customActivator?: JSX.Element;
+  readonly customActivator?: ReactElement<CustomActivatorProps>;
 }
 
 export interface OverlayProp {

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
-}: ProgressBarProps): JSX.Element {
+}: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();

package/src/ProgressBar/ProgressBarInner.tsx

@@ -14,7 +14,7 @@ export function ProgressBarInner({
   width,
   // animationDuration = 0,
   color,
-}: ProgressBarInnerProps): JSX.Element {
+}: ProgressBarInnerProps) {
   // Animation breaking on Android
   // const [animatedOpacity] = useTiming({
   //   duration: animationDuration,

package/src/Select/Select.style.ts

@@ -14,6 +14,7 @@ export const useStyles = buildThemedStyles(tokens => {
         minHeight: tokens["space-largest"] + tokens["space-small"],
         marginVertical: 0,
         borderWidth: 0,
+        backgroundColor: "transparent",
       },
     ]),
 

package/src/Select/Select.tsx

@@ -110,7 +110,7 @@ export function Select({
   accessibilityLabel,
   name,
   testID,
-}: SelectProps): JSX.Element {
+}: SelectProps) {
   const { field, error } = useFormController({
     name,
     validations,
@@ -243,6 +243,6 @@ function getTestID(testID?: string): string {
   return "ATL-Select";
 }
 
-export function Option({ children }: SelectOption): JSX.Element {
+export function Option({ children }: SelectOption) {
   return <>{children}</>;
 }

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -19,7 +19,7 @@ export function SelectDefaultPicker({
   children,
   options,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const [show, setShow] = useState(false);
   const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -12,7 +12,7 @@ export function SelectDefaultPicker({
   options,
   disabled,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
   const { tokens } = useAtlantisTheme();

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.tsx

@@ -10,7 +10,7 @@ export function SelectInternalPicker({
   options,
   disabled,
   onChange,
-}: SelectInternalPickerProps): JSX.Element {
+}: SelectInternalPickerProps) {
   if (disabled) return <>{children}</>;
 
   if (isIOS14AndUp()) {

package/src/Select/components/SelectPressable/SelectPressable.tsx

@@ -13,10 +13,7 @@ type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> &
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export function SelectPressable({
-  children,
-  onPress,
-}: SelectPressableProps): JSX.Element {
+export function SelectPressable({ children, onPress }: SelectPressableProps) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const styles = useStyles();
   if (isScreenReaderEnabled) return <>{children}</>;

package/src/StatusLabel/StatusLabel.tsx

@@ -37,7 +37,7 @@ export function StatusLabel({
   text,
   alignment = "end",
   status = "success",
-}: StatusLabelProps): JSX.Element {
+}: StatusLabelProps) {
   const styles = useStyles();
 
   return (

package/src/Switch/Switch.tsx

@@ -20,7 +20,7 @@ interface WithLabelProps extends BaseSwitchProps {
 
 export type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
 
-export function Switch(props: SwitchProps): JSX.Element {
+export function Switch(props: SwitchProps) {
   const switchProps: SwitchProps = {
     ...props,
     accessibilityLabel: props.accessibilityLabel || props.label,

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -43,7 +43,7 @@ export function BaseSwitch({
   disabled = false,
   accessibilityLabel,
   name,
-}: BaseSwitchProps): JSX.Element {
+}: BaseSwitchProps) {
   const { field } = useFormController({
     name,
     value: value ?? defaultValue,
@@ -85,6 +85,12 @@ export function BaseSwitch({
       };
     }
   }
+  // Temporary fix for iOS 26. Remove when we upgrade to RN 0.81.
+  // https://github.com/facebook/react-native/pull/53389
+  const iOSBackgroundColor =
+    Platform.OS === "ios" && Platform.Version?.startsWith("26.")
+      ? undefined
+      : tokens["color-interactive--background"];
 
   return (
     <Switch
@@ -98,7 +104,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-interactive--background"]}
+      ios_backgroundColor={iOSBackgroundColor}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{

package/src/Text/Text.test.tsx

@@ -151,6 +151,16 @@ it("renders text with underline styling", () => {
   expect(text.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested Text children with mixed styles", () => {
+  const { getByText, toJSON } = render(
+    <Text>
+      Hello <Text emphasis="strong">World</Text>!
+    </Text>,
+  );
+  expect(getByText("World")).toBeDefined();
+  expect(toJSON()).toMatchSnapshot();
+});
+
 describe("UNSAFE_style", () => {
   it("applies custom styles via UNSAFE_style prop", () => {
     const customStyle = {

package/src/Text/Text.tsx

@@ -53,9 +53,9 @@ export interface TextProps
   readonly align?: TextAlign;
 
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Reverse theme for better display on dark background
@@ -143,7 +143,7 @@ export function Text({
   underline,
   selectable,
   onTextLayout,
-}: TextProps): JSX.Element {
+}: TextProps) {
   const accessibilityRole: TextAccessibilityRole = "text";
 
   return (