@react-aria/utils 3.31.0 → 3.32.0

package/dist/useUpdateEffect.main.js

@@ -1,3 +1,4 @@
+var $1254e5bb94ac8761$exports = require("./useEffectEvent.main.js");
 var $cagC1$react = require("react");
 
 
@@ -17,9 +18,11 @@ $parcel$export(module.exports, "useUpdateEffect", () => $29293a6f5c75b37e$export
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $29293a6f5c75b37e$export$496315a1608d9602(effect, dependencies) {
+
+function $29293a6f5c75b37e$export$496315a1608d9602(cb, dependencies) {
     const isInitialMount = (0, $cagC1$react.useRef)(true);
     const lastDeps = (0, $cagC1$react.useRef)(null);
+    let cbEvent = (0, $1254e5bb94ac8761$exports.useEffectEvent)(cb);
     (0, $cagC1$react.useEffect)(()=>{
         isInitialMount.current = true;
         return ()=>{
@@ -29,7 +32,7 @@ function $29293a6f5c75b37e$export$496315a1608d9602(effect, dependencies) {
     (0, $cagC1$react.useEffect)(()=>{
         let prevDeps = lastDeps.current;
         if (isInitialMount.current) isInitialMount.current = false;
-        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) effect();
+        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) cbEvent();
         lastDeps.current = dependencies;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencies);

package/dist/useUpdateEffect.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;AAKM,SAAS,0CAAgB,MAAsB,EAAE,YAAmB;IACzE,MAAM,iBAAiB,CAAA,GAAA,mBAAK,EAAE;IAC9B,MAAM,WAAW,CAAA,GAAA,mBAAK,EAAgB;IAEtC,CAAA,GAAA,sBAAQ,EAAE;QACR,eAAe,OAAO,GAAG;QACzB,OAAO;YACL,eAAe,OAAO,GAAG;QAC3B;IACF,GAAG,EAAE;IAEL,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,WAAW,SAAS,OAAO;QAC/B,IAAI,eAAe,OAAO,EACxB,eAAe,OAAO,GAAG;aACpB,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,KAAK,IAAM,CAAC,OAAO,EAAE,CAAC,KAAK,QAAQ,CAAC,EAAE,IAC/E;QAEF,SAAS,OAAO,GAAG;IACnB,uDAAuD;IACzD,GAAG;AACL","sources":["packages/@react-aria/utils/src/useUpdateEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {EffectCallback, useEffect, useRef} from 'react';\n\n// Like useEffect, but only called for updates after the initial render.\nexport function useUpdateEffect(effect: EffectCallback, dependencies: any[]): void {\n  const isInitialMount = useRef(true);\n  const lastDeps = useRef<any[] | null>(null);\n\n  useEffect(() => {\n    isInitialMount.current = true;\n    return () => {\n      isInitialMount.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    let prevDeps = lastDeps.current;\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {\n      effect();\n    }\n    lastDeps.current = dependencies;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n}\n"],"names":[],"version":3,"file":"useUpdateEffect.main.js.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAMM,SAAS,0CAAgB,EAAkB,EAAE,YAAmB;IACrE,MAAM,iBAAiB,CAAA,GAAA,mBAAK,EAAE;IAC9B,MAAM,WAAW,CAAA,GAAA,mBAAK,EAAgB;IACtC,IAAI,UAAU,CAAA,GAAA,wCAAa,EAAE;IAE7B,CAAA,GAAA,sBAAQ,EAAE;QACR,eAAe,OAAO,GAAG;QACzB,OAAO;YACL,eAAe,OAAO,GAAG;QAC3B;IACF,GAAG,EAAE;IAEL,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,WAAW,SAAS,OAAO;QAC/B,IAAI,eAAe,OAAO,EACxB,eAAe,OAAO,GAAG;aACpB,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,KAAK,IAAM,CAAC,OAAO,EAAE,CAAC,KAAK,QAAQ,CAAC,EAAE,IAC/E;QAEF,SAAS,OAAO,GAAG;IACrB,uDAAuD;IACvD,GAAG;AACL","sources":["packages/@react-aria/utils/src/useUpdateEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {EffectCallback, useEffect, useRef} from 'react';\nimport {useEffectEvent} from './useEffectEvent';\n\n// Like useEffect, but only called for updates after the initial render.\nexport function useUpdateEffect(cb: EffectCallback, dependencies: any[]): void {\n  const isInitialMount = useRef(true);\n  const lastDeps = useRef<any[] | null>(null);\n  let cbEvent = useEffectEvent(cb);\n\n  useEffect(() => {\n    isInitialMount.current = true;\n    return () => {\n      isInitialMount.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    let prevDeps = lastDeps.current;\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {\n      cbEvent();\n    }\n    lastDeps.current = dependencies;\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n}\n"],"names":[],"version":3,"file":"useUpdateEffect.main.js.map"}

package/dist/useUpdateEffect.mjs

@@ -1,3 +1,4 @@
+import {useEffectEvent as $8ae05eaa5c114e9c$export$7f54fc3180508a52} from "./useEffectEvent.mjs";
 import {useRef as $9vW05$useRef, useEffect as $9vW05$useEffect} from "react";
 
 /*
@@ -11,9 +12,11 @@ import {useRef as $9vW05$useRef, useEffect as $9vW05$useEffect} from "react";
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
+
+function $4f58c5f72bcf79f7$export$496315a1608d9602(cb, dependencies) {
     const isInitialMount = (0, $9vW05$useRef)(true);
     const lastDeps = (0, $9vW05$useRef)(null);
+    let cbEvent = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)(cb);
     (0, $9vW05$useEffect)(()=>{
         isInitialMount.current = true;
         return ()=>{
@@ -23,7 +26,7 @@ function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
     (0, $9vW05$useEffect)(()=>{
         let prevDeps = lastDeps.current;
         if (isInitialMount.current) isInitialMount.current = false;
-        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) effect();
+        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) cbEvent();
         lastDeps.current = dependencies;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencies);

package/dist/useUpdateEffect.module.js

@@ -1,3 +1,4 @@
+import {useEffectEvent as $8ae05eaa5c114e9c$export$7f54fc3180508a52} from "./useEffectEvent.module.js";
 import {useRef as $9vW05$useRef, useEffect as $9vW05$useEffect} from "react";
 
 /*
@@ -11,9 +12,11 @@ import {useRef as $9vW05$useRef, useEffect as $9vW05$useEffect} from "react";
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
+
+function $4f58c5f72bcf79f7$export$496315a1608d9602(cb, dependencies) {
     const isInitialMount = (0, $9vW05$useRef)(true);
     const lastDeps = (0, $9vW05$useRef)(null);
+    let cbEvent = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)(cb);
     (0, $9vW05$useEffect)(()=>{
         isInitialMount.current = true;
         return ()=>{
@@ -23,7 +26,7 @@ function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
     (0, $9vW05$useEffect)(()=>{
         let prevDeps = lastDeps.current;
         if (isInitialMount.current) isInitialMount.current = false;
-        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) effect();
+        else if (!prevDeps || dependencies.some((dep, i)=>!Object.is(dep, prevDeps[i]))) cbEvent();
         lastDeps.current = dependencies;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencies);

package/dist/useUpdateEffect.module.js.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAKM,SAAS,0CAAgB,MAAsB,EAAE,YAAmB;IACzE,MAAM,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC9B,MAAM,WAAW,CAAA,GAAA,aAAK,EAAgB;IAEtC,CAAA,GAAA,gBAAQ,EAAE;QACR,eAAe,OAAO,GAAG;QACzB,OAAO;YACL,eAAe,OAAO,GAAG;QAC3B;IACF,GAAG,EAAE;IAEL,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,WAAW,SAAS,OAAO;QAC/B,IAAI,eAAe,OAAO,EACxB,eAAe,OAAO,GAAG;aACpB,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,KAAK,IAAM,CAAC,OAAO,EAAE,CAAC,KAAK,QAAQ,CAAC,EAAE,IAC/E;QAEF,SAAS,OAAO,GAAG;IACnB,uDAAuD;IACzD,GAAG;AACL","sources":["packages/@react-aria/utils/src/useUpdateEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {EffectCallback, useEffect, useRef} from 'react';\n\n// Like useEffect, but only called for updates after the initial render.\nexport function useUpdateEffect(effect: EffectCallback, dependencies: any[]): void {\n  const isInitialMount = useRef(true);\n  const lastDeps = useRef<any[] | null>(null);\n\n  useEffect(() => {\n    isInitialMount.current = true;\n    return () => {\n      isInitialMount.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    let prevDeps = lastDeps.current;\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {\n      effect();\n    }\n    lastDeps.current = dependencies;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n}\n"],"names":[],"version":3,"file":"useUpdateEffect.module.js.map"}
+{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAMM,SAAS,0CAAgB,EAAkB,EAAE,YAAmB;IACrE,MAAM,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC9B,MAAM,WAAW,CAAA,GAAA,aAAK,EAAgB;IACtC,IAAI,UAAU,CAAA,GAAA,yCAAa,EAAE;IAE7B,CAAA,GAAA,gBAAQ,EAAE;QACR,eAAe,OAAO,GAAG;QACzB,OAAO;YACL,eAAe,OAAO,GAAG;QAC3B;IACF,GAAG,EAAE;IAEL,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,WAAW,SAAS,OAAO;QAC/B,IAAI,eAAe,OAAO,EACxB,eAAe,OAAO,GAAG;aACpB,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,KAAK,IAAM,CAAC,OAAO,EAAE,CAAC,KAAK,QAAQ,CAAC,EAAE,IAC/E;QAEF,SAAS,OAAO,GAAG;IACrB,uDAAuD;IACvD,GAAG;AACL","sources":["packages/@react-aria/utils/src/useUpdateEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {EffectCallback, useEffect, useRef} from 'react';\nimport {useEffectEvent} from './useEffectEvent';\n\n// Like useEffect, but only called for updates after the initial render.\nexport function useUpdateEffect(cb: EffectCallback, dependencies: any[]): void {\n  const isInitialMount = useRef(true);\n  const lastDeps = useRef<any[] | null>(null);\n  let cbEvent = useEffectEvent(cb);\n\n  useEffect(() => {\n    isInitialMount.current = true;\n    return () => {\n      isInitialMount.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    let prevDeps = lastDeps.current;\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {\n      cbEvent();\n    }\n    lastDeps.current = dependencies;\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n}\n"],"names":[],"version":3,"file":"useUpdateEffect.module.js.map"}

package/dist/useValueEffect.main.js

@@ -1,4 +1,3 @@
-var $1254e5bb94ac8761$exports = require("./useEffectEvent.main.js");
 var $78605a5d7424e31b$exports = require("./useLayoutEffect.main.js");
 var $fymK9$react = require("react");
 
@@ -22,10 +21,13 @@ $parcel$export(module.exports, "useValueEffect", () => $19a2307bfabafaf1$export$
 
 function $19a2307bfabafaf1$export$14d238f342723f25(defaultValue) {
     let [value, setValue] = (0, $fymK9$react.useState)(defaultValue);
+    // Keep an up to date copy of value in a ref so we can access the current value in the generator.
+    // This allows us to maintain a stable queue function.
+    let currValue = (0, $fymK9$react.useRef)(value);
     let effect = (0, $fymK9$react.useRef)(null);
     // Store the function in a ref so we can always access the current version
     // which has the proper `value` in scope.
-    let nextRef = (0, $1254e5bb94ac8761$exports.useEffectEvent)(()=>{
+    let nextRef = (0, $fymK9$react.useRef)(()=>{
         if (!effect.current) return;
         // Run the generator to the next yield.
         let newValue = effect.current.next();
@@ -37,17 +39,20 @@ function $19a2307bfabafaf1$export$14d238f342723f25(defaultValue) {
         // If the value is the same as the current value,
         // then continue to the next yield. Otherwise,
         // set the value in state and wait for the next layout effect.
-        if (value === newValue.value) nextRef();
+        if (currValue.current === newValue.value) nextRef.current();
         else setValue(newValue.value);
     });
     (0, $78605a5d7424e31b$exports.useLayoutEffect)(()=>{
+        currValue.current = value;
         // If there is an effect currently running, continue to the next yield.
-        if (effect.current) nextRef();
-    });
-    let queue = (0, $1254e5bb94ac8761$exports.useEffectEvent)((fn)=>{
-        effect.current = fn(value);
-        nextRef();
+        if (effect.current) nextRef.current();
     });
+    let queue = (0, $fymK9$react.useCallback)((fn)=>{
+        effect.current = fn(currValue.current);
+        nextRef.current();
+    }, [
+        nextRef
+    ]);
     return [
         value,
         queue

package/dist/useValueEffect.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,qBAAO,EAAE;IACjC,IAAI,SAAgD,CAAA,GAAA,mBAAK,EAAuB;IAEhF,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,wCAAa,EAAE;QAC3B,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,SAAS,KAAK,EAC1B;aAEA,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB;IAEJ;IAEA,IAAI,QAAQ,CAAA,GAAA,wCAAa,EAAE,CAAA;QACzB,OAAO,OAAO,GAAG,GAAG;QACpB;IACF;IAEA,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Dispatch, MutableRefObject, useRef, useState} from 'react';\nimport {useEffectEvent, useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  let effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useEffectEvent(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (value === newValue.value) {\n      nextRef();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef();\n    }\n  });\n\n  let queue = useEffectEvent(fn => {\n    effect.current = fn(value);\n    nextRef();\n  });\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.main.js.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,qBAAO,EAAE;IACjC,iGAAiG;IACjG,sDAAsD;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,SAAyC,CAAA,GAAA,mBAAK,EAAuB;IAEzE,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAE;QACnB,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,OAAO,KAAK,SAAS,KAAK,EACtC,QAAQ,OAAO;aAEf,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,UAAU,OAAO,GAAG;QACpB,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB,QAAQ,OAAO;IAEnB;IAEA,IAAI,QAAQ,CAAA,GAAA,wBAAU,EAAE,CAAA;QACtB,OAAO,OAAO,GAAG,GAAG,UAAU,OAAO;QACrC,QAAQ,OAAO;IACjB,GAAG;QAAC;KAAQ;IAEZ,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Dispatch, RefObject, useCallback, useRef, useState} from 'react';\nimport {useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  // Keep an up to date copy of value in a ref so we can access the current value in the generator.\n  // This allows us to maintain a stable queue function.\n  let currValue = useRef(value);\n  let effect: RefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useRef(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (currValue.current === newValue.value) {\n      nextRef.current();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    currValue.current = value;\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef.current();\n    }\n  });\n\n  let queue = useCallback(fn => {\n    effect.current = fn(currValue.current);\n    nextRef.current();\n  }, [nextRef]);\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.main.js.map"}

package/dist/useValueEffect.mjs

@@ -1,6 +1,5 @@
-import {useEffectEvent as $8ae05eaa5c114e9c$export$7f54fc3180508a52} from "./useEffectEvent.mjs";
 import {useLayoutEffect as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c} from "./useLayoutEffect.mjs";
-import {useState as $fCAlL$useState, useRef as $fCAlL$useRef} from "react";
+import {useState as $fCAlL$useState, useRef as $fCAlL$useRef, useCallback as $fCAlL$useCallback} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,10 +15,13 @@ import {useState as $fCAlL$useState, useRef as $fCAlL$useRef} from "react";
 
 function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
     let [value, setValue] = (0, $fCAlL$useState)(defaultValue);
+    // Keep an up to date copy of value in a ref so we can access the current value in the generator.
+    // This allows us to maintain a stable queue function.
+    let currValue = (0, $fCAlL$useRef)(value);
     let effect = (0, $fCAlL$useRef)(null);
     // Store the function in a ref so we can always access the current version
     // which has the proper `value` in scope.
-    let nextRef = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+    let nextRef = (0, $fCAlL$useRef)(()=>{
         if (!effect.current) return;
         // Run the generator to the next yield.
         let newValue = effect.current.next();
@@ -31,17 +33,20 @@ function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
         // If the value is the same as the current value,
         // then continue to the next yield. Otherwise,
         // set the value in state and wait for the next layout effect.
-        if (value === newValue.value) nextRef();
+        if (currValue.current === newValue.value) nextRef.current();
         else setValue(newValue.value);
     });
     (0, $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
+        currValue.current = value;
         // If there is an effect currently running, continue to the next yield.
-        if (effect.current) nextRef();
-    });
-    let queue = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)((fn)=>{
-        effect.current = fn(value);
-        nextRef();
+        if (effect.current) nextRef.current();
     });
+    let queue = (0, $fCAlL$useCallback)((fn)=>{
+        effect.current = fn(currValue.current);
+        nextRef.current();
+    }, [
+        nextRef
+    ]);
     return [
         value,
         queue

package/dist/useValueEffect.module.js

@@ -1,6 +1,5 @@
-import {useEffectEvent as $8ae05eaa5c114e9c$export$7f54fc3180508a52} from "./useEffectEvent.module.js";
 import {useLayoutEffect as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c} from "./useLayoutEffect.module.js";
-import {useState as $fCAlL$useState, useRef as $fCAlL$useRef} from "react";
+import {useState as $fCAlL$useState, useRef as $fCAlL$useRef, useCallback as $fCAlL$useCallback} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,10 +15,13 @@ import {useState as $fCAlL$useState, useRef as $fCAlL$useRef} from "react";
 
 function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
     let [value, setValue] = (0, $fCAlL$useState)(defaultValue);
+    // Keep an up to date copy of value in a ref so we can access the current value in the generator.
+    // This allows us to maintain a stable queue function.
+    let currValue = (0, $fCAlL$useRef)(value);
     let effect = (0, $fCAlL$useRef)(null);
     // Store the function in a ref so we can always access the current version
     // which has the proper `value` in scope.
-    let nextRef = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+    let nextRef = (0, $fCAlL$useRef)(()=>{
         if (!effect.current) return;
         // Run the generator to the next yield.
         let newValue = effect.current.next();
@@ -31,17 +33,20 @@ function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
         // If the value is the same as the current value,
         // then continue to the next yield. Otherwise,
         // set the value in state and wait for the next layout effect.
-        if (value === newValue.value) nextRef();
+        if (currValue.current === newValue.value) nextRef.current();
         else setValue(newValue.value);
     });
     (0, $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
+        currValue.current = value;
         // If there is an effect currently running, continue to the next yield.
-        if (effect.current) nextRef();
-    });
-    let queue = (0, $8ae05eaa5c114e9c$export$7f54fc3180508a52)((fn)=>{
-        effect.current = fn(value);
-        nextRef();
+        if (effect.current) nextRef.current();
     });
+    let queue = (0, $fCAlL$useCallback)((fn)=>{
+        effect.current = fn(currValue.current);
+        nextRef.current();
+    }, [
+        nextRef
+    ]);
     return [
         value,
         queue

package/dist/useValueEffect.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAAE;IACjC,IAAI,SAAgD,CAAA,GAAA,aAAK,EAAuB;IAEhF,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,yCAAa,EAAE;QAC3B,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,SAAS,KAAK,EAC1B;aAEA,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB;IAEJ;IAEA,IAAI,QAAQ,CAAA,GAAA,yCAAa,EAAE,CAAA;QACzB,OAAO,OAAO,GAAG,GAAG;QACpB;IACF;IAEA,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Dispatch, MutableRefObject, useRef, useState} from 'react';\nimport {useEffectEvent, useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  let effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useEffectEvent(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (value === newValue.value) {\n      nextRef();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef();\n    }\n  });\n\n  let queue = useEffectEvent(fn => {\n    effect.current = fn(value);\n    nextRef();\n  });\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.module.js.map"}
+{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAAE;IACjC,iGAAiG;IACjG,sDAAsD;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,SAAyC,CAAA,GAAA,aAAK,EAAuB;IAEzE,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,aAAK,EAAE;QACnB,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,OAAO,KAAK,SAAS,KAAK,EACtC,QAAQ,OAAO;aAEf,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,UAAU,OAAO,GAAG;QACpB,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB,QAAQ,OAAO;IAEnB;IAEA,IAAI,QAAQ,CAAA,GAAA,kBAAU,EAAE,CAAA;QACtB,OAAO,OAAO,GAAG,GAAG,UAAU,OAAO;QACrC,QAAQ,OAAO;IACjB,GAAG;QAAC;KAAQ;IAEZ,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Dispatch, RefObject, useCallback, useRef, useState} from 'react';\nimport {useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  // Keep an up to date copy of value in a ref so we can access the current value in the generator.\n  // This allows us to maintain a stable queue function.\n  let currValue = useRef(value);\n  let effect: RefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useRef(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (currValue.current === newValue.value) {\n      nextRef.current();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    currValue.current = value;\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef.current();\n    }\n  });\n\n  let queue = useCallback(fn => {\n    effect.current = fn(currValue.current);\n    nextRef.current();\n  }, [nextRef]);\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/utils",
-  "version": "3.31.0",
+  "version": "3.32.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@react-aria/ssr": "^3.9.10",
     "@react-stately/flags": "^3.1.2",
-    "@react-stately/utils": "^3.10.8",
+    "@react-stately/utils": "^3.11.0",
     "@react-types/shared": "^3.32.1",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0bda51183baa23306342af32a82012ea0fe0f2dc"
+  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
 }

package/src/filterDOMProps.ts

@@ -114,7 +114,7 @@ export function filterDOMProps(props: DOMProps & AriaLabelingProps & LinkDOMProp
         (labelable && labelablePropNames.has(prop)) ||
         (isLink && linkPropNames.has(prop)) ||
         (global && globalAttrs.has(prop)) ||
-        (events && globalEvents.has(prop) || (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7)))) ||
+        (events && (globalEvents.has(prop) || (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7))))) ||
         propNames?.has(prop) ||
         propRe.test(prop)
       )

package/src/mergeProps.ts

@@ -28,8 +28,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 
 /**
  * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, and ids are deduplicated - different ids
- * will trigger a side-effect and re-render components hooked up with `useId`.
+ * classNames are combined, and ids are deduplicated.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */

package/src/openLink.tsx

@@ -106,7 +106,7 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe
   let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
     // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
     ? new KeyboardEvent('keydown', {keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey})
-    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, bubbles: true, cancelable: true});
+    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, detail: 1, bubbles: true, cancelable: true});
   (openLink as any).isOpening = setOpening;
   focusWithoutScrolling(target);
   target.dispatchEvent(event);

package/src/scrollIntoView.ts

@@ -11,7 +11,6 @@
  */
 
 import {getScrollParents} from './getScrollParents';
-import {isChrome} from './platform';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -41,64 +40,32 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): v
     scrollPaddingLeft
   } = getComputedStyle(scrollView);
 
-  // Account for scroll margin of the element
-  let {
-    scrollMarginTop,
-    scrollMarginRight,
-    scrollMarginBottom,
-    scrollMarginLeft
-  } = getComputedStyle(element);
-
   let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
   let borderAdjustedY = y + parseInt(borderTopWidth, 10);
   // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
   let maxX = borderAdjustedX + scrollView.clientWidth;
   let maxY = borderAdjustedY + scrollView.clientHeight;
 
-  // Get scroll padding / margin values as pixels - defaults to 0 if no scroll padding / margin
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
   // is used.
   let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
   let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
   let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
   let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
-  let scrollMarginTopNumber = parseInt(scrollMarginTop, 10) || 0;
-  let scrollMarginBottomNumber = parseInt(scrollMarginBottom, 10) || 0;
-  let scrollMarginRightNumber = parseInt(scrollMarginRight, 10) || 0;
-  let scrollMarginLeftNumber = parseInt(scrollMarginLeft, 10) || 0;
-
-  let targetLeft = offsetX - scrollMarginLeftNumber;
-  let targetRight = offsetX + width + scrollMarginRightNumber;
-  let targetTop = offsetY - scrollMarginTopNumber;
-  let targetBottom = offsetY + height + scrollMarginBottomNumber;
-
-  let scrollPortLeft = x + parseInt(borderLeftWidth, 10) + scrollPaddingLeftNumber;
-  let scrollPortRight = maxX - scrollPaddingRightNumber;
-  let scrollPortTop = y + parseInt(borderTopWidth, 10) + scrollPaddingTopNumber;
-  let scrollPortBottom = maxY - scrollPaddingBottomNumber;
-
-  if (targetLeft > scrollPortLeft || targetRight < scrollPortRight) {
-    if (targetLeft <= x + scrollPaddingLeftNumber) {
-      x = targetLeft - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
-    } else if (targetRight > maxX - scrollPaddingRightNumber) {
-      x += targetRight - maxX + scrollPaddingRightNumber;
-    }
-  }
 
-  if (targetTop > scrollPortTop || targetBottom < scrollPortBottom) {
-    if (targetTop <= borderAdjustedY + scrollPaddingTopNumber) {
-      y = targetTop - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-    } else if (targetBottom > maxY - scrollPaddingBottomNumber) {
-      y += targetBottom - maxY + scrollPaddingBottomNumber;
-    }
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-
-  if (process.env.NODE_ENV === 'test') {
-    scrollView.scrollLeft = x;
-    scrollView.scrollTop = y;
-    return;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
 
-  scrollView.scrollTo({left: x, top: y});
+  scrollView.scrollLeft = x;
+  scrollView.scrollTop = y;
 }
 
 /**
@@ -134,9 +101,8 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
   if (targetElement && document.contains(targetElement)) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
-    // If scrolling is not currently prevented then we aren't in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
-    // Also ignore in chrome because of this bug: https://issues.chromium.org/issues/40074749
-    if (!isScrollPrevented && !isChrome()) {
+    // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
+    if (!isScrollPrevented) {
       let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
 
       // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
@@ -151,6 +117,9 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
     } else {
       let scrollParents = getScrollParents(targetElement);
       // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
+      if (!isScrollPrevented) {
+        scrollParents.push(root);
+      }
       for (let scrollParent of scrollParents) {
         scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
       }

package/src/useEvent.ts

@@ -33,5 +33,5 @@ export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
     return () => {
       element.removeEventListener(event, handleEvent as EventListener, options);
     };
-  }, [ref, event, options, isDisabled, handleEvent]);
+  }, [ref, event, options, isDisabled]);
 }

package/src/useFormReset.ts

@@ -32,5 +32,5 @@ export function useFormReset<T>(
     return () => {
       form?.removeEventListener('reset', handleReset);
     };
-  }, [ref, handleReset]);
+  }, [ref]);
 }

package/src/useLoadMoreSentinel.ts

@@ -59,5 +59,5 @@ export function useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject
         sentinelObserver.current.disconnect();
       }
     };
-  }, [collection, triggerLoadMore, ref, scrollOffset]);
+  }, [collection, ref, scrollOffset]);
 }

package/src/useResizeObserver.ts

@@ -1,6 +1,7 @@
 
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
+import {useEffectEvent} from './useEffectEvent';
 
 function hasResizeObserver() {
   return typeof window.ResizeObserver !== 'undefined';
@@ -13,7 +14,10 @@ type useResizeObserverOptionsType<T> = {
 }
 
 export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void {
+  // Only call onResize from inside the effect, otherwise we'll void our assumption that
+  // useEffectEvents are safe to pass in.
   const {ref, box, onResize} = options;
+  let onResizeEvent = useEffectEvent(onResize);
 
   useEffect(() => {
     let element = ref?.current;
@@ -22,9 +26,9 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
     }
 
     if (!hasResizeObserver()) {
-      window.addEventListener('resize', onResize, false);
+      window.addEventListener('resize', onResizeEvent, false);
       return () => {
-        window.removeEventListener('resize', onResize, false);
+        window.removeEventListener('resize', onResizeEvent, false);
       };
     } else {
 
@@ -33,7 +37,7 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
           return;
         }
 
-        onResize();
+        onResizeEvent();
       });
       resizeObserverInstance.observe(element, {box});
 
@@ -44,5 +48,5 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
       };
     }
 
-  }, [onResize, ref, box]);
+  }, [ref, box]);
 }

package/src/useUpdateEffect.ts

@@ -11,11 +11,13 @@
  */
 
 import {EffectCallback, useEffect, useRef} from 'react';
+import {useEffectEvent} from './useEffectEvent';
 
 // Like useEffect, but only called for updates after the initial render.
-export function useUpdateEffect(effect: EffectCallback, dependencies: any[]): void {
+export function useUpdateEffect(cb: EffectCallback, dependencies: any[]): void {
   const isInitialMount = useRef(true);
   const lastDeps = useRef<any[] | null>(null);
+  let cbEvent = useEffectEvent(cb);
 
   useEffect(() => {
     isInitialMount.current = true;
@@ -29,9 +31,9 @@ export function useUpdateEffect(effect: EffectCallback, dependencies: any[]): vo
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {
-      effect();
+      cbEvent();
     }
     lastDeps.current = dependencies;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 }

package/src/useValueEffect.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, MutableRefObject, useRef, useState} from 'react';
-import {useEffectEvent, useLayoutEffect} from './';
+import {Dispatch, RefObject, useCallback, useRef, useState} from 'react';
+import {useLayoutEffect} from './';
 
 type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 
@@ -21,11 +21,14 @@ type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 // written linearly.
 export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {
   let [value, setValue] = useState(defaultValue);
-  let effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);
+  // Keep an up to date copy of value in a ref so we can access the current value in the generator.
+  // This allows us to maintain a stable queue function.
+  let currValue = useRef(value);
+  let effect: RefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);
 
   // Store the function in a ref so we can always access the current version
   // which has the proper `value` in scope.
-  let nextRef = useEffectEvent(() => {
+  let nextRef = useRef(() => {
     if (!effect.current) {
       return;
     }
@@ -41,24 +44,25 @@ export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<Set
     // If the value is the same as the current value,
     // then continue to the next yield. Otherwise,
     // set the value in state and wait for the next layout effect.
-    if (value === newValue.value) {
-      nextRef();
+    if (currValue.current === newValue.value) {
+      nextRef.current();
     } else {
       setValue(newValue.value);
     }
   });
 
   useLayoutEffect(() => {
+    currValue.current = value;
     // If there is an effect currently running, continue to the next yield.
     if (effect.current) {
-      nextRef();
+      nextRef.current();
     }
   });
 
-  let queue = useEffectEvent(fn => {
-    effect.current = fn(value);
-    nextRef();
-  });
+  let queue = useCallback(fn => {
+    effect.current = fn(currValue.current);
+    nextRef.current();
+  }, [nextRef]);
 
   return [value, queue];
 }