@jobber/components-native 0.116.2-large-chec-aaeb9fd.2 → 0.116.3

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

@@ -1,6 +1,6 @@
-export declare const styles: {
+export declare const styles: Readonly<{
     container: {
-        width: "100%";
+        width: string;
         justifyContent: "center";
     };
-};
+}>;

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

@@ -1,4 +1,4 @@
-export declare const sizeStyles: {
+export declare const sizeStyles: Readonly<{
     smaller: {
         height: number;
     };
@@ -8,4 +8,4 @@ export declare const sizeStyles: {
     base: {
         height: number;
     };
-};
+}>;

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

@@ -7,21 +7,21 @@ export declare const useStyles: () => {
     };
     progressBarInner: {
         backgroundColor: string;
-        width: "100%";
-        height: "100%";
+        width: string;
+        height: string;
         position: "absolute";
         left: number;
         top: number;
         borderRadius: number;
     };
     progressInner: {
-        height: "100%";
+        height: string;
         borderRadius: number;
     };
     step: {
         flex: number;
         marginRight: number;
-        height: "100%";
+        height: string;
         borderRadius: number;
         borderColor: string;
     };

package/dist/types/src/ProgressIndicator/ProgressIndicator.size.style.d.ts

@@ -5,7 +5,7 @@ type Size = NonNullable<ProgressIndicatorProps["size"]>;
  * mobile `ProgressBar` sizing.
  */
 export declare const sizeHeights: Record<Size, number>;
-export declare const sizeStyles: {
+export declare const sizeStyles: Readonly<{
     smaller: {
         height: number;
     };
@@ -15,5 +15,5 @@ export declare const sizeStyles: {
     base: {
         height: number;
     };
-};
+}>;
 export {};

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

@@ -13,30 +13,30 @@
  */
 export declare const useStyles: () => {
     continuous: {
-        width: "100%";
+        width: string;
         flexDirection: "row";
         overflow: "hidden";
         backgroundColor: string;
     };
     fill: {
-        height: "100%";
+        height: string;
         backgroundColor: string;
     };
     pending: {
-        height: "100%";
+        height: string;
         position: "absolute";
         left: number;
         top: number;
         backgroundColor: string;
     };
     stepped: {
-        width: "100%";
+        width: string;
         flexDirection: "row";
         gap: number;
     };
     segment: {
         flex: number;
-        height: "100%";
+        height: string;
         backgroundColor: string;
     };
     segmentFilled: {

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

@@ -1,29 +1,12 @@
-export declare const useStyles: () => {
-    container: import("react-native").ViewStyle;
-    input: import("react-native").ViewStyle;
-    value: {
-        flexGrow: number;
-        flexShrink: number;
-    };
-    icon: {
-        position: "absolute";
-        bottom: "50%";
-        right: number;
-        flexGrow: number;
-        flexShrink: number;
-    };
-    invalid: {
-        color: string;
-        borderColor: string;
-    };
-    errorMessageWrapperIcon: {
-        flex: number;
-        flexBasis: "auto";
-        paddingTop: number;
-        paddingRight: number;
-    };
-    messageWrapper: {
-        paddingTop: number;
-        flexDirection: "row";
-    };
-};
+import type { TextStyle, ViewStyle } from "react-native";
+interface Styles {
+    container: ViewStyle;
+    input: ViewStyle;
+    value: ViewStyle;
+    icon: ViewStyle;
+    invalid: TextStyle;
+    errorMessageWrapperIcon: ViewStyle;
+    messageWrapper: ViewStyle;
+}
+export declare const useStyles: () => Styles;
+export {};

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const styles: Readonly<{
     overlay: {
         flex: number;
     };
@@ -21,10 +21,10 @@ export declare const styles: {
         position: "absolute";
         top: number;
         left: number;
-        width: "100%";
-        height: "100%";
+        width: string;
+        height: string;
         color: string;
         backgroundColor: string;
         opacity: number;
     };
-};
+}>;

package/dist/types/src/Switch/Switch.styles.d.ts

@@ -5,7 +5,7 @@ export declare const useStyles: () => {
     };
     row: {
         flexDirection: "row";
-        width: "100%";
+        width: string;
     };
     label: {
         flex: number;

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     details: {
-        width: "100%";
+        width: string;
         flexDirection: "column";
     };
     detail: {

package/dist/types/src/Toast/Toast.styles.d.ts

@@ -7,7 +7,7 @@ export declare const useStyles: () => {
     toast: {
         flexDirection: "row";
         justifyContent: "space-between";
-        width: "100%";
+        width: string;
         maxWidth: number;
         paddingVertical: number;
         backgroundColor: string;

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

@@ -11,6 +11,4 @@ export declare const getTypographyStyles: (tokens: AtlantisThemeContextValue["to
  * @deprecated Use useTypographyStyles instead
  */
 export declare const typographyStyles: Record<string, TextStyle>;
-export declare const useTypographyStyles: () => {
-    [index: string]: TextStyle;
-};
+export declare const useTypographyStyles: () => ReturnType<typeof getTypographyStyles>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.116.2-large-chec-aaeb9fd.2+aaeb9fde",
+  "version": "0.116.3",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -65,7 +65,7 @@
     "lodash": "^4.18.1",
     "react-hook-form": "^7.52.0",
     "react-intl": "^7.1.11",
-    "react-native-keyboard-controller": "^1.20.7",
+    "react-native-keyboard-controller": "^1.22.5",
     "react-native-toast-message": "^2.1.6",
     "react-native-uuid": "^2.0.4",
     "ts-xor": "^1.1.0"
@@ -94,7 +94,7 @@
     "react-dom": "19.1.1",
     "react-native": "^0.82.1",
     "react-native-gesture-handler": "^2.29.1",
-    "react-native-keyboard-controller": "^1.12.0",
+    "react-native-keyboard-controller": "^1.22.5",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "4.2.3",
     "react-native-safe-area-context": "^5.4.0",
@@ -118,12 +118,12 @@
     "react-intl": "^6 || ^7",
     "react-native": ">=0.79.5",
     "react-native-gesture-handler": ">=2.22.0",
-    "react-native-keyboard-controller": "^1.20.7",
+    "react-native-keyboard-controller": "^1.22.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
     "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "aaeb9fdef9e69599b84e28de7ed82ed5ac7f26f7"
+  "gitHead": "0655334acf3dab6b70b4ef6bebbd7030d63ec5a4"
 }

package/src/Checkbox/Checkbox.test.tsx

@@ -127,7 +127,11 @@ describe("Checkbox with FormProvider", () => {
           accessibilityLabel={accessibilityLabel}
         />
         <Button
-          onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+          onPress={() => {
+            void formMethods.handleSubmit(values => {
+              mockOnSubmit(values);
+            })();
+          }}
           title={saveButtonText}
           accessibilityLabel={saveButtonText}
         />

package/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.tsx

@@ -1,4 +1,9 @@
 import { memo } from "react";
+import type {
+  NamedExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from "react";
 import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import {
@@ -26,7 +31,10 @@ const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
   KeyboardAwareScrollViewProps
 >(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
 
-const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
+const BottomSheetKeyboardAwareScrollView: NamedExoticComponent<
+  PropsWithoutRef<KeyboardAwareScrollViewProps> &
+    RefAttributes<BottomSheetScrollViewMethods>
+> = memo(BottomSheetScrollViewComponent);
 
 BottomSheetKeyboardAwareScrollView.displayName =
   "BottomSheetKeyboardAwareScrollView";

package/src/ContentOverlay/ContentOverlay.tsx

@@ -40,6 +40,7 @@ import {
   AtlantisThemeContextProvider,
   useAtlantisTheme,
 } from "../AtlantisThemeContext";
+import type { ViewRef } from "../utils/types";
 
 /**
  * Signals whether keyboard handling inside a ContentOverlay is delegated to
@@ -125,7 +126,7 @@ export function ContentOverlay({
   const topInset = insets.top || tokens["space-larger"];
 
   const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
-  const overlayHeader = useRef<View>(null);
+  const overlayHeader = useRef<ViewRef>(null);
   const scrollViewRef = useRef<
     BottomSheetScrollViewMethods & { scrollTop?: number }
   >(null);

package/src/ContentOverlay/hooks/useViewLayoutHeight.test.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react-native";
-import type { LayoutChangeEvent, NativeMethods } from "react-native";
+import type { LayoutChangeEvent } from "react-native";
 import { useViewLayoutHeight } from "./useViewLayoutHeight";
 
 describe("useViewLayoutHeight", () => {
@@ -11,7 +11,7 @@ describe("useViewLayoutHeight", () => {
   });
   it("should handle layout change event", async () => {
     const expectedHeight = 100;
-    const layoutChangeEvent: LayoutChangeEvent = {
+    const layoutChangeEvent = {
       nativeEvent: {
         layout: {
           height: expectedHeight,
@@ -20,31 +20,7 @@ describe("useViewLayoutHeight", () => {
           y: 0,
         },
       },
-      currentTarget: 0 as unknown as NativeMethods,
-      target: 0 as unknown as NativeMethods,
-      bubbles: false,
-      cancelable: false,
-      defaultPrevented: false,
-      eventPhase: 0,
-      isTrusted: false,
-      preventDefault: function (): void {
-        throw new Error("Function not implemented.");
-      },
-      isDefaultPrevented: function (): boolean {
-        throw new Error("Function not implemented.");
-      },
-      stopPropagation: function (): void {
-        throw new Error("Function not implemented.");
-      },
-      isPropagationStopped: function (): boolean {
-        throw new Error("Function not implemented.");
-      },
-      persist: function (): void {
-        throw new Error("Function not implemented.");
-      },
-      timeStamp: 0,
-      type: "",
-    };
+    } as LayoutChangeEvent;
     const { result } = renderHook(() => useViewLayoutHeight());
     await act(async () => {
       result.current.handleLayout(layoutChangeEvent);

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -7,6 +7,7 @@ import { useErrorMessageContext } from "./context";
 import { useStyles } from "./ErrorMessageWrapper.style";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
+import type { ViewRef } from "../utils/types";
 
 type WrapForTypes = "card" | "default";
 
@@ -38,7 +39,7 @@ export function ErrorMessageWrapper({
   const errorMessageContext = useErrorMessageContext();
   const register = errorMessageContext?.register;
   const unregister = errorMessageContext?.unregister;
-  const a11yMessageRef = useRef<View>(null);
+  const a11yMessageRef = useRef<ViewRef>(null);
   const { current: id } = useRef(uuid.v4());
 
   const hasErrorMessage = Boolean(message);

package/src/ErrorMessageWrapper/context/ErrorMessageProvider.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, RefObject } from "react";
 import React, { useState } from "react";
-import type { NativeMethods, View } from "react-native";
+import type { NativeMethods } from "react-native";
 import { AccessibilityInfo, findNodeHandle } from "react-native";
 import { ErrorMessageContext } from "./ErrorMessageContext";
 import type {
@@ -8,6 +8,7 @@ import type {
   ErrorMessageContextProps,
   ErrorMessageContextRegisterParams,
 } from "./types";
+import type { ViewRef } from "../../utils/types";
 
 interface ErrorMessageProviderProps {
   readonly children: ReactNode;
@@ -49,13 +50,13 @@ export function ErrorMessageProvider({ children }: ErrorMessageProviderProps) {
   }
 }
 
-function getMeasure(ref: RefObject<View | null>) {
+function getMeasure(ref: RefObject<ViewRef | null>) {
   return function measure(...args: Parameters<NativeMethods["measureLayout"]>) {
     ref.current?.measureLayout(...args);
   };
 }
 
-function getAccessibilityFocus(ref: RefObject<View | null>) {
+function getAccessibilityFocus(ref: RefObject<ViewRef | null>) {
   return function accessibilityFocus() {
     const reactTag = findNodeHandle(ref.current);
     reactTag &&

package/src/ErrorMessageWrapper/context/types.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from "react";
-import type { NativeMethods, View } from "react-native";
+import type { NativeMethods } from "react-native";
+import type { ViewRef } from "../../utils/types";
 
 interface Methods {
   /**
@@ -50,7 +51,7 @@ type ElementID = Element["id"];
 export interface ErrorMessageContextRegisterParams {
   readonly id: ElementID;
   readonly hasErrorMessage: Methods["hasErrorMessage"];
-  readonly ref: RefObject<View | null>;
+  readonly ref: RefObject<ViewRef | null>;
 }
 
 export interface ErrorMessageContextProps {

package/src/Flex/Flex.styles.tsx

@@ -20,7 +20,7 @@ export const columnStyles: Record<ColumnKeys, ViewStyle> = StyleSheet.create({
   },
 });
 
-export const gapStyles = StyleSheet.create(
+export const gapStyles: Record<Spacing, ViewStyle> = StyleSheet.create(
   spacing.reduce((gapObj, space) => {
     let paddingLeft = 0;
     if (space !== "none") paddingLeft = staticTokens[`space-${space}`];

package/src/Form/Form.tsx

@@ -122,7 +122,7 @@ function InternalForm<T extends FieldValues, S>({
 
   useScrollToError({
     formState: formMethods.formState,
-    refNode: findNodeHandle(scrollViewRef.current),
+    refNode: findNodeHandle(scrollViewRef.current) ?? null,
     setFocus: formMethods.setFocus,
     scrollTo: scrollViewRef.current?.scrollTo,
   });

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactElement } from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
 import { useStyles } from "./FormActionBar.style";
@@ -35,7 +35,7 @@ export function FormActionBar({
 }: FormActionBarProps) {
   const styles = useStyles();
 
-  const buttonStyle = StyleSheet.flatten([
+  const buttonStyle: StyleProp<ViewStyle> = StyleSheet.flatten([
     styles.saveButton,
     {
       position:

package/src/Form/hooks/useFormViewRefs.ts

@@ -1,17 +1,17 @@
 import type { RefObject } from "react";
 import { useCallback, useRef } from "react";
-import type { View } from "react-native";
 import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
+import type { ViewRef } from "../../utils/types";
 
 interface UseFormViewRefsReturn {
   readonly scrollViewRef: RefObject<KeyboardAwareScrollViewRef | null>;
-  readonly bottomViewRef: RefObject<View | null>;
+  readonly bottomViewRef: RefObject<ViewRef | null>;
   readonly scrollToTop: () => void;
 }
 
 export function useFormViewRefs(): UseFormViewRefsReturn {
   const scrollViewRef = useRef<KeyboardAwareScrollViewRef>(null);
-  const bottomViewRef = useRef<View>(null);
+  const bottomViewRef = useRef<ViewRef>(null);
   const scrollToTop = useCallback(() => {
     scrollViewRef.current?.scrollTo({ x: 0, y: 0, animated: true });
   }, [scrollViewRef]);

package/src/FormField/FormField.test.tsx

@@ -21,7 +21,11 @@ describe("when a component is wrapped in a FormField within a Form", () => {
       <FormProvider {...formMethods}>
         {children}
         <Button
-          onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+          onPress={() => {
+            void formMethods.handleSubmit(values => {
+              mockOnSubmit(values);
+            })();
+          }}
           title={saveButtonText}
           accessibilityLabel={saveButtonText}
         />

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -50,16 +50,17 @@ export const createCommonInputTokens = (
 /**
  * @deprecated Use useCommonInputStyles instead
  */
-export const commonInputStyles = StyleSheet.create(
-  createCommonInputTokens(staticTokens),
-);
+export const commonInputStyles: ReturnType<typeof createCommonInputTokens> =
+  StyleSheet.create(createCommonInputTokens(staticTokens));
 
 export const getCommonInputStyles = (
   tokens: AtlantisThemeContextValue["tokens"],
-) => {
+): ReturnType<typeof createCommonInputTokens> => {
   return createCommonInputTokens(tokens);
 };
 
-export const useCommonInputStyles = buildThemedStyles(tokens => {
+export const useCommonInputStyles: () => ReturnType<
+  typeof getCommonInputStyles
+> = buildThemedStyles(tokens => {
   return getCommonInputStyles(tokens);
 });

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -1,19 +1,43 @@
-import { StyleSheet } from "react-native";
+import type { ViewStyle } from "react-native";
 import { getCommonInputStyles } from "./CommonInputStyles.style";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 import { getTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
+type Styles = Record<
+  | "container"
+  | "field"
+  | "inputContainer"
+  | "inputFocused"
+  | "inputInvalid"
+  | "label"
+  | "miniLabel"
+  | "miniLabelShowClearAction"
+  | "disabled"
+  | "fieldAffix"
+  | "fieldAffixMiniLabel"
+  | "prefixIcon"
+  | "prefixLabel"
+  | "suffixIcon"
+  | "suffixLabel"
+  | "suffixIconMargin"
+  | "suffixLabelMargin"
+  | "inputEndContainer"
+  | "toolbar"
+  | "loadingSpinner"
+  | "loadingGlimmers"
+  | "loadingGlimmersHasValue",
+  ViewStyle
+>;
+
+export const useStyles: () => Styles = buildThemedStyles(tokens => {
   const commonInputStyles = getCommonInputStyles(tokens);
   const typographyStyles = getTypographyStyles(tokens);
 
   return {
-    container: StyleSheet.flatten([
-      commonInputStyles.container,
-      {
-        flexDirection: "column",
-      },
-    ]),
+    container: {
+      ...commonInputStyles.container,
+      flexDirection: "column",
+    },
 
     field: {
       flexDirection: "row",

package/src/InputPressable/InputPressable.style.ts

@@ -1,7 +1,17 @@
+import type { TextStyle, ViewStyle } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 import { getTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
+interface Styles {
+  pressable: ViewStyle;
+  inputPressableStyles: TextStyle;
+  inputEmpty: TextStyle;
+  inputDisabled: TextStyle;
+  inputInvalid: ViewStyle;
+  withoutMiniLabel: TextStyle;
+}
+
+export const useStyles: () => Styles = buildThemedStyles(tokens => {
   const typographyStyles = getTypographyStyles(tokens);
 
   return {

package/src/InputPressable/InputPressable.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from "react";
+import type { ComponentRef, Ref } from "react";
 import React, { forwardRef } from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
@@ -105,8 +105,10 @@ export interface InputPressableProps {
   readonly onClear?: () => void;
 }
 
-export type InputPressableRef = NativeText;
-export const InputPressable = forwardRef(InputPressableInternal);
+export type InputPressableRef = ComponentRef<typeof NativeText>;
+export const InputPressable: React.ForwardRefExoticComponent<
+  InputPressableProps & React.RefAttributes<InputPressableRef>
+> = forwardRef<InputPressableRef, InputPressableProps>(InputPressableInternal);
 
 export function InputPressableInternal(
   {

package/src/InputText/InputText.test.tsx

@@ -646,7 +646,11 @@ describe("InputText", () => {
             accessibilityLabel={inputAccessibilityLabel}
           />
           <Button
-            onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+            onPress={() => {
+              void formMethods.handleSubmit(values => {
+                mockOnSubmit(values);
+              })();
+            }}
             title={saveButtonText}
             accessibilityLabel={saveButtonText}
           />