@akinon/pz-theme 2.0.36-beta.0 → 2.0.36

package/src/hooks/__tests__/use-overlay.test.tsx

@@ -0,0 +1,503 @@
+import React, { useEffect, useRef } from 'react';
+import { fireEvent, render } from '@testing-library/react';
+// The Node build, not the browser one: it is the path a storefront actually
+// server-renders through, and the browser build wants a MessageChannel jsdom
+// does not have.
+import { renderToStaticMarkup } from 'react-dom/server.node';
+
+import { useOverlay } from '../use-overlay';
+import type { OverlayPointerBook } from '../use-overlay';
+
+/**
+ * The defect this primitive exists for, in the shape the blocks copied it in:
+ * `store-locator-block.tsx:679`, `variant-selector-block.tsx:508` and
+ * `facet-filters-block.tsx:757` each register a DOCUMENT-level `focusin`
+ * listener that pulls focus back into its own panel. Two of them on one page
+ * is an ordinary composition — those files' own comments say so — and each one
+ * reads the other's focus as "outside".
+ *
+ * Reproduced below without React so the loop is the subject and nothing else:
+ * the pull counter aborts at 50 instead of waiting for the real
+ * `RangeError: Maximum call stack size exceeded`.
+ */
+interface PullBudget {
+  pulls: number;
+  limit: number;
+}
+
+const installLegacyTrap = (panel: HTMLElement, budget: PullBudget) => {
+  const focusFirst = () => {
+    // Stands in for the call stack running out, so the test reports a number
+    // instead of hanging on the way to a RangeError.
+    if (budget.pulls >= budget.limit) return;
+    budget.pulls += 1;
+
+    const [first] = Array.from(panel.querySelectorAll<HTMLElement>('button'));
+    (first || panel).focus();
+  };
+
+  const handleFocusIn = (event: FocusEvent) => {
+    if (panel.contains(event.target as Node)) return;
+    focusFirst();
+  };
+
+  document.addEventListener('focusin', handleFocusIn);
+
+  return () => document.removeEventListener('focusin', handleFocusIn);
+};
+
+const buildLegacyPanel = (name: string) => {
+  const panel = document.createElement('div');
+  panel.tabIndex = -1;
+  const button = document.createElement('button');
+  button.textContent = name;
+  panel.appendChild(button);
+  document.body.appendChild(panel);
+
+  return panel;
+};
+
+interface ProbeProps {
+  name: string;
+  open: boolean;
+  modal?: boolean;
+  lockScroll?: boolean;
+  closeOnEscape?: boolean;
+  manageFocus?: boolean;
+  isDesigner?: boolean;
+  withTrigger?: boolean;
+  onClose?: () => void;
+  onDeactivate?: () => void;
+  bookRef?: { current: OverlayPointerBook | null };
+}
+
+/**
+ * A block-shaped consumer: a trigger, a root that survives the trigger, and a
+ * panel that only exists while open — the same composition every block that
+ * opens a picker over the page already has.
+ */
+function OverlayProbe(props: ProbeProps) {
+  const {
+    name,
+    open,
+    withTrigger = true,
+    bookRef,
+    modal,
+    lockScroll,
+    closeOnEscape,
+    manageFocus,
+    isDesigner,
+    onClose,
+    onDeactivate
+  } = props;
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const overlay = useOverlay<HTMLDivElement>({
+    open,
+    modal,
+    lockScroll,
+    closeOnEscape,
+    manageFocus,
+    isDesigner,
+    onClose,
+    onDeactivate,
+    returnFocusRef: triggerRef,
+    fallbackFocusRef: rootRef
+  });
+
+  useEffect(() => {
+    if (bookRef) bookRef.current = overlay.pointers;
+  }, [bookRef, overlay.pointers]);
+
+  return (
+    <div ref={rootRef} tabIndex={-1} data-testid={`${name}-root`}>
+      {withTrigger ? (
+        <button type="button" ref={triggerRef} data-testid={`${name}-trigger`}>
+          open {name}
+        </button>
+      ) : null}
+      {open ? (
+        <div
+          {...overlay.overlayProps}
+          role="dialog"
+          tabIndex={-1}
+          data-testid={`${name}-panel`}
+        >
+          <button type="button" data-testid={`${name}-first`}>
+            first
+          </button>
+          <button type="button" data-testid={`${name}-last`}>
+            last
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+interface PageProps {
+  a?: Partial<ProbeProps>;
+  b?: Partial<ProbeProps> | null;
+}
+
+function Page({ a, b }: PageProps) {
+  return (
+    <div>
+      <button type="button" data-testid="outside">
+        outside
+      </button>
+      <OverlayProbe name="a" open={false} {...a} />
+      {b === null ? null : <OverlayProbe name="b" open={false} {...b} />}
+    </div>
+  );
+}
+
+describe('useOverlay', () => {
+  afterEach(() => {
+    document.body.style.overflow = '';
+  });
+
+  it('reproduces the loop the per-block traps have: two document-level traps pull focus at each other forever', () => {
+    const panelA = buildLegacyPanel('a');
+    const panelB = buildLegacyPanel('b');
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    const budget: PullBudget = { pulls: 0, limit: 50 };
+    const removeA = installLegacyTrap(panelA, budget);
+    const removeB = installLegacyTrap(panelB, budget);
+
+    try {
+      outside.focus();
+    } finally {
+      removeA();
+      removeB();
+      panelA.remove();
+      panelB.remove();
+      outside.remove();
+    }
+
+    // Neither trap ever wins: one move of focus spends the whole budget on the
+    // two of them handing it back and forth, which in a browser is
+    // `RangeError: Maximum call stack size exceeded` and a frozen tab.
+    expect(budget.pulls).toBe(budget.limit);
+  });
+
+  it('lets only the topmost overlay pull focus back when two are open and focus moves', () => {
+    const { getByTestId } = render(
+      <Page a={{ open: true }} b={{ open: true }} />
+    );
+
+    let focusMoves = 0;
+    const countMove = () => {
+      focusMoves += 1;
+    };
+    document.addEventListener('focusin', countMove);
+
+    // The scenario the per-block tests never reached: both panels open, and
+    // THEN focus moves.
+    try {
+      getByTestId('outside').focus();
+    } finally {
+      document.removeEventListener('focusin', countMove);
+    }
+
+    // Focus landing outside, and one pull back in. That is the whole exchange.
+    expect(focusMoves).toBe(2);
+    expect(getByTestId('b-panel').contains(document.activeElement)).toBe(true);
+    // The one beneath is inert, not gone.
+    expect(getByTestId('a-panel')).toBeInTheDocument();
+  });
+
+  it('pulls focus out of the overlay beneath exactly once, without the two trading it', () => {
+    const { getByTestId } = render(
+      <Page a={{ open: true }} b={{ open: true }} />
+    );
+
+    getByTestId('a-first').focus();
+
+    expect(document.activeElement).toBe(getByTestId('b-first'));
+  });
+
+  it('claims aria-modal on the topmost only, and hands the claim back when it closes', () => {
+    const { getByTestId, rerender } = render(
+      <Page a={{ open: true }} b={{ open: false }} />
+    );
+
+    expect(getByTestId('a-panel')).toHaveAttribute('aria-modal', 'true');
+
+    rerender(<Page a={{ open: true }} b={{ open: true }} />);
+
+    // Two live dialogs both claiming it makes neither claim true.
+    expect(getByTestId('a-panel')).not.toHaveAttribute('aria-modal');
+    expect(getByTestId('b-panel')).toHaveAttribute('aria-modal', 'true');
+
+    rerender(<Page a={{ open: true }} b={{ open: false }} />);
+
+    expect(getByTestId('a-panel')).toHaveAttribute('aria-modal', 'true');
+  });
+
+  /**
+   * `innerHTML` serializes attributes in the order the DOM took them, so an
+   * attribute that first appears on a LATER commit is appended after
+   * everything the block wrote. Registration happens in an effect, so a claim
+   * that waits for it lands one commit late and quietly moves the markup of
+   * every panel that carries it — under goldens that are not about modality
+   * at all.
+   */
+  it('claims aria-modal on the commit that draws the panel, not the one after', () => {
+    function ClaimProbe({ open }: { open: boolean }) {
+      const overlay = useOverlay<HTMLDivElement>({ open });
+
+      return open ? (
+        <div
+          {...overlay.overlayProps}
+          role="dialog"
+          tabIndex={-1}
+          data-testid="claim"
+        />
+      ) : null;
+    }
+
+    const { getByTestId, rerender } = render(<ClaimProbe open={false} />);
+    rerender(<ClaimProbe open />);
+
+    // The order the props were written in, not `aria-modal` tacked on the end.
+    expect(getByTestId('claim').getAttributeNames()).toEqual([
+      'aria-modal',
+      'role',
+      'tabindex',
+      'data-testid'
+    ]);
+  });
+
+  it('never claims aria-modal for an overlay that is not modal', () => {
+    const { getByTestId } = render(<Page a={{ open: true, modal: false }} />);
+
+    // With no backdrop the page underneath is deliberately usable, so the
+    // claim would be a lie.
+    expect(getByTestId('a-panel')).not.toHaveAttribute('aria-modal');
+  });
+
+  it('wraps Tab both ways inside the topmost overlay', () => {
+    const { getByTestId } = render(<Page a={{ open: true }} />);
+
+    const panel = getByTestId('a-panel');
+    const first = getByTestId('a-first');
+    const last = getByTestId('a-last');
+
+    last.focus();
+    fireEvent.keyDown(last, { key: 'Tab' });
+    expect(document.activeElement).toBe(first);
+
+    fireEvent.keyDown(first, { key: 'Tab', shiftKey: true });
+    expect(document.activeElement).toBe(last);
+
+    expect(panel).toBeInTheDocument();
+  });
+
+  it('leaves focus with the overlay on top when the one beneath closes out of order', () => {
+    const { getByTestId, rerender } = render(
+      <Page a={{ open: true }} b={{ open: true }} />
+    );
+
+    const inTop = getByTestId('b-last');
+    inTop.focus();
+
+    rerender(<Page a={{ open: false }} b={{ open: true }} />);
+
+    // A closing overlay hands focus back to its trigger only when it is the
+    // one that owns focus; the modal still on top keeps it.
+    expect(document.activeElement).toBe(inTop);
+    expect(getByTestId('b-panel')).toHaveAttribute('aria-modal', 'true');
+
+    // And the top one still traps after the out-of-order close.
+    getByTestId('outside').focus();
+    expect(getByTestId('b-panel').contains(document.activeElement)).toBe(true);
+  });
+
+  it('returns focus to the trigger on close', () => {
+    const { getByTestId, rerender } = render(<Page a={{ open: false }} />);
+
+    getByTestId('a-trigger').focus();
+    rerender(<Page a={{ open: true }} />);
+    expect(getByTestId('a-panel').contains(document.activeElement)).toBe(true);
+
+    rerender(<Page a={{ open: false }} />);
+    expect(document.activeElement).toBe(getByTestId('a-trigger'));
+  });
+
+  it('lands focus somewhere real when the trigger is gone by the time it closes', () => {
+    const { getByTestId, rerender } = render(<Page a={{ open: false }} />);
+
+    getByTestId('a-trigger').focus();
+    rerender(<Page a={{ open: true }} />);
+
+    // The row that carried the trigger re-renders away while the panel is up.
+    rerender(<Page a={{ open: true, withTrigger: false }} />);
+    rerender(<Page a={{ open: false, withTrigger: false }} />);
+
+    expect(document.activeElement).toBe(getByTestId('a-root'));
+  });
+
+  it('does not leave focus inside a panel that is hidden rather than unmounted', () => {
+    function StickyOverlay({ open }: { open: boolean }) {
+      const overlay = useOverlay<HTMLDivElement>({ open });
+
+      // Some panels animate out: they stay mounted and merely stop being
+      // reachable, and focus left inside one is focus a shopper cannot see.
+      return (
+        <div {...overlay.overlayProps} tabIndex={-1} hidden={!open}>
+          <button type="button" data-testid="sticky-first">
+            first
+          </button>
+        </div>
+      );
+    }
+
+    const { getByTestId, rerender } = render(<StickyOverlay open />);
+    expect(document.activeElement).toBe(getByTestId('sticky-first'));
+
+    rerender(<StickyOverlay open={false} />);
+
+    expect(document.activeElement).not.toBe(getByTestId('sticky-first'));
+  });
+
+  it('releases everything it took when it unmounts while still open', () => {
+    document.body.style.overflow = 'auto';
+    const onDeactivate = jest.fn();
+    const bookRef: { current: OverlayPointerBook | null } = { current: null };
+
+    const { getByTestId, unmount } = render(
+      <Page a={{ open: true, onDeactivate, bookRef }} />
+    );
+
+    getByTestId('a-first').focus();
+    bookRef.current?.track({ pointerId: 7, clientX: 10, clientY: 10 });
+    expect(bookRef.current?.size()).toBe(1);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    unmount();
+
+    expect(document.body.style.overflow).toBe('auto');
+    expect(onDeactivate).toHaveBeenCalledTimes(1);
+    expect(bookRef.current?.size()).toBe(0);
+  });
+
+  it('counts every scroll-lock holder and restores the page’s own overflow only for the last', () => {
+    document.body.style.overflow = 'auto';
+
+    const { rerender } = render(<Page a={{ open: true }} b={{ open: true }} />);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    rerender(<Page a={{ open: false }} b={{ open: true }} />);
+    // One holder left: the page must stay frozen behind the panel still up.
+    expect(document.body.style.overflow).toBe('hidden');
+
+    rerender(<Page a={{ open: false }} b={{ open: false }} />);
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('leaves the page alone for an overlay that does not ask for the lock', () => {
+    document.body.style.overflow = 'auto';
+
+    render(<Page a={{ open: true, lockScroll: false }} />);
+
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('closes the topmost overlay on Escape and nothing beneath it', () => {
+    const closeA = jest.fn();
+    const closeB = jest.fn();
+
+    render(
+      <Page
+        a={{ open: true, onClose: closeA }}
+        b={{ open: true, onClose: closeB }}
+      />
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(closeB).toHaveBeenCalledTimes(1);
+    expect(closeA).not.toHaveBeenCalled();
+  });
+
+  it('honours closeOnEscape: false', () => {
+    const closeA = jest.fn();
+
+    render(<Page a={{ open: true, closeOnEscape: false, onClose: closeA }} />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(closeA).not.toHaveBeenCalled();
+  });
+
+  it('hands back every pointer the overlay booked when it closes', () => {
+    const bookRef: { current: OverlayPointerBook | null } = { current: null };
+    const released: number[] = [];
+    const stage = {
+      setPointerCapture: jest.fn(),
+      releasePointerCapture: (id: number) => released.push(id)
+    } as unknown as Element;
+
+    const { rerender } = render(<Page a={{ open: true, bookRef }} />);
+
+    const book = bookRef.current as OverlayPointerBook;
+    book.track({ pointerId: 1, clientX: 0, clientY: 0, currentTarget: stage });
+    book.track({ pointerId: 2, clientX: 8, clientY: 4, currentTarget: stage });
+    book.track({ pointerId: 2, clientX: 9, clientY: 4, currentTarget: stage });
+
+    expect(book.size()).toBe(2);
+    expect(book.has(1)).toBe(true);
+    expect(book.points()).toEqual([
+      { x: 0, y: 0 },
+      { x: 9, y: 4 }
+    ]);
+    // Capture is taken once per pointer, not again on every move.
+    expect(stage.setPointerCapture).toHaveBeenCalledTimes(2);
+
+    rerender(<Page a={{ open: false, bookRef }} />);
+
+    // A finger still down when the panel goes away must not stay booked: the
+    // next swipe would be read as the second finger of a pinch that never
+    // started, for the rest of the session.
+    expect(book.size()).toBe(0);
+    expect(released.sort()).toEqual([1, 2]);
+  });
+
+  it('stays inert in the designer', () => {
+    const closeA = jest.fn();
+    document.body.style.overflow = 'auto';
+
+    const { getByTestId } = render(
+      <Page a={{ open: true, isDesigner: true, onClose: closeA }} />
+    );
+
+    const outside = getByTestId('outside');
+    outside.focus();
+
+    // The canvas is the author's workspace: nothing may reach into it.
+    expect(document.activeElement).toBe(outside);
+    expect(document.body.style.overflow).toBe('auto');
+    expect(getByTestId('a-panel')).not.toHaveAttribute('aria-modal');
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(closeA).not.toHaveBeenCalled();
+  });
+
+  it('does not touch the document while rendering on the server', () => {
+    const addEventListener = jest.spyOn(document, 'addEventListener');
+    document.body.style.overflow = 'auto';
+
+    const markup = renderToStaticMarkup(<Page a={{ open: true }} />);
+
+    expect(markup).toContain('data-testid="a-panel"');
+    expect(markup).not.toContain('aria-modal');
+    expect(document.body.style.overflow).toBe('auto');
+    expect(addEventListener).not.toHaveBeenCalled();
+
+    addEventListener.mockRestore();
+  });
+});

package/src/hooks/use-designer-features.tsx

@@ -31,6 +31,20 @@ export function useDesignerFeatures({
         e.preventDefault();
         e.stopPropagation();
 
+        // Clicking straight on the dropdown, a swatch or a menu item should
+        // select *that*, not just the block it lives in — otherwise a
+        // designer has to guess which entry in the style list is the element
+        // under the cursor.
+        const partElement =
+          e.target instanceof Element
+            ? e.target.closest<HTMLElement>('[data-part]')
+            : null;
+        const partOwner = partElement?.closest<HTMLElement>('[data-block-id]');
+        const partName =
+          partElement && partOwner?.getAttribute('data-block-id') === blockId
+            ? partElement.getAttribute('data-part')
+            : null;
+
         if (window.parent) {
           postToEditor({
             type: 'SELECT_BLOCK',
@@ -39,7 +53,8 @@ export function useDesignerFeatures({
               sectionId,
               blockId,
               blockType: blockInfo?.type,
-              blockLabel: blockInfo?.label
+              blockLabel: blockInfo?.label,
+              partName: partName || undefined
             }
           });
         }