refactor: rename to useModernLayoutEffect (#2737)

floating-ui · Jan 15, 2024 · 31bba5e · 31bba5e
1 parent d824150
commit 31bba5e
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 89 deletions.
diff --git a/biome.json b/biome.json
@@ -58,7 +58,21 @@
       },
       "nursery": { "noUnusedImports": "off" },
       "performance": { "noAccumulatingSpread": "off" },
-      "correctness": { "noUndeclaredVariables": "off" },
+      "correctness": {
+        "noUndeclaredVariables": "off",
+        "useExhaustiveDependencies": {
+          "level": "error",
+          "options": {
+            "hooks": [
+              {
+                "name": "useModernLayoutEffect",
+                "closureIndex": 0,
+                "dependenciesIndex": 1
+              }
+            ]
+          }
+        }
+      },
       "suspicious": {
         "noExplicitAny": "off",
         "noEmptyInterface": "off",

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.23.7",
     "@babel/preset-typescript": "^7.23.3",
-    "@biomejs/biome": "^1.5.0",
+    "@biomejs/biome": "^1.5.2",
     "@changesets/cli": "^2.27.1",
     "@microsoft/api-extractor": "^7.39.1",
     "@playwright/test": "^1.40.1",

diff --git a/packages/react-dom/src/useFloating.ts b/packages/react-dom/src/useFloating.ts
@@ -1,7 +1,7 @@
 import {computePosition} from '@floating-ui/dom';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import type {
   ComputePositionConfig,
@@ -104,22 +104,23 @@ export function useFloating<RT extends ReferenceType = ReferenceType>(
     );
   }, [latestMiddleware, placement, strategy, platformRef]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData((data) => ({...data, isPositioned: false}));
     }
   }, [open]);
 
   const isMountedRef = React.useRef(false);
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
 
-  useLayoutEffect(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included.
+  useModernLayoutEffect(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
 

diff --git a/packages/react-dom/src/utils/useLatestRef.ts b/packages/react-dom/src/utils/useLatestRef.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 export function useLatestRef<T>(value: T) {
   const ref = React.useRef(value);
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     ref.current = value;
   });
   return ref;

diff --git a/packages/react/src/components/FloatingDelayGroup.tsx b/packages/react/src/components/FloatingDelayGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {getDelay} from '../hooks/useHover';
 import type {FloatingContext} from '../types';
@@ -73,7 +73,7 @@ export const FloatingDelayGroup = ({
     setState({currentId});
   }, []);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (state.currentId) {
       if (initialCurrentIdRef.current === null) {
         initialCurrentIdRef.current = state.currentId;
@@ -109,7 +109,7 @@ export const useDelayGroup = (
   const {currentId, setCurrentId, initialDelay, setState, timeoutMs} =
     useDelayGroupContext();
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (currentId) {
       setState({
         delay: {
@@ -124,7 +124,7 @@ export const useDelayGroup = (
     }
   }, [id, onOpenChange, setState, currentId, initialDelay]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     function unset() {
       onOpenChange(false);
       setState({delay: initialDelay, currentId: null});
@@ -142,7 +142,7 @@ export const useDelayGroup = (
     }
   }, [open, setState, currentId, id, onOpenChange, initialDelay, timeoutMs]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (open) {
       setCurrentId(id);
     }

diff --git a/packages/react/src/components/FloatingFocusManager.tsx b/packages/react/src/components/FloatingFocusManager.tsx
@@ -12,7 +12,7 @@ import {getNodeName, isHTMLElement} from '@floating-ui/utils/dom';
 import * as React from 'react';
 import type {FocusableElement} from 'tabbable';
 import {tabbable} from 'tabbable';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {useLatestRef} from '../hooks/utils/useLatestRef';
 import type {FloatingContext, OpenChangeReason, ReferenceType} from '../types';
@@ -335,7 +335,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>(
     guards,
   ]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (disabled || !floating) return;
 
     const doc = getDocument(floating);
@@ -367,7 +367,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>(
     initialFocusRef,
   ]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (disabled || !floating) return;
 
     let preventReturnFocusScroll = false;
@@ -458,7 +458,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>(
 
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (disabled || !portalContext) return;
 
     portalContext.setFocusManagerState({
@@ -482,7 +482,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>(
     closeOnFocusOut,
   ]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (
       disabled ||
       !floating ||

diff --git a/packages/react/src/components/FloatingList.tsx b/packages/react/src/components/FloatingList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 function sortByDocumentPosition(a: Node, b: Node) {
   const position = a.compareDocumentPosition(b);
@@ -78,7 +78,7 @@ export function FloatingList({
     });
   }, []);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     const newMap = new Map(map);
     const nodes = Array.from(newMap.keys()).sort(sortByDocumentPosition);
 
@@ -133,7 +133,7 @@ export function useListItem({label}: UseListItemProps = {}): {
     [index, elementsRef, labelsRef, label],
   );
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     const node = componentRef.current;
     if (node) {
       register(node);
@@ -143,7 +143,7 @@ export function useListItem({label}: UseListItemProps = {}): {
     }
   }, [register, unregister]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     const index = componentRef.current ? map.get(componentRef.current) : null;
     if (index != null) {
       setIndex(index);

diff --git a/packages/react/src/components/FloatingOverlay.tsx b/packages/react/src/components/FloatingOverlay.tsx
@@ -1,6 +1,6 @@
 import {getPlatform} from '@floating-ui/react/utils';
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {useId} from '../hooks/useId';
 
@@ -18,7 +18,7 @@ export const FloatingOverlay = React.forwardRef<
 >(function FloatingOverlay({lockScroll = false, ...rest}, ref) {
   const lockId = useId();
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (!lockScroll) return;
 
     activeLocks.add(lockId);

diff --git a/packages/react/src/components/FloatingPortal.tsx b/packages/react/src/components/FloatingPortal.tsx
@@ -1,7 +1,7 @@
 import {isElement} from '@floating-ui/utils/dom';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {useId} from '../hooks/useId';
 import type {ExtendedRefs, OpenChangeReason} from '../types';
@@ -52,13 +52,14 @@ export function useFloatingPortalNode({
 
   const dataRef = React.useRef<typeof data>();
 
-  useLayoutEffect(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `data` is intentionally specified
+  useModernLayoutEffect(() => {
     return () => {
       portalNode?.remove();
     };
   }, [portalNode, data]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (dataRef.current === data) return;
 
     dataRef.current = data;

diff --git a/packages/react/src/components/FloatingTree.tsx b/packages/react/src/components/FloatingTree.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {useId} from '../hooks/useId';
 import type {FloatingNodeType, FloatingTreeType, ReferenceType} from '../types';
@@ -24,7 +24,7 @@ export function useFloatingNodeId(customParentId?: string): string {
   const reactParentId = useFloatingParentNodeId();
   const parentId = customParentId || reactParentId;
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     const node = {id, parentId};
     tree?.addNode(node);
     return () => {

diff --git a/packages/react/src/components/FocusGuard.tsx b/packages/react/src/components/FocusGuard.tsx
@@ -1,6 +1,6 @@
 import {isSafari} from '@floating-ui/react/utils';
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {createAttribute} from '../utils/createAttribute';
 
@@ -37,7 +37,7 @@ export const FocusGuard = React.forwardRef<
 >(function FocusGuard(props, ref) {
   const [role, setRole] = React.useState<'button' | undefined>();
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (isSafari()) {
       // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
       // on VoiceOver does trigger the onFocus event, so we can use the focus

diff --git a/packages/react/src/hooks/useClientPoint.ts b/packages/react/src/hooks/useClientPoint.ts
@@ -5,7 +5,7 @@ import {
 } from '@floating-ui/react/utils';
 import {getWindow} from '@floating-ui/utils/dom';
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import type {
   ContextData,
@@ -219,7 +219,7 @@ export function useClientPoint<RT extends ReferenceType = ReferenceType>(
     }
   }, [enabled, open]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (enabled && (x != null || y != null)) {
       initialRef.current = false;
       setReference(x, y);

diff --git a/packages/react/src/hooks/useFloating.ts b/packages/react/src/hooks/useFloating.ts
@@ -1,7 +1,7 @@
 import {useFloating as usePosition} from '@floating-ui/react-dom';
 import {isElement} from '@floating-ui/utils/dom';
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {
   useFloatingParentNodeId,
@@ -144,7 +144,7 @@ export function useFloating<RT extends ReferenceType = ReferenceType>(
     [position, nodeId, floatingId, events, open, onOpenChange, refs, elements],
   );
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     const node = tree?.nodesRef.current.find((node) => node.id === nodeId);
     if (node) {
       node.context = context;

diff --git a/packages/react/src/hooks/useHover.ts b/packages/react/src/hooks/useHover.ts
@@ -5,7 +5,7 @@ import {
 } from '@floating-ui/react/utils';
 import {isElement} from '@floating-ui/utils/dom';
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {
   useFloatingParentNodeId,
@@ -332,7 +332,7 @@ export function useHover<RT extends ReferenceType = ReferenceType>(
   // while the floating element is open and has a `handleClose` handler. Also
   // handles nested floating elements.
   // https://github.com/floating-ui/floating-ui/issues/1722
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -375,11 +375,10 @@ export function useHover<RT extends ReferenceType = ReferenceType>(
     domReference,
     tree,
     handleCloseRef,
-    dataRef,
     isHoverOpen,
   ]);
 
-  useLayoutEffect(() => {
+  useModernLayoutEffect(() => {
     if (!open) {
       pointerTypeRef.current = undefined;
       cleanupMouseMoveHandler();

diff --git a/packages/react/src/hooks/useId.ts b/packages/react/src/hooks/useId.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import useModernLayoutEffect from 'use-isomorphic-layout-effect';
 
 let serverHandoffComplete = false;
 let count = 0;
@@ -10,7 +10,8 @@ function useFloatingId() {
     serverHandoffComplete ? genId() : undefined,
   );
 
-  useLayoutEffect(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional
+  useModernLayoutEffect(() => {
     if (id == null) {
       setId(genId());
     }