@jobber/components-native 0.89.4 → 0.89.5-JOB-140604-4c8f8f2.41

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

@@ -0,0 +1,89 @@
+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>
+    );
+  },
+);

package/src/ButtonGroup/ButtonGroup.tsx

@@ -48,7 +48,7 @@ export function ButtonGroup({
 }: ButtonGroupProps): JSX.Element {
   const { t } = useAtlantisI18n();
   const { handlePress } = usePreventTapWhenOffline();
-  const secondaryActionsRef = useRef<BottomSheetRef>();
+  const secondaryActionsRef = useRef<BottomSheetRef>(null);
   const { primaryActions, secondaryActions } = getActions(children);
   const styles = useStyles();
 

package/src/InputText/InputText.tsx

@@ -117,7 +117,7 @@ export interface InputTextProps
   /**
    * Callback that is called when the text input is blurred
    */
-  readonly onBlur?: () => void;
+  readonly onBlur?: (event?: FocusEvent) => void;
 
   /**
    * VoiceOver will read this string when a user selects the associated element
@@ -422,10 +422,10 @@ function InputTextInternal(
           setFocused(true);
           onFocus?.(event);
         }}
-        onBlur={() => {
+        onBlur={event => {
           _name && setFocusedInput("");
           setFocused(false);
-          onBlur?.();
+          onBlur?.(event);
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}

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

@@ -150,6 +150,216 @@ exports[`renders a thumbnail component with attachments 1`] = `
         "top": 0,
       }
     }
-  />,
+  >
+    <View
+      backdropComponent={[Function]}
+      backgroundStyle={
+        {
+          "borderTopLeftRadius": 24,
+          "borderTopRightRadius": 24,
+          "paddingTop": 8,
+        }
+      }
+      enablePanDownToClose={true}
+      keyboardBlurBehavior="restore"
+      style={
+        {
+          "display": "none",
+        }
+      }
+      testID="bottom-sheet-mock"
+    >
+      <View
+        enableFooterMarginAdjustment={true}
+        style={
+          {
+            "paddingBottom": 8,
+          }
+        }
+        testID="bottom-sheet-view"
+      >
+        <View
+          accessibilityLabel="Preview "
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignContent": "center",
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "opacity": 1,
+              "padding": 8,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={24}
+              bbWidth={24}
+              focusable={false}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "display": "flex",
+                    "fill": "hsl(198, 35%, 21%)",
+                    "height": 24,
+                    "verticalAlign": "middle",
+                    "width": 24,
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              testID="eye"
+              vbHeight={24}
+              vbWidth={24}
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4280499528,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+              >
+                <RNSVGPath
+                  d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+                <RNSVGPath
+                  d="M21.863 12.477C20.794 14.2 16.703 20 12 20c-4.702 0-8.795-5.8-9.863-7.523a.903.903 0 0 1 0-.954C3.205 9.8 7.297 4 12 4c4.703 0 8.794 5.8 9.863 7.523a.903.903 0 0 1 0 .954ZM20 12s-3.582-6-8-6-8 6-8 6 3.582 6 8 6 8-6 8-6Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+          <View
+            style={
+              {
+                "flexShrink": 1,
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <Text
+              accessibilityRole="text"
+              adjustsFontSizeToFit={false}
+              allowFontScaling={true}
+              collapsable={false}
+              maxFontSizeMultiplier={3.125}
+              selectable={true}
+              selectionColor="hsl(86, 100%, 46%)"
+              style={
+                [
+                  {
+                    "fontFamily": "inter-semibold",
+                  },
+                  {
+                    "color": "hsl(197, 15%, 43%)",
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "fontSize": 16,
+                    "lineHeight": 20,
+                  },
+                  {
+                    "letterSpacing": 0,
+                  },
+                ]
+              }
+            >
+              Preview 
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        testID="bottom-sheet-footer"
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "rgba(255, 255, 255, 1)",
+              },
+              {
+                "paddingBottom": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
 ]
 `;

package/src/utils/meta/meta.json

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