@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/fields/FontSelectField.css

@@ -0,0 +1,155 @@
+/* Font select, styled like Payload's own select (react-select `.rs__control`). */
+
+.tm-font-select {
+  position: relative;
+  min-width: 0;
+  margin-bottom: var(--spacing-field, 1rem);
+}
+
+.tm-font-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  padding: 7px 12px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  box-shadow: 0 2px 2px -1px #0000001a;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 100ms ease;
+}
+
+.tm-font-select__trigger:hover {
+  border-color: var(--theme-elevation-250);
+}
+
+.tm-font-select__trigger:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-elevation-800));
+  outline-offset: var(--accessibility-outline-offset, 1px);
+}
+
+.tm-font-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tm-font-select__chevron {
+  flex-shrink: 0;
+  color: var(--theme-elevation-500);
+  transition: transform 150ms ease;
+}
+
+.tm-font-select__chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.tm-font-select__listbox {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  /* Wide enough for the sample line even when the field sits in a half-width column. */
+  width: max(100%, 300px);
+  max-width: calc(100vw - 32px);
+  max-height: 340px;
+  margin-top: 4px;
+  padding: 4px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-m, 6px);
+  background: var(--theme-elevation-0);
+  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.22);
+}
+
+.tm-font-select__listbox:focus-visible {
+  outline: none;
+}
+
+.tm-font-select__group {
+  padding: 10px 12px 4px 36px;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+}
+
+.tm-font-select__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 7px 12px;
+  color: var(--theme-elevation-800);
+  cursor: pointer;
+}
+
+.tm-font-select__option.is-active {
+  background: var(--theme-elevation-100);
+  /* The keyboard position never relies on the fill alone. */
+  box-shadow: inset 2px 0 0 var(--theme-elevation-800);
+}
+
+.tm-font-select__check {
+  display: inline-flex;
+  flex: 0 0 16px;
+  justify-content: center;
+  padding-top: 3px;
+  color: var(--theme-elevation-800);
+}
+
+.tm-font-select__text {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.tm-font-select__name {
+  font-size: 15px;
+  line-height: 1.35;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tm-font-select__option.is-selected .tm-font-select__name {
+  font-weight: 600;
+}
+
+.tm-font-select__sample {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--theme-elevation-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tm-font-select__sample.is-hint {
+  font-family: var(--font-body);
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tm-font-select__chevron,
+  .tm-font-select__trigger {
+    transition: none;
+  }
+}
+
+.tm-font-select__listbox.is-align-end {
+  left: auto;
+  right: 0;
+}

package/dist/fields/FontSelectField.d.ts

@@ -1,4 +1,12 @@
+import './FontSelectField.css';
 import type { SelectFieldClientComponent } from 'payload';
+/**
+ * Font select with live font previews. Implements the WAI-ARIA "select-only
+ * combobox" pattern: a button trigger plus a listbox navigated with the arrow
+ * keys, Home/End, Enter/Space and Escape. Options are grouped by font category.
+ * Preview fonts come from the plugin's self-hosted font endpoint: the selected
+ * face always, every face while the list is open.
+ */
 declare const FontSelectField: SelectFieldClientComponent;
 export default FontSelectField;
 //# sourceMappingURL=FontSelectField.d.ts.map

package/dist/fields/FontSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAczD,QAAA,MAAM,eAAe,EAAE,0BAyOtB,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AA4BzD;;;;;;GAMG;AACH,QAAA,MAAM,eAAe,EAAE,0BAyOtB,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/fields/FontSelectField.js

@@ -1,226 +1,261 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './FontSelectField.css';
 import { useField } from '@payloadcms/ui';
-import { useEffect, useState } from 'react';
-import { getTranslations } from '../translations.js';
-import { getAdminLanguage } from '../utils/getAdminLanguage.js';
-const FontSelectField = ({ field, path })=>{
+import { mergeFieldStyles } from '@payloadcms/ui/shared';
+import { Check, ChevronDown } from 'lucide-react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { FONT_CATEGORY_LABELS, getFontCatalogEntry } from '../constants/themeFonts.js';
+import { useThemeFonts } from '../hooks/useThemeFonts.js';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import { resolveLocalizedText } from '../utils/localizedText.js';
+function previewFamily(option) {
+    if (option.fontFamily) return option.fontFamily;
+    if (option.category === 'sans-serif') return 'system-ui, sans-serif';
+    if (option.category === 'serif') return 'Georgia, serif';
+    if (option.category === 'monospace') return 'monospace';
+    return 'inherit';
+}
+/**
+ * Font select with live font previews. Implements the WAI-ARIA "select-only
+ * combobox" pattern: a button trigger plus a listbox navigated with the arrow
+ * keys, Home/End, Enter/Space and Escape. Options are grouped by font category.
+ * Preview fonts come from the plugin's self-hosted font endpoint: the selected
+ * face always, every face while the list is open.
+ */ const FontSelectField = ({ field, path })=>{
     const { value, setValue } = useField({
         path
     });
     const [isOpen, setIsOpen] = useState(false);
-    const options = field.options || [];
-    const selectedOption = options.find((opt)=>opt.value === value);
-    const [loadedFonts, setLoadedFonts] = useState(new Set());
-    const getOptionLabel = (opt)=>{
-        if (typeof opt.label === 'string') return opt.label;
-        const lang = getAdminLanguage();
-        return opt.label[lang] || opt.label.en || opt.label.cs || 'Font';
-    };
-    const ensureFontLoaded = (fontValue)=>{
-        if (!fontValue || [
-            'preset',
-            'custom',
-            'system-ui'
-        ].includes(fontValue)) return;
-        // Avoid duplicate loads
-        if (loadedFonts.has(fontValue)) return;
-        if (typeof document === 'undefined') return;
-        const linkId = `font-${fontValue.replace(/\s+/g, '-')}`;
-        if (document.getElementById(linkId)) {
-            setLoadedFonts((prev)=>new Set(prev).add(fontValue));
-            return;
-        }
-        const weights = '400;700' // reasonable default weights
-        ;
-        const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontValue)}:wght@${weights}&display=swap`;
-        const link = document.createElement('link');
-        link.id = linkId;
-        link.rel = 'stylesheet';
-        link.href = fontUrl;
-        link.onload = ()=>setLoadedFonts((prev)=>new Set(prev).add(fontValue));
-        document.head.appendChild(link);
-    };
-    const handleSelect = (optionValue)=>{
-        setValue(optionValue);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const lang = useThemeLanguage();
+    const t = useThemeTranslations();
+    const baseId = useId();
+    const labelId = `${baseId}-label`;
+    const listboxId = `${baseId}-listbox`;
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listboxRef = useRef(null);
+    // Payload strips custom option props on the way to the client, so the face and
+    // category come from the font catalog by value.
+    const options = (field.options || []).map((option)=>{
+        const entry = getFontCatalogEntry(option.value);
+        return entry ? {
+            ...option,
+            fontFamily: entry.fontFamily,
+            category: entry.category
+        } : option;
+    });
+    const [alignEnd, setAlignEnd] = useState(false);
+    const selectedIndex = options.findIndex((opt)=>opt.value === value);
+    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+    const getOptionLabel = (opt)=>resolveLocalizedText(opt.label, lang, 'Font');
+    const label = resolveLocalizedText(field.label, lang, 'Font');
+    const optionId = (index)=>`${baseId}-option-${index}`;
+    useThemeFonts(isOpen ? options.map((option)=>option.value) : [
+        value
+    ]);
+    const open = useCallback((index = selectedIndex >= 0 ? selectedIndex : 0)=>{
+        // Open towards the side with room, so the list never spills past the form column.
+        const trigger = triggerRef.current?.getBoundingClientRect();
+        const column = containerRef.current?.closest('.render-fields, .group-field__wrap')?.getBoundingClientRect();
+        setAlignEnd(Boolean(trigger && column && trigger.left + 300 > column.right));
+        setActiveIndex(index);
+        setIsOpen(true);
+    }, [
+        selectedIndex
+    ]);
+    const close = useCallback((restoreFocus)=>{
         setIsOpen(false);
+        if (restoreFocus) triggerRef.current?.focus();
+    }, []);
+    const handleSelect = (index)=>{
+        const option = options[index];
+        if (!option) return;
+        setValue(option.value);
+        close(true);
     };
+    // Keep the active option scrolled into view.
     useEffect(()=>{
-        const handleClickOutside = (e)=>{
-            const target = e.target;
-            if (!target.closest('.font-select-container')) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return ()=>document.removeEventListener('mousedown', handleClickOutside);
-        }
+        if (!isOpen || activeIndex < 0) return;
+        listboxRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`)?.scrollIntoView({
+            block: 'nearest'
+        });
+    }, [
+        isOpen,
+        activeIndex
+    ]);
+    // Focus the listbox when it opens so keyboard navigation works immediately.
+    useEffect(()=>{
+        if (isOpen) listboxRef.current?.focus();
     }, [
         isOpen
     ]);
-    const t = getTranslations(getAdminLanguage());
-    const label = typeof field.label === 'string' ? field.label : typeof field.label === 'object' ? field.label?.en || field.label?.cs : field.label || 'Font';
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handlePointerOutside = (e)=>{
+            if (!containerRef.current?.contains(e.target)) close(false);
+        };
+        document.addEventListener('pointerdown', handlePointerOutside);
+        return ()=>document.removeEventListener('pointerdown', handlePointerOutside);
+    }, [
+        isOpen,
+        close
+    ]);
+    const handleTriggerKeyDown = (event)=>{
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Enter',
+            ' '
+        ].includes(event.key)) {
+            event.preventDefault();
+            open(event.key === 'ArrowUp' && selectedIndex < 0 ? options.length - 1 : undefined);
+        }
+    };
+    const handleListboxKeyDown = (event)=>{
+        const last = options.length - 1;
+        switch(event.key){
+            case 'ArrowDown':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.min(last, i + 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.max(0, i - 1));
+                break;
+            case 'Home':
+                event.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setActiveIndex(last);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                handleSelect(activeIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                close(true);
+                break;
+            case 'Tab':
+                close(false);
+                break;
+            default:
+                // Type-ahead: jump to the first option starting with the typed letter.
+                if (event.key.length === 1 && /\S/.test(event.key)) {
+                    const letter = event.key.toLowerCase();
+                    const start = activeIndex + 1;
+                    const ordered = [
+                        ...options.slice(start),
+                        ...options.slice(0, start)
+                    ];
+                    const match = ordered.find((opt)=>getOptionLabel(opt).toLowerCase().startsWith(letter));
+                    if (match) setActiveIndex(options.indexOf(match));
+                }
+        }
+    };
+    const isSpecial = (option)=>option.value === 'preset' || option.value === 'custom';
     return /*#__PURE__*/ _jsxs("div", {
-        className: "font-select-container",
-        style: {
-            position: 'relative',
-            marginBottom: '12px'
-        },
+        ref: containerRef,
+        // Payload rows size each field through --field-width on the field root.
+        className: "field-type tm-font-select",
+        style: mergeFieldStyles(field),
         children: [
-            /*#__PURE__*/ _jsx("label", {
-                style: {
-                    display: 'block',
-                    marginBottom: '6px',
-                    fontSize: '13px',
-                    fontWeight: 600,
-                    color: 'var(--theme-elevation-800)'
-                },
+            /*#__PURE__*/ _jsx("div", {
+                id: labelId,
+                className: "field-label tm-font-select__label",
                 children: label
             }),
             /*#__PURE__*/ _jsxs("button", {
+                ref: triggerRef,
                 type: "button",
-                onClick: ()=>setIsOpen(!isOpen),
-                style: {
-                    width: '300px',
-                    padding: '10px 14px',
-                    borderRadius: '6px',
-                    border: '1px solid var(--theme-elevation-200)',
-                    backgroundColor: 'var(--theme-input-bg)',
-                    color: 'var(--theme-elevation-800)',
-                    textAlign: 'left',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    fontSize: '14px',
-                    fontFamily: selectedOption?.fontFamily || 'inherit',
-                    transition: 'border-color 0.2s ease'
-                },
-                onMouseEnter: (e)=>{
-                    e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
-                },
-                onMouseLeave: (e)=>{
-                    e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
-                },
+                className: "tm-font-select__trigger",
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                "aria-controls": isOpen ? listboxId : undefined,
+                "aria-labelledby": `${labelId} ${baseId}-value`,
+                onClick: ()=>isOpen ? close(false) : open(),
+                onKeyDown: handleTriggerKeyDown,
                 children: [
                     /*#__PURE__*/ _jsx("span", {
+                        id: `${baseId}-value`,
+                        className: "tm-font-select__value",
                         style: {
-                            flex: 1
+                            fontFamily: selectedOption && !isSpecial(selectedOption) ? previewFamily(selectedOption) : undefined
                         },
                         children: selectedOption ? getOptionLabel(selectedOption) : t.ui.selectFontPlaceholder
                     }),
-                    ' ',
-                    /*#__PURE__*/ _jsx("svg", {
-                        width: "12",
-                        height: "12",
-                        viewBox: "0 0 12 12",
-                        fill: "none",
-                        style: {
-                            transition: 'transform 0.2s ease',
-                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
-                        },
-                        children: /*#__PURE__*/ _jsx("path", {
-                            d: "M3 4.5L6 7.5L9 4.5",
-                            stroke: "currentColor",
-                            strokeWidth: "1.5",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
-                        })
+                    /*#__PURE__*/ _jsx(ChevronDown, {
+                        size: 16,
+                        "aria-hidden": true,
+                        className: `tm-font-select__chevron${isOpen ? ' is-open' : ''}`
                     })
                 ]
             }),
             isOpen && /*#__PURE__*/ _jsx("div", {
-                style: {
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    right: 0,
-                    marginTop: '4px',
-                    maxHeight: '280px',
-                    overflowY: 'auto',
-                    backgroundColor: 'var(--theme-elevation-0)',
-                    border: '1px solid var(--theme-elevation-200)',
-                    borderRadius: '8px',
-                    boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
-                    zIndex: 1000
-                },
-                children: options.map((option)=>{
+                ref: listboxRef,
+                id: listboxId,
+                role: "listbox",
+                tabIndex: -1,
+                "aria-labelledby": labelId,
+                "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined,
+                onKeyDown: handleListboxKeyDown,
+                className: `tm-font-select__listbox${alignEnd ? ' is-align-end' : ''}`,
+                children: options.map((option, index)=>{
                     const isSelected = option.value === value;
-                    let fontFamily = option.fontFamily;
-                    if (!fontFamily) {
-                        if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif';
-                        else if (option.category === 'serif') fontFamily = 'Georgia, serif';
-                        else if (option.category === 'monospace') fontFamily = 'monospace';
-                        else fontFamily = 'inherit';
-                    }
-                    return /*#__PURE__*/ _jsxs("button", {
-                        type: "button",
-                        onClick: ()=>handleSelect(option.value),
-                        style: {
-                            width: '250px',
-                            padding: '12px 14px',
-                            border: 'none',
-                            backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
-                            color: 'var(--theme-elevation-800)',
-                            textAlign: 'left',
-                            cursor: 'pointer',
-                            fontSize: '14px',
-                            fontFamily,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '4px',
-                            transition: 'background-color 0.15s ease'
-                        },
-                        onMouseEnter: (e)=>{
-                            if (!isSelected) {
-                                e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
-                            }
-                            // Lazy-load a preview font when hovering
-                            ensureFontLoaded(option.value);
-                        },
-                        onMouseLeave: (e)=>{
-                            if (!isSelected) {
-                                e.currentTarget.style.backgroundColor = 'transparent';
-                            }
-                        },
+                    const isActive = index === activeIndex;
+                    const startsGroup = option.category !== undefined && option.category !== options[index - 1]?.category;
+                    const special = isSpecial(option);
+                    const family = special ? undefined : previewFamily(option);
+                    return /*#__PURE__*/ _jsxs(React.Fragment, {
                         children: [
+                            startsGroup && option.category ? /*#__PURE__*/ _jsx("div", {
+                                role: "presentation",
+                                className: "tm-font-select__group",
+                                children: resolveLocalizedText(FONT_CATEGORY_LABELS[option.category], lang, '')
+                            }) : null,
                             /*#__PURE__*/ _jsxs("div", {
-                                style: {
-                                    fontWeight: isSelected ? 600 : 500,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '8px'
-                                },
+                                id: optionId(index),
+                                role: "option",
+                                "aria-selected": isSelected,
+                                onClick: ()=>handleSelect(index),
+                                onPointerMove: ()=>setActiveIndex(index),
+                                className: `tm-font-select__option${isActive ? ' is-active' : ''}${isSelected ? ' is-selected' : ''}`,
                                 children: [
-                                    isSelected && /*#__PURE__*/ _jsx("svg", {
-                                        width: "14",
-                                        height: "14",
-                                        viewBox: "0 0 14 14",
-                                        fill: "none",
-                                        children: /*#__PURE__*/ _jsx("path", {
-                                            d: "M11.6667 3.5L5.25 9.91667L2.33334 7",
-                                            stroke: "var(--theme-elevation-500)",
-                                            strokeWidth: "2",
-                                            strokeLinecap: "round",
-                                            strokeLinejoin: "round"
-                                        })
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "tm-font-select__check",
+                                        "aria-hidden": true,
+                                        children: isSelected ? /*#__PURE__*/ _jsx(Check, {
+                                            size: 14
+                                        }) : null
                                     }),
-                                    getOptionLabel(option)
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "tm-font-select__text",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "tm-font-select__name",
+                                                style: {
+                                                    fontFamily: family
+                                                },
+                                                children: getOptionLabel(option)
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                "aria-hidden": true,
+                                                className: `tm-font-select__sample${special ? ' is-hint' : ''}`,
+                                                style: {
+                                                    fontFamily: family
+                                                },
+                                                children: option.value === 'preset' ? t.ui.usePreset : option.value === 'custom' ? t.ui.specifyCustom : t.ui.sampleSentence
+                                            })
+                                        ]
+                                    })
                                 ]
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                style: {
-                                    fontSize: '16px',
-                                    color: 'var(--theme-elevation-600)',
-                                    fontStyle: option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',
-                                    fontFamily: option.fontFamily || undefined
-                                },
-                                children: (()=>{
-                                    if (option.value === 'preset') return t.ui.usePreset;
-                                    if (option.value === 'custom') return t.ui.specifyCustom;
-                                    return t.ui.sampleSentence;
-                                })()
                             })
                         ]
                     }, option.value);