@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

dist/index.d.ts

@@ -34,4 +34,6 @@ export * from "./theme/hooks/UseTheme";
 export * from "./hooks/UseDebounce";
+export * from "./hooks/UseEventListener";
+export * from "./hooks/UseMouseIsOver";
 export * from "./hooks/UseMultiOnClickOutside";
 export * from "./hooks/UseOnClickOutside";
 export * from "./hooks/UseOnNoMouseInput";

dist/index.es.js

@@ -389,2 +389,43 @@ import { createContext, useContext, useMemo, createElement, useState, useCallback, useEffect, useRef } from 'react';
 
+var useEventListener = function (ref, eventName, handler) {
+    // Create a ref that stores handler
+    var savedHandler = useRef();
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    useEffect(function () {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(function () {
+        // Make sure element supports addEventListener
+        var isSupported = ref.current && ref.current.addEventListener;
+        if (!isSupported)
+            return;
+        // Create event listener that calls handler function stored in ref
+        var eventListener = function (event) {
+            if (savedHandler.current) {
+                return savedHandler.current(event);
+            }
+        };
+        // Add event listener
+        if (ref.current) {
+            ref.current.addEventListener(eventName, eventListener);
+        }
+        // Remove event listener on cleanup
+        return function () {
+            if (ref.current) {
+                ref.current.removeEventListener(eventName, eventListener);
+            }
+        };
+    }, [eventName, ref.current]); // Re-run if eventName or element changes
+};
+
+var useMouseIsOver = function (ref) {
+    var _a = useBoolean(false), mouseIsOver = _a[0], setMouseIsOver = _a[1], setMouseIsNotOver = _a[2];
+    useEventListener(ref, "mouseover", setMouseIsOver);
+    useEventListener(ref, "mouseout", setMouseIsNotOver);
+    return mouseIsOver;
+};
+
 var useMultiOnClickOutside = function (refs, handler) {
@@ -456,3 +497,3 @@ var eventHandler = useRef(function () {
 
-export { Absolute, Box, Clickable, Column, Indent, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useBoolean, useDebounce, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
+export { Absolute, Box, Clickable, Column, Indent, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useBoolean, useDebounce, useEventListener, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -395,2 +395,43 @@ 'use strict';
 
+var useEventListener = function (ref, eventName, handler) {
+    // Create a ref that stores handler
+    var savedHandler = React.useRef();
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    React.useEffect(function () {
+        savedHandler.current = handler;
+    }, [handler]);
+    React.useEffect(function () {
+        // Make sure element supports addEventListener
+        var isSupported = ref.current && ref.current.addEventListener;
+        if (!isSupported)
+            return;
+        // Create event listener that calls handler function stored in ref
+        var eventListener = function (event) {
+            if (savedHandler.current) {
+                return savedHandler.current(event);
+            }
+        };
+        // Add event listener
+        if (ref.current) {
+            ref.current.addEventListener(eventName, eventListener);
+        }
+        // Remove event listener on cleanup
+        return function () {
+            if (ref.current) {
+                ref.current.removeEventListener(eventName, eventListener);
+            }
+        };
+    }, [eventName, ref.current]); // Re-run if eventName or element changes
+};
+
+var useMouseIsOver = function (ref) {
+    var _a = useBoolean(false), mouseIsOver = _a[0], setMouseIsOver = _a[1], setMouseIsNotOver = _a[2];
+    useEventListener(ref, "mouseover", setMouseIsOver);
+    useEventListener(ref, "mouseout", setMouseIsNotOver);
+    return mouseIsOver;
+};
+
 var useMultiOnClickOutside = function (refs, handler) {
@@ -487,2 +528,4 @@ var eventHandler = React.useRef(function () {
 exports.useDebounce = useDebounce;
+exports.useEventListener = useEventListener;
+exports.useMouseIsOver = useMouseIsOver;
 exports.useMultiOnClickOutside = useMultiOnClickOutside;
@@ -489,0 +532,0 @@ exports.useOnClickOutside = useOnClickOutside;

package.json

 {
   "name": "@stenajs-webui/core",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "",
@@ -59,3 +59,3 @@ "author": "mattias800",
   ],
-  "gitHead": "734ab0be176de4d7438d497eadda7f0c0747d8b0"
+  "gitHead": "ae38766f63f8a9d8c4085170247b0388cbc64b39"
 }

No alert changes

Improved metrics

Total package byte prevSize

176825

increased by6.88%

Number of package files

61

increased by3.39%

Lines of code

1371

increased by7.19%

No dependency changes