From 7c95b653c34698f0a4ac779a8df74d278de6779c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 8 Jan 2025 09:33:41 +0100 Subject: [PATCH] [Dialog] Remove `useFloating` call from the Popup (#1300) --- packages/react/package.json | 4 +- .../alert-dialog/popup/AlertDialogPopup.tsx | 6 +-- .../react/src/dialog/popup/DialogPopup.tsx | 6 +-- .../react/src/dialog/popup/useDialogPopup.tsx | 44 +------------------ .../react/src/dialog/root/useDialogRoot.ts | 3 ++ pnpm-lock.yaml | 26 +++++------ 6 files changed, 23 insertions(+), 66 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 40241ad130..4de4e5dce1 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -77,8 +77,8 @@ }, "dependencies": { "@babel/runtime": "^7.26.0", - "@floating-ui/react": "^0.27.2", - "@floating-ui/utils": "^0.2.8", + "@floating-ui/react": "^0.27.3", + "@floating-ui/utils": "^0.2.9", "@react-aria/overlays": "^3.24.0", "prop-types": "^15.8.1", "use-sync-external-store": "^1.4.0" diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx index eb413a108a..d5b0565366 100644 --- a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx +++ b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx @@ -59,16 +59,14 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( const mergedRef = useForkRef(forwardedRef, popupRef); - const { getRootProps, floatingContext, resolvedInitialFocus } = useDialogPopup({ + const { getRootProps, resolvedInitialFocus } = useDialogPopup({ descriptionElementId, - floatingRootContext, getPopupProps, id, initialFocus, modal: true, mounted, setOpen, - open, openMethod, ref: mergedRef, setPopupElement, @@ -105,7 +103,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( {mounted && modal && } {mounted && modal && } { - setOpen(isOpen, event, translateOpenChangeReason(reason)); - }; - - const { context, elements } = useFloating({ - open, - onOpenChange: handleFloatingUIOpenChange, - rootContext: floatingRootContext, - }); - const popupRef = React.useRef(null); const id = useBaseUiId(idParam); const handleRef = useForkRef(ref, popupRef, setPopupElement); - useScrollLock(open && modal, elements.floating); - // Default initial focus logic: // If opened by touch, focus the popup element to prevent the virtual keyboard from opening // (this is required for Android specifically as iOS handles this automatically). @@ -101,7 +72,6 @@ export function useDialogPopup(parameters: useDialogPopup.Parameters): useDialog }); return { - floatingContext: context, getRootProps, resolvedInitialFocus, }; @@ -121,10 +91,6 @@ export namespace useDialogPopup { * Whether the dialog should prevent outside clicks and lock page scroll when open. */ modal: boolean; - /** - * Whether the dialog is currently open. - */ - open: boolean; openMethod: InteractionType | null; /** * Event handler called when the dialog is opened or closed. @@ -153,10 +119,6 @@ export namespace useDialogPopup { initialFocus?: | React.RefObject | ((interactionType: InteractionType) => React.RefObject); - /** - * The Floating UI root context. - */ - floatingRootContext: FloatingRootContext; /** * Determines if the dialog should be mounted. */ @@ -172,10 +134,6 @@ export namespace useDialogPopup { } export interface ReturnValue { - /** - * Floating UI context for the dialog's FloatingFocusManager. - */ - floatingContext: FloatingContext; /** * Resolver for the root element props. */ diff --git a/packages/react/src/dialog/root/useDialogRoot.ts b/packages/react/src/dialog/root/useDialogRoot.ts index aaac2def63..790efe77e9 100644 --- a/packages/react/src/dialog/root/useDialogRoot.ts +++ b/packages/react/src/dialog/root/useDialogRoot.ts @@ -10,6 +10,7 @@ import { } from '@floating-ui/react'; import { useControlled } from '../../utils/useControlled'; import { useEventCallback } from '../../utils/useEventCallback'; +import { useScrollLock } from '../../utils/useScrollLock'; import { useTransitionStatus, type TransitionStatus } from '../../utils/useTransitionStatus'; import { type InteractionType } from '../../utils/useEnhancedClickHandler'; import type { RequiredExcept, GenericHTMLProps } from '../../utils/types'; @@ -68,6 +69,8 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R }, }); + useScrollLock(open && modal, popupElement); + const handleFloatingUIOpenChange = ( nextOpen: boolean, event: Event | undefined, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c954b231e7..7766785c98 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -628,11 +628,11 @@ importers: specifier: ^7.26.0 version: 7.26.0 '@floating-ui/react': - specifier: ^0.27.2 - version: 0.27.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: ^0.27.3 + version: 0.27.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@floating-ui/utils': - specifier: ^0.2.8 - version: 0.2.8 + specifier: ^0.2.9 + version: 0.2.9 '@react-aria/overlays': specifier: ^3.24.0 version: 3.24.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -1997,14 +1997,14 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - '@floating-ui/react@0.27.2': - resolution: {integrity: sha512-k/yP6a9K9QwhLfIu87iUZxCH6XN5z5j/VUHHq0dEnbZYY2Y9jz68E/LXFtK8dkiaYltS2WYohnyKC0VcwVneVg==} + '@floating-ui/react@0.27.3': + resolution: {integrity: sha512-CLHnes3ixIFFKVQDdICjel8muhFLOBdQH7fgtHNPY8UbCNqbeKZ262G7K66lGQOUQWWnYocf7ZbUsLJgGfsLHg==} peerDependencies: react: '>=17.0.0' react-dom: '>=17.0.0' - '@floating-ui/utils@0.2.8': - resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@floating-ui/utils@0.2.9': + resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} '@formatjs/ecma402-abstract@2.3.1': resolution: {integrity: sha512-Ip9uV+/MpLXWRk03U/GzeJMuPeOXpJBSB5V1tjA6kJhvqssye5J5LoYLc7Z5IAHb7nR62sRoguzrFiVCP/hnzw==} @@ -11107,12 +11107,12 @@ snapshots: '@floating-ui/core@1.6.3': dependencies: - '@floating-ui/utils': 0.2.8 + '@floating-ui/utils': 0.2.9 '@floating-ui/dom@1.6.12': dependencies: '@floating-ui/core': 1.6.3 - '@floating-ui/utils': 0.2.8 + '@floating-ui/utils': 0.2.9 '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: @@ -11120,15 +11120,15 @@ snapshots: react: 19.0.0 react-dom: 19.0.0(react@19.0.0) - '@floating-ui/react@0.27.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@floating-ui/react@0.27.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - '@floating-ui/utils': 0.2.8 + '@floating-ui/utils': 0.2.9 react: 19.0.0 react-dom: 19.0.0(react@19.0.0) tabbable: 6.2.0 - '@floating-ui/utils@0.2.8': {} + '@floating-ui/utils@0.2.9': {} '@formatjs/ecma402-abstract@2.3.1': dependencies: