@trackunit/react-components 0.1.131 → 0.1.133

package/index.cjs

@@ -36470,7 +36470,7 @@ const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidati
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */
@@ -36591,7 +36591,7 @@ function getDevicePixelRatio(options) {
  * Can be directionally debounced.
  *
  * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = React.useState(false);
@@ -37265,13 +37265,17 @@ function useConfirmExit(confirmExit, when = true) {
  */
 const usePrompt = (message, when = true) => {
     React.useEffect(() => {
+        const onBeforeUnload = (event) => {
+            // According to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+            // preventDefault() should be called to indicate that the event was handled.
+            event.preventDefault();
+            return message;
+        };
         if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
+            window.addEventListener("beforeunload", onBeforeUnload);
         }
         return () => {
-            window.onbeforeunload = null;
+            window.removeEventListener("beforeunload", onBeforeUnload);
         };
     }, [message, when]);
     const confirmExit = React.useCallback(() => {

package/index.js

@@ -36443,7 +36443,7 @@ const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidati
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */
@@ -36564,7 +36564,7 @@ function getDevicePixelRatio(options) {
  * Can be directionally debounced.
  *
  * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = useState(false);
@@ -37238,13 +37238,17 @@ function useConfirmExit(confirmExit, when = true) {
  */
 const usePrompt = (message, when = true) => {
     useEffect(() => {
+        const onBeforeUnload = (event) => {
+            // According to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+            // preventDefault() should be called to indicate that the event was handled.
+            event.preventDefault();
+            return message;
+        };
         if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
+            window.addEventListener("beforeunload", onBeforeUnload);
         }
         return () => {
-            window.onbeforeunload = null;
+            window.removeEventListener("beforeunload", onBeforeUnload);
         };
     }, [message, when]);
     const confirmExit = useCallback(() => {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.131",
+  "version": "0.1.133",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
-    "node": ">=16.x"
+    "node": ">=18.x"
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.9",
-    "@trackunit/css-core": "0.0.89",
-    "@trackunit/tailwind-styled-components": "0.0.58",
-    "@trackunit/ui-design-tokens": "0.0.73",
-    "@trackunit/ui-icons": "0.0.70",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/css-core": "0.0.90",
+    "@trackunit/tailwind-styled-components": "0.0.59",
+    "@trackunit/ui-design-tokens": "0.0.74",
+    "@trackunit/ui-icons": "0.0.71",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/hooks/useClickOutside.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from "react";
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */

package/src/hooks/useHover.d.ts

@@ -14,7 +14,7 @@ type ConditionalUseHoverProps = {
  * Can be directionally debounced.
  *
  * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
     onMouseEnter: () => void;