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

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,14 +121,12 @@ 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
    */
-  readonly onBlur?: () => void;
+  readonly onBlur?: (event?: FocusEvent) => void;
 
   /**
    * VoiceOver will read this string when a user selects the associated element
@@ -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" },
         ]}
@@ -425,10 +436,10 @@ function InputTextInternal(
           setFocused(true);
           onFocus?.(event);
         }}
-        onBlur={() => {
+        onBlur={event => {
           _name && setFocusedInput("");
           setFocused(false);
-          onBlur?.();
+          onBlur?.(event);
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}
@@ -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,3 +1,4 @@
+import type { ReactElement } from "react";
 import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 
@@ -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.test.tsx

@@ -65,3 +65,112 @@ describe("with stepped variation", () => {
     expect(stepElements).toHaveLength(1);
   });
 });
+
+describe("ProgressBar (native) - UNSAFE_style", () => {
+  it("applies UNSAFE_style.container to the outer wrapper", () => {
+    const containerStyle = { padding: 12, backgroundColor: "papayawhip" };
+    render(
+      <ProgressBar
+        total={100}
+        current={40}
+        UNSAFE_style={{ container: containerStyle }}
+      />,
+    );
+
+    const progressBar = screen.getByRole("progressbar");
+
+    expect(progressBar.props.style).toEqual(
+      expect.objectContaining(containerStyle),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and track in progress variation", () => {
+    const progressBarContainer = { height: 22, borderRadius: 10 };
+    const track = { backgroundColor: "#eee" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        UNSAFE_style={{
+          progressBarContainer,
+          track,
+        }}
+      />,
+    );
+
+    const progressContainer = screen.getByTestId("progressbar-container");
+
+    expect(progressContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    const trackView = screen.getByTestId("progressbar-track");
+    expect(trackView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(track)]),
+    );
+  });
+
+  it("applies UNSAFE_style.inProgressFill and fill in progress variation", () => {
+    const inProgressFill = { backgroundColor: "#f59e0b" };
+    const fill = { backgroundColor: "#10b981" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        inProgress={10}
+        UNSAFE_style={{
+          inProgressFill,
+          fill,
+        }}
+      />,
+    );
+
+    const inProgressView = screen.getByTestId("progressbar-inprogress");
+    const fillView = screen.getByTestId("progressbar-fill");
+
+    expect(inProgressView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(inProgressFill)]),
+    );
+    expect(fillView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(fill)]),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and step in stepped variation", () => {
+    const progressBarContainer = { height: 12 };
+    const step = { backgroundColor: "#d1d5db" };
+
+    render(
+      <ProgressBar
+        variation="stepped"
+        total={4}
+        current={2}
+        inProgress={1}
+        UNSAFE_style={{ progressBarContainer, step }}
+      />,
+    );
+
+    const steppedContainer = screen.getByTestId("progressbar-container");
+
+    expect(steppedContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    // Steps are rendered with testIDs depending on state; collect all steps by known IDs
+    const stepNodes = [
+      ...screen.getAllByTestId("progress-step-completed"),
+      ...screen.getAllByTestId("progress-step-in-progress"),
+      ...screen.getAllByTestId("progress-step-incomplete"),
+    ];
+
+    // At least one step should exist and contain the custom style
+    expect(stepNodes.length).toBeGreaterThan(0);
+    stepNodes.forEach(node => {
+      expect(node.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(step)]),
+      );
+    });
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,8 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
-}: ProgressBarProps): JSX.Element {
+  UNSAFE_style,
+}: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
@@ -27,6 +28,7 @@ export function ProgressBar({
       accessible
       accessibilityRole="progressbar"
       accessibilityLabel={getA11yLabel()}
+      style={UNSAFE_style?.container}
     >
       {header}
       {variation === "stepped" ? (
@@ -38,31 +40,45 @@ export function ProgressBar({
           }
           loading={loading}
           inProgress={inProgress}
+          UNSAFE_style={UNSAFE_style}
         />
       ) : (
-        <View style={[styles.progressBarContainer, sizeStyles[size]]}>
+        <View
+          testID="progressbar-container"
+          style={[
+            styles.progressBarContainer,
+            sizeStyles[size],
+            UNSAFE_style?.progressBarContainer,
+          ]}
+        >
           <ProgressBarInner
+            testID="progressbar-track"
             width={100}
             animationDuration={0}
             color={
               reverseTheme ? undefined : tokens["color-interactive--background"]
             }
+            style={UNSAFE_style?.track}
           />
           {!loading && (
             <>
               {inProgress && inProgress > 0 ? (
                 <ProgressBarInner
+                  testID="progressbar-inprogress"
                   width={calculateWidth(total, current + inProgress)}
                   color={tokens["color-informative"]}
                   animationDuration={800}
+                  style={UNSAFE_style?.inProgressFill}
                 />
               ) : (
                 <></>
               )}
               <ProgressBarInner
+                testID="progressbar-fill"
                 width={calculateWidth(total, current)}
                 color={tokens["color-interactive"]}
                 animationDuration={600}
+                style={UNSAFE_style?.fill}
               />
             </>
           )}

package/src/ProgressBar/ProgressBarInner.tsx

@@ -1,37 +1,34 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
+import type { StyleProp, ViewStyle } from "react-native";
 import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarInnerProps {
   readonly width: number;
   readonly animationDuration?: number;
   readonly color?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
 }
 
 export function ProgressBarInner({
   width,
-  // animationDuration = 0,
   color,
-}: ProgressBarInnerProps): JSX.Element {
-  // Animation breaking on Android
-  // const [animatedOpacity] = useTiming({
-  //   duration: animationDuration,
-  //   fromValue: 0,
-  //   toValue: 1,
-  // });
+  style,
+  testID,
+}: ProgressBarInnerProps) {
   const styles = useStyles();
 
   return (
     <View
+      testID={testID}
       style={[
         styles.progressBarInner,
         {
           width: `${width}%`,
-          // opacity: animatedOpacity,
           ...(color && { backgroundColor: color }),
         },
+        style,
       ]}
     />
   );

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
+import type { ProgressBarUnsafeStyle } from "./types";
 
 interface ProgressBarSteppedProps {
   readonly total: number;
@@ -8,6 +9,7 @@ interface ProgressBarSteppedProps {
   readonly color?: string;
   readonly loading?: boolean;
   readonly inProgress?: number;
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
 
 export function ProgressBarStepped({
@@ -16,11 +18,19 @@ export function ProgressBarStepped({
   color,
   loading,
   inProgress,
+  UNSAFE_style,
 }: ProgressBarSteppedProps) {
   const styles = useStyles();
 
   return (
-    <View style={[styles.progressBarContainer, { height: 10 }]}>
+    <View
+      testID="progressbar-container"
+      style={[
+        styles.progressBarContainer,
+        { height: 10 },
+        UNSAFE_style?.progressBarContainer,
+      ]}
+    >
       {Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
@@ -39,6 +49,7 @@ export function ProgressBarStepped({
                 step <= inProgressSteps &&
                 styles.inProgressStep,
               lastStep && { marginRight: 0 },
+              UNSAFE_style?.step,
             ]}
             testID={
               isCompleted

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

@@ -18,8 +18,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -37,8 +39,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -56,8 +60,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(207, 79%, 57%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-inprogress"
     />
     <View
       style={
@@ -75,8 +81,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>
@@ -100,8 +108,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -119,8 +129,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -138,8 +150,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "50%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>

package/src/ProgressBar/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 
 export interface ProgressBarProps {
   /**
@@ -44,4 +45,25 @@ export interface ProgressBarProps {
    * @default base
    */
   readonly size?: "smaller" | "small" | "base";
+
+  /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+   * **last resort**. Using this may result in unexpected side effects.
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+
+export interface ProgressBarUnsafeStyle {
+  /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+  container?: StyleProp<ViewStyle>;
+  /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+  progressBarContainer?: StyleProp<ViewStyle>;
+  /** Styles applied to each step block in the stepped variation. */
+  step?: StyleProp<ViewStyle>;
+  /** Track/background bar in 'progress' variation (full-width inner) */
+  track?: StyleProp<ViewStyle>;
+  /** Filled/completed portion in 'progress' variation */
+  fill?: StyleProp<ViewStyle>;
+  /** In-progress overlay portion in 'progress' variation */
+  inProgressFill?: StyleProp<ViewStyle>;
 }

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}</>;