react-native-external-keyboard 0.9.1 → 0.11.1

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,
+    ]
+  );
+};

package/src/utils/withKeyboardFocus.tsx

@@ -1,64 +1,63 @@
-import React, { useCallback, useMemo, type RefObject } from 'react';
-import { View, StyleSheet, type ViewProps } from 'react-native';
+import React, { type RefObject, useMemo } from 'react';
+import { Pressable as RNPressable, View, type ViewProps } from 'react-native';
 import { BaseKeyboardView } from '../components';
-import type { KeyboardFocus, OnKeyPress } from '../types/BaseKeyboardView';
-import { useFocusStyle } from './useFocusStyle';
 import type {
+  BaseKeyboardViewType,
   KeyboardPressType,
-  WithKeyboardFocus,
-  WithKeyboardFocusComponent,
-} from '../types/WithKeyboardFocus';
-import { RenderPropComponent } from '../components/RenderPropComponent/RenderPropComponent';
-import { useKeyboardPress } from './useKeyboardPress/useKeyboardPress';
+  OnKeyPress,
+  WithKeyboardFocusProps,
+  KeyboardFocusableComponent,
+} from '../types';
+import { useKeyboardFocusContainer } from './useKeyboardFocusContainer';
+import { useRenderedChildren } from './useRenderedChildren';
 import { IsViewFocusedContext } from '../context/IsViewFocusedContext';
-import type { FocusViewProps } from '../types/KeyboardFocusView.types';
 
 export const withKeyboardFocus = <
   ComponentProps extends object,
   ViewStyleType,
   ViewType = View
 >(
-  Component: WithKeyboardFocusComponent<ComponentProps>
+  Component: KeyboardFocusableComponent<ComponentProps>
 ) => {
   const WithKeyboardFocus = React.memo(
     React.forwardRef<
-      View | KeyboardFocus,
-      WithKeyboardFocus<ComponentProps, ViewStyleType, ViewType>
+      BaseKeyboardViewType | View,
+      WithKeyboardFocusProps<ComponentProps, ViewStyleType, ViewType>
     >((allProps, ref) => {
       const {
-        tintType = 'default',
-        autoFocus,
+        // Style
         focusStyle,
         style,
         containerStyle,
-        onFocusChange,
+        containerFocusStyle,
+        withPressedStyle = false,
+        // Press handlers
         onPress,
         onLongPress,
         onKeyUpPress,
         onKeyDownPress,
         onPressIn,
         onPressOut,
-        group = false,
+        triggerCodes,
+        // Focus config
+        autoFocus,
+        focusableWrapper = true,
         haloEffect = true,
-        canBeFocused = true,
         focusable = true,
         tintColor,
         onFocus,
         onBlur,
-        containerFocusStyle,
-        FocusHoverComponent,
-        viewRef,
-        componentRef,
+        onFocusChange,
+        groupIdentifier,
         haloCornerRadius,
         haloExpendX,
         haloExpendY,
-        groupIdentifier,
-        withPressedStyle = false,
-        triggerCodes,
-        exposeMethods,
-        enableA11yFocus,
         screenAutoA11yFocus,
-        screenAutoA11yFocusDelay = 300, // ToDo align with BaseKeyboardView
+        screenAutoA11yFocusDelay,
+        lockFocus,
+        defaultFocusHighlightEnabled,
+        androidKeyboardPressState,
+        // Order
         orderIndex,
         orderGroup,
         orderId,
@@ -70,123 +69,118 @@ export const withKeyboardFocus = <
         orderBackward,
         orderFirst,
         orderLast,
-        lockFocus,
+        // Refs & render
+        componentRef,
         onComponentFocus,
         onComponentBlur,
         renderContent,
         renderFocusable,
-        defaultFocusHighlightEnabled,
+        roundedHaloFix,
+        tintType,
+        // Deprecated no-ops: discard so they never reach the wrapped component.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        enableA11yFocus: _enableA11yFocus,
+        children: userChildren,
         ...props
-      } = allProps as WithKeyboardFocus<ComponentProps, ViewStyleType>;
+      } = allProps as WithKeyboardFocusProps<ComponentProps, ViewStyleType> & {
+        children?: React.ReactNode;
+      };
 
       const {
         focused,
+        keyboardPressed,
         containerFocusedStyle,
         componentStyleViewStyle,
         onFocusChangeHandler,
-        hoverColor,
-      } = useFocusStyle({
+        onKeyUpPressHandler,
+        onKeyDownPressHandler,
+        onPressHandler,
+        onContextMenuHandler,
+        enableContextMenu,
+      } = useKeyboardFocusContainer({
         onFocusChange,
-        tintColor,
         focusStyle,
         containerFocusStyle,
-        tintType,
         style,
-        withPressedStyle,
-        Component,
+        pressedStyleSignature:
+          withPressedStyle ||
+          (Component as unknown) === (RNPressable as unknown),
+        onKeyUpPress,
+        onKeyDownPress,
+        onPress: onPress as (e?: OnKeyPress) => void,
+        onLongPress: onLongPress as (e?: OnKeyPress) => void,
+        onPressIn: onPressIn as (e?: OnKeyPress) => void,
+        onPressOut: onPressOut as (e?: OnKeyPress) => void,
+        triggerCodes,
+        androidKeyboardPressState,
       });
 
-      const withHaloEffect = tintType === 'default' && haloEffect;
-
-      const { onKeyUpPressHandler, onKeyDownPressHandler, onPressHandler } =
-        useKeyboardPress({
-          onKeyUpPress,
-          onKeyDownPress,
-          onPress: onPress as (e?: OnKeyPress) => void,
-          onLongPress: onLongPress as (e?: OnKeyPress) => void,
-          onPressIn: onPressIn as (e?: OnKeyPress) => void,
-          onPressOut: onPressOut as (e?: OnKeyPress) => void,
-          triggerCodes,
-          disabled: (props as { disabled?: boolean })?.disabled,
-        });
-
-      const contentChildrenProp = useMemo(
-        () =>
-          renderContent
-            ? (state: Record<string, unknown>) =>
-                (
-                  renderContent as unknown as (
-                    s: Record<string, unknown>
-                  ) => React.ReactNode
-                )({ ...state, focused })
-            : undefined,
-        [renderContent, focused]
-      );
-
-      const focusableChildrenProp = useMemo(
-        () => (renderFocusable ? renderFocusable({ focused }) : undefined),
-        [renderFocusable, focused]
-      );
-
-      const hoverContent = useMemo(() => {
-        if (FocusHoverComponent) return FocusHoverComponent;
-        if (tintType === 'hover') {
-          return <View style={[hoverColor, styles.absolute, styles.opacity]} />;
+      const renderedChildren = useRenderedChildren({
+        focused,
+        keyboardPressed,
+        renderContent: renderContent as unknown as (
+          state: Record<string, unknown>
+        ) => React.ReactNode,
+        renderFocusable,
+      });
+      // `renderContent`/`renderFocusable` are handled above; for a plain
+      // children render prop, fold the keyboard press into its `pressed` too so
+      // it stays consistent. A no-op unless `keyboardPressed` is active.
+      const childContent = useMemo(() => {
+        if (renderedChildren !== undefined) return renderedChildren;
+        if (keyboardPressed && typeof userChildren === 'function') {
+          const childrenFn = userChildren as (
+            state: Record<string, unknown>
+          ) => React.ReactNode;
+          return (state: Record<string, unknown>) =>
+            childrenFn({ ...state, pressed: true });
         }
-        return undefined;
-      }, [FocusHoverComponent, hoverColor, tintType]);
-
-      const focusOrderProps = {
-        orderIndex,
-        orderGroup,
-        orderId,
-        orderLeft,
-        orderRight,
-        orderUp,
-        orderDown,
-        orderForward,
-        orderBackward,
-        orderFirst,
-        orderLast,
-      };
+        return userChildren;
+      }, [renderedChildren, userChildren, keyboardPressed]);
 
-      const onContextMenuHandler = useCallback(() => {
-        (onLongPress as (e?: OnKeyPress) => void)?.();
-      }, [onLongPress]);
+      const containerStyleArr = useMemo(
+        () => [containerStyle as ViewProps['style'], containerFocusedStyle],
+        [containerStyle, containerFocusedStyle]
+      );
 
       return (
         <IsViewFocusedContext.Provider value={focused}>
           <BaseKeyboardView
-            style={[
-              containerStyle as ViewProps['style'],
-              containerFocusedStyle,
-            ]}
+            style={containerStyleArr}
             defaultFocusHighlightEnabled={defaultFocusHighlightEnabled}
-            ref={ref as RefObject<KeyboardFocus>}
-            viewRef={viewRef}
+            ref={ref as RefObject<BaseKeyboardViewType | View>}
             onKeyUpPress={onKeyUpPressHandler}
             onKeyDownPress={onKeyDownPressHandler}
-            onFocus={onFocus as FocusViewProps['onFocus']}
-            onBlur={onBlur as FocusViewProps['onBlur']}
+            onFocus={onFocus ?? undefined}
+            onBlur={onBlur ?? undefined}
             onFocusChange={onFocusChangeHandler}
             onContextMenuPress={onContextMenuHandler}
-            enableContextMenu={Boolean(onLongPress)}
-            haloEffect={withHaloEffect}
+            enableContextMenu={enableContextMenu}
+            haloEffect={haloEffect}
+            tintType={tintType}
             haloCornerRadius={haloCornerRadius}
             haloExpendX={haloExpendX}
             haloExpendY={haloExpendY}
             autoFocus={autoFocus}
-            canBeFocused={canBeFocused}
             focusable={focusable}
             tintColor={tintColor}
-            group={group}
+            focusableWrapper={focusableWrapper}
             groupIdentifier={groupIdentifier}
-            exposeMethods={exposeMethods}
-            enableA11yFocus={enableA11yFocus}
             screenAutoA11yFocus={screenAutoA11yFocus}
             screenAutoA11yFocusDelay={screenAutoA11yFocusDelay}
             lockFocus={lockFocus}
-            {...focusOrderProps}
+            roundedHaloFix={roundedHaloFix}
+            orderIndex={orderIndex}
+            orderGroup={orderGroup}
+            orderId={orderId}
+            orderLeft={orderLeft}
+            orderRight={orderRight}
+            orderUp={orderUp}
+            orderDown={orderDown}
+            orderForward={orderForward}
+            orderBackward={orderBackward}
+            orderFirst={orderFirst}
+            orderLast={orderLast}
           >
             <Component
               ref={componentRef}
@@ -205,15 +199,14 @@ export const withKeyboardFocus = <
               }
               onFocus={onComponentFocus}
               onBlur={onComponentBlur}
+              // forwarded to the child so Pressable-like components disable press handling when false
+              focusable={focusable}
               {...(props as unknown as ComponentProps)}
-              {...((contentChildrenProp || focusableChildrenProp) &&
+              {...(childContent !== undefined &&
                 ({
-                  children: contentChildrenProp ?? focusableChildrenProp,
+                  children: childContent,
                 } as unknown as Partial<ComponentProps>))}
             />
-            {focused && hoverContent && (
-              <RenderPropComponent render={hoverContent} />
-            )}
           </BaseKeyboardView>
         </IsViewFocusedContext.Provider>
       );
@@ -226,16 +219,3 @@ export const withKeyboardFocus = <
 
   return WithKeyboardFocus;
 };
-
-const styles = StyleSheet.create({
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  opacity: {
-    opacity: 0.3,
-  },
-});

package/lib/commonjs/components/KeyboardExtendedInput/KeyboardExtendedInput.types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/KeyboardExtendedInput/KeyboardExtendedInput.types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/KeyboardFocusView/hooks/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useFocusStyle", {
-  enumerable: true,
-  get: function () {
-    return _useFocusStyle.useFocusStyle;
-  }
-});
-var _useFocusStyle = require("./useFocusStyle");
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/KeyboardFocusView/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_useFocusStyle","require"],"sourceRoot":"../../../../../src","sources":["components/KeyboardFocusView/hooks/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/components/KeyboardFocusView/hooks/useFocusStyle/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useFocusStyle", {
-  enumerable: true,
-  get: function () {
-    return _useFocusStyle.useFocusStyle;
-  }
-});
-var _useFocusStyle = require("./useFocusStyle");
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/KeyboardFocusView/hooks/useFocusStyle/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_useFocusStyle","require"],"sourceRoot":"../../../../../../src","sources":["components/KeyboardFocusView/hooks/useFocusStyle/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA","ignoreList":[]}