@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

package/src/blocks/sort-select-block.tsx

@@ -0,0 +1,636 @@
+'use client';
+
+import React from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  buildListingHref,
+  listingPlaceholderStyle,
+  readToggle,
+  useListingContext
+} from './listing-context';
+
+type SortVariant = 'native' | 'panel';
+const SORT_VARIANTS: SortVariant[] = ['native', 'panel'];
+
+type TriggerIcon = 'chevron' | 'none';
+const TRIGGER_ICONS: TriggerIcon[] = ['chevron', 'none'];
+
+type OptionMark = 'radio' | 'check' | 'none';
+const OPTION_MARKS: OptionMark[] = ['radio', 'check', 'none'];
+
+type PanelPosition = 'below' | 'above';
+const PANEL_POSITIONS: PanelPosition[] = ['below', 'above'];
+
+type PanelAlign = 'start' | 'end';
+const PANEL_ALIGNS: PanelAlign[] = ['start', 'end'];
+
+/** What the properties fall back to when a facet has claimed the typed key. */
+const DEFAULT_PAGE_QUERY_PARAM = 'page';
+const DEFAULT_SORT_QUERY_PARAM = 'sorter';
+
+const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    aria-hidden="true"
+    {...partAttrs('trigger-icon', { open: isOpen })}
+    style={{
+      flexShrink: 0,
+      transform: isOpen ? 'rotate(180deg)' : undefined
+    }}
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);
+
+/**
+ * The mark that says which row is the applied sort. Both audited brands draw a
+ * radio; the check is the second common spelling and `none` leaves the row to
+ * say it with type alone. The element is emitted in every state so the row's
+ * columns do not shift when the selection moves.
+ */
+const OptionMarkIcon = ({
+  variant,
+  isSelected
+}: {
+  variant: OptionMark;
+  isSelected: boolean;
+}) => {
+  if (variant === 'none') return null;
+
+  if (variant === 'check') {
+    return (
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.4"
+        aria-hidden="true"
+        {...partAttrs('option-mark', { selected: isSelected })}
+        style={{ flexShrink: 0 }}
+      >
+        {isSelected && <path d="M5 13l4 4L19 7" />}
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      aria-hidden="true"
+      {...partAttrs('option-mark', { selected: isSelected })}
+      style={{ flexShrink: 0 }}
+    >
+      <circle cx="12" cy="12" r="9" />
+      {isSelected && (
+        <circle cx="12" cy="12" r="4.5" fill="currentColor" stroke="none" />
+      )}
+    </svg>
+  );
+};
+
+/**
+ * Functional listing block: the sort dropdown. Options are commerce-driven
+ * (the `sorters` payload of the category API, including which one is
+ * currently applied); the editor owns the label, its position and styling.
+ *
+ * The default is the native `<select>`, and it renders exactly as it always
+ * has. Both audited brands draw a bordered panel of options instead, which no
+ * amount of CSS can produce from a `<select>` — the browser owns that popup.
+ * The 'panel' variant renders the same options as real elements: a trigger
+ * that names the applied sort and a listbox of rows.
+ *
+ * `role="listbox"` is claimed only because its keyboard contract is
+ * implemented: roving tab focus over the rows, Up/Down to move, Home/End to
+ * jump, Enter/Space to apply, Escape or an outside pointer to dismiss, and
+ * focus handed back to the trigger on the way out. Type-ahead is deliberately
+ * NOT claimed — a sorter list is short and unordered, and a half-implemented
+ * one is worse than none.
+ *
+ * Parts: group, label, dropdown, option, trigger, trigger-icon, panel,
+ * option-mark, option-label.
+ * Properties: label, showLabel, labelPosition, placeholderLabel, queryParam,
+ * pageQueryParam, variant, triggerTemplate, triggerIcon, optionMark,
+ * panelPosition, panelAlign.
+ */
+const SortSelectBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const listing = useListingContext();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const label = String(
+    getResponsiveValue(block.properties?.label, currentBreakpoint, 'Sort by')
+  );
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    true
+  );
+  const labelPosition = String(
+    getResponsiveValue(
+      block.properties?.labelPosition,
+      currentBreakpoint,
+      'before'
+    )
+  );
+  // The empty option the controlled <select> falls back to when commerce
+  // reports no applied sort.
+  const placeholderLabel = String(
+    getResponsiveValue(
+      block.properties?.placeholderLabel,
+      currentBreakpoint,
+      '—'
+    )
+  );
+  const queryParamRaw = String(
+    getResponsiveValue(
+      block.properties?.queryParam,
+      currentBreakpoint,
+      DEFAULT_SORT_QUERY_PARAM
+    )
+  );
+  const pageQueryParamRaw = String(
+    getResponsiveValue(
+      block.properties?.pageQueryParam,
+      currentBreakpoint,
+      DEFAULT_PAGE_QUERY_PARAM
+    )
+  );
+
+  const variant = resolveOption<SortVariant>(
+    block.properties?.variant,
+    currentBreakpoint,
+    'native',
+    SORT_VARIANTS
+  );
+  const triggerTemplate = String(
+    getResponsiveValue(
+      block.properties?.triggerTemplate,
+      currentBreakpoint,
+      '{value}'
+    )
+  );
+  const triggerIcon = resolveOption<TriggerIcon>(
+    block.properties?.triggerIcon,
+    currentBreakpoint,
+    'chevron',
+    TRIGGER_ICONS
+  );
+  const optionMark = resolveOption<OptionMark>(
+    block.properties?.optionMark,
+    currentBreakpoint,
+    'radio',
+    OPTION_MARKS
+  );
+  const panelPosition = resolveOption<PanelPosition>(
+    block.properties?.panelPosition,
+    currentBreakpoint,
+    'below',
+    PANEL_POSITIONS
+  );
+  const panelAlign = resolveOption<PanelAlign>(
+    block.properties?.panelAlign,
+    currentBreakpoint,
+    'start',
+    PANEL_ALIGNS
+  );
+
+  const sorters = listing?.sorters || [];
+  // No selected sorter means no sort is applied: falling back to the first
+  // option would claim a sort that is not in effect, and re-picking it would
+  // fire no change event at all.
+  const selectedValue = sorters.find((sorter) => sorter.isSelected)?.value ?? '';
+  const selectedIndex = sorters.findIndex((sorter) => sorter.isSelected);
+
+  /**
+   * The page cursor, refused when a facet already owns the key — the same
+   * resolution the facet block makes, because two controls on one listing
+   * answering "which key is the cursor" differently is how a filter goes
+   * missing from one of them.
+   *
+   * `pageQueryParam` is free text, and a merchant who types a facet's own
+   * `search_key` into it turns every "drop the cursor" into "drop that
+   * filter": reordering the results would take the shopper's colour choice
+   * off the URL with it.
+   *
+   * Commerce owns the search keys, so a collision means the property is wrong,
+   * not the facet. Falling back to the shipped default keeps a real cursor
+   * being dropped on a sort change; an empty key (when the default is claimed
+   * too) means this listing has no cursor to drop, which is strictly better
+   * than erasing a filter.
+   */
+  const facets = listing?.facets || [];
+  const ownedByFacet = (key: string) =>
+    key !== '' && facets.some((facet) => facet.searchKey === key);
+
+  const pageQueryParam = ownedByFacet(pageQueryParamRaw)
+    ? ownedByFacet(DEFAULT_PAGE_QUERY_PARAM)
+      ? ''
+      : DEFAULT_PAGE_QUERY_PARAM
+    : pageQueryParamRaw;
+
+  /**
+   * The sort key, held to the same rule — and the collision bites harder here.
+   * The cursor is only deleted, but the sort key is WRITTEN
+   * (`params.set(queryParam, …)`), so a merchant who types a facet's
+   * `search_key` into this field does not merely drop the shopper's colour, it
+   * overwrites it with a sorter value: `?attributes_color=price_desc`, which
+   * commerce reads as a colour nobody stocks, and the grid comes back empty.
+   *
+   * The rewrite is withheld when a facet owns the shipped default as well:
+   * unlike the cursor there is no "write nothing" option — the control has to
+   * put the sort somewhere — so on a listing that genuinely facets on
+   * `sorter`, the merchant's key is left exactly as typed.
+   */
+  const queryParam =
+    ownedByFacet(queryParamRaw) && !ownedByFacet(DEFAULT_SORT_QUERY_PARAM)
+      ? DEFAULT_SORT_QUERY_PARAM
+      : queryParamRaw || DEFAULT_SORT_QUERY_PARAM;
+
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const optionRefs = React.useRef<Array<HTMLDivElement | null>>([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  // Roving tab focus: exactly one row is tabbable, and it is the one the
+  // keyboard is on. Preferred over aria-activedescendant because the row that
+  // reads out is then the row that actually holds focus.
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+
+  const applySorter = React.useCallback(
+    (value: string) => {
+      // Inert in the designer: navigating would drop the author out of the page.
+      if (isDesigner || !value) return;
+
+      const params = new URLSearchParams(
+        searchParams ? searchParams.toString() : ''
+      );
+      // A new sort order invalidates the current page cursor, when this
+      // composition has one to drop.
+      if (pageQueryParam) params.delete(pageQueryParam);
+      params.set(queryParam, value);
+
+      router.push(buildListingHref(pathname || listing?.path || '', params));
+    },
+    [
+      isDesigner,
+      searchParams,
+      pageQueryParam,
+      queryParam,
+      router,
+      pathname,
+      listing?.path
+    ]
+  );
+
+  const closePanel = React.useCallback(
+    (returnFocus: boolean) => {
+      setIsOpen(false);
+      setActiveIndex(-1);
+      // Skipped in the designer: pulling focus inside the canvas iframe would
+      // yank the author out of the property field they are typing into.
+      if (returnFocus && !isDesigner && triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    },
+    [isDesigner]
+  );
+
+  /**
+   * Escape is page-wide state, so the shared overlay stack decides whose it
+   * is. This panel used to answer it from its own document listener, which
+   * meant an Escape aimed at a modal opened over the listing dismissed this
+   * panel underneath at the same time.
+   *
+   * Everything else here stays the block's, because this is a listbox popup
+   * and not an overlay: `modal: false` (no backdrop, nothing covered, so no
+   * `aria-modal` and no focus trap), `manageFocus: false` because the roving
+   * tab focus below already owns where focus sits, and the return to the
+   * trigger is the combobox pattern's, run from `onClose` so Escape still
+   * lands the shopper back where they opened from.
+   */
+  useOverlay({
+    open: isOpen,
+    onClose: () => closePanel(true),
+    isDesigner,
+    modal: false,
+    manageFocus: false
+  });
+
+  React.useEffect(() => {
+    if (!isOpen) return undefined;
+
+    // mousedown rather than click: the panel must be gone before the pointer
+    // press moves focus, or the trigger re-opens it on the way back up. This
+    // one stays here — pointer dismissal is not something the overlay stack
+    // models, since it depends on what counts as "inside this block".
+    const handlePointerDown = (event: MouseEvent) => {
+      const root = rootRef.current;
+      if (root && !root.contains(event.target as Node)) closePanel(false);
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+
+    return () => document.removeEventListener('mousedown', handlePointerDown);
+  }, [isOpen, closePanel]);
+
+  React.useEffect(() => {
+    if (!isOpen || activeIndex < 0 || isDesigner) return;
+
+    const option = optionRefs.current[activeIndex];
+    if (option) option.focus();
+  }, [isOpen, activeIndex, isDesigner]);
+
+  if (sorters.length === 0) {
+    return isDesigner ? (
+      <div data-sort-select="" style={listingPlaceholderStyle}>
+        Sort (no sorter data)
+      </div>
+    ) : null;
+  }
+
+  const controlId = String(block.id || 'sort').replace(/[^a-zA-Z0-9_-]/g, '');
+  const labelId = `sort-${controlId}-label`;
+  const triggerId = `sort-${controlId}-trigger`;
+  const listboxId = `sort-${controlId}-listbox`;
+
+  const renderLabel = (withId: boolean) =>
+    showLabel && (
+      <span
+        data-sort-select-label=""
+        {...partAttrs('label')}
+        {...(withId ? { id: labelId } : null)}
+      >
+        {label}
+      </span>
+    );
+
+  if (variant !== 'panel') {
+    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      applySorter(event.target.value);
+    };
+
+    const labelNode = renderLabel(false);
+
+    return (
+      <label
+        data-sort-select=""
+        {...partAttrs('group')}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '8px',
+          color: 'inherit'
+        }}
+      >
+        {labelPosition !== 'after' && labelNode}
+        <select
+          data-sort-select-input=""
+          {...partAttrs('dropdown')}
+          aria-label={label}
+          value={selectedValue}
+          onChange={handleChange}
+          style={{
+            border: '1px solid currentColor',
+            borderRadius: 'inherit',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: '6px 8px',
+            cursor: 'pointer'
+          }}
+        >
+          {/* The <select> is controlled, so the empty value needs a real
+              matching option or React drops the selection on every render. */}
+          {!selectedValue && <option value="">{placeholderLabel}</option>}
+          {sorters.map((sorter) => (
+            <option
+              key={sorter.value}
+              value={sorter.value}
+              {...partAttrs('option', { selected: sorter.isSelected })}
+            >
+              {sorter.label}
+            </option>
+          ))}
+        </select>
+        {labelPosition === 'after' && labelNode}
+      </label>
+    );
+  }
+
+  const labelNode = renderLabel(true);
+  const currentLabel =
+    selectedIndex >= 0 ? sorters[selectedIndex].label : placeholderLabel;
+  const triggerText = triggerTemplate.includes('{value}')
+    ? triggerTemplate.replace(/\{value\}/g, currentLabel)
+    : triggerTemplate;
+  const lastIndex = sorters.length - 1;
+
+  const openPanel = (from: 'first' | 'last' | 'selected') => {
+    setIsOpen(true);
+    setActiveIndex(
+      selectedIndex >= 0 ? selectedIndex : from === 'last' ? lastIndex : 0
+    );
+  };
+
+  const handleTriggerKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+
+    event.preventDefault();
+    if (isOpen) {
+      setActiveIndex((index) =>
+        event.key === 'ArrowUp'
+          ? Math.max(0, index - 1)
+          : Math.min(lastIndex, index + 1)
+      );
+      return;
+    }
+
+    openPanel(event.key === 'ArrowUp' ? 'last' : 'first');
+  };
+
+  const handlePanelKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((index) => Math.min(lastIndex, index + 1));
+      return;
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((index) => Math.max(0, index - 1));
+      return;
+    }
+
+    if (event.key === 'Home') {
+      event.preventDefault();
+      setActiveIndex(0);
+      return;
+    }
+
+    if (event.key === 'End') {
+      event.preventDefault();
+      setActiveIndex(lastIndex);
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      const sorter = sorters[activeIndex];
+      if (sorter) {
+        applySorter(sorter.value);
+        closePanel(true);
+      }
+      return;
+    }
+
+    // Tab is the shopper leaving the control, not dismissing it: the panel
+    // closes but focus is allowed to move on rather than snapping back.
+    if (event.key === 'Tab') closePanel(false);
+  };
+
+  const control = (
+    <div
+      ref={rootRef}
+      data-sort-select-control=""
+      style={{ position: 'relative', display: 'inline-flex' }}
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        data-sort-select-trigger=""
+        {...partAttrs('trigger', { open: isOpen })}
+        id={triggerId}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={listboxId}
+        // The trigger has to say WHAT is selected, not just "Sort by". With a
+        // visible label the two are concatenated, which is what a native
+        // select reports; without one the label is folded into aria-label.
+        {...(showLabel
+          ? { 'aria-labelledby': `${labelId} ${triggerId}` }
+          : { 'aria-label': `${label}: ${currentLabel}` })}
+        onClick={() => (isOpen ? closePanel(false) : openPanel('selected'))}
+        onKeyDown={handleTriggerKeyDown}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '8px',
+          border: '1px solid currentColor',
+          borderRadius: 'inherit',
+          background: 'transparent',
+          color: 'inherit',
+          font: 'inherit',
+          padding: '6px 8px',
+          cursor: 'pointer'
+        }}
+      >
+        <span data-sort-select-trigger-value="">{triggerText}</span>
+        {triggerIcon === 'chevron' && <ChevronIcon isOpen={isOpen} />}
+      </button>
+
+      {isOpen && (
+        <div
+          id={listboxId}
+          role="listbox"
+          data-sort-select-panel=""
+          {...partAttrs('panel')}
+          aria-label={label}
+          onKeyDown={handlePanelKeyDown}
+          style={{
+            position: 'absolute',
+            zIndex: 20,
+            minWidth: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            border: '1px solid currentColor',
+            borderRadius: 'inherit',
+            background: '#ffffff',
+            color: 'inherit',
+            ...(panelPosition === 'above'
+              ? { bottom: '100%', marginBottom: '4px' }
+              : { top: '100%', marginTop: '4px' }),
+            ...(panelAlign === 'end' ? { right: 0 } : { left: 0 })
+          }}
+        >
+          {sorters.map((sorter, index) => (
+            <div
+              key={sorter.value}
+              ref={(node) => {
+                optionRefs.current[index] = node;
+              }}
+              role="option"
+              id={`${listboxId}-option-${index}`}
+              aria-selected={sorter.isSelected}
+              tabIndex={index === activeIndex ? 0 : -1}
+              data-sort-select-option={sorter.value}
+              {...partAttrs('option', { selected: sorter.isSelected })}
+              onClick={() => {
+                applySorter(sorter.value);
+                closePanel(true);
+              }}
+              onFocus={() => setActiveIndex(index)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '8px 12px',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap'
+              }}
+            >
+              <OptionMarkIcon
+                variant={optionMark}
+                isSelected={sorter.isSelected}
+              />
+              <span
+                data-sort-select-option-label=""
+                {...partAttrs('option-label')}
+              >
+                {sorter.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      data-sort-select=""
+      data-sort-select-variant="panel"
+      {...partAttrs('group')}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '8px',
+        color: 'inherit'
+      }}
+    >
+      {labelPosition !== 'after' && labelNode}
+      {control}
+      {labelPosition === 'after' && labelNode}
+    </div>
+  );
+};
+
+export default SortSelectBlock;