rn-css 1.9.3 → 1.9.4

package/dist/styleComponent.d.ts

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
 import { FlatListProps, SectionListProps, StyleProp, TouchableHighlightProps, ViewProps, VirtualizedListProps } from 'react-native';
+import { FocusEventListener, BlurEventListener } from './features';
 import type { CompleteStyle, Units } from './types';
 export declare const defaultUnits: Units;
 export declare const RemContext: React.Context<number>;
@@ -15,8 +16,8 @@ declare type Functs<T> = (arg: T & {
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;
-    onFocus?: TouchableHighlightProps['onFocus'];
-    onBlur?: TouchableHighlightProps['onBlur'];
+    onFocus?: FocusEventListener;
+    onBlur?: BlurEventListener;
     onPressIn?: TouchableHighlightProps['onPressIn'];
     onPressOut?: TouchableHighlightProps['onPressOut'];
     onResponderStart?: ViewProps['onResponderStart'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "scripts": {
     "test": "jest",
     "prepare": "rm -rf dist && tsc",

package/src/features.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
 import type { Style, Units, MediaQuery, PartialStyle } from './types'
-import { useWindowDimensions, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, GestureResponderEvent } from 'react-native'
+import { useWindowDimensions, LayoutChangeEvent, GestureResponderEvent, TouchableHighlightProps, TextInputProps } from 'react-native'
 import { parseValue } from './convertUnits'
 import { createContext } from './cssToRN/mediaQueries'
 
@@ -61,14 +61,16 @@ export const useActive = (
   }
 }
 
+export type FocusEventListener = TouchableHighlightProps['onFocus'] | TextInputProps['onFocus']
+export type BlurEventListener = TouchableHighlightProps['onBlur'] | TextInputProps['onBlur']
 /** Hook that will apply the style reserved for active state if needed */
-export const useFocus = (onFocus: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void), onBlur: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined), needsFocus: boolean) => {
+export const useFocus = (onFocus: undefined | FocusEventListener, onBlur: undefined | BlurEventListener, needsFocus: boolean) => {
   const [focused, setFocused] = React.useState(false)
-  const focusStart = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+  const focusStart = React.useMemo(() => needsFocus ? (event: any) => {
     if (onFocus) onFocus(event)
     setFocused(true)
   } : undefined, [needsFocus, onFocus])
-  const focusStop = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+  const focusStop = React.useMemo(() => needsFocus ? (event: any) => {
     if (onBlur) onBlur(event)
     setFocused(false)
   } : undefined, [needsFocus, onBlur])

package/src/styleComponent.tsx

@@ -5,7 +5,7 @@ import React, { MouseEvent } from 'react'
 import { FlatList, FlatListProps, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TouchableHighlightProps, ViewProps, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
-import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus } from './features'
+import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus, FocusEventListener, BlurEventListener } from './features'
 import type { AnyStyle, CompleteStyle, Style, Units } from './types'
 import generateHash from './generateHash'
 import rnToCSS from './rnToCss'
@@ -24,8 +24,8 @@ type Primitive = number | string | null | undefined | boolean | CompleteStyle
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
 type OptionalProps = {
   rnCSS?: `${string};`;
-  onFocus?: TouchableHighlightProps['onFocus'];
-  onBlur?: TouchableHighlightProps['onBlur'];
+  onFocus?: FocusEventListener;
+  onBlur?: BlurEventListener;
   onPressIn?: TouchableHighlightProps['onPressIn'];
   onPressOut?: TouchableHighlightProps['onPressOut'];
   onResponderStart?: ViewProps['onResponderStart'];