react-native-external-keyboard 0.8.0 → 0.8.2

package/src/components/KeyboardExtendedInput/KeyboardExtendedInput.types.ts

@@ -0,0 +1,58 @@
+import {
+  type TextInputProps,
+  type StyleProp,
+  type ViewStyle,
+  type ColorValue,
+} from 'react-native';
+
+import type { FocusStyle } from '../../types/FocusStyle';
+import type { TintType } from '../../types/WithKeyboardFocus';
+import { type RenderProp } from '../RenderPropComponent/RenderPropComponent';
+import type { blurMap, focusMap } from './KeyboardExtendedInput.consts';
+
+export type ExtraKeyboardProps = {
+  focusType?: keyof typeof focusMap;
+  blurType?: keyof typeof blurMap;
+  containerStyle?: StyleProp<ViewStyle>;
+  onFocusChange?: (isFocused: boolean) => void;
+  focusStyle?: FocusStyle;
+  haloEffect?: boolean;
+  canBeFocusable?: boolean;
+  focusable?: boolean;
+  tintColor?: ColorValue;
+  tintType?: TintType;
+  containerFocusStyle?: FocusStyle;
+  FocusHoverComponent?: RenderProp;
+  submitBehavior?: string;
+  groupIdentifier?: string;
+};
+
+type IgnoreForCompatibility =
+  | 'rejectResponderTermination'
+  | 'selectionHandleColor'
+  | 'cursorColor'
+  | 'maxFontSizeMultiplier';
+
+type CompatibleInputProp<
+  TextInputPropsType extends object,
+  CompatibilityProp extends IgnoreForCompatibility
+> = CompatibilityProp extends keyof TextInputPropsType
+  ? TextInputPropsType[CompatibilityProp]
+  : CompatibilityProp extends keyof TextInputProps
+  ? TextInputProps[CompatibilityProp]
+  : never;
+
+type ReactNativeInputCompatibility<
+  TextInputPropsType extends object = TextInputProps
+> = Omit<TextInputPropsType, IgnoreForCompatibility> & {
+  [CompatibilityProp in IgnoreForCompatibility]?: CompatibleInputProp<
+    TextInputPropsType,
+    CompatibilityProp
+  > | null;
+};
+
+export type KeyboardInputPropsDeclaration<
+  TextInputPropsType extends object = TextInputProps
+> = ReactNativeInputCompatibility<TextInputPropsType> & ExtraKeyboardProps;
+
+export type KeyboardInputProps = KeyboardInputPropsDeclaration<TextInputProps>;

package/src/components/RenderPropComponent/RenderPropComponent.tsx

@@ -3,6 +3,7 @@ import React, { type FunctionComponent, type ReactElement } from 'react';
 export type RenderProp =
   | ReactElement
   | FunctionComponent
+  | FunctionComponent<{}>
   | (() => ReactElement);
 
 export const RenderPropComponent = ({ render }: { render: RenderProp }) => {

package/src/components/Touchable/Pressable.tsx

@@ -2,6 +2,7 @@ import {
   Pressable as RNPressable,
   type PressableProps,
   type ViewProps,
+  type View,
 } from 'react-native';
 
 import { withKeyboardFocus } from '../../utils/withKeyboardFocus';
@@ -11,5 +12,6 @@ export const Pressable = withKeyboardFocus(RNPressable);
 
 export type KeyboardPressableProps = WithKeyboardPropsTypeDeclaration<
   PressableProps,
-  ViewProps['style']
+  ViewProps['style'],
+  View
 >;

package/src/index.tsx

@@ -32,10 +32,17 @@ export {
   Pressable as KeyboardExtendedPressable,
   type KeyboardPressableProps,
 } from './components/Touchable/Pressable';
+
 export {
   KeyboardExtendedInput,
   KeyboardExtendedInput as TextInput,
 } from './components/KeyboardExtendedInput/KeyboardExtendedInput';
+export type {
+  KeyboardInputPropsDeclaration,
+  KeyboardInputProps,
+  ExtraKeyboardProps,
+} from './components/KeyboardExtendedInput/KeyboardExtendedInput.types';
+
 export { KeyboardFocusGroup } from './components/KeyboardFocusGroup/KeyboardFocusGroup';
 export { withKeyboardFocus } from './utils/withKeyboardFocus';
 export { useIsViewFocused } from './context/IsViewFocusedContext';

package/src/types/WithKeyboardFocus.ts

@@ -1,4 +1,4 @@
-import type { PressableProps, ViewProps } from 'react-native';
+import type { PressableProps, View, ViewProps } from 'react-native';
 import type { FocusStyle } from './FocusStyle';
 import type { KeyboardFocus, OnKeyPress } from './BaseKeyboardView';
 import type { FocusViewProps } from './KeyboardFocusView.types';
@@ -36,12 +36,12 @@ export type KeyboardPressType<ComponentProps extends object> = {
   onComponentBlur?: PickProp<ComponentProps, 'onBlur'>;
 };
 
-export type WithKeyboardProps<R = unknown, ViewStyleType = unknown> = {
+export type WithKeyboardProps<ViewType = View, ViewStyleType = unknown> = {
   withPressedStyle?: boolean;
   containerStyle?: ViewStyleType | ViewProps['style'];
   containerFocusStyle?: FocusStyle;
   tintType?: TintType;
-  componentRef?: React.RefObject<R>;
+  componentRef?: React.RefObject<ViewType>;
   FocusHoverComponent?: RenderProp;
   style?: PressableProps['style'];
   onBlur?: (() => void) | ((e: any) => void) | null;
@@ -61,34 +61,38 @@ type MergeProps<BaseProps extends object, OverrideProps extends object> = Omit<
 
 type KeyboardFocusOverrideProps<
   ComponentProps extends object,
-  ViewStyleType
+  ViewStyleType,
+  ViewType = View
 > = KeyboardPressType<ComponentProps> &
   KeyboardFocusBaseProps &
-  WithKeyboardProps<ComponentProps, ViewStyleType>;
+  WithKeyboardProps<ViewType, ViewStyleType>;
 
 export type WithKeyboardFocus<
   ComponentProps extends object,
-  ViewStyleType
+  ViewStyleType,
+  ViewType = View
 > = MergeProps<
   ComponentProps,
-  KeyboardFocusOverrideProps<ComponentProps, ViewStyleType>
+  KeyboardFocusOverrideProps<ComponentProps, ViewStyleType, ViewType>
 >;
 
 export type WithKeyboardPropsTypeDeclaration<
   ComponentProps extends object,
-  ViewStyleType
-> = WithKeyboardFocus<ComponentProps, ViewStyleType> &
+  ViewStyleType,
+  ViewType = View
+> = WithKeyboardFocus<ComponentProps, ViewStyleType, ViewType> &
   RefAttributes<KeyboardFocus>;
 
 export type WithKeyboardFocusDeclaration<
   ComponentProps extends object,
-  ViewStyleType
+  ViewStyleType,
+  ViewType = View
 > =
   | React.JSXElementConstructor<
-      WithKeyboardPropsTypeDeclaration<ComponentProps, ViewStyleType>
+      WithKeyboardPropsTypeDeclaration<ComponentProps, ViewStyleType, ViewType>
     >
   | React.ForwardRefExoticComponent<
-      WithKeyboardPropsTypeDeclaration<ComponentProps, ViewStyleType>
+      WithKeyboardPropsTypeDeclaration<ComponentProps, ViewStyleType, ViewType>
     >;
 
 export type TintType = 'default' | 'hover' | 'background' | 'none';

package/src/utils/withKeyboardFocus.tsx

@@ -13,13 +13,17 @@ import { useKeyboardPress } from './useKeyboardPress/useKeyboardPress';
 import { IsViewFocusedContext } from '../context/IsViewFocusedContext';
 import type { FocusViewProps } from '../types/KeyboardFocusView.types';
 
-export const withKeyboardFocus = <ComponentProps extends object, ViewStyleType>(
+export const withKeyboardFocus = <
+  ComponentProps extends object,
+  ViewStyleType,
+  ViewType = View
+>(
   Component: WithKeyboardFocusComponent<ComponentProps>
 ) => {
   const WithKeyboardFocus = React.memo(
     React.forwardRef<
       View | KeyboardFocus,
-      WithKeyboardFocus<ComponentProps, ViewStyleType>
+      WithKeyboardFocus<ComponentProps, ViewStyleType, ViewType>
     >((allProps, ref) => {
       const {
         tintType = 'default',