@jobber/components-native 0.89.5-JOB-140604-cab60b8.43 → 0.89.5-JOB-140604-8777ec5.52

package/src/Menu/types.ts

@@ -1,3 +1,4 @@
+import type { ReactElement } from "react";
 import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 
@@ -15,9 +16,14 @@ export interface MenuOptionInternalProps extends MenuOptionProps {
   setOpen: (bool: boolean) => void;
 }
 
+export interface CustomActivatorProps {
+  readonly onPress?: () => void;
+  readonly onLongPress?: () => void;
+}
+
 export interface MenuProps {
   readonly menuOptions?: MenuOptionProps[];
-  readonly customActivator?: JSX.Element;
+  readonly customActivator?: ReactElement<CustomActivatorProps>;
 }
 
 export interface OverlayProp {

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
-}: ProgressBarProps): JSX.Element {
+}: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();

package/src/ProgressBar/ProgressBarInner.tsx

@@ -14,7 +14,7 @@ export function ProgressBarInner({
   width,
   // animationDuration = 0,
   color,
-}: ProgressBarInnerProps): JSX.Element {
+}: ProgressBarInnerProps) {
   // Animation breaking on Android
   // const [animatedOpacity] = useTiming({
   //   duration: animationDuration,

package/src/Select/Select.tsx

@@ -110,7 +110,7 @@ export function Select({
   accessibilityLabel,
   name,
   testID,
-}: SelectProps): JSX.Element {
+}: SelectProps) {
   const { field, error } = useFormController({
     name,
     validations,
@@ -243,6 +243,6 @@ function getTestID(testID?: string): string {
   return "ATL-Select";
 }
 
-export function Option({ children }: SelectOption): JSX.Element {
+export function Option({ children }: SelectOption) {
   return <>{children}</>;
 }

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -19,7 +19,7 @@ export function SelectDefaultPicker({
   children,
   options,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const [show, setShow] = useState(false);
   const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -12,7 +12,7 @@ export function SelectDefaultPicker({
   options,
   disabled,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
   const { tokens } = useAtlantisTheme();

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

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

package/src/Select/components/SelectPressable/SelectPressable.tsx

@@ -13,10 +13,7 @@ type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> &
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export function SelectPressable({
-  children,
-  onPress,
-}: SelectPressableProps): JSX.Element {
+export function SelectPressable({ children, onPress }: SelectPressableProps) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const styles = useStyles();
   if (isScreenReaderEnabled) return <>{children}</>;

package/src/StatusLabel/StatusLabel.tsx

@@ -37,7 +37,7 @@ export function StatusLabel({
   text,
   alignment = "end",
   status = "success",
-}: StatusLabelProps): JSX.Element {
+}: StatusLabelProps) {
   const styles = useStyles();
 
   return (

package/src/Switch/Switch.tsx

@@ -20,7 +20,7 @@ interface WithLabelProps extends BaseSwitchProps {
 
 export type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
 
-export function Switch(props: SwitchProps): JSX.Element {
+export function Switch(props: SwitchProps) {
   const switchProps: SwitchProps = {
     ...props,
     accessibilityLabel: props.accessibilityLabel || props.label,

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

@@ -43,7 +43,7 @@ export function BaseSwitch({
   disabled = false,
   accessibilityLabel,
   name,
-}: BaseSwitchProps): JSX.Element {
+}: BaseSwitchProps) {
   const { field } = useFormController({
     name,
     value: value ?? defaultValue,

package/src/Text/Text.tsx

@@ -143,7 +143,7 @@ export function Text({
   underline,
   selectable,
   onTextLayout,
-}: TextProps): JSX.Element {
+}: TextProps) {
   const accessibilityRole: TextAccessibilityRole = "text";
 
   return (

package/src/TextList/TextList.tsx

@@ -44,7 +44,7 @@ export function TextList({
   emphasis,
   level = "text",
   spacing = "none",
-}: TextListProps): JSX.Element {
+}: TextListProps) {
   const styles = useStyles();
 
   return (

package/src/ThumbnailList/ThumbnailList.tsx

@@ -26,7 +26,7 @@ export function ThumbnailList({
   rowCount = RowCount.TwoRows,
   handleOpenFile,
   createThumbnail,
-}: ThumbnailListProps): JSX.Element {
+}: ThumbnailListProps) {
   const imageList = filterImages(files);
   const styles = useStyles();
 

package/src/Toast/Toast.tsx

@@ -17,7 +17,7 @@ import { tokens as staticTokens } from "../utils/design";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 
-function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
+function DefaultToast({ text1 }: ToastConfigParams<string>) {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -56,7 +56,7 @@ export interface JobberToastProps {
   readonly bottomOffset?: number;
 }
 
-export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {
+export function JobberToast({ bottomOffset }: JobberToastProps) {
   return <Toast bottomOffset={bottomOffset} config={toastConfig} />;
 }
 

package/src/Typography/Typography.tsx

@@ -174,7 +174,7 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
   onTextLayout,
-}: TypographyProps<T>): JSX.Element {
+}: TypographyProps<T>) {
   const styles = useTypographyStyles();
   const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [

package/src/Typography/TypographyGestureDetector.tsx

@@ -7,8 +7,6 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
  * accidental highlighting of text in Android devices
  * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
  */
-export function TypographyGestureDetector(
-  props: PropsWithChildren<unknown>,
-): JSX.Element {
+export function TypographyGestureDetector(props: PropsWithChildren<unknown>) {
   return <GestureDetector {...props} gesture={Gesture.Native()} />;
 }

package/src/utils/meta/meta.json

@@ -12,7 +12,6 @@
     "AutoLink",
     "Banner",
     "BottomSheet",
-    "BottomSheet.InputText",
     "BottomSheetOption",
     "Button",
     "ButtonGroup",

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -12,7 +12,7 @@ export function MockSafeAreaProvider({
   frame,
   insets,
   children,
-}: MockSafeAreaProviderProps): JSX.Element {
+}: MockSafeAreaProviderProps) {
   const initialFrame: Rect = { x: 0, y: 0, width: 0, height: 0 };
   const initialInsets: EdgeInsets = { bottom: 50, top: 50, left: 0, right: 0 };
 

package/dist/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.js

@@ -1,45 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import { TextInput, View, findNodeHandle } from "react-native";
-import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
-import { useStyles } from "./BottomSheetInputText.styles";
-import { InputText } from "../../../InputText/InputText";
-/**
- * BottomSheetInputText is a wrapper around InputText that provides
- * bottom sheet keyboard handling. It implements the handleOnFocus and
- * handleOnBlur logic from BottomSheetTextInput to ensure proper keyboard
- * positioning within bottom sheets.
- */
-export const BottomSheetInputText = forwardRef(function BottomSheetInputText(props, ref) {
-    const styles = useStyles();
-    const { onFocus, onBlur } = props;
-    const { animatedKeyboardState, textInputNodesRef } = useBottomSheetInternal();
-    const handleOnFocus = useCallback((event) => {
-        animatedKeyboardState.set((state) => (Object.assign(Object.assign({}, state), { target: event === null || event === void 0 ? void 0 : event.nativeEvent.target })));
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }, [animatedKeyboardState, onFocus]);
-    const handleOnBlur = useCallback((event) => {
-        const keyboardState = animatedKeyboardState.get();
-        const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
-        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)
-            : null;
-        /**
-         * we need to make sure that we only remove the target
-         * if the target belong to the current component and
-         * if the currently focused input is not in the targets set.
-         */
-        const shouldRemoveCurrentTarget = keyboardState.target === (event === null || event === void 0 ? void 0 : event.nativeEvent.target);
-        const shouldIgnoreBlurEvent = currentFocusedInput &&
-            textInputNodesRef.current.has(currentFocusedInput);
-        if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
-            animatedKeyboardState.set((state) => (Object.assign(Object.assign({}, state), { target: undefined })));
-        }
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }, [animatedKeyboardState, textInputNodesRef, onBlur]);
-    return (React.createElement(View, { style: styles.inputText },
-        React.createElement(InputText, Object.assign({}, props, { ref: ref, onFocus: handleOnFocus, onBlur: handleOnBlur }))));
-});

package/dist/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.styles.js

@@ -1,8 +0,0 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-export const useStyles = buildThemedStyles(tokens => {
-    return {
-        inputText: {
-            padding: tokens["space-small"],
-        },
-    };
-});

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

@@ -1,9 +0,0 @@
-import React from "react";
-import type { InputTextProps, InputTextRef } from "../../../InputText/InputText";
-/**
- * BottomSheetInputText is a wrapper around InputText that provides
- * bottom sheet keyboard handling. It implements the handleOnFocus and
- * handleOnBlur logic from BottomSheetTextInput to ensure proper keyboard
- * positioning within bottom sheets.
- */
-export declare const BottomSheetInputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<InputTextRef>>;

package/dist/types/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.styles.d.ts

@@ -1,5 +0,0 @@
-export declare const useStyles: () => {
-    inputText: {
-        padding: number;
-    };
-};

package/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.styles.ts

@@ -1,9 +0,0 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-
-export const useStyles = buildThemedStyles(tokens => {
-  return {
-    inputText: {
-      padding: tokens["space-small"],
-    },
-  };
-});

package/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.tsx

@@ -1,89 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import type { FocusEvent } from "react-native";
-import { TextInput, View, findNodeHandle } from "react-native";
-import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
-import { useStyles } from "./BottomSheetInputText.styles";
-import type {
-  InputTextProps,
-  InputTextRef,
-} from "../../../InputText/InputText";
-import { InputText } from "../../../InputText/InputText";
-
-/**
- * BottomSheetInputText is a wrapper around InputText that provides
- * bottom sheet keyboard handling. It implements the handleOnFocus and
- * handleOnBlur logic from BottomSheetTextInput to ensure proper keyboard
- * positioning within bottom sheets.
- */
-export const BottomSheetInputText = forwardRef<InputTextRef, InputTextProps>(
-  function BottomSheetInputText(props, ref) {
-    const styles = useStyles();
-    const { onFocus, onBlur } = props;
-    const { animatedKeyboardState, textInputNodesRef } =
-      useBottomSheetInternal();
-
-    const handleOnFocus = useCallback(
-      (event?: FocusEvent) => {
-        animatedKeyboardState.set(
-          (state: ReturnType<typeof animatedKeyboardState.get>) => ({
-            ...state,
-            target: event?.nativeEvent.target,
-          }),
-        );
-
-        onFocus?.(event);
-      },
-      [animatedKeyboardState, onFocus],
-    );
-
-    const handleOnBlur = useCallback(
-      (event?: FocusEvent) => {
-        const keyboardState = animatedKeyboardState.get();
-        const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
-        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,
-              )
-            : null;
-
-        /**
-         * we need to make sure that we only remove the target
-         * if the target belong to the current component and
-         * if the currently focused input is not in the targets set.
-         */
-        const shouldRemoveCurrentTarget =
-          keyboardState.target === event?.nativeEvent.target;
-        const shouldIgnoreBlurEvent =
-          currentFocusedInput &&
-          textInputNodesRef.current.has(currentFocusedInput);
-
-        if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
-          animatedKeyboardState.set(
-            (state: ReturnType<typeof animatedKeyboardState.get>) => ({
-              ...state,
-              target: undefined,
-            }),
-          );
-        }
-
-        onBlur?.(event);
-      },
-      [animatedKeyboardState, textInputNodesRef, onBlur],
-    );
-
-    return (
-      <View style={styles.inputText}>
-        <InputText
-          {...props}
-          ref={ref}
-          onFocus={handleOnFocus}
-          onBlur={handleOnBlur}
-        />
-      </View>
-    );
-  },
-);