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

package/src/blocks/size-guide-block.tsx

@@ -1,313 +0,0 @@
-'use client';
-
-import React, { useRef, useState } from 'react';
-import { getResponsiveValue, partAttrs } 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';
-
-/**
- * Functional PDP block: a trigger that opens the size guide.
- *
- * The size table itself is authored in the editor as CHILD blocks (a table
- * drawn with text/image/group blocks), so nothing about the content is
- * hardcoded here. In the designer the children render inline and stay
- * selectable — a real modal would put them behind a click the author cannot
- * perform inside the preview iframe — while the storefront gets the modal.
- * Properties: triggerLabel, modalTitle, closeLabel, showClose, closeOnOverlay,
- * closeOnEscape, modalWidth.
- */
-const SizeGuideBlock = ({
-  block,
-  placeholderId,
-  sectionId,
-  isDesigner = false,
-  selectedBlockId,
-  currentBreakpoint = 'desktop'
-}: BlockRendererProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-
-  const prop = (key: string, fallback: string) =>
-    String(
-      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
-    );
-
-  const triggerLabel = prop('triggerLabel', 'Size guide');
-  const modalTitle = prop('modalTitle', '');
-  const closeLabel = prop('closeLabel', 'Close');
-  const showClose = readToggle(
-    block.properties?.showClose,
-    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;
-
-  /**
-   * 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 modal really does cover the page behind its backdrop, so `modal` is
-   * unconditionally true here — unlike the filter drawer, whose backdrop is a
-   * designer toggle. The designer never reaches this path at all: it returns
-   * the inline branch above, where the table is styled in place.
-   */
-  const overlay = useOverlay<HTMLDivElement>({
-    open: isOpen,
-    onClose: () => setIsOpen(false),
-    isDesigner,
-    modal: true,
-    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 modal is a dead control, so on the storefront
-  // the block disappears until the author has put a table inside it.
-  if (childBlocks.length === 0 && !isDesigner) return null;
-
-  const trigger = (
-    <button
-      type="button"
-      data-size-guide-trigger=""
-      ref={triggerRef}
-      {...partAttrs('trigger', { open: isOpen })}
-      aria-haspopup="dialog"
-      aria-expanded={isOpen}
-      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) {
-    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 modal 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>
-    );
-  }
-
-  return (
-    <div data-size-guide="" data-size-guide-state={isOpen ? 'open' : 'closed'}>
-      {trigger}
-
-      {isOpen && (
-        <div
-          data-size-guide-overlay=""
-          {...partAttrs('overlay', { open: true })}
-          onClick={() => {
-            if (closeOnOverlay) setIsOpen(false);
-          }}
-          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'
-            }}
-          >
-            {showClose && (
-              <button
-                type="button"
-                data-size-guide-close=""
-                {...partAttrs('close')}
-                aria-label={closeLabel}
-                onClick={() => setIsOpen(false)}
-                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>
-            )}
-
-            {titleNode}
-            {renderChildren()}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SizeGuideBlock;