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

package/src/Menu/utils.ts

@@ -82,6 +82,7 @@ function getHorizontalPosition(
   if (menuPositionHorizontal === "menuRight") {
     getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
   }
+
   if (menuPositionHorizontal === "menuLeft") {
     getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
   }
@@ -117,12 +118,7 @@ function getLeftPosition(
   } else if (overflowRight) {
     pos.right = 0;
   } else {
-    pos.right =
-      windowWidth -
-      activatorLayout.x -
-      activatorLayout.width +
-      activatorLayout.width / 2 -
-      menuHorizontalPadding;
+    pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
   }
 }
 
@@ -146,6 +142,6 @@ function getRightPosition(
   } else if (overflowLeft) {
     pos.left = 0;
   } else {
-    pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+    pos.left = activatorLayout.x;
   }
 }

package/src/ProgressBar/ProgressBarInner.tsx

@@ -43,5 +43,6 @@ export function calculateWidth(total: number, current: number): number {
   const curr = Math.max(0, current);
 
   if (curr >= total) return 100;
+
   return (curr / total) * 100;
 }

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

@@ -30,7 +30,7 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "width": "100%",
           },
           {
-            "backgroundColor": "rgb(238, 240, 242)",
+            "backgroundColor": "rgb(241, 239, 233)",
             "width": "100%",
           },
         ]
@@ -68,7 +68,7 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "width": "100%",
           },
           {
-            "backgroundColor": "rgb(125, 176, 14)",
+            "backgroundColor": "rgb(50, 130, 28)",
             "width": "0%",
           },
         ]
@@ -108,7 +108,7 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "width": "100%",
           },
           {
-            "backgroundColor": "rgb(238, 240, 242)",
+            "backgroundColor": "rgb(241, 239, 233)",
             "width": "100%",
           },
         ]
@@ -127,7 +127,7 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "width": "100%",
           },
           {
-            "backgroundColor": "rgb(125, 176, 14)",
+            "backgroundColor": "rgb(50, 130, 28)",
             "width": "50%",
           },
         ]

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

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

package/src/Select/components/SelectInternalPicker/utils.ts

@@ -13,6 +13,7 @@ export function handlePress(onChange: SelectInternalPickerProps["onChange"]) {
 export function isIOS14AndUp(): boolean {
   if (Platform.OS === "ios") {
     const majorVersionIOS = parseInt(Platform.Version, 10);
+
     return majorVersionIOS >= 14;
   }
 

package/src/StatusLabel/StatusLabel.tsx

@@ -57,7 +57,7 @@ export function StatusLabel({
 }
 
 interface StatusLabelIconProps {
-  status: StatusType;
+  readonly status: StatusType;
 }
 
 function StatusLabelIcon({ status }: StatusLabelIconProps) {

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

@@ -34,7 +34,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -63,14 +63,14 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
         },
       ]
     }
@@ -113,7 +113,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -142,14 +142,14 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
         },
       ]
     }
@@ -192,7 +192,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -221,14 +221,14 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(201, 66, 33)",
+          "backgroundColor": "rgb(199, 20, 0)",
         },
       ]
     }
@@ -271,7 +271,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -300,14 +300,14 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(77, 105, 116)",
+          "backgroundColor": "rgb(1, 40, 55)",
         },
       ]
     }
@@ -350,7 +350,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -379,7 +379,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
@@ -429,7 +429,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -458,14 +458,14 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(221, 195, 15)",
+          "backgroundColor": "rgb(209, 185, 46)",
         },
       ]
     }
@@ -508,7 +508,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
             "fontFamily": "inter-medium",
           },
           {
-            "color": "rgb(77, 105, 116)",
+            "color": "rgb(78, 105, 116)",
           },
           {
             "textAlign": "right",
@@ -537,14 +537,14 @@ exports[`StatusLabel status when status prop set to default ("success") should m
     style={
       [
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
           "borderRadius": 3,
           "height": 12,
           "marginTop": 3,
           "width": 12,
         },
         {
-          "backgroundColor": "rgb(125, 176, 14)",
+          "backgroundColor": "rgb(50, 130, 28)",
         },
       ]
     }

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

@@ -61,6 +61,7 @@ export function BaseSwitch({
         return tokens["color-surface--background"];
       }
     }
+
     return undefined; //use default iOS
   }
 

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

@@ -18,7 +18,7 @@ exports[`renders a Switch with defaultValue false 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -26,12 +26,12 @@ exports[`renders a Switch with defaultValue false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={false}
 />
 `;
@@ -54,7 +54,7 @@ exports[`renders a Switch with defaultValue true 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -62,12 +62,12 @@ exports[`renders a Switch with defaultValue true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={true}
 />
 `;
@@ -90,7 +90,7 @@ exports[`renders a Switch with value false 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -98,12 +98,12 @@ exports[`renders a Switch with value false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={false}
 />
 `;
@@ -126,7 +126,7 @@ exports[`renders a Switch with value true 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -134,12 +134,12 @@ exports[`renders a Switch with value true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={true}
 />
 `;
@@ -162,7 +162,7 @@ exports[`renders a disabled Switch with value false 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -170,12 +170,12 @@ exports[`renders a disabled Switch with value false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={false}
 />
 `;
@@ -198,7 +198,7 @@ exports[`renders a disabled Switch with value true 1`] = `
   onGestureHandlerStateChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="rgb(125, 176, 14)"
+  onTintColor="rgb(50, 130, 28)"
   style={
     [
       {
@@ -206,12 +206,12 @@ exports[`renders a disabled Switch with value true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "rgb(238, 240, 242)",
+        "backgroundColor": "rgb(241, 239, 233)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="rgb(238, 240, 242)"
+  tintColor="rgb(241, 239, 233)"
   value={true}
 />
 `;

package/src/Text/Text.tsx

@@ -147,5 +147,6 @@ function getFontWeight({
 }: Pick<TextProps, "level" | "emphasis">): BaseWeight {
   if (emphasis === "strong") return "semiBold";
   if (level === "textSupporting") return "medium";
+
   return "regular";
 }

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

@@ -49,7 +49,7 @@ exports[`renders text supporting with variation success 1`] = `
         "fontFamily": "inter-medium",
       },
       {
-        "color": "rgb(81, 114, 9)",
+        "color": "rgb(14, 78, 26)",
       },
       {
         "textAlign": "left",
@@ -83,7 +83,7 @@ exports[`renders text supporting with variation success reverseTheme true 1`] =
         "fontFamily": "inter-medium",
       },
       {
-        "color": "rgb(125, 176, 14)",
+        "color": "rgb(50, 130, 28)",
       },
       {
         "textAlign": "left",
@@ -255,7 +255,7 @@ exports[`renders text with error variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(201, 66, 33)",
+        "color": "rgb(199, 20, 0)",
       },
       {
         "textAlign": "left",
@@ -289,7 +289,7 @@ exports[`renders text with error variation reverseTheme true 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(201, 66, 33)",
+        "color": "rgb(199, 20, 0)",
       },
       {
         "textAlign": "left",
@@ -323,7 +323,7 @@ exports[`renders text with info variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(39, 105, 146)",
+        "color": "rgb(17, 66, 85)",
       },
       {
         "textAlign": "left",
@@ -459,7 +459,7 @@ exports[`renders text with subdued variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(77, 105, 116)",
+        "color": "rgb(78, 105, 116)",
       },
       {
         "textAlign": "left",
@@ -493,7 +493,7 @@ exports[`renders text with success variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(81, 114, 9)",
+        "color": "rgb(14, 78, 26)",
       },
       {
         "textAlign": "left",
@@ -527,7 +527,7 @@ exports[`renders text with success variation reverseTheme true 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(125, 176, 14)",
+        "color": "rgb(50, 130, 28)",
       },
       {
         "textAlign": "left",
@@ -561,7 +561,7 @@ exports[`renders text with warn variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(144, 127, 10)",
+        "color": "rgb(91, 79, 6)",
       },
       {
         "textAlign": "left",

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

@@ -70,9 +70,9 @@ exports[`renders a thumbnail component with attachments 1`] = `
             style={
               [
                 {
-                  "backgroundColor": "rgb(238, 240, 242)",
-                  "borderColor": "rgb(217, 223, 225)",
-                  "borderRadius": 2,
+                  "backgroundColor": "rgb(241, 239, 233)",
+                  "borderColor": "rgb(218, 224, 226)",
+                  "borderRadius": 8,
                   "borderWidth": 1,
                   "marginBottom": 8,
                 },

package/src/Toast/Toast.tsx

@@ -19,6 +19,7 @@ function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+
   return (
     <View style={toastContainerStyles}>
       <View style={styles.toast}>
@@ -48,7 +49,7 @@ export interface JobberToastProps {
    * Has effect only when the position is "bottom".
    * @default 40
    */
-  bottomOffset?: number;
+  readonly bottomOffset?: number;
 }
 
 export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {

package/src/Typography/Typography.tsx

@@ -207,6 +207,7 @@ function getFontStyle(
     fontWeight,
   )}`;
   const fontStyling = styles[styleKey];
+
   if (fontStyling) {
     return fontStyling;
   } else {
@@ -234,6 +235,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
     return styles.greyBlue;
   }
   const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
+
   return styles[`${colorStyleKey}`];
 }
 
@@ -248,10 +250,13 @@ function getSizeAndHeightStyle(
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
+
   if (lineHeightOverwrite) {
     const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
+
     return StyleSheet.flatten([fontSize, lineHeight]);
   }
+
   return fontSize;
 }
 

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

@@ -379,7 +379,7 @@ exports[`renders text with green color 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(125, 176, 14)",
+        "color": "rgb(50, 130, 28)",
       },
       {
         "textAlign": "left",
@@ -676,7 +676,7 @@ exports[`renders text with reverseTheme false with reversible color 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(81, 114, 9)",
+        "color": "rgb(14, 78, 26)",
       },
       {
         "textAlign": "left",
@@ -709,7 +709,7 @@ exports[`renders text with reverseTheme true with reversible color 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(125, 176, 14)",
+        "color": "rgb(50, 130, 28)",
       },
       {
         "textAlign": "left",

package/src/hooks/useAtlantisI18n/utils/dateFormatter.ts

@@ -13,6 +13,7 @@ export function dateFormatter(
   { locale, timeZone }: DateFormatterOptions,
 ): string {
   const zonedTime = utcToZonedTime(date, timeZone);
+
   return format(zonedTime, dateTimeFormat, {
     locale: getDateFnsLocale(locale),
   });

package/src/hooks/useFormController.ts

@@ -51,6 +51,7 @@ export function useFormController<T>({
   // TODO: Add support for two-part identifiers (e.g. "property.province")
   const fieldIdentifiers = fieldName.split(".");
   let error: FieldError | undefined;
+
   if (fieldIdentifiers.length === 3) {
     const [section, item, identifier] = fieldIdentifiers;
     error = errors[section]?.[item]?.[identifier];
@@ -64,5 +65,6 @@ export function useFormController<T>({
 function useControlName(name?: string): UseControllerReturn["field"]["name"] {
   const [identifier] = useState(v1());
   const prefix = `generatedName--${identifier}`;
+
   return `${name || prefix}` as const;
 }

package/src/index.ts

@@ -17,29 +17,30 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
-export * from "./FormatFile";
 export * from "./Form";
+export * from "./FormatFile";
 export * from "./FormField";
+export * from "./Glimmer";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
-export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
 export * from "./InputDate";
 export * from "./InputEmail";
+export * from "./InputFieldWrapper";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
-export * from "./InputTime";
 export * from "./InputText";
+export * from "./InputTime";
 export * from "./Menu";
-export * from "./TextList";
-export * from "./ThumbnailList";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";
+export * from "./TextList";
+export * from "./ThumbnailList";
 export * from "./Toast";
 export * from "./Typography";

package/src/utils/intl/capitalize.ts

@@ -2,5 +2,6 @@ export function capitalize(text: string): string {
   if (!text) {
     return "";
   }
+
   return text.charAt(0).toLocaleUpperCase("en-US") + text.slice(1);
 }