@jobber/components-native 0.79.1-scotttth-41260d5.56 → 0.80.1-upgrade-to-628d7fc.9

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

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

@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export interface ContentUnsafeStyle {
+    container?: StyleProp<ViewStyle>;
+    childWrapper?: StyleProp<ViewStyle>;
+}
 export interface ContentProps {
     /**
      * The child or children that will be given spacing.
@@ -14,5 +19,11 @@ export interface ContentProps {
      */
     readonly childSpacing?: Spacing;
     readonly direction?: "horizontal" | "vertical";
+    /**
+     * **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?: ContentUnsafeStyle;
 }
-export declare function Content({ children, spacing, childSpacing, direction, }: ContentProps): JSX.Element;
+export declare function Content({ children, spacing, childSpacing, direction, UNSAFE_style, }: ContentProps): JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { useSizeStyles } from "./Glimmer.size.style";
 import { useShapeStyles } from "./Glimmer.shape.style";
 export type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
@@ -26,5 +27,5 @@ interface GlimmerProps {
 }
 export declare const GLIMMER_TEST_ID = "ATL-Glimmer";
 export declare const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
-export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): JSX.Element;
+export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
@@ -5,5 +6,5 @@ interface ProgressBarSteppedProps {
     readonly loading?: boolean;
     readonly inProgress?: number;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};

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

@@ -11,5 +11,5 @@ export interface ThumbnailListProps {
         index: number;
         imageList: File[];
     }) => void;
-    createThumbnail?: CreateThumbnail;
+    createThumbnail: CreateThumbnail;
 }

package/jestSetup.js

@@ -33,5 +33,6 @@ jest.mock("react-native-reanimated", () => {
     FadeIn: {
       duration: () => undefined,
     },
+    useEvent: () => ({ listeners: [] }),
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.79.1-scotttth-41260d5.56+41260d5a",
+  "version": "0.80.1-upgrade-to-628d7fc.9+628d7fce",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "41260d5a571c3c004ed05cf89e3e12b67ed35f3f"
+  "gitHead": "628d7fce6ac350b6413ea59704847aef6f1cf062"
 }

package/src/Content/Content.test.tsx

@@ -21,7 +21,10 @@ function getContentChildren(contentView: ReactTestInstance) {
 const text = "🌚 I am the text 🌞";
 
 function setupContent(
-  props?: Pick<ContentProps, "spacing" | "childSpacing" | "direction">,
+  props?: Pick<
+    ContentProps,
+    "spacing" | "childSpacing" | "direction" | "UNSAFE_style"
+  >,
 ) {
   const container = render(
     <View accessibilityLabel="contentView">
@@ -29,6 +32,7 @@ function setupContent(
         spacing={props?.spacing}
         childSpacing={props?.childSpacing}
         direction={props?.direction}
+        UNSAFE_style={props?.UNSAFE_style}
       >
         <Text>{text}</Text>
         <Text>{text}</Text>
@@ -269,3 +273,77 @@ describe("Horizontal", () => {
     });
   });
 });
+
+describe("UNSAFE_style", () => {
+  it("applies custom styles to container", () => {
+    const customStyle = {
+      backgroundColor: "red",
+      padding: 16,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        container: customStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    expect(contentView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(customStyle)]),
+    );
+  });
+
+  it("applies custom styles to child wrapper", () => {
+    const customStyle = {
+      backgroundColor: "blue",
+      marginLeft: 8,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        childWrapper: customStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    const contentChildren = getContentChildren(contentView);
+
+    contentChildren.forEach(child => {
+      expect(child.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(customStyle)]),
+      );
+    });
+  });
+
+  it("applies custom styles to both container and child wrapper", () => {
+    const containerStyle = {
+      backgroundColor: "red",
+      padding: 16,
+    };
+
+    const childWrapperStyle = {
+      backgroundColor: "blue",
+      marginLeft: 8,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        container: containerStyle,
+        childWrapper: childWrapperStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    const contentChildren = getContentChildren(contentView);
+
+    expect(contentView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(containerStyle)]),
+    );
+
+    contentChildren.forEach(child => {
+      expect(child.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(childWrapperStyle)]),
+      );
+    });
+  });
+});

package/src/Content/Content.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { View } from "react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { useHorizontalStyles } from "./ContentHorizontal.style";
 import { useVerticalStyles } from "./ContentVertical.style";
 import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
@@ -12,6 +12,11 @@ export type Spacing =
   | "smallest"
   | "large";
 
+export interface ContentUnsafeStyle {
+  container?: StyleProp<ViewStyle>;
+  childWrapper?: StyleProp<ViewStyle>;
+}
+
 export interface ContentProps {
   /**
    * The child or children that will be given spacing.
@@ -29,6 +34,13 @@ export interface ContentProps {
   readonly childSpacing?: Spacing;
 
   readonly direction?: "horizontal" | "vertical";
+
+  /**
+   * **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?: ContentUnsafeStyle;
 }
 
 export function Content({
@@ -36,6 +48,7 @@ export function Content({
   spacing = "base",
   childSpacing = "base",
   direction = "vertical",
+  UNSAFE_style,
 }: ContentProps): JSX.Element {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();
@@ -46,7 +59,9 @@ export function Content({
   const containerStyle = spaceAroundStyles[styleName];
 
   return (
-    <View style={[styles.wrapper, containerStyle]}>{renderChildren()}</View>
+    <View style={[styles.wrapper, containerStyle, UNSAFE_style?.container]}>
+      {renderChildren()}
+    </View>
   );
 
   function renderChildren() {
@@ -57,12 +72,17 @@ export function Content({
     const childContainerStyle = styles[spaceName];
 
     return childArray.map((child, index) => {
-      // In order to get spacing between the children, we apply the child spacing on each of
-      // the children except for the first (top) child
       const childStyle = index !== 0 ? [childContainerStyle] : [];
 
       return (
-        <View key={index} style={[styles.childWrapper, ...childStyle]}>
+        <View
+          key={index}
+          style={[
+            styles.childWrapper,
+            ...childStyle,
+            UNSAFE_style?.childWrapper,
+          ]}
+        >
           {child}
         </View>
       );

package/src/Form/Form.test.tsx

@@ -545,7 +545,7 @@ describe("Form", () => {
   });
 
   describe("Safe Area", () => {
-    it("does render a safe area when there's a saveButtonOffset is provided", () => {
+    it("does render a safe area when there's NO saveButtonOffset provided", () => {
       const { getByTestId } = render(<FormTest onSubmit={onSubmitMock} />);
 
       expect(getByTestId("ATL-FormSafeArea")).toBeDefined();

package/src/Form/Form.tsx

@@ -138,6 +138,7 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
+  // Comment to trigger build
   return (
     <FormProvider {...formMethods}>
       <>

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`renders a Switch with defaultValue false 1`] = `
   }
   collapsable={false}
   disabled={false}
-  handlerTag={4}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}
@@ -47,7 +47,7 @@ exports[`renders a Switch with defaultValue true 1`] = `
   }
   collapsable={false}
   disabled={false}
-  handlerTag={2}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}
@@ -83,7 +83,7 @@ exports[`renders a Switch with value false 1`] = `
   }
   collapsable={false}
   disabled={false}
-  handlerTag={3}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}
@@ -119,7 +119,7 @@ exports[`renders a Switch with value true 1`] = `
   }
   collapsable={false}
   disabled={false}
-  handlerTag={1}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}
@@ -155,7 +155,7 @@ exports[`renders a disabled Switch with value false 1`] = `
   }
   collapsable={false}
   disabled={true}
-  handlerTag={6}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}
@@ -191,7 +191,7 @@ exports[`renders a disabled Switch with value true 1`] = `
   }
   collapsable={false}
   disabled={true}
-  handlerTag={5}
+  handlerTag={-1}
   handlerType="NativeViewGestureHandler"
   onChange={[Function]}
   onGestureHandlerEvent={[Function]}

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

@@ -16,6 +16,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
         {
           "padding": 0,
         },
+        undefined,
       ]
     }
   >
@@ -23,6 +24,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
       style={
         [
           {},
+          undefined,
         ]
       }
     >
@@ -114,6 +116,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
           {
             "padding": 0,
           },
+          undefined,
         ]
       }
     >

package/src/ThumbnailList/types.ts

@@ -17,5 +17,5 @@ export interface ThumbnailListProps {
     index: number;
     imageList: File[];
   }) => void;
-  createThumbnail?: CreateThumbnail;
+  createThumbnail: CreateThumbnail;
 }