react-native-external-keyboard 0.9.1 → 1.0.0

package/src/utils/useKeyboardPress/useKeyboardPress.ios.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { UseKeyboardPressProps } from './useKeyboardPress.types';
-import type { OnKeyPress } from '../../types/BaseKeyboardView';
+import type { OnKeyPress } from '../../types';
 import type { GestureResponderEvent } from 'react-native';
 
 const IOS_SPACE_KEY = 44;
@@ -19,12 +19,10 @@ export const useKeyboardPress = <
   onPressOut,
   onLongPress,
   triggerCodes = IOS_TRIGGER_CODES,
-  disabled = false,
 }: UseKeyboardPressProps<T, K>) => {
   const onKeyUpPressHandler = useMemo(() => {
     return (e: OnKeyPress) => {
       onKeyUpPress?.(e);
-      if (disabled) return;
 
       if (triggerCodes.includes(e.nativeEvent.keyCode)) {
         onPressOut?.(e);
@@ -35,18 +33,17 @@ export const useKeyboardPress = <
         }
       }
     };
-  }, [onKeyUpPress, onLongPress, onPress, onPressOut, triggerCodes, disabled]);
+  }, [onKeyUpPress, onLongPress, onPress, onPressOut, triggerCodes]);
 
   const onKeyDownPressHandler = useMemo(() => {
     if (!onPressIn) return onKeyDownPress;
     return (e: OnKeyPress) => {
       onKeyDownPress?.(e);
-      if (disabled) return;
       if (triggerCodes.includes(e.nativeEvent.keyCode)) {
         onPressIn?.(e);
       }
     };
-  }, [onKeyDownPress, onPressIn, triggerCodes, disabled]);
+  }, [onKeyDownPress, onPressIn, triggerCodes]);
 
   return {
     onKeyUpPressHandler,

package/src/utils/useKeyboardPress/useKeyboardPress.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { UseKeyboardPressProps } from './useKeyboardPress.types';
-import type { OnKeyPress } from '../../types/BaseKeyboardView';
+import type { OnKeyPress } from '../../types';
 
 const IOS_SPACE_KEY = 44;
 const IOS_RETURN_OR_ENTER = 40;
@@ -14,32 +14,34 @@ export const useKeyboardPress = <
   onKeyUpPress,
   onKeyDownPress,
   onPress,
+  onLongPress,
   onPressIn,
   onPressOut,
   triggerCodes = IOS_TRIGGER_CODES,
-  disabled = false,
 }: UseKeyboardPressProps<T, K>) => {
   const onKeyUpPressHandler = useMemo(() => {
-    if (!onPressOut) return onKeyUpPress;
     return (e: OnKeyPress) => {
       onKeyUpPress?.(e);
-      if (disabled) return;
       if (triggerCodes.includes(e.nativeEvent.keyCode)) {
         onPressOut?.(e);
+        if (e.nativeEvent.isLongPress) {
+          onLongPress?.({} as any);
+        } else {
+          onPress?.({} as any);
+        }
       }
     };
-  }, [onKeyUpPress, onPressOut, triggerCodes, disabled]);
+  }, [onKeyUpPress, onLongPress, onPress, onPressOut, triggerCodes]);
 
   const onKeyDownPressHandler = useMemo(() => {
     if (!onPressIn) return onKeyDownPress;
     return (e: OnKeyPress) => {
       onKeyDownPress?.(e);
-      if (disabled) return;
       if (triggerCodes.includes(e.nativeEvent.keyCode)) {
         onPressIn?.(e);
       }
     };
-  }, [onKeyDownPress, onPressIn, triggerCodes, disabled]);
+  }, [onKeyDownPress, onPressIn, triggerCodes]);
 
   return {
     onKeyUpPressHandler,

package/src/utils/useKeyboardPress/useKeyboardPress.types.ts

@@ -1,4 +1,4 @@
-import type { OnKeyPressFn } from '../../types/BaseKeyboardView';
+import type { OnKeyPressFn } from '../../types';
 
 export type UseKeyboardPressProps<T, K> = {
   triggerCodes?: number[];
@@ -8,5 +8,4 @@ export type UseKeyboardPressProps<T, K> = {
   onPress?: T;
   onPressIn?: K;
   onPressOut?: K;
-  disabled?: boolean;
 };

package/src/utils/useKeyboardPressState.ts

@@ -0,0 +1,81 @@
+import { useCallback, useState } from 'react';
+import { Platform } from 'react-native';
+
+type AnyPressHandler = (event?: any) => void;
+type PressableStyleFn = (state: { pressed: boolean }) => unknown;
+
+type UseKeyboardPressStateParams = {
+  enabled?: boolean;
+  onPressIn?: AnyPressHandler;
+  onPressOut?: AnyPressHandler;
+  onFocusChange?: (isFocused: boolean) => void;
+};
+
+/**
+ * Android only. Physical-keyboard activation (Enter / Space / DPad-center) never
+ * reaches the touch responder, so a wrapped component's `pressed` stays false.
+ * This derives a press state from the key down/up events and returns composable
+ * pieces to thread it through focus, press handlers, and function styles.
+ *
+ * Everything is a no-op unless `enabled` and running on Android, so callers can
+ * always wire the returned values unconditionally.
+ */
+export const useKeyboardPressState = ({
+  enabled = false,
+  onPressIn,
+  onPressOut,
+  onFocusChange,
+}: UseKeyboardPressStateParams) => {
+  const active = enabled && Platform.OS === 'android';
+  const [pressed, setPressed] = useState(false);
+
+  const handlePressIn = useCallback(
+    (e?: any) => {
+      setPressed(true);
+      onPressIn?.(e);
+    },
+    [onPressIn]
+  );
+
+  const handlePressOut = useCallback(
+    (e?: any) => {
+      setPressed(false);
+      onPressOut?.(e);
+    },
+    [onPressOut]
+  );
+
+  const handleFocusChange = useCallback(
+    (isFocused: boolean) => {
+      // Drop a stuck press if focus leaves before the key-up arrives.
+      if (!isFocused && active) setPressed(false);
+      onFocusChange?.(isFocused);
+    },
+    [onFocusChange, active]
+  );
+
+  // Fold the keyboard press into a `style({ pressed })` function so visual
+  // press feedback (`withPressedStyle`, function styles) reacts to the keyboard.
+  // Non-function styles and the inactive case are returned untouched.
+  const applyPressedStyle = useCallback(
+    <S>(style: S): S => {
+      if (!active || typeof style !== 'function') return style;
+      const styleFn = style as PressableStyleFn;
+      return (({ pressed: touchPressed }: { pressed: boolean }) =>
+        styleFn({ pressed: touchPressed || pressed })) as S;
+    },
+    [active, pressed]
+  );
+
+  return {
+    /** A keyboard-driven press is currently held. */
+    pressed: active && pressed,
+    /** Pass to the keyboard press hook; the original handlers when inactive. */
+    onPressIn: active ? handlePressIn : onPressIn,
+    onPressOut: active ? handlePressOut : onPressOut,
+    /** Wrap `onFocusChange` to clear a stuck press on blur. */
+    onFocusChange: handleFocusChange,
+    /** Fold the keyboard press into a function style. */
+    applyPressedStyle,
+  };
+};

package/src/utils/useOnFocusChange.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
-import type { OnFocusChangeFn } from '../types';
+import type { OnFocusChangeFn, NativeFocusChangeHandler } from '../types';
 
 type UseFocusChange = {
-  onFocusChange?: (f: boolean, tag?: number) => void;
+  onFocusChange?: OnFocusChangeFn;
   onFocus?: () => void;
   onBlur?: () => void;
 };
@@ -12,12 +12,9 @@ export const useOnFocusChange = ({
   onFocus,
   onBlur,
 }: UseFocusChange) =>
-  useCallback<OnFocusChangeFn>(
+  useCallback<NativeFocusChangeHandler>(
     (e) => {
-      onFocusChange?.(
-        e.nativeEvent.isFocused,
-        (e?.nativeEvent as unknown as { target?: number })?.target
-      );
+      onFocusChange?.(e.nativeEvent.isFocused, e.nativeEvent.target);
       if (e.nativeEvent.isFocused) {
         onFocus?.();
       } else {

package/src/utils/useOrderValidation.ts

@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import type { FocusOrderProps } from '../types';
+
+type UseOrderValidationProps = Pick<
+  FocusOrderProps,
+  | 'orderIndex'
+  | 'orderId'
+  | 'orderForward'
+  | 'orderBackward'
+  | 'orderFirst'
+  | 'orderLast'
+  | 'orderLeft'
+  | 'orderRight'
+  | 'orderUp'
+  | 'orderDown'
+> & {
+  groupId?: string;
+  orderPrefix: string;
+};
+
+export const useOrderValidation = ({
+  groupId,
+  orderIndex,
+  orderPrefix,
+  orderId,
+  orderForward,
+  orderBackward,
+  orderFirst,
+  orderLast,
+  orderLeft,
+  orderRight,
+  orderUp,
+  orderDown,
+}: UseOrderValidationProps) => {
+  useEffect(() => {
+    if (!__DEV__) return;
+    if (orderIndex !== undefined && !groupId)
+      console.warn(
+        '`orderIndex` must be declared alongside `orderGroup` for proper functionality. Ensure components are wrapped with `KeyboardOrderFocusGroup` or provide `orderGroup` directly.'
+      );
+  }, [groupId, orderIndex]);
+
+  useEffect(() => {
+    if (!__DEV__) return;
+    const hasOrderLinkProp =
+      orderId !== undefined ||
+      orderForward !== undefined ||
+      orderBackward !== undefined ||
+      orderFirst !== undefined ||
+      orderLast !== undefined ||
+      orderLeft !== undefined ||
+      orderRight !== undefined ||
+      orderUp !== undefined ||
+      orderDown !== undefined;
+    if (hasOrderLinkProp && orderPrefix === '') {
+      console.warn(
+        '[react-native-external-keyboard] orderId, orderForward, orderBackward, orderFirst, orderLast, ' +
+          'orderLeft, orderRight, orderUp, and orderDown are global IDs. ' +
+          'Wrap the component in <KeyboardOrderFocusGroup> or pass orderPrefix to avoid ID collisions across screens.'
+      );
+    }
+  }, [
+    orderId,
+    orderForward,
+    orderBackward,
+    orderFirst,
+    orderLast,
+    orderLeft,
+    orderRight,
+    orderUp,
+    orderDown,
+    orderPrefix,
+  ]);
+};

package/src/utils/useRenderedChildren.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+type UseRenderedChildrenProps = {
+  focused: boolean;
+  keyboardPressed?: boolean;
+  renderContent?: (state: Record<string, unknown>) => React.ReactNode;
+  renderFocusable?: (state: { focused: boolean }) => React.ReactNode;
+};
+
+/**
+ * Resolves the `children` override for the wrapped component.
+ * - `renderContent` stays a function so the component can call it with its own state + `focused`
+ *   (keyboard activation forces `pressed` when `keyboardPressed` is set)
+ * - `renderFocusable` is evaluated immediately and returned as a static node
+ * Returns `undefined` when neither prop is provided.
+ */
+export const useRenderedChildren = ({
+  focused,
+  keyboardPressed = false,
+  renderContent,
+  renderFocusable,
+}: UseRenderedChildrenProps) => {
+  const contentChildren = useMemo(
+    () =>
+      renderContent
+        ? (state: Record<string, unknown>) =>
+            renderContent({
+              ...state,
+              ...(keyboardPressed ? { pressed: true } : null),
+              focused,
+            })
+        : undefined,
+    [renderContent, focused, keyboardPressed]
+  );
+
+  const focusableChildren = useMemo(
+    () => renderFocusable?.({ focused }),
+    [renderFocusable, focused]
+  );
+
+  return contentChildren ?? focusableChildren;
+};

package/src/utils/useWrappedOrderProps.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import type { FocusOrderProps } from '../types';
+import { wrapOrderPrefix } from './wrapOrderPrefix';
+
+export const useWrappedOrderProps = ({
+  orderPrefix = '',
+  orderId,
+  orderForward,
+  orderBackward,
+  orderFirst,
+  orderLast,
+  orderLeft,
+  orderRight,
+  orderUp,
+  orderDown,
+}: FocusOrderProps) => {
+  const wrapPrefix = useMemo(() => wrapOrderPrefix(orderPrefix), [orderPrefix]);
+
+  return useMemo(
+    () => ({
+      orderId: wrapPrefix(orderId),
+      orderForward: wrapPrefix(orderForward),
+      orderBackward: wrapPrefix(orderBackward),
+      orderLeft: wrapPrefix(orderLeft),
+      orderRight: wrapPrefix(orderRight),
+      orderUp: wrapPrefix(orderUp),
+      orderDown: wrapPrefix(orderDown),
+      orderFirst: wrapPrefix(
+        orderFirst === null ? undefined : orderFirst ?? orderForward
+      ),
+      orderLast: wrapPrefix(
+        orderLast === null ? undefined : orderLast ?? orderBackward
+      ),
+    }),
+    [
+      wrapPrefix,
+      orderId,
+      orderForward,
+      orderBackward,
+      orderFirst,
+      orderLast,
+      orderLeft,
+      orderRight,
+      orderUp,
+      orderDown,
+    ]
+  );
+};