chore: update dependencies and patch eslint-plugin-react-hooks

Author: huijiewei

package.json

@@ -20,14 +20,14 @@
     "@changesets/cli": "^2.28.1",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
-    "@resolid/config": "^3.3.0",
-    "@types/node": "^22.13.5",
+    "@resolid/config": "^3.3.3",
+    "@types/node": "^22.13.9",
     "eslint": "^9.21.0",
     "lefthook": "^1.11.2",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   },
   "engines": {
     "node": "22.x",
@@ -66,6 +66,9 @@
     "onlyBuiltDependencies": [
       "esbuild",
       "lefthook"
-    ]
+    ],
+    "patchedDependencies": {
+      "eslint-plugin-react-hooks@5.2.0": "patches/eslint-plugin-react-hooks@5.2.0.patch"
+    }
   }
 }

packages/react-ui/eslint.config.js

@@ -2,5 +2,5 @@ import eslintBrowser from "@resolid/config/eslint.browser";
 import eslintReact from "@resolid/config/eslint.react";
 import eslintTypescript from "@resolid/config/eslint.typescript";
 
-/** @type {import("eslint").Linter.FlatConfig[]} */
+/** @type {import("eslint").Linter.Config[]} */
 export default [...eslintTypescript, ...eslintReact, ...eslintBrowser];

packages/react-ui/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.5",
-    "@resolid/utils": "^0.3.2",
+    "@resolid/utils": "^0.3.3",
     "cva": "beta"
   },
   "devDependencies": {

packages/react-ui/src/components/toast/toast-root.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useEffectEvent, useElementTransitionStatus, usePrevious, useTimeout } from "../../hooks";
+import { useEffectEvent, useElementTransitionStatus, useEventListener, usePrevious, useTimeout } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import { PopperAriaContext } from "../../primitives/popper/popper-aria-context";
 import { PopperDispatchContext } from "../../primitives/popper/popper-dispatch-context";
@@ -28,19 +28,21 @@ export const ToastRoot = (props: PrimitiveProps<"div", ToastRootProps, "role" |
   const [openState, setOpenState] = useState(true);
   const [transitionEnable, setTransitionEnable] = useState(!update);
 
-  const { isMounted, status, setElement } = useElementTransitionStatus(openState, { duration: 250 });
+  const { isMounted, status, setElement } = useElementTransitionStatus(openState, { duration: 300 });
 
-  const handleDismiss = useEffectEvent(() => {
+  const handleDismiss = () => {
     setTransitionEnable(true);
     setOpenState(false);
     onDismiss?.();
-  });
+  };
+
+  const handleDismissRef = useEffectEvent(handleDismiss);
 
   useEffect(() => {
     if (dismiss) {
-      handleDismiss();
+      handleDismissRef();
     }
-  }, [dismiss, handleDismiss]);
+  }, [dismiss]);
 
   const prevStatus = usePrevious(status);
 
@@ -52,6 +54,11 @@ export const ToastRoot = (props: PrimitiveProps<"div", ToastRootProps, "role" |
 
   const { reset, clear } = useTimeout(handleDismiss, duration);
 
+  useEventListener("blur", clear);
+  useEventListener("focus", reset);
+
+  const translateStyle = placementTranslateStyles[placement?.split("-")[0] as keyof typeof placementTranslateStyles];
+
   if (!isMounted) {
     return null;
   }
@@ -64,8 +71,6 @@ export const ToastRoot = (props: PrimitiveProps<"div", ToastRootProps, "role" |
     descriptionId,
   };
 
-  const translateStyle = placementTranslateStyles[placement?.split("-")[0] as keyof typeof placementTranslateStyles];
-
   return (
     <div
       role="status"
@@ -74,7 +79,7 @@ export const ToastRoot = (props: PrimitiveProps<"div", ToastRootProps, "role" |
       ref={setElement}
       className={tx(
         "flex flex-col items-center",
-        "transition-[opacity,translate] duration-[350ms] will-change-[opacity,translate]",
+        "transition-[opacity,translate] duration-300",
         transitionEnable && status == "open" && ["opacity-100", translateStyle.open],
         transitionEnable && status == "close" && ["opacity-0", translateStyle.close],
         transitionEnable && status == "initial" && ["opacity-0", translateStyle.close],

packages/react-ui/src/hooks/use-effect-event/index.ts

@@ -1,6 +1,6 @@
 import { useCallback, useInsertionEffect, useRef } from "react";
 
-export const useEffectEvent = <Args extends unknown[], Return>(fn: ((...args: Args) => Return) | undefined) => {
+export const useEffectEvent = <A extends unknown[], R>(fn: ((...args: A) => R) | undefined) => {
   const ref = useRef<typeof fn>(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
@@ -9,5 +9,5 @@ export const useEffectEvent = <Args extends unknown[], Return>(fn: ((...args: Ar
     ref.current = fn;
   }, [fn]);
 
-  return useCallback((...args: Args) => ref.current?.(...args), []);
+  return useCallback((...args: A) => ref.current?.(...args), []);
 };

packages/react-ui/src/hooks/use-timeout/index.ts

@@ -6,26 +6,28 @@ export const useTimeout = (callback: () => void, delay: number | null) => {
   const ref = useLatestRef(callback);
   const timer = useRef<ReturnType<typeof setTimeout>>(null);
 
-  const clear = useEffectEvent(() => {
+  const clear = () => {
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
     }
-  });
+  };
 
-  const reset = useEffectEvent(() => {
+  const reset = () => {
     clear();
 
     if (delay !== null) {
       timer.current = setTimeout(() => ref.current(), delay);
     }
-  });
+  };
+
+  const resetRef = useEffectEvent(reset);
 
   useEffect(() => {
-    reset();
+    resetRef();
 
     return clear;
-  }, [clear, reset]);
+  }, []);
 
   return { clear, reset };
 };

patches/eslint-plugin-react-hooks@5.2.0.patch

@@ -0,0 +1,80 @@
+diff --git a/cjs/eslint-plugin-react-hooks.development.js b/cjs/eslint-plugin-react-hooks.development.js
+index 128ec146542487b7f6b3d4785f0e812791e4891d..d1fc56fa0951bb42e4e2dca37ce7d4177dc3fa8f 100644
+--- a/cjs/eslint-plugin-react-hooks.development.js
++++ b/cjs/eslint-plugin-react-hooks.development.js
+@@ -157,7 +157,7 @@ function isInsideDoWhileLoop(node) {
+     return false;
+ }
+ function isUseEffectEventIdentifier$1(node) {
+-    return false;
++    return node.type === 'Identifier' && node.name === 'useEffectEvent';
+ }
+ function isUseIdentifier(node) {
+     return isReactFunction(node, 'use');
+@@ -718,7 +718,7 @@ var rule$1 = {
+                 // another useEffectEvent
+                 if (node.callee.type === 'Identifier' &&
+                     (node.callee.name === 'useEffect' ||
+-                        isUseEffectEventIdentifier$1()) &&
++                        isUseEffectEventIdentifier$1(node.callee)) &&
+                     node.arguments.length > 0) {
+                     // Denote that we have traversed into a useEffect call, and stash the CallExpr for
+                     // comparison later when we exit
+@@ -1056,7 +1056,7 @@ var rule = {
+                     // useRef() return value is stable.
+                     return true;
+                 }
+-                else if (isUseEffectEventIdentifier() &&
++                else if (isUseEffectEventIdentifier(callee) &&
+                     id.type === 'Identifier') {
+                     try {
+                         for (var _d = __values(resolved.references), _e = _d.next(); !_e.done; _e = _d.next()) {
+@@ -2676,7 +2676,7 @@ function isAncestorNodeOf(a, b) {
+         a.range[1] >= b.range[1]);
+ }
+ function isUseEffectEventIdentifier(node) {
+-    return false;
++    return node.type === 'Identifier' && node.name === 'useEffectEvent';
+ }
+ function getUnknownDependenciesMessage(reactiveHookName) {
+     return ("React Hook ".concat(reactiveHookName, " received a function whose dependencies ") +
+diff --git a/cjs/eslint-plugin-react-hooks.production.js b/cjs/eslint-plugin-react-hooks.production.js
+index f646fa15bda010d40af42d246e6be4c8e1bb4a64..fd20abfd3cd7c8e73cd7803a6aee4aa958255c99 100644
+--- a/cjs/eslint-plugin-react-hooks.production.js
++++ b/cjs/eslint-plugin-react-hooks.production.js
+@@ -153,7 +153,7 @@ function isInsideDoWhileLoop(node) {
+     return false;
+ }
+ function isUseEffectEventIdentifier$1(node) {
+-    return false;
++    return node.type === 'Identifier' && node.name === 'useEffectEvent';
+ }
+ function isUseIdentifier(node) {
+     return isReactFunction(node, 'use');
+@@ -714,7 +714,7 @@ var rule$1 = {
+                 // another useEffectEvent
+                 if (node.callee.type === 'Identifier' &&
+                     (node.callee.name === 'useEffect' ||
+-                        isUseEffectEventIdentifier$1()) &&
++                        isUseEffectEventIdentifier$1(node.callee)) &&
+                     node.arguments.length > 0) {
+                     // Denote that we have traversed into a useEffect call, and stash the CallExpr for
+                     // comparison later when we exit
+@@ -1052,7 +1052,7 @@ var rule = {
+                     // useRef() return value is stable.
+                     return true;
+                 }
+-                else if (isUseEffectEventIdentifier() &&
++                else if (isUseEffectEventIdentifier(callee) &&
+                     id.type === 'Identifier') {
+                     try {
+                         for (var _d = __values(resolved.references), _e = _d.next(); !_e.done; _e = _d.next()) {
+@@ -2672,7 +2672,7 @@ function isAncestorNodeOf(a, b) {
+         a.range[1] >= b.range[1]);
+ }
+ function isUseEffectEventIdentifier(node) {
+-    return false;
++    return node.type === 'Identifier' && node.name === 'useEffectEvent';
+ }
+ function getUnknownDependenciesMessage(reactiveHookName) {
+     return ("React Hook ".concat(reactiveHookName, " received a function whose dependencies ") +