@jobber/components-native 0.84.4-JOB-138679-b1552ab.68 → 0.84.4-match-mobi-accfa8a.9

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

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import React from "react";
-import type { Modalize } from "react-native-modalize";
 export interface BottomSheetProps {
     readonly children: ReactNode;
     /**
@@ -24,5 +23,10 @@ export interface BottomSheetProps {
      */
     readonly onClose?: () => void;
 }
-export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<import("react-native-modalize/lib/options").IHandles | undefined>>;
-export type BottomSheetRef = Modalize | undefined;
+export interface BottomSheetRef {
+    open: () => void;
+    close: () => void;
+}
+export declare function BottomSheet({ children, showCancel, loading, heading, onOpen, onClose, ref, }: BottomSheetProps & {
+    readonly ref?: React.Ref<BottomSheetRef>;
+}): React.JSX.Element;

package/dist/types/src/BottomSheet/BottomSheet.style.d.ts

@@ -1,23 +1,13 @@
 export declare const useStyles: () => {
-    overlayModalize: {
+    backdrop: {
         backgroundColor: string;
     };
-    overlay: {
-        backgroundColor: string;
-        height: number;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    };
-    modal: {
+    background: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        paddingTop: number;
     };
-    children: {
-        paddingBottom: number;
+    footerContainer: {
+        backgroundColor: string;
     };
     header: {
         paddingHorizontal: number;
@@ -29,4 +19,7 @@ export declare const useStyles: () => {
         marginTop: number;
         marginBottom: number;
     };
+    handle: {
+        display: "none";
+    };
 };

package/dist/types/src/BottomSheet/hooks/useBottomSheetBackHandler.d.ts

@@ -0,0 +1,8 @@
+import type BottomSheet from "@gorhom/bottom-sheet";
+/**
+ * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet component
+ */
+export declare function useBottomSheetBackHandler(bottomSheetRef: React.RefObject<BottomSheet | null>): {
+    handleSheetPositionChange: (index: number) => void;
+};

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export type Spacing = "none" | "base" | "slim" | "small" | "smaller" | "smallest" | "minuscule" | "large" | "larger" | "largest" | "extravagant";
 export interface ContentUnsafeStyle {
     container?: StyleProp<ViewStyle>;
     childWrapper?: StyleProp<ViewStyle>;

package/dist/types/src/Content/ContentHorizontal.style.d.ts

@@ -10,6 +10,9 @@ export declare const useHorizontalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingLeft: number;
+    };
     smallestChildSpace: {
         paddingLeft: number;
     };
@@ -19,10 +22,22 @@ export declare const useHorizontalStyles: () => {
     smallChildSpace: {
         paddingLeft: number;
     };
+    slimChildSpace: {
+        paddingLeft: number;
+    };
     baseChildSpace: {
         paddingLeft: number;
     };
     largeChildSpace: {
         paddingLeft: number;
     };
+    largerChildSpace: {
+        paddingLeft: number;
+    };
+    largestChildSpace: {
+        paddingLeft: number;
+    };
+    extravagantChildSpace: {
+        paddingLeft: number;
+    };
 };

package/dist/types/src/Content/ContentSpaceAround.style.d.ts

@@ -2,6 +2,9 @@ export declare const useSpaceAroundStyles: () => {
     noneSpace: {
         padding: number;
     };
+    minusculeSpace: {
+        padding: number;
+    };
     smallestSpace: {
         padding: number;
     };
@@ -11,10 +14,22 @@ export declare const useSpaceAroundStyles: () => {
     smallSpace: {
         padding: number;
     };
+    slimSpace: {
+        padding: number;
+    };
     baseSpace: {
         padding: number;
     };
     largeSpace: {
         padding: number;
     };
+    largerSpace: {
+        padding: number;
+    };
+    largestSpace: {
+        padding: number;
+    };
+    extravagantSpace: {
+        padding: number;
+    };
 };

package/dist/types/src/Content/ContentVertical.style.d.ts

@@ -4,6 +4,9 @@ export declare const useVerticalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingTop: number;
+    };
     smallestChildSpace: {
         paddingTop: number;
     };
@@ -13,10 +16,22 @@ export declare const useVerticalStyles: () => {
     smallChildSpace: {
         paddingTop: number;
     };
+    slimChildSpace: {
+        paddingTop: number;
+    };
     baseChildSpace: {
         paddingTop: number;
     };
     largeChildSpace: {
         paddingTop: number;
     };
+    largerChildSpace: {
+        paddingTop: number;
+    };
+    largestChildSpace: {
+        paddingTop: number;
+    };
+    extravagantChildSpace: {
+        paddingTop: number;
+    };
 };

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

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

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

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

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

@@ -77,7 +77,7 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
     /**
      * 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
      */

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

@@ -1,5 +1,5 @@
-import type { IconColorNames, IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
+import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 export interface MenuOptionProps {
     readonly label: string;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ProgressBarProps } from "./types";
-export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, }: ProgressBarProps): React.JSX.Element;
+export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;

package/dist/types/src/ProgressBar/ProgressBarInner.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 interface ProgressBarInnerProps {
     readonly width: number;
     readonly animationDuration?: number;
     readonly color?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly testID?: string;
 }
-export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): React.JSX.Element;
+export declare function ProgressBarInner({ width, color, style, testID, }: ProgressBarInnerProps): React.JSX.Element;
 export declare function calculateWidth(total: number, current: number): number;
 export {};

package/dist/types/src/ProgressBar/ProgressBarStepped.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+import type { ProgressBarUnsafeStyle } from "./types";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
     readonly color?: string;
     readonly loading?: boolean;
     readonly inProgress?: number;
+    readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, UNSAFE_style, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 export interface ProgressBarProps {
     /**
      * The total number of items to be completed
@@ -36,4 +37,23 @@ 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/dist/types/src/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { StatusIndicatorType } from "./StatusIndicator.type";
+export interface StatusIndicatorProps {
+    readonly status: StatusIndicatorType;
+}
+export declare function StatusIndicator({ status }: StatusIndicatorProps): React.JSX.Element;

package/dist/types/src/StatusIndicator/StatusIndicator.style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: () => {
+    statusIndicator: {
+        borderRadius: number;
+        backgroundColor: string;
+        width: number;
+        height: number;
+    };
+};

package/dist/types/src/StatusIndicator/StatusIndicator.type.d.ts

@@ -0,0 +1 @@
+export type StatusIndicatorType = "success" | "warning" | "critical" | "inactive" | "informative";

package/dist/types/src/StatusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorProps } from "./StatusIndicator";

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

@@ -6,15 +6,15 @@ export interface StatusLabelType {
 }
 interface StatusLabelProps {
     /**
-     * Text to display.
+     * Text to display
      */
     readonly text: string;
     /**
-     * Alignment of text
+     * Alignment of text and StatusIndicator
      */
     readonly alignment?: "start" | "end";
     /**
-     * Status color of the square beside text
+     * Status color of label container, label, and StatusIndicator
      */
     readonly status?: StatusType;
 }

package/dist/types/src/StatusLabel/StatusLabel.style.d.ts

@@ -2,22 +2,22 @@ export declare const useStyles: () => {
     statusLabelRow: {
         flexDirection: "row";
         justifyContent: "flex-end";
+        alignItems: "center";
+        alignSelf: "flex-start";
         flexWrap: "nowrap";
+        flexGrow: number;
+        flexShrink: number;
+        gap: number;
+        backgroundColor: string;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
     };
     statusLabelText: {
         flexShrink: number;
-    };
-    statusLabelIcon: {
-        borderRadius: number;
-        backgroundColor: string;
-        width: number;
-        height: number;
-        marginTop: number;
+        marginBottom: number;
     };
     labelTextStartAligned: {
         flexDirection: "row-reverse";
     };
-    innerPad: {
-        width: number;
-    };
 };

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

@@ -39,6 +39,7 @@ export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
+export * from "./StatusIndicator";
 export * from "./Switch";
 export * from "./Text";
 export * from "./TextList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.4-JOB-138679-b1552ab.68+b1552ab31",
+  "version": "0.84.4-match-mobi-accfa8a.9+accfa8aef",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -53,8 +53,9 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-community/datetimepicker": "^8.4.5",
-    "@react-native/babel-preset": "^0.81.1",
+    "@react-native/babel-preset": "^0.82.1",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
@@ -78,6 +79,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
+    "@gorhom/bottom-sheet": "^5.2.8",
     "@jobber/design": "*",
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
@@ -94,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "b1552ab319204ce883046ea2c22d875952746675"
+  "gitHead": "accfa8aefd00ea92526e90f81830b9a8691bdac7"
 }

package/src/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Button, Heading, Text } from "@jobber/components-native";
+import { BottomSheet } from "./BottomSheet";
+import type { BottomSheetRef } from "./BottomSheet";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+
+const meta = {
+  title: "Components/Selections/BottomSheet",
+  component: BottomSheet,
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = () => {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.open();
+  };
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.close();
+  };
+
+  return (
+    <SafeAreaProvider>
+      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Heading>Basic BottomSheet</Heading>
+        <Text>
+          Note that due to the differences between React Native Web and React
+          Native, this does not render 100% properly
+        </Text>
+        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
+        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
+      </View>
+      <BottomSheet
+        ref={bottomSheetRef}
+        onClose={() => console.log("closed bottom sheet")}
+        onOpen={() => console.log("opened bottom sheet")}
+      >
+        <BottomSheetOption
+          icon="sendMessage"
+          iconColor="greyBlue"
+          text="Send message"
+          onPress={() => alert("send message")}
+        />
+        <BottomSheetOption
+          icon="phone"
+          iconColor="greyBlue"
+          text="Call a friend"
+          onPress={() => alert("Calling a friend")}
+        />
+        <BottomSheetOption
+          destructive={true}
+          icon="trash"
+          text="Remove"
+          onPress={() => alert("Removed")}
+        />
+      </BottomSheet>
+    </SafeAreaProvider>
+  );
+};
+
+const HeaderFooterInputTextTemplate = () => {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.open();
+  };
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.close();
+  };
+
+  return (
+    <SafeAreaProvider>
+      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Heading>Basic BottomSheet</Heading>
+        <Text>
+          Note that due to the differences between React Native Web and React
+          Native, this does not render 100% properly
+        </Text>
+        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
+        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
+      </View>
+      <BottomSheet
+        ref={bottomSheetRef}
+        showCancel={true}
+        heading="BottomSheet Header"
+        onClose={() => console.log("closed bottom sheet")}
+        onOpen={() => console.log("opened bottom sheet")}
+      >
+        <BottomSheetOption
+          icon="sendMessage"
+          iconColor="greyBlue"
+          text="Send message"
+          onPress={() => alert("send message")}
+        />
+        <BottomSheetOption
+          icon="phone"
+          iconColor="greyBlue"
+          text="Call a friend"
+          onPress={() => alert("Calling a friend")}
+        />
+        <BottomSheetOption
+          destructive={true}
+          icon="trash"
+          text="Remove"
+          onPress={() => alert("Removed")}
+        />
+      </BottomSheet>
+    </SafeAreaProvider>
+  );
+};
+
+export const Basic: Story = {
+  render: BasicTemplate,
+  args: {} as Story["args"],
+};
+
+export const HeaderFooterInputText: Story = {
+  render: HeaderFooterInputTextTemplate,
+  args: {} as Story["args"],
+};

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,28 +1,18 @@
-import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const { height } = Dimensions.get("window");
-
 export const useStyles = buildThemedStyles(tokens => {
   const modalBorderRadius = tokens["radius-larger"];
 
   return {
-    overlayModalize: {
-      backgroundColor: "transparent",
-    },
-
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
+    backdrop: {
       backgroundColor: tokens["color-overlay"],
-      height,
     },
-    modal: {
+    background: {
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
-      paddingTop: tokens["space-small"],
     },
-    children: {
-      paddingBottom: tokens["space-small"],
+    footerContainer: {
+      backgroundColor: tokens["color-surface"],
     },
     header: {
       paddingHorizontal: tokens["space-base"],
@@ -34,5 +24,8 @@ export const useStyles = buildThemedStyles(tokens => {
       marginTop: tokens["space-small"],
       marginBottom: tokens["space-smaller"],
     },
+    handle: {
+      display: "none",
+    },
   };
 });

package/src/BottomSheet/BottomSheet.test.tsx

@@ -1,7 +1,6 @@
 import React, { createRef } from "react";
-import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import { act, render, userEvent, waitFor } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
-import { Host, Portal } from "react-native-portalize";
 import { BottomSheet } from ".";
 import type { BottomSheetRef } from "./BottomSheet";
 import { waitForUntestableRender } from "../utils/test/wait";
@@ -23,22 +22,18 @@ function setup({
   loading?: boolean;
 }) {
   return render(
-    <Host>
-      <Portal>
-        <BottomSheet
-          ref={ref}
-          heading={heading}
-          showCancel={showCancel}
-          loading={loading}
-          onClose={mockOnClose}
-          onOpen={mockOnOpen}
-        >
-          <View>
-            <Text>BottomSheet</Text>
-          </View>
-        </BottomSheet>
-      </Portal>
-    </Host>,
+    <BottomSheet
+      ref={ref}
+      heading={heading}
+      showCancel={showCancel}
+      loading={loading}
+      onClose={mockOnClose}
+      onOpen={mockOnOpen}
+    >
+      <View>
+        <Text>BottomSheet</Text>
+      </View>
+    </BottomSheet>,
   );
 }
 
@@ -78,7 +73,8 @@ it("BottomSheet can be closed with the cancel action", async () => {
     ref.current?.open();
   });
 
-  fireEvent.press(await findByLabelText("Cancel"));
+  const cancelButton = await findByLabelText("Cancel");
+  await userEvent.press(cancelButton);
 
   await waitFor(() => {
     expect(queryByText("BottomSheet")).toBeNull();
@@ -134,15 +130,14 @@ describe("when there is a screen reader enabled", () => {
 
     const { findByLabelText, queryByText } = setup({});
 
-    await waitForUntestableRender(
-      "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
-    );
-
     await act(async () => {
       ref.current?.open();
     });
 
-    fireEvent.press(await findByLabelText("Cancel"));
+    const cancelButton = await findByLabelText("Cancel");
+    expect(cancelButton).toBeDefined();
+
+    await userEvent.press(cancelButton);
 
     await waitFor(() => {
       expect(queryByText("BottomSheet")).toBeNull();