@akinon/pz-theme 2.0.47-rc.0 → 2.0.48-beta.0

package/src/blocks/panel-block.tsx

@@ -0,0 +1,560 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import {
+  getResponsiveValue,
+  partAttrs,
+  resolveForceOpen,
+  resolveOption
+} from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import ThemeBlock from '../theme-block';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+type Presentation = 'modal' | 'drawer' | 'sheet' | 'anchored';
+
+const PRESENTATIONS: Presentation[] = ['modal', 'drawer', 'sheet', 'anchored'];
+
+/**
+ * Generic overlay surface: a trigger that opens a panel the author fills.
+ *
+ * The panel's contents are authored in the editor as CHILD blocks, so nothing
+ * about them is hardcoded here — this block owns the trigger, the surface and
+ * how that surface arrives (centred modal, edge drawer, bottom sheet, or a
+ * dropdown anchored to the trigger, chosen per breakpoint). In the designer
+ * the children render inline and stay selectable — a real overlay would put
+ * them behind a click the author cannot perform inside the preview iframe —
+ * unless the author holds the panel open with the force-open toggle, which is
+ * what makes the backdrop dressable.
+ *
+ * `size-guide` is this block's legacy type id: published widget JSON and the
+ * AI generator manifest still carry it, both types register this renderer, and
+ * the `modal` presentation is byte for byte the markup that shipped under that
+ * name (see __tests__/panel-legacy-golden.json).
+ *
+ * Properties: presentation, triggerLabel, modalTitle, closeLabel, showClose,
+ * showBackdrop, closeOnOverlay, closeOnEscape, modalWidth, panelSide,
+ * sheetHeight, anchorAlign, anchorOffset.
+ * Parts: trigger, overlay, modal, title, close, handle.
+ */
+const PanelBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  // Designer-only: hold the panel mounted so its open state — backdrop
+  // included — can be styled. Every close route stays inert.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const presentation = resolveOption<Presentation>(
+    block.properties?.presentation,
+    currentBreakpoint,
+    'modal',
+    PRESENTATIONS
+  );
+  const isModal = presentation === 'modal';
+
+  const triggerLabel = prop('triggerLabel', 'Size guide');
+  const modalTitle = prop('modalTitle', '');
+  const closeLabel = prop('closeLabel', 'Close');
+  const showClose = readToggle(
+    block.properties?.showClose,
+    currentBreakpoint,
+    true
+  );
+  // Defaults on, because every composition published before this property
+  // existed drew a backdrop unconditionally.
+  const showBackdrop = readToggle(
+    block.properties?.showBackdrop,
+    currentBreakpoint,
+    true
+  );
+  const closeOnOverlay = readToggle(
+    block.properties?.closeOnOverlay,
+    currentBreakpoint,
+    true
+  );
+  const closeOnEscape = readToggle(
+    block.properties?.closeOnEscape,
+    currentBreakpoint,
+    true
+  );
+  const modalWidthValue = Number(
+    getResponsiveValue(block.properties?.modalWidth, currentBreakpoint, 640)
+  );
+  const modalWidth =
+    Number.isFinite(modalWidthValue) && modalWidthValue > 0
+      ? modalWidthValue
+      : 640;
+  const panelSide = String(
+    getResponsiveValue(block.properties?.panelSide, currentBreakpoint, 'right')
+  );
+  const sheetHeight = clampNumber(
+    getResponsiveValue(block.properties?.sheetHeight, currentBreakpoint, 60),
+    60,
+    20,
+    100
+  );
+  const anchorAlign = resolveOption<'start' | 'center' | 'end'>(
+    block.properties?.anchorAlign,
+    currentBreakpoint,
+    'start',
+    ['start', 'center', 'end']
+  );
+  const anchorOffset = clampNumber(
+    getResponsiveValue(block.properties?.anchorOffset, currentBreakpoint, 8),
+    8,
+    0,
+    48
+  );
+
+  /**
+   * Escape, the focus trap, returning focus to the trigger and the
+   * `aria-modal` claim are the shared overlay primitive's, not this block's.
+   *
+   * This modal hard-coded `aria-modal="true"` and answered Escape from its own
+   * document listener. A PDP composes several overlays — a size picker, a
+   * store panel, a quick view — and two of them open at once meant two dialogs
+   * each telling assistive tech the other was hidden, and one Escape closing
+   * both. The primitive keeps one stack for the page, so the claim and the key
+   * belong to whichever overlay is actually on top.
+   *
+   * The centred modal really does cover the page behind its backdrop, so
+   * `modal` is unconditionally true there. The presentations added later draw
+   * their backdrop only when the author asked for one, and with the page
+   * behind still clickable the claim would be a lie — so they make it only
+   * behind a backdrop, exactly as the filter drawer does. `lockScroll` is left
+   * to default to `modal` for the same reason: a panel that does not cover the
+   * page must not freeze it.
+   *
+   * `isDesigner` keeps the whole primitive inert, which is what lets the
+   * forced-open branch below render an overlay without stealing focus,
+   * freezing the canvas or answering Escape.
+   */
+  const overlay = useOverlay<HTMLDivElement>({
+    open: isOpen,
+    onClose: () => setIsOpen(false),
+    isDesigner,
+    modal: isModal ? true : showBackdrop,
+    closeOnEscape,
+    returnFocusRef: triggerRef
+  });
+
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  const renderChildren = () =>
+    childBlocks.map((childBlock, index) => {
+      const createActionHandler = (actionType: string) => () => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: actionType,
+              data: { placeholderId, sectionId, blockId: childBlock.id }
+            },
+            '*'
+          );
+        }
+      };
+
+      const handleRename = (newLabel: string) => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'RENAME_BLOCK',
+              data: {
+                placeholderId,
+                sectionId,
+                blockId: childBlock.id,
+                label: newLabel
+              }
+            },
+            '*'
+          );
+        }
+      };
+
+      return (
+        <ThemeBlock
+          key={childBlock.id || `size-guide-block-${index}`}
+          block={childBlock}
+          placeholderId={placeholderId}
+          sectionId={sectionId}
+          isDesigner={isDesigner}
+          isSelected={selectedBlockId === childBlock.id}
+          selectedBlockId={selectedBlockId}
+          currentBreakpoint={currentBreakpoint}
+          onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+          onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+          onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+          onToggleVisibility={createActionHandler('TOGGLE_BLOCK_VISIBILITY')}
+          onDelete={createActionHandler('DELETE_BLOCK')}
+          onRename={handleRename}
+        />
+      );
+    });
+
+  // A trigger that opens an empty panel is a dead control, so on the storefront
+  // the block disappears until the author has put something inside it.
+  if (childBlocks.length === 0 && !isDesigner) return null;
+
+  // Held open in the canvas, every dismissal is a no-op: the author has to be
+  // able to click the backdrop they are colouring without it vanishing.
+  const dismiss = () => {
+    if (forcedOpen) return;
+    setIsOpen(false);
+  };
+
+  const opened = isOpen || forcedOpen;
+
+  const trigger = (
+    <button
+      type="button"
+      data-size-guide-trigger=""
+      ref={triggerRef}
+      {...partAttrs('trigger', { open: opened })}
+      aria-haspopup="dialog"
+      aria-expanded={opened}
+      onClick={() => {
+        // The designer already shows the content inline, and opening a fixed
+        // overlay there would cover the canvas the author is working in.
+        if (isDesigner) return;
+        setIsOpen(true);
+      }}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: 0,
+        margin: 0,
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        textDecoration: 'underline',
+        cursor: 'pointer'
+      }}
+    >
+      {triggerLabel}
+    </button>
+  );
+
+  const titleNode = modalTitle ? (
+    <div
+      data-size-guide-title=""
+      {...partAttrs('title')}
+      style={{ marginBottom: '12px', fontWeight: 600 }}
+    >
+      {modalTitle}
+    </div>
+  ) : null;
+
+  if (isDesigner && !forcedOpen) {
+    return (
+      <div data-size-guide="" data-size-guide-state="inline">
+        {trigger}
+        <div
+          data-size-guide-content=""
+          data-size-guide-mode="inline"
+          // The same part as the storefront panel: the author has to see the
+          // panel styling they just typed, and the panel never opens here.
+          {...partAttrs('modal')}
+          style={{
+            marginTop: '8px',
+            padding: '12px',
+            border: '1px dashed #cbd5e1',
+            borderRadius: '4px'
+          }}
+        >
+          {titleNode}
+          {childBlocks.length > 0 ? (
+            renderChildren()
+          ) : (
+            <DesignerPlaceholder label="Size guide (drop the size table blocks here)" />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const closeButton = showClose ? (
+    <button
+      type="button"
+      data-size-guide-close=""
+      {...partAttrs('close')}
+      aria-label={closeLabel}
+      onClick={dismiss}
+      style={{
+        position: 'absolute',
+        top: '12px',
+        right: '12px',
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        cursor: 'pointer',
+        padding: 0
+      }}
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      >
+        <path d="M6 6l12 12M18 6L6 18" />
+      </svg>
+    </button>
+  ) : null;
+
+  /**
+   * The centred modal keeps the shape it published with: ONE node that is both
+   * the fixed root and the backdrop, carrying `data-part="overlay"`, with the
+   * panel centred inside it by flex. Refactoring it into the root + backdrop
+   * sibling pair the other presentations use would move markup live
+   * storefronts already style, for no gain — so the new modes get their own
+   * branch instead. `panel-legacy-golden.json` is what holds this to it.
+   */
+  const modalOverlay = (
+    <div
+      data-size-guide-overlay=""
+      {...partAttrs('overlay', { open: true })}
+      onClick={() => {
+        if (closeOnOverlay) dismiss();
+      }}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+        background: 'rgba(0, 0, 0, 0.5)'
+      }}
+    >
+      <div
+        data-size-guide-content=""
+        data-size-guide-mode="modal"
+        {...partAttrs('modal', { open: true })}
+        role="dialog"
+        // Carries the panel ref and the `aria-modal` claim, which is now
+        // made only while this really is the dialog on top. Spread after
+        // `role` so the attribute order stays exactly where it was.
+        //
+        // The primitive asks a panel to carry `tabIndex={-1}` as its focus
+        // target of last resort; this one cannot be given it without
+        // moving markup a published storefront already renders. The gap
+        // only shows in a composition with the close button off AND no
+        // focusable child, where focus simply stays put — the same place
+        // it stayed before the migration.
+        {...overlay.overlayProps}
+        aria-label={modalTitle || triggerLabel}
+        // The backdrop closes the modal; clicks on the panel itself must
+        // not bubble up into that handler.
+        onClick={(event) => event.stopPropagation()}
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: `${modalWidth}px`,
+          maxHeight: '80vh',
+          overflow: 'auto',
+          padding: '24px',
+          borderRadius: '4px',
+          background: '#ffffff',
+          color: '#111827',
+          textAlign: 'left'
+        }}
+      >
+        {closeButton}
+        {titleNode}
+        {renderChildren()}
+      </div>
+    </div>
+  );
+
+  const backdrop = showBackdrop ? (
+    <div
+      data-panel-backdrop=""
+      {...partAttrs('overlay', { open: true })}
+      onClick={() => {
+        if (closeOnOverlay) dismiss();
+      }}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        background: 'rgba(0, 0, 0, 0.5)'
+      }}
+    />
+  ) : null;
+
+  const panelSurface: React.CSSProperties = {
+    overflow: 'auto',
+    padding: '24px',
+    background: '#ffffff',
+    color: '#111827',
+    textAlign: 'left',
+    outline: 'none'
+  };
+
+  const anchorPlacement: React.CSSProperties =
+    anchorAlign === 'center'
+      ? { left: '50%', transform: 'translateX(-50%)' }
+      : anchorAlign === 'end'
+      ? { right: 0 }
+      : { left: 0 };
+
+  const panelGeometry: React.CSSProperties =
+    presentation === 'drawer'
+      ? {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          [panelSide === 'left' ? 'left' : 'right']: 0,
+          width: `min(${modalWidth}px, 92vw)`,
+          boxShadow: '0 0 24px rgba(0, 0, 0, 0.2)'
+        }
+      : presentation === 'sheet'
+      ? {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          maxHeight: `${sheetHeight}vh`,
+          boxShadow: '0 -12px 32px rgba(0, 0, 0, 0.18)'
+        }
+      : {
+          // Anchored hangs off the block root rather than a fixed layer, so it
+          // travels with the trigger the way a dropdown must.
+          position: 'absolute',
+          top: `calc(100% + ${anchorOffset}px)`,
+          zIndex: 1000,
+          width: `${modalWidth}px`,
+          maxWidth: '92vw',
+          maxHeight: '80vh',
+          borderRadius: '4px',
+          boxShadow: '0 12px 32px rgba(0, 0, 0, 0.18)',
+          ...anchorPlacement
+        };
+
+  const panel = (
+    <div
+      data-size-guide-content=""
+      data-panel-presentation={presentation}
+      {...partAttrs('modal', { open: true })}
+      role="dialog"
+      // Spread after `role` for the same attribute-order reason the modal
+      // branch documents.
+      {...overlay.overlayProps}
+      aria-label={modalTitle || triggerLabel}
+      // Focus target of last resort, for a panel whose every control the
+      // designer turned off. The centred modal deliberately does without it:
+      // adding it there would move published markup.
+      tabIndex={-1}
+      onClick={(event) => event.stopPropagation()}
+      style={{
+        ...panelSurface,
+        ...panelGeometry,
+        // Turn events back on for the panel itself when the see-through root
+        // below is letting them pass.
+        pointerEvents: showBackdrop ? undefined : 'auto'
+      }}
+    >
+      {presentation === 'sheet' && (
+        <div
+          data-panel-handle=""
+          {...partAttrs('handle')}
+          style={{
+            width: '40px',
+            height: '4px',
+            margin: '0 auto 12px',
+            borderRadius: '999px',
+            background: '#d1d5db'
+          }}
+        />
+      )}
+      {closeButton}
+      {titleNode}
+      {renderChildren()}
+    </div>
+  );
+
+  /**
+   * Drawer and sheet live on a fixed layer over the page; anchored lives in
+   * the block's own flow so it travels with the trigger. With the backdrop off
+   * that fixed layer would still be an invisible sheet of glass over the whole
+   * viewport, so events pass through it and the panel turns them back on for
+   * itself.
+   */
+  const layeredOverlay =
+    presentation === 'anchored' ? (
+      <>
+        {showBackdrop && (
+          <div
+            data-panel-backdrop-root=""
+            style={{ position: 'fixed', inset: 0, zIndex: 999 }}
+          >
+            {backdrop}
+          </div>
+        )}
+        {panel}
+      </>
+    ) : (
+      <div
+        data-panel-root=""
+        style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 1000,
+          pointerEvents: showBackdrop ? undefined : 'none'
+        }}
+      >
+        {backdrop}
+        {panel}
+      </div>
+    );
+
+  return (
+    <div
+      data-size-guide=""
+      data-size-guide-state={opened ? 'open' : 'closed'}
+      // Only the anchored presentation needs a positioning context, and only
+      // it gets one — every other composition keeps the bare root it shipped.
+      style={presentation === 'anchored' ? { position: 'relative' } : undefined}
+    >
+      {trigger}
+
+      {opened && (isModal ? modalOverlay : layeredOverlay)}
+    </div>
+  );
+};
+
+export default PanelBlock;