Support floating strategy and named portals

Allow ActionButtons to use fixed positioning via a
floatingStrategy prop passed to useFloating. Support
portal="aboveNavigationWidgets" to render action buttons
in the high z-index portal used by hotspot tooltips.

Turn linkPreviewFloatingStrategy into a general
floatingStrategy prop on EditableLink so it applies to
both the link tooltip and the action buttons.

Author: tf

entry_types/scrolled/package/spec/frontend/inlineEditing/ActionButtons-spec.js

@@ -5,6 +5,7 @@ import {ActionButtons} from 'frontend/inlineEditing/ActionButtons';
 import {render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
+import 'support/toHaveAncestorWithInlineStyle';
 
 describe('ActionButtons', () => {
   it('renders icons and texts for each button', () => {
@@ -45,6 +46,34 @@ describe('ActionButtons', () => {
     expect(button).toHaveTextContent('');
   });
 
+  it('uses absolute position for floating element by default', () => {
+    const {getByRole} = render(
+      <ActionButtons buttons={[{icon: 'pencil', text: 'Edit'}]} />
+    );
+
+    expect(getByRole('button', {name: 'Edit'})).toHaveAncestorWithInlineStyle('position: absolute');
+  });
+
+  it('supports floatingStrategy prop', () => {
+    const {getByRole} = render(
+      <ActionButtons buttons={[{icon: 'pencil', text: 'Edit'}]}
+                     floatingStrategy="fixed" />
+    );
+
+    expect(getByRole('button', {name: 'Edit'})).toHaveAncestorWithInlineStyle('position: fixed');
+  });
+
+  it('renders in portal with given id when portal is a string', () => {
+    render(
+      <ActionButtons buttons={[{icon: 'pencil', text: 'Edit'}]}
+                     portal="aboveNavigationWidgets" />
+    );
+
+    const portalContainer = document.getElementById('floating-ui-above-navigation-widgets');
+    expect(portalContainer).toBeInTheDocument();
+    expect(portalContainer.querySelector('button')).toBeInTheDocument();
+  });
+
   it('triggers individual click handlers', async () => {
     const onEdit = jest.fn();
     const onLink = jest.fn();

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js

@@ -8,7 +8,8 @@ import {useFakeTranslations} from 'pageflow/testHelpers';
 import {renderInContentElement} from 'pageflow-scrolled/testHelpers';
 import {render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect';
+import 'support/toHaveAncestorWithInlineStyle';
 
 jest.mock('frontend/inlineEditing/useSelectLinkDestination');
 
@@ -152,6 +153,17 @@ describe('EditableLink', () => {
     expect(onChange).toHaveBeenCalledWith(null);
   });
 
+  it('passes floatingStrategy to action buttons', () => {
+    render(
+      <EditableLink actionButtonVisible={true}
+                    floatingStrategy="fixed">
+        Some link
+      </EditableLink>
+    );
+
+    expect(screen.getByRole('button', {name: 'Select link destination'})).toHaveAncestorWithInlineStyle('position: fixed');
+  });
+
   it('triggers onClick when tooltip is clicked', async () => {
     const onClick = jest.fn();
     const user = userEvent.setup();

entry_types/scrolled/package/spec/support/toHaveAncestorWithInlineStyle.js

@@ -0,0 +1,13 @@
+expect.extend({
+  toHaveAncestorWithInlineStyle(element, styleSubstring) {
+    const ancestor = element.closest(`[style*="${styleSubstring}"]`);
+    const pass = !!ancestor;
+
+    return {
+      pass,
+      message: () => pass
+        ? `expected element not to have ancestor with inline style '${styleSubstring}'`
+        : `expected element to have ancestor with inline style '${styleSubstring}'`
+    };
+  }
+});

entry_types/scrolled/package/src/frontend/inlineEditing/ActionButtons.js

@@ -21,10 +21,11 @@ const icons = {
   unlink
 };
 
-export function ActionButtons({buttons, position, portal, size = 'md'}) {
+export function ActionButtons({buttons, position, portal, floatingStrategy, size = 'md'}) {
   const iconSize = size === 'md' ? 15 : 20;
 
   const {refs, floatingStyles, middlewareData} = useFloating({
+    strategy: floatingStrategy,
     placement: position === 'center' ? 'bottom' :
                position === 'inside' ? 'top-end' :
                position === 'outsideLeft' ? 'bottom-start' :
@@ -41,7 +42,8 @@ export function ActionButtons({buttons, position, portal, size = 'md'}) {
     <span className={classNames(styles.reference,
                                 styles[`position-${position}`])}
           ref={refs.setReference}>
-      <Portal enabled={portal}>
+      <Portal enabled={!!portal}
+              aboveNavigationWidgets={portal === 'aboveNavigationWidgets'}>
         <div ref={refs.setFloating}
              className={classNames(styles.floating, {[styles.escaped]: middlewareData.hide?.escaped})}
              style={floatingStyles}>
@@ -68,12 +70,13 @@ export function ActionButtons({buttons, position, portal, size = 'md'}) {
   );
 }
 
-function Portal({enabled, children}) {
+function Portal({enabled, aboveNavigationWidgets, children}) {
   const floatingPortalRoot = useFloatingPortalRoot();
 
   if (enabled) {
     return (
-      <FloatingPortal root={floatingPortalRoot}>
+      <FloatingPortal id={aboveNavigationWidgets ? 'floating-ui-above-navigation-widgets' : undefined}
+                      root={floatingPortalRoot}>
         {children}
       </FloatingPortal>
     );

entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js

@@ -16,7 +16,7 @@ export function EditableLink({
   linkPreviewDisabled,
   linkPreviewPosition = 'below',
   linkPreviewAlign = 'center',
-  linkPreviewFloatingStrategy,
+  floatingStrategy,
   actionButtonPosition = 'outside',
   actionButtonVisible = 'whenSelected',
   actionButtonPortal,
@@ -42,7 +42,7 @@ export function EditableLink({
   return (
     <div className={styles.wrapper}>
       <LinkTooltipProvider position={linkPreviewPosition}
-                           floatingStrategy={linkPreviewFloatingStrategy}
+                           floatingStrategy={floatingStrategy}
                            align={linkPreviewAlign}
                            onClick={onClick}
                            gap={5}>
@@ -64,7 +64,8 @@ export function EditableLink({
                                                            text: t('pageflow_scrolled.inline_editing.remove_link'),
                                                            onClick: handleRemoveLink}] : [])]}
                       position={actionButtonPosition}
-                      portal={actionButtonPortal} />}
+                      portal={actionButtonPortal}
+                      floatingStrategy={floatingStrategy} />}
     </div>
   );
 }