@kilivi/payloadcms-theme-management 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/fields/ThemeTokenSelectField.d.ts.map +1 -1
  2. package/dist/fields/ThemeTokenSelectField.js +21 -20
  3. package/dist/fields/ThemeTokenSelectField.js.map +1 -1
  4. package/package.json +1 -1
package/dist/fields/ThemeTokenSelectField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAgGrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,+BAkS1E"}
1
+ {"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAgGrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,+BAuS1E"}
package/dist/fields/ThemeTokenSelectField.js CHANGED
@@ -130,17 +130,11 @@ export default function ThemeTokenSelectField(props) {
130
130
  const { value: formThemeConfiguration } = useField({
131
131
  path: 'themeConfiguration'
132
132
  });
133
- // Read common tenant fields from the current form (sibling data) where present
134
- // Some collections store tenant as 'tenant', 'tenantId' (object) or 'tenantSlug', so try common paths
135
- const { value: formTenantSlug } = useField({
136
- path: 'tenantSlug'
137
- });
133
+ // Read tenant from the current form (sibling data) where present.
134
+ // Prefer `tenant` field as it is populated correctly in most setups.
138
135
  const { value: formTenant } = useField({
139
136
  path: 'tenant'
140
137
  });
141
- const { value: formTenantId } = useField({
142
- path: 'tenantId'
143
- });
144
138
  const [options, setOptions] = useState(FALLBACK_TOKENS);
145
139
  const selectedValue = value || 'background';
146
140
  // Get themePresets from admin.custom or use defaults
@@ -158,32 +152,38 @@ export default function ThemeTokenSelectField(props) {
158
152
  }
159
153
  let isMounted = true;
160
154
  const custom = field.admin?.custom ?? {};
161
- // Prefer explicit admin.custom.tenantSlug, then look for tenant values in the current form ("sibling" fields),
162
- // otherwise fall back to the global/url/dom/cookie inference helper.
155
+ // Prefer tenant ID from the current form (`formTenant`) first since editor fills the relation id.
156
+ // If the relation is an object, prefer `id` over `slug` to avoid passing a human-readable slug when an id is available.
157
+ // Then respect an explicit `admin.custom.tenantSlug` override, otherwise fall back to other heuristics.
163
158
  const tenantFromForm = (()=>{
164
- if (typeof formTenantSlug === 'string' && formTenantSlug.trim()) return formTenantSlug;
165
159
  if (typeof formTenant === 'string' && formTenant.trim()) return formTenant;
166
160
  if (formTenant && typeof formTenant === 'object') {
167
- return formTenant.slug ?? formTenant.id ?? formTenant.value;
161
+ // Prefer id first
162
+ return formTenant.id ?? formTenant.slug ?? formTenant.value;
168
163
  }
169
- if (typeof formTenantId === 'string' && formTenantId.trim()) return formTenantId;
170
- if (formTenantId && typeof formTenantId === 'object') return formTenantId.id ?? undefined;
171
164
  return undefined;
172
165
  })();
173
166
  const explicitTenant = custom.tenantSlug;
174
- const inferredTenant = explicitTenant ?? tenantFromForm ?? inferTenant();
167
+ const inferredTenant = tenantFromForm ?? explicitTenant ?? inferTenant();
175
168
  // Determine admin language to pass as `locale` to fetch, if not provided
176
169
  const adminLang = getAdminLanguage();
177
- const fetchOpts = custom.fetchThemeConfigurationOptions ?? custom.fetchOptions ?? (custom.collectionSlug || typeof custom.useGlobal !== 'undefined' ? {
170
+ // Normalize fetch options so that even when callers provide an empty object ("{}"),
171
+ // we still ensure `tenantSlug` and `locale` are set to sensible defaults (inferred/form/adminLang).
172
+ const rawFetchOpts = custom.fetchThemeConfigurationOptions ?? custom.fetchOptions ?? (custom.collectionSlug || typeof custom.useGlobal !== 'undefined' ? {
178
173
  collectionSlug: custom.collectionSlug,
179
174
  useGlobal: custom.useGlobal,
180
- tenantSlug: inferredTenant,
181
175
  depth: custom.depth,
182
- // prefer explicit custom.locale, otherwise use admin language
183
- locale: custom.locale ?? adminLang,
176
+ locale: custom.locale,
184
177
  draft: custom.draft,
185
178
  queryParams: custom.queryParams
186
179
  } : undefined);
180
+ const fetchOpts = rawFetchOpts ? {
181
+ ...rawFetchOpts,
182
+ // Ensure we pass a tenantSlug when one isn't explicitly provided in the custom options
183
+ tenantSlug: rawFetchOpts.tenantSlug ?? inferredTenant,
184
+ // Ensure locale defaults to admin language when not explicitly set
185
+ locale: rawFetchOpts.locale ?? adminLang
186
+ } : undefined;
187
187
  fetchThemeConfiguration(fetchOpts).then(async (configuration)=>{
188
188
  if (!isMounted) return;
189
189
  if (configuration) {
@@ -223,7 +223,8 @@ export default function ThemeTokenSelectField(props) {
223
223
  }, [
224
224
  themePresets,
225
225
  field.admin?.custom,
226
- formThemeConfiguration
226
+ formThemeConfiguration,
227
+ formTenant
227
228
  ]);
228
229
  const handleSelect = useCallback((nextValue)=>{
229
230
  setValue(nextValue);
package/dist/fields/ThemeTokenSelectField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { allThemePresets, fetchThemeConfiguration } from '../index.js'\nimport type { SiteThemeConfiguration } from '../payload-types.js'\nimport type { ThemePreset } from '../presets.js'\nimport type { FetchThemeConfigurationOptions } from '../types.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\nimport { inferTenant } from '../utils/inferTenant.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n value: string\n label: string | { [key: string]: string | undefined }\n color: string\n description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n {\n value: 'background',\n label: { en: 'Theme background', cs: 'Pozadí tématu' },\n color: 'var(--background)',\n },\n { value: 'card', label: { en: 'Card background', cs: 'Pozadí karty' }, color: 'var(--card)' },\n { value: 'muted', label: { en: 'Muted surface', cs: 'Tlumený povrch' }, color: 'var(--muted)' },\n {\n value: 'accent',\n label: { en: 'Accent surface', cs: 'Akcentní povrch' },\n color: 'var(--accent)',\n },\n {\n value: 'secondary',\n label: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n color: 'var(--secondary)',\n },\n {\n value: 'primary',\n label: { en: 'Primary surface', cs: 'Primární povrch' },\n color: 'var(--primary)',\n },\n]\n\n// Use plugin-provided fetch helper which supports collection/global and options\n// This will use `collectionSlug`, `useGlobal`, tenant, locale, depth, draft, etc.\n// Accept fetch options from field.admin.custom to allow overrides in different setups.\n\nfunction buildOptionsFromConfiguration(\n configuration: SiteThemeConfiguration | Record<string, unknown> | null,\n themePresets: ThemePreset[],\n): ThemeColorOption[] {\n if (!configuration) {\n return FALLBACK_TOKENS\n }\n\n const resolved = resolveThemeConfiguration(configuration)\n const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {}\n const orderedKeys: string[] = [\n 'background',\n 'card',\n 'muted',\n 'accent',\n 'secondary',\n 'primary',\n 'popover',\n ]\n\n const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n const tokens = orderedKeys\n .map((key) => {\n const value = typedLightMode?.[key]\n if (typeof value !== 'string' || value.trim().length === 0) {\n return null\n }\n\n const labelMap: Record<string, { en: string; cs: string }> = {\n background: { en: 'Theme background', cs: 'Pozadí tématu' },\n card: { en: 'Card background', cs: 'Pozadí karty' },\n muted: { en: 'Muted surface', cs: 'Tlumený povrch' },\n accent: { en: 'Accent surface', cs: 'Akcentní povrch' },\n secondary: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n primary: { en: 'Primary surface', cs: 'Primární povrch' },\n popover: { en: 'Popover surface', cs: 'Popover povrch' },\n }\n\n return {\n value: key,\n label: labelMap[key] ?? { en: key, cs: key },\n color: value,\n }\n })\n .filter((token): token is NonNullable<typeof token> => token !== null)\n\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n const { path, field } = props\n const { value, setValue } = useField<string>({ path })\n // Try to read themeConfiguration from the active form (Site Settings) first\n const { value: formThemeConfiguration } = useField<SiteThemeConfiguration | null>({\n path: 'themeConfiguration',\n })\n\n // Read common tenant fields from the current form (sibling data) where present\n // Some collections store tenant as 'tenant', 'tenantId' (object) or 'tenantSlug', so try common paths\n const { value: formTenantSlug } = useField<string>({ path: 'tenantSlug' })\n const { value: formTenant } = useField<any>({ path: 'tenant' })\n const { value: formTenantId } = useField<any>({ path: 'tenantId' })\n\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n const selectedValue = value || 'background'\n\n // Get themePresets from admin.custom or use defaults\n const themePresets = useMemo(() => {\n const customPresets = (field.admin?.custom as { themePresets?: ThemePreset[] })?.themePresets\n return customPresets && customPresets.length > 0 ? customPresets : allThemePresets\n }, [field.admin?.custom])\n\n useEffect(() => {\n // If the active form contains themeConfiguration (e.g., editing Site Settings), prefer it\n if (formThemeConfiguration) {\n setOptions(buildOptionsFromConfiguration(formThemeConfiguration, themePresets))\n return\n }\n\n let isMounted = true\n\n // Allow fields to override fetch options via admin.custom\n type CustomAdmin = {\n fetchThemeConfigurationOptions?: FetchThemeConfigurationOptions\n fetchOptions?: FetchThemeConfigurationOptions\n collectionSlug?: string\n useGlobal?: boolean\n tenantSlug?: string\n depth?: number\n locale?: string\n draft?: boolean\n queryParams?: Record<string, unknown>\n }\n\n const custom = (field.admin?.custom as unknown as CustomAdmin) ?? {}\n\n // Prefer explicit admin.custom.tenantSlug, then look for tenant values in the current form (\"sibling\" fields),\n // otherwise fall back to the global/url/dom/cookie inference helper.\n const tenantFromForm = (() => {\n if (typeof formTenantSlug === 'string' && formTenantSlug.trim()) return formTenantSlug\n if (typeof formTenant === 'string' && formTenant.trim()) return formTenant\n if (formTenant && typeof formTenant === 'object') {\n return (formTenant.slug ?? formTenant.id ?? formTenant.value) as string | undefined\n }\n if (typeof formTenantId === 'string' && formTenantId.trim()) return formTenantId\n if (formTenantId && typeof formTenantId === 'object') return formTenantId.id ?? undefined\n return undefined\n })()\n\n const explicitTenant = custom.tenantSlug\n const inferredTenant = explicitTenant ?? tenantFromForm ?? inferTenant()\n\n // Determine admin language to pass as `locale` to fetch, if not provided\n const adminLang = getAdminLanguage()\n\n const fetchOpts: FetchThemeConfigurationOptions | undefined =\n custom.fetchThemeConfigurationOptions ??\n custom.fetchOptions ??\n (custom.collectionSlug || typeof custom.useGlobal !== 'undefined'\n ? ({\n collectionSlug: custom.collectionSlug,\n useGlobal: custom.useGlobal,\n tenantSlug: inferredTenant,\n depth: custom.depth,\n // prefer explicit custom.locale, otherwise use admin language\n locale: custom.locale ?? adminLang,\n draft: custom.draft,\n queryParams: custom.queryParams,\n } as unknown as FetchThemeConfigurationOptions)\n : undefined)\n\n fetchThemeConfiguration(fetchOpts).then(async (configuration) => {\n if (!isMounted) return\n if (configuration) {\n setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n return\n }\n\n // If nothing found and fetchOpts didn't explicitly request global, try fallback to global\n // This helps in setups where plugin created a standalone global (default slug 'appearance-settings')\n const explicitlyRequestedGlobal = !!(\n (fetchOpts as FetchThemeConfigurationOptions | undefined)?.useGlobal === true ||\n (fetchOpts as FetchThemeConfigurationOptions | undefined)?.collectionSlug ===\n 'appearance-settings'\n )\n\n if (!explicitlyRequestedGlobal) {\n try {\n // Prefer custom.collectionSlug if provided, otherwise try the default standalone slug\n const fallbackCollection = (custom && custom.collectionSlug) || 'appearance-settings'\n const fallbackOpts: FetchThemeConfigurationOptions = {\n useGlobal: true,\n collectionSlug: fallbackCollection,\n tenantSlug: inferredTenant,\n locale: custom.locale ?? adminLang,\n }\n const fallbackConfig = await fetchThemeConfiguration(fallbackOpts)\n if (!isMounted) return\n if (fallbackConfig) {\n // Found theme config in global, use it\n setOptions(buildOptionsFromConfiguration(fallbackConfig, themePresets))\n return\n }\n } catch (e) {\n console.warn('[ThemeTokenSelectField] Fallback global fetch failed:', e)\n }\n }\n\n // final fallback: use empty tokens\n setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n })\n\n return () => {\n isMounted = false\n }\n }, [themePresets, field.admin?.custom, formThemeConfiguration])\n\n const handleSelect = useCallback(\n (nextValue: string) => {\n setValue(nextValue)\n },\n [setValue],\n )\n\n // Make admin language reactive so switching admin UI language updates labels\n const initialAdminLang = getAdminLanguage()\n const [adminLang, setAdminLang] = useState<string>(initialAdminLang)\n\n useEffect(() => {\n if (typeof document === 'undefined' || !('MutationObserver' in window)) return\n const el = document.documentElement\n const obs = new MutationObserver(() => {\n const next = getAdminLanguage()\n if (next !== adminLang) setAdminLang(next)\n })\n obs.observe(el, { attributes: true, attributeFilter: ['lang'] })\n return () => obs.disconnect()\n }, [adminLang])\n\n const label =\n typeof field.label === 'string'\n ? field.label\n : (field.label && (field.label as Record<string, string>)[adminLang]) ||\n field.label?.en ||\n field.label?.cs ||\n ''\n\n let description = ''\n if (typeof field.admin?.description === 'string') {\n description = field.admin.description\n } else if (field.admin?.description && typeof field.admin.description === 'object') {\n description =\n (field.admin.description as Record<string, string>)[adminLang] ||\n (field.admin.description as Record<string, string>).en ||\n (field.admin.description as Record<string, string>).cs ||\n ''\n }\n\n // Helper function to get label text from localized or string label\n const getOptionLabel = (option: ThemeColorOption): string => {\n if (typeof option.label === 'string') {\n return option.label\n }\n // Prefer current admin language, fallback to English/Czech, then any available language\n return (\n (option.label as Record<string, string>)[adminLang] ||\n option.label.en ||\n option.label.cs ||\n Object.values(option.label)[0] ||\n option.value\n )\n }\n\n // Resolve CSS variable colors (e.g., 'var(--primary)') to their computed values when possible\n const resolveCssColor = (color: string): string => {\n if (typeof window === 'undefined' || !color || !color.trim().startsWith('var(')) {\n return color\n }\n\n try {\n const match = color.trim().match(/var\\((--[^)]+)\\)/)\n if (!match) return color\n const varName = match[1]\n const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()\n return computed || color\n } catch (e) {\n return color\n }\n }\n\n return (\n <div className=\"field-type theme-token-select\">\n {label && (\n <label\n className=\"field-label\"\n htmlFor={path}\n style={{ display: 'block', marginBottom: '8px' }}\n >\n {label}\n {field.required && <span className=\"required\">*</span>}\n </label>\n )}\n\n {description && (\n <div\n className=\"field-description\"\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n >\n {description}\n </div>\n )}\n\n <div\n className=\"token-grid\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n gap: '10px',\n }}\n >\n {options.map((option) => {\n const isActive = option.value === selectedValue\n return (\n <button\n type=\"button\"\n key={option.value}\n onClick={() => handleSelect(option.value)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n padding: '10px 12px',\n borderRadius: '10px',\n border: isActive\n ? '2px solid var(--theme-success-500)'\n : '1px solid var(--theme-elevation-150)',\n backgroundColor: 'var(--theme-elevation-0)',\n boxShadow: isActive\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\n cursor: 'pointer',\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n }}\n >\n <span\n aria-hidden\n style={{\n width: '32px',\n height: '32px',\n borderRadius: '8px',\n border: '1px solid rgba(15, 23, 42, 0.08)',\n backgroundColor: resolveCssColor(option.color),\n flexShrink: 0,\n }}\n />\n <span\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n >\n {getOptionLabel(option)}\n </span>\n </button>\n )\n })}\n </div>\n\n <select\n id={path}\n value={selectedValue}\n onChange={(event) => handleSelect(event.target.value)}\n style={{ display: 'none' }}\n >\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {getOptionLabel(option)}\n </option>\n ))}\n </select>\n </div>\n )\n}\n"],"names":["useField","useCallback","useEffect","useMemo","useState","allThemePresets","fetchThemeConfiguration","getAdminLanguage","inferTenant","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","en","cs","color","buildOptionsFromConfiguration","configuration","themePresets","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","ThemeTokenSelectField","props","path","field","setValue","formThemeConfiguration","formTenantSlug","formTenant","formTenantId","options","setOptions","selectedValue","customPresets","admin","custom","isMounted","tenantFromForm","slug","id","undefined","explicitTenant","tenantSlug","inferredTenant","adminLang","fetchOpts","fetchThemeConfigurationOptions","fetchOptions","collectionSlug","useGlobal","depth","locale","draft","queryParams","then","explicitlyRequestedGlobal","fallbackCollection","fallbackOpts","fallbackConfig","e","console","warn","handleSelect","nextValue","initialAdminLang","setAdminLang","document","window","el","documentElement","obs","MutationObserver","next","observe","attributes","attributeFilter","disconnect","description","getOptionLabel","option","Object","values","resolveCssColor","startsWith","match","varName","computed","getComputedStyle","getPropertyValue","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","flexShrink","fontWeight","select","onChange","event","target"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { allThemePresets, fetchThemeConfiguration } from '../index.js'\nimport type { SiteThemeConfiguration } from '../payload-types.js'\nimport type { ThemePreset } from '../presets.js'\nimport type { FetchThemeConfigurationOptions } from '../types.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\nimport { inferTenant } from '../utils/inferTenant.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n value: string\n label: string | { [key: string]: string | undefined }\n color: string\n description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n {\n value: 'background',\n label: { en: 'Theme background', cs: 'Pozadí tématu' },\n color: 'var(--background)',\n },\n { value: 'card', label: { en: 'Card background', cs: 'Pozadí karty' }, color: 'var(--card)' },\n { value: 'muted', label: { en: 'Muted surface', cs: 'Tlumený povrch' }, color: 'var(--muted)' },\n {\n value: 'accent',\n label: { en: 'Accent surface', cs: 'Akcentní povrch' },\n color: 'var(--accent)',\n },\n {\n value: 'secondary',\n label: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n color: 'var(--secondary)',\n },\n {\n value: 'primary',\n label: { en: 'Primary surface', cs: 'Primární povrch' },\n color: 'var(--primary)',\n },\n]\n\n// Use plugin-provided fetch helper which supports collection/global and options\n// This will use `collectionSlug`, `useGlobal`, tenant, locale, depth, draft, etc.\n// Accept fetch options from field.admin.custom to allow overrides in different setups.\n\nfunction buildOptionsFromConfiguration(\n configuration: SiteThemeConfiguration | Record<string, unknown> | null,\n themePresets: ThemePreset[],\n): ThemeColorOption[] {\n if (!configuration) {\n return FALLBACK_TOKENS\n }\n\n const resolved = resolveThemeConfiguration(configuration)\n const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {}\n const orderedKeys: string[] = [\n 'background',\n 'card',\n 'muted',\n 'accent',\n 'secondary',\n 'primary',\n 'popover',\n ]\n\n const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n const tokens = orderedKeys\n .map((key) => {\n const value = typedLightMode?.[key]\n if (typeof value !== 'string' || value.trim().length === 0) {\n return null\n }\n\n const labelMap: Record<string, { en: string; cs: string }> = {\n background: { en: 'Theme background', cs: 'Pozadí tématu' },\n card: { en: 'Card background', cs: 'Pozadí karty' },\n muted: { en: 'Muted surface', cs: 'Tlumený povrch' },\n accent: { en: 'Accent surface', cs: 'Akcentní povrch' },\n secondary: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n primary: { en: 'Primary surface', cs: 'Primární povrch' },\n popover: { en: 'Popover surface', cs: 'Popover povrch' },\n }\n\n return {\n value: key,\n label: labelMap[key] ?? { en: key, cs: key },\n color: value,\n }\n })\n .filter((token): token is NonNullable<typeof token> => token !== null)\n\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n const { path, field } = props\n const { value, setValue } = useField<string>({ path })\n // Try to read themeConfiguration from the active form (Site Settings) first\n const { value: formThemeConfiguration } = useField<SiteThemeConfiguration | null>({\n path: 'themeConfiguration',\n })\n\n // Read tenant from the current form (sibling data) where present.\n // Prefer `tenant` field as it is populated correctly in most setups.\n const { value: formTenant } = useField<any>({ path: 'tenant' })\n\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n const selectedValue = value || 'background'\n\n // Get themePresets from admin.custom or use defaults\n const themePresets = useMemo(() => {\n const customPresets = (field.admin?.custom as { themePresets?: ThemePreset[] })?.themePresets\n return customPresets && customPresets.length > 0 ? customPresets : allThemePresets\n }, [field.admin?.custom])\n\n useEffect(() => {\n // If the active form contains themeConfiguration (e.g., editing Site Settings), prefer it\n if (formThemeConfiguration) {\n setOptions(buildOptionsFromConfiguration(formThemeConfiguration, themePresets))\n return\n }\n\n let isMounted = true\n\n // Allow fields to override fetch options via admin.custom\n type CustomAdmin = {\n fetchThemeConfigurationOptions?: FetchThemeConfigurationOptions\n fetchOptions?: FetchThemeConfigurationOptions\n collectionSlug?: string\n useGlobal?: boolean\n tenantSlug?: string\n depth?: number\n locale?: string\n draft?: boolean\n queryParams?: Record<string, unknown>\n }\n\n const custom = (field.admin?.custom as unknown as CustomAdmin) ?? {}\n\n // Prefer tenant ID from the current form (`formTenant`) first since editor fills the relation id.\n // If the relation is an object, prefer `id` over `slug` to avoid passing a human-readable slug when an id is available.\n // Then respect an explicit `admin.custom.tenantSlug` override, otherwise fall back to other heuristics.\n const tenantFromForm = (() => {\n if (typeof formTenant === 'string' && formTenant.trim()) return formTenant\n if (formTenant && typeof formTenant === 'object') {\n // Prefer id first\n return (formTenant.id ?? formTenant.slug ?? formTenant.value) as string | undefined\n }\n return undefined\n })()\n\n const explicitTenant = custom.tenantSlug\n const inferredTenant = tenantFromForm ?? explicitTenant ?? inferTenant()\n\n // Determine admin language to pass as `locale` to fetch, if not provided\n const adminLang = getAdminLanguage()\n\n // Normalize fetch options so that even when callers provide an empty object (\"{}\"),\n // we still ensure `tenantSlug` and `locale` are set to sensible defaults (inferred/form/adminLang).\n const rawFetchOpts = custom.fetchThemeConfigurationOptions ?? custom.fetchOptions ??\n (custom.collectionSlug || typeof custom.useGlobal !== 'undefined'\n ? ({\n collectionSlug: custom.collectionSlug,\n useGlobal: custom.useGlobal,\n depth: custom.depth,\n locale: custom.locale,\n draft: custom.draft,\n queryParams: custom.queryParams,\n } as unknown as FetchThemeConfigurationOptions)\n : undefined)\n\n const fetchOpts: FetchThemeConfigurationOptions | undefined = rawFetchOpts\n ? ({\n ...rawFetchOpts,\n // Ensure we pass a tenantSlug when one isn't explicitly provided in the custom options\n tenantSlug: (rawFetchOpts as FetchThemeConfigurationOptions).tenantSlug ?? inferredTenant,\n // Ensure locale defaults to admin language when not explicitly set\n locale: (rawFetchOpts as FetchThemeConfigurationOptions).locale ?? adminLang,\n } as FetchThemeConfigurationOptions)\n : undefined\n\n fetchThemeConfiguration(fetchOpts).then(async (configuration) => {\n if (!isMounted) return\n if (configuration) {\n setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n return\n }\n\n // If nothing found and fetchOpts didn't explicitly request global, try fallback to global\n // This helps in setups where plugin created a standalone global (default slug 'appearance-settings')\n const explicitlyRequestedGlobal = !!(\n (fetchOpts as FetchThemeConfigurationOptions | undefined)?.useGlobal === true ||\n (fetchOpts as FetchThemeConfigurationOptions | undefined)?.collectionSlug ===\n 'appearance-settings'\n )\n\n if (!explicitlyRequestedGlobal) {\n try {\n // Prefer custom.collectionSlug if provided, otherwise try the default standalone slug\n const fallbackCollection = (custom && custom.collectionSlug) || 'appearance-settings'\n const fallbackOpts: FetchThemeConfigurationOptions = {\n useGlobal: true,\n collectionSlug: fallbackCollection,\n tenantSlug: inferredTenant,\n locale: custom.locale ?? adminLang,\n }\n const fallbackConfig = await fetchThemeConfiguration(fallbackOpts)\n if (!isMounted) return\n if (fallbackConfig) {\n // Found theme config in global, use it\n setOptions(buildOptionsFromConfiguration(fallbackConfig, themePresets))\n return\n }\n } catch (e) {\n console.warn('[ThemeTokenSelectField] Fallback global fetch failed:', e)\n }\n }\n\n // final fallback: use empty tokens\n setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n })\n\n return () => {\n isMounted = false\n }\n }, [themePresets, field.admin?.custom, formThemeConfiguration, formTenant])\n\n const handleSelect = useCallback(\n (nextValue: string) => {\n setValue(nextValue)\n },\n [setValue],\n )\n\n // Make admin language reactive so switching admin UI language updates labels\n const initialAdminLang = getAdminLanguage()\n const [adminLang, setAdminLang] = useState<string>(initialAdminLang)\n\n useEffect(() => {\n if (typeof document === 'undefined' || !('MutationObserver' in window)) return\n const el = document.documentElement\n const obs = new MutationObserver(() => {\n const next = getAdminLanguage()\n if (next !== adminLang) setAdminLang(next)\n })\n obs.observe(el, { attributes: true, attributeFilter: ['lang'] })\n return () => obs.disconnect()\n }, [adminLang])\n\n const label =\n typeof field.label === 'string'\n ? field.label\n : (field.label && (field.label as Record<string, string>)[adminLang]) ||\n field.label?.en ||\n field.label?.cs ||\n ''\n\n let description = ''\n if (typeof field.admin?.description === 'string') {\n description = field.admin.description\n } else if (field.admin?.description && typeof field.admin.description === 'object') {\n description =\n (field.admin.description as Record<string, string>)[adminLang] ||\n (field.admin.description as Record<string, string>).en ||\n (field.admin.description as Record<string, string>).cs ||\n ''\n }\n\n // Helper function to get label text from localized or string label\n const getOptionLabel = (option: ThemeColorOption): string => {\n if (typeof option.label === 'string') {\n return option.label\n }\n // Prefer current admin language, fallback to English/Czech, then any available language\n return (\n (option.label as Record<string, string>)[adminLang] ||\n option.label.en ||\n option.label.cs ||\n Object.values(option.label)[0] ||\n option.value\n )\n }\n\n // Resolve CSS variable colors (e.g., 'var(--primary)') to their computed values when possible\n const resolveCssColor = (color: string): string => {\n if (typeof window === 'undefined' || !color || !color.trim().startsWith('var(')) {\n return color\n }\n\n try {\n const match = color.trim().match(/var\\((--[^)]+)\\)/)\n if (!match) return color\n const varName = match[1]\n const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()\n return computed || color\n } catch (e) {\n return color\n }\n }\n\n return (\n <div className=\"field-type theme-token-select\">\n {label && (\n <label\n className=\"field-label\"\n htmlFor={path}\n style={{ display: 'block', marginBottom: '8px' }}\n >\n {label}\n {field.required && <span className=\"required\">*</span>}\n </label>\n )}\n\n {description && (\n <div\n className=\"field-description\"\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n >\n {description}\n </div>\n )}\n\n <div\n className=\"token-grid\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n gap: '10px',\n }}\n >\n {options.map((option) => {\n const isActive = option.value === selectedValue\n return (\n <button\n type=\"button\"\n key={option.value}\n onClick={() => handleSelect(option.value)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n padding: '10px 12px',\n borderRadius: '10px',\n border: isActive\n ? '2px solid var(--theme-success-500)'\n : '1px solid var(--theme-elevation-150)',\n backgroundColor: 'var(--theme-elevation-0)',\n boxShadow: isActive\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\n cursor: 'pointer',\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n }}\n >\n <span\n aria-hidden\n style={{\n width: '32px',\n height: '32px',\n borderRadius: '8px',\n border: '1px solid rgba(15, 23, 42, 0.08)',\n backgroundColor: resolveCssColor(option.color),\n flexShrink: 0,\n }}\n />\n <span\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n >\n {getOptionLabel(option)}\n </span>\n </button>\n )\n })}\n </div>\n\n <select\n id={path}\n value={selectedValue}\n onChange={(event) => handleSelect(event.target.value)}\n style={{ display: 'none' }}\n >\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {getOptionLabel(option)}\n </option>\n ))}\n </select>\n </div>\n )\n}\n"],"names":["useField","useCallback","useEffect","useMemo","useState","allThemePresets","fetchThemeConfiguration","getAdminLanguage","inferTenant","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","en","cs","color","buildOptionsFromConfiguration","configuration","themePresets","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","ThemeTokenSelectField","props","path","field","setValue","formThemeConfiguration","formTenant","options","setOptions","selectedValue","customPresets","admin","custom","isMounted","tenantFromForm","id","slug","undefined","explicitTenant","tenantSlug","inferredTenant","adminLang","rawFetchOpts","fetchThemeConfigurationOptions","fetchOptions","collectionSlug","useGlobal","depth","locale","draft","queryParams","fetchOpts","then","explicitlyRequestedGlobal","fallbackCollection","fallbackOpts","fallbackConfig","e","console","warn","handleSelect","nextValue","initialAdminLang","setAdminLang","document","window","el","documentElement","obs","MutationObserver","next","observe","attributes","attributeFilter","disconnect","description","getOptionLabel","option","Object","values","resolveCssColor","startsWith","match","varName","computed","getComputedStyle","getPropertyValue","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","flexShrink","fontWeight","select","onChange","event","target"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kilivi/payloadcms-theme-management",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "Theme configuration plugin for Payload CMS v3 with 60+ professional themes and standalone collection support",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",