Skip to content

Draggable: Render the clone inside the overlay legacy slot #77761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ciampo wants to merge 1 commit into from
Closed

Draggable: Render the clone inside the overlay legacy slot #77761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- `Modal`: Portal modals into the overlay legacy slot. Update the aria-helper to walk up from the modal so siblings of the slot wrapper (and outer modals when nested) continue to be aria-hidden.
- `Tooltip`, `Menu`, `CustomSelectControl` v2: Pass `portalElement={ getOverlayLegacySlot }` so each Ariakit-backed overlay portals into the overlay legacy slot. Per-overlay z-indexes are unchanged.
- `SnackbarList`: Bake the previously-mixin-only positioning (`position: fixed; bottom; padding-inline; pointer-events: none;`) into `.components-snackbar-list` directly so the list self-positions whether portaled or rendered inline.
- `Draggable`: Append the drag clone wrapper to the overlay legacy slot instead of the document body. The clone's z-index is unchanged; it stacks relative to the slot.
- `NavigableContainer`: Refactor from class component to function component with hooks ([#77171](https://github.com/WordPress/gutenberg/pull/77171)).
- `Menu`: Refactor `Menu.Popover` to use Ariakit’s `render` prop, wrapping content in `MenuMotionRoot` (motion styles) and `MenuSurface` (panel layout and `variant` chrome) ([#77460](https://github.com/WordPress/gutenberg/pull/77460)).
- Fix types for TypeScript 7.0 ([#77177](https://github.com/WordPress/gutenberg/pull/77177)).
Expand Down
7 changes: 4 additions & 3 deletions packages/components/src/draggable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useEffect, useRef } from '@wordpress/element';
* Internal dependencies
*/
import type { DraggableProps } from './types';
import { getOverlayLegacySlot } from '../utils/overlay-legacy-slot';

const dragImageClass = 'components-draggable__invisible-drag-image';
const cloneWrapperClass = 'components-draggable__clone';
Expand Down Expand Up @@ -141,8 +142,8 @@ export function Draggable( {
clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
cloneWrapper.appendChild( clonedDragComponent );

// Inject the cloneWrapper into the DOM.
ownerDocument.body.appendChild( cloneWrapper );
// Inject the cloneWrapper into the overlay legacy slot.
getOverlayLegacySlot().appendChild( cloneWrapper );
} else {
const element = ownerDocument.getElementById(
elementId
Expand Down Expand Up @@ -175,7 +176,7 @@ export function Draggable( {

// Inject the cloneWrapper into the DOM.
if ( appendToOwnerDocument ) {
ownerDocument.body.appendChild( cloneWrapper );
getOverlayLegacySlot().appendChild( cloneWrapper );
} else {
elementWrapper?.appendChild( cloneWrapper );
}
Expand Down
Loading