@jobber/components-native 0.116.2 → 0.116.3

package/src/InputText/InputText.tsx

@@ -1,4 +1,4 @@
-import type { Ref, SyntheticEvent } from "react";
+import type { ComponentRef, Ref, SyntheticEvent } from "react";
 import React, {
   forwardRef,
   useEffect,
@@ -244,7 +244,10 @@ interface InputTextStyleOverride extends InputFieldStyleOverride {
   inputText?: StyleProp<TextStyle>;
 }
 
-export type InputTextRef = Pick<TextInput, "clear" | "focus" | "blur">;
+export type InputTextRef = Pick<
+  ComponentRef<typeof TextInput>,
+  "clear" | "focus" | "blur"
+>;
 export const InputText = forwardRef(InputTextInternal);
 
 // eslint-disable-next-line max-statements
@@ -468,7 +471,7 @@ function InputTextInternal(
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}
-        ref={(instance: TextInput) => {
+        ref={(instance: ComponentRef<typeof TextInput> | null) => {
           // RHF wants us to do it this way
           // https://react-hook-form.com/faqs#Howtosharerefusage
           textInputRef.current = instance;
@@ -508,10 +511,7 @@ function InputTextInternal(
     const currentFocusedInput =
       currentlyFocusedInput !== null
         ? findNodeHandle(
-            // @ts-expect-error - TextInput.State.currentlyFocusedInput() returns NativeMethods
-            // which is not directly assignable to findNodeHandle's expected type,
-            // but it works at runtime. This is a known type limitation in React Native.
-            currentlyFocusedInput,
+            currentlyFocusedInput as ComponentRef<typeof TextInput>,
           )
         : null;
 
@@ -576,7 +576,7 @@ interface UseTextInputRefProps {
 }
 
 function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
-  const textInputRef = useRef<TextInput | null>(null);
+  const textInputRef = useRef<ComponentRef<typeof TextInput> | null>(null);
 
   useImperativeHandle(
     ref,

package/src/InputText/context/InputAccessoriesProvider.style.tsx

@@ -1,9 +1,15 @@
-import { PlatformColor } from "react-native";
+import { PlatformColor, type ViewStyle } from "react-native";
 import { buildThemedStyles } from "../../AtlantisThemeContext";
 
 const BAR_HEIGHT = 44;
 
-export const useStyles = buildThemedStyles(tokens => {
+interface Styles {
+  container: ViewStyle;
+  lightTheme: ViewStyle;
+  darkTheme: ViewStyle;
+}
+
+export const useStyles: () => Styles = buildThemedStyles(tokens => {
   return {
     container: {
       flexDirection: "row",

package/src/Select/Select.style.ts

@@ -1,34 +1,40 @@
-import { StyleSheet } from "react-native";
+import type { TextStyle, ViewStyle } from "react-native";
 import { getCommonInputStyles } from "../InputFieldWrapper";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const useStyles = buildThemedStyles(tokens => {
+interface Styles {
+  container: ViewStyle;
+  input: ViewStyle;
+  value: ViewStyle;
+  icon: ViewStyle;
+  invalid: TextStyle;
+  errorMessageWrapperIcon: ViewStyle;
+  messageWrapper: ViewStyle;
+}
+
+export const useStyles: () => Styles = buildThemedStyles(tokens => {
   const commonInputStyles = getCommonInputStyles(tokens);
 
   return {
-    container: StyleSheet.flatten([
-      commonInputStyles.container,
-      {
-        flexDirection: "column",
-        justifyContent: "center",
-        minHeight: tokens["space-largest"] + tokens["space-small"],
-        marginVertical: 0,
-        borderWidth: 0,
-        backgroundColor: "transparent",
-      },
-    ]),
-
-    input: StyleSheet.flatten([
-      commonInputStyles.input,
-      {
-        flexDirection: "row",
-        flexGrow: 0,
-        paddingTop: tokens["space-smaller"],
-        minHeight: 0,
-        minWidth: "100%",
-        paddingRight: tokens["space-small"],
-      },
-    ]),
+    container: {
+      ...commonInputStyles.container,
+      flexDirection: "column",
+      justifyContent: "center",
+      minHeight: tokens["space-largest"] + tokens["space-small"],
+      marginVertical: 0,
+      borderWidth: 0,
+      backgroundColor: "transparent",
+    },
+
+    input: {
+      ...commonInputStyles.input,
+      flexDirection: "row",
+      flexGrow: 0,
+      paddingTop: tokens["space-smaller"],
+      minHeight: 0,
+      minWidth: "100%",
+      paddingRight: tokens["space-small"],
+    },
 
     value: {
       flexGrow: 1,

package/src/Typography/Typography.style.ts

@@ -625,4 +625,5 @@ export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
   getTypographyStyles(staticTokens),
 );
 
-export const useTypographyStyles = buildThemedStyles(getTypographyStyles);
+export const useTypographyStyles: () => ReturnType<typeof getTypographyStyles> =
+  buildThemedStyles(getTypographyStyles);

package/src/Typography/Typography.tsx

@@ -6,7 +6,7 @@ import type {
   TextStyle,
   ViewStyle,
 } from "react-native";
-import { I18nManager, StyleSheet, Text } from "react-native";
+import { I18nManager, Text } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
 import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
@@ -332,7 +332,7 @@ function getSizeAndHeightStyle(
   if (lineHeightOverwrite) {
     const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
 
-    return StyleSheet.flatten([fontSize, lineHeight]);
+    return { ...fontSize, ...lineHeight };
   }
 
   return fontSize;

package/src/primitives/Select/SelectPrimitive.tsx

@@ -163,18 +163,19 @@ function SelectPrimitiveContent({
   // provider): `Content` renders at the portal host, which may sit outside one.
   const safeAreaInsets = React.useContext(SafeAreaInsetsContext) ?? undefined;
   const { triggerPosition } = Primitive.useRootContext();
+  const contentStyle: SelectPrimitiveContentProps["style"] = {
+    ...styles.content,
+    ...(isDarkTheme ? styles.contentDarkElevated : {}),
+    ...(triggerPosition ? { width: triggerPosition.width } : {}),
+    ...style,
+  };
 
   return (
     <Primitive.Content
       ref={ref}
       sideOffset={sideOffset}
       insets={insets ?? safeAreaInsets}
-      style={StyleSheet.flatten([
-        styles.content,
-        isDarkTheme && styles.contentDarkElevated,
-        triggerPosition ? { width: triggerPosition.width } : undefined,
-        style,
-      ])}
+      style={contentStyle}
       {...props}
     >
       {children}

package/src/utils/types.ts

@@ -0,0 +1,4 @@
+import type { ComponentRef } from "react";
+import type { View } from "react-native";
+
+export type ViewRef = ComponentRef<typeof View>;