rn-css 1.8.12 → 1.8.13

package/dist/features.d.ts

@@ -9,9 +9,9 @@ export declare const useScreenSize: () => {
     vmax: number;
 };
 /** Hook that will apply the style reserved for hover state if needed */
-export declare const useHover: (onMouseOver: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
+export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
     hover: boolean;
-    onMouseOver: ((event: MouseEvent) => void) | undefined;
+    onMouseEnter: ((event: MouseEvent) => void) | undefined;
     onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined;
 };
 /** Hook that will apply the style provided in the media queries */

package/dist/features.js

@@ -18,19 +18,19 @@ const useScreenSize = () => {
 };
 exports.useScreenSize = useScreenSize;
 /** Hook that will apply the style reserved for hover state if needed */
-const useHover = (onMouseOver, onMouseLeave, needsHover) => {
+const useHover = (onMouseEnter, onMouseLeave, needsHover) => {
     const [hover, setHover] = react_1.default.useState(false);
     const hoverStart = react_1.default.useMemo(() => needsHover ? (event) => {
-        if (onMouseOver)
-            onMouseOver(event);
+        if (onMouseEnter)
+            onMouseEnter(event);
         setHover(true);
-    } : undefined, [needsHover, onMouseOver]);
+    } : undefined, [needsHover, onMouseEnter]);
     const hoverStop = react_1.default.useMemo(() => needsHover ? (event) => {
         if (onMouseLeave)
             onMouseLeave(event);
         setHover(false);
     } : undefined, [needsHover, onMouseLeave]);
-    return { hover, onMouseOver: hoverStart || onMouseOver, onMouseLeave: hoverStop || onMouseLeave };
+    return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave };
 };
 exports.useHover = useHover;
 /** Hook that will apply the style provided in the media queries */

package/dist/styleComponent.js

@@ -65,7 +65,7 @@ const styled = (Component) => {
                 needsHover: !!rnStyle.hover
             }), [css, rnStyle.hover]);
             // Handle hover
-            const { onMouseOver, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
+            const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
             const tempStyle = react_1.default.useMemo(() => {
                 const style = { ...rnStyle };
                 delete style.media;
@@ -111,12 +111,12 @@ const styled = (Component) => {
                 return { style: getStyle(hash, style), hash };
             }, [finalStyle, units]);
             const newProps = react_1.default.useMemo(() => {
-                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseOver, onMouseLeave, onLayout };
+                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout };
                 if (finalStyle.textOverflow === 'ellipsis') {
                     Object.assign(newProps, { numberOfLines: 1 });
                 }
                 return newProps;
-            }, [finalStyle.textOverflow, onLayout, onMouseOver, onMouseLeave, props.style, styleConvertedFromCSS]);
+            }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS]);
             react_1.default.useEffect(() => () => removeStyle(hash), [hash]);
             // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
             if (em !== parentEm || finalStyle.fontSize !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.8.12",
+  "version": "1.8.13",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/features.tsx

@@ -14,17 +14,17 @@ export const useScreenSize = () => {
 }
 
 /** Hook that will apply the style reserved for hover state if needed */
-export const useHover = (onMouseOver: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
+export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
   const [hover, setHover] = React.useState(false)
   const hoverStart = React.useMemo(() => needsHover ? (event: MouseEvent) => {
-    if (onMouseOver) onMouseOver(event)
+    if (onMouseEnter) onMouseEnter(event)
     setHover(true)
-  } : undefined, [needsHover, onMouseOver])
+  } : undefined, [needsHover, onMouseEnter])
   const hoverStop = React.useMemo(() => needsHover ? (event: MouseEvent) => {
     if (onMouseLeave) onMouseLeave(event)
     setHover(false)
   } : undefined, [needsHover, onMouseLeave])
-  return { hover, onMouseOver: hoverStart || onMouseOver, onMouseLeave: hoverStop || onMouseLeave }
+  return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave }
 }
 
 /** Hook that will apply the style provided in the media queries */

package/src/styleComponent.tsx

@@ -78,7 +78,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       }), [css, rnStyle.hover])
 
       // Handle hover
-      const { onMouseOver, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
+      const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
       const tempStyle = React.useMemo<Style>(() => {
         const style = { ...rnStyle }
         delete style.media
@@ -127,12 +127,12 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
         return { style: getStyle<CompleteStyle>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseOver, onMouseLeave, onLayout }
+        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }
         return newProps
-      }, [finalStyle.textOverflow, onLayout, onMouseOver, onMouseLeave, props.style, styleConvertedFromCSS])
+      }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS])
 
       React.useEffect(() => () => removeStyle(hash), [hash])