@payloadcms/next 3.35.0-internal.5e55452 → 3.35.0-internal.b3d367c

package/dist/views/Version/Default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CheckboxInput","Gutter","useConfig","useDocumentInfo","useRouteTransition","useTranslation","formatDate","usePathname","useRouter","useSearchParams","React","useEffect","useMemo","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","doc","latestDraftVersion","latestPublishedVersion","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesProp","versionID","config","getEntityConfig","availableLocales","localization","locales","map","locale","label","value","code","i18n","id","collectionSlug","globalSlug","startRouteTransition","collectionConfig","globalConfig","setSelectedLocales","compareValue","setCompareValue","router","pathname","searchParams","setModifiedOnly","onToggleModifiedOnly","current","URLSearchParams","Array","from","entries","delete","set","JSON","stringify","search","toString","query","push","admin","dateFormat","routes","api","apiRoute","serverURL","versionCreatedAt","updatedAt","date","pattern","compareBaseURL","draftsEnabled","Boolean","versions","drafts","_jsxs","className","_jsx","fields","t","version","autosave","labels","singular","originalDocID","status","_status","versionDate","checked","onToggle","baseURL","onChange","parentID","options"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject } from 'payload'\n\nimport {\n  CheckboxInput,\n  Gutter,\n  useConfig,\n  useDocumentInfo,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { formatDate } from '@payloadcms/ui/shared'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport Restore from '../Restore/index.js'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport './index.scss'\nimport { SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  doc,\n  latestDraftVersion,\n  latestPublishedVersion,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesProp,\n  versionID,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n\n  const availableLocales = useMemo(\n    () =>\n      config.localization\n        ? config.localization.locales.map((locale) => ({\n            label: locale.label,\n            value: locale.code,\n          }))\n        : [],\n    [config.localization],\n  )\n\n  const { i18n } = useTranslation()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const [collectionConfig] = useState(() => getEntityConfig({ collectionSlug }))\n\n  const [globalConfig] = useState(() => getEntityConfig({ globalSlug }))\n\n  const [selectedLocales, setSelectedLocales] = useState<OptionObject[]>(selectedLocalesProp)\n\n  const [compareValue, setCompareValue] = useState<CompareOption>()\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n  function onToggleModifiedOnly() {\n    setModifiedOnly(!modifiedOnly)\n  }\n\n  useEffect(() => {\n    // If the selected comparison doc or locales change, update URL params so that version page\n    // This is so that RSC can update the version comparison state\n    const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n    if (!compareValue) {\n      current.delete('compareValue')\n    } else {\n      current.set('compareValue', compareValue?.value)\n    }\n\n    if (!selectedLocales) {\n      current.delete('localeCodes')\n    } else {\n      current.set('localeCodes', JSON.stringify(selectedLocales.map((locale) => locale.value)))\n    }\n\n    if (modifiedOnly === false) {\n      current.set('modifiedOnly', 'false')\n    } else {\n      current.delete('modifiedOnly')\n    }\n\n    const search = current.toString()\n    const query = search ? `?${search}` : ''\n\n    // TODO: this transition occurs multiple times during the initial rendering phases, need to evaluate\n    startRouteTransition(() => router.push(`${pathname}${query}`))\n  }, [\n    compareValue,\n    pathname,\n    router,\n    searchParams,\n    selectedLocales,\n    modifiedOnly,\n    startRouteTransition,\n  ])\n\n  const {\n    admin: { dateFormat },\n    localization,\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const versionCreatedAt = doc?.updatedAt\n    ? formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat })\n    : ''\n\n  const compareBaseURL = `${serverURL}${apiRoute}/${globalSlug ? 'globals/' : ''}${\n    collectionSlug || globalSlug\n  }/versions`\n\n  const draftsEnabled = Boolean((collectionConfig || globalConfig)?.versions.drafts)\n\n  return (\n    <main className={baseClass}>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        collectionSlug={collectionSlug}\n        doc={doc}\n        fields={(collectionConfig || globalConfig)?.fields}\n        globalConfig={globalConfig}\n        globalSlug={globalSlug}\n        id={id}\n      />\n      <Gutter className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__header-wrap`}>\n          <p className={`${baseClass}__created-at`}>\n            {i18n.t('version:versionCreatedOn', {\n              version: i18n.t(doc?.autosave ? 'version:autosavedVersion' : 'version:version'),\n            })}\n          </p>\n          <header className={`${baseClass}__header`}>\n            <h2>{versionCreatedAt}</h2>\n            {canUpdate && (\n              <Restore\n                className={`${baseClass}__restore`}\n                collectionSlug={collectionSlug}\n                globalSlug={globalSlug}\n                label={collectionConfig?.labels.singular || globalConfig?.label}\n                originalDocID={id}\n                status={doc?.version?._status}\n                versionDate={versionCreatedAt}\n                versionID={versionID}\n              />\n            )}\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n          </header>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <SelectComparison\n            baseURL={compareBaseURL}\n            draftsEnabled={draftsEnabled}\n            latestDraftVersion={latestDraftVersion}\n            latestPublishedVersion={latestPublishedVersion}\n            onChange={setCompareValue}\n            parentID={id}\n            value={compareValue}\n            versionID={versionID}\n          />\n          {localization && (\n            <SelectLocales\n              onChange={setSelectedLocales}\n              options={availableLocales}\n              value={selectedLocales}\n            />\n          )}\n        </div>\n        <SelectedLocalesContext\n          value={{ selectedLocales: selectedLocales.map((locale) => locale.value) }}\n        >\n          {doc?.version && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","CheckboxInput","ChevronIcon","Gutter","Pill","useConfig","useDocumentInfo","useLocale","useRouteTransition","useTranslation","usePathname","useRouter","useSearchParams","React","useCallback","useEffect","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","t0","$","canUpdate","latestDraftVersionID","latestPublishedVersionID","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromPill","versionTo","versionToCreatedAt","VersionToCreatedAtLabel","config","getEntityConfig","code","i18n","t","t1","Symbol","for","locales","setLocales","localeSelectorOpen","setLocaleSelectorOpen","t2","t3","localization","updatedLocales","map","locale","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","startRouteTransition","t4","collectionConfig","t5","globalConfig","router","pathname","searchParams","setModifiedOnly","t6","args","current","URLSearchParams","Array","from","entries","versionFromID","set","length","delete","selectedLocaleCodes","locale_0","push","JSON","stringify","search","toString","query","updateSearchParams","t7","event","newModified","target","checked","onToggleModifiedOnly","t8","t9","locales_0","onChangeSelectedLocales","val","value","onChangeVersionFrom","routes","t10","serverURL","api","apiRoute","compareBaseURL","draftsEnabled","Boolean","versions","drafts","t11","t12","_jsx","className","icon","direction","_temp","pillStyle","children","t13","onChange","t14","labels","singular","status","version","_status","versionDate","versionID","_jsxs","onToggle","baseURL","parentID","versionFromOption","versionToID","doc","fields","_temp2","localeSelectorOpen_0","locale_1"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  CheckboxInput,\n  ChevronIcon,\n  Gutter,\n  Pill,\n  type SelectablePill,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { type FormEventHandler, useCallback, useEffect, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport Restore from '../Restore/index.js'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport './index.scss'\nimport { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  latestDraftVersionID,\n  latestPublishedVersionID,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromPill,\n  versionTo,\n  versionToCreatedAt,\n  VersionToCreatedAtLabel,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { code } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\n  const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false)\n\n  useEffect(() => {\n    if (config.localization) {\n      const updatedLocales = config.localization.locales.map((locale) => {\n        let label = locale.label\n        if (typeof locale.label !== 'string' && locale.label[code]) {\n          label = locale.label[code]\n        }\n\n        return {\n          name: locale.code,\n          Label: label,\n          selected: selectedLocalesFromProps.includes(locale.code),\n        } as SelectablePill\n      })\n      setLocales(updatedLocales)\n    }\n  }, [code, config.localization, selectedLocalesFromProps])\n\n  const { id: originalDocID, collectionSlug, globalSlug } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const [collectionConfig] = useState(() => getEntityConfig({ collectionSlug }))\n\n  const [globalConfig] = useState(() => getEntityConfig({ globalSlug }))\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n\n  const updateSearchParams = useCallback(\n    (args: {\n      modifiedOnly?: boolean\n      selectedLocales?: SelectablePill[]\n      versionFromID?: string\n    }) => {\n      // If the selected comparison doc or locales change, update URL params so that version page\n      // This is so that RSC can update the version comparison state\n      const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n      if (args?.versionFromID) {\n        current.set('versionFrom', args?.versionFromID)\n      }\n\n      if (args?.selectedLocales) {\n        if (!args.selectedLocales.length) {\n          current.delete('localeCodes')\n        } else {\n          const selectedLocaleCodes: string[] = []\n          for (const locale of args.selectedLocales) {\n            if (locale.selected) {\n              selectedLocaleCodes.push(locale.name)\n            }\n          }\n          current.set('localeCodes', JSON.stringify(selectedLocaleCodes))\n        }\n      }\n\n      if (args?.modifiedOnly === false) {\n        current.set('modifiedOnly', 'false')\n      } else if (args?.modifiedOnly === true) {\n        current.delete('modifiedOnly')\n      }\n\n      const search = current.toString()\n      const query = search ? `?${search}` : ''\n\n      startRouteTransition(() => router.push(`${pathname}${query}`))\n    },\n    [pathname, router, searchParams, startRouteTransition],\n  )\n\n  const onToggleModifiedOnly: FormEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      const newModified = (event.target as HTMLInputElement).checked\n      setModifiedOnly(newModified)\n\n      updateSearchParams({\n        modifiedOnly: newModified,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback(\n    ({ locales }) => {\n      setLocales(locales)\n      updateSearchParams({\n        selectedLocales: locales,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeVersionFrom: (val: CompareOption) => void = useCallback(\n    (val) => {\n      updateSearchParams({\n        versionFromID: val.value,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const {\n    localization,\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const compareBaseURL = `${serverURL}${apiRoute}/${globalSlug ? 'globals/' : ''}${\n    collectionSlug || globalSlug\n  }/versions`\n\n  const draftsEnabled = Boolean((collectionConfig || globalConfig)?.versions.drafts)\n\n  return (\n    <main className={baseClass}>\n      <Gutter className={`${baseClass}-controls-top`}>\n        <div className={`${baseClass}-controls-top__wrapper`}>\n          <h2>{i18n.t('version:compareVersions')}</h2>\n          <div className={`${baseClass}-controls-top__wrapper-actions`}>\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n            {localization && (\n              <Pill\n                aria-controls={`${baseClass}-locales`}\n                aria-expanded={localeSelectorOpen}\n                className={`${baseClass}__toggle-locales`}\n                icon={<ChevronIcon direction={localeSelectorOpen ? 'up' : 'down'} />}\n                onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)}\n                pillStyle=\"light\"\n              >\n                {t('general:locales')}\n              </Pill>\n            )}\n          </div>\n        </div>\n\n        {localization && (\n          <SelectLocales\n            locales={locales}\n            localeSelectorOpen={localeSelectorOpen}\n            onChange={onChangeSelectedLocales}\n          />\n        )}\n      </Gutter>\n      <Gutter className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}-controls-bottom__version-from`}>\n            <SelectComparison\n              baseURL={compareBaseURL}\n              draftsEnabled={draftsEnabled}\n              latestDraftVersionID={latestDraftVersionID}\n              latestPublishedVersionID={latestPublishedVersionID}\n              onChange={onChangeVersionFrom}\n              parentID={originalDocID}\n              versionFromOption={{\n                label: versionFromPill.Label,\n                value: versionFromPill.id,\n              }}\n              versionToID={versionTo.id}\n            />\n          </div>\n\n          <div className={`${baseClass}-controls-bottom__version-to`}>\n            {VersionToCreatedAtLabel}\n            {canUpdate && (\n              <Restore\n                className={`${baseClass}__restore`}\n                collectionSlug={collectionSlug}\n                globalSlug={globalSlug}\n                label={collectionConfig?.labels.singular || globalConfig?.label}\n                originalDocID={originalDocID}\n                status={versionTo?.version?._status}\n                versionDate={versionToCreatedAt}\n                versionID={versionTo?.id}\n              />\n            )}\n          </div>\n        </div>\n      </Gutter>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        collectionSlug={collectionSlug}\n        doc={versionTo}\n        fields={(collectionConfig || globalConfig)?.fields}\n        globalConfig={globalConfig}\n        globalSlug={globalSlug}\n        id={originalDocID}\n      />\n      <Gutter className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>\n          {versionTo?.version && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SACEC,aAAa,EACbC,WAAW,EACXC,MAAM,EACNC,IAAI,EAEJC,SAAS,EACTC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,QACT;AACP,SAASC,WAAW,EAAEC,SAAS,EAAEC,eAAe,QAAQ;AACxD,OAAOC,KAAA,IAAgCC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAI/E,OAAOC,OAAA,MAAa;AACpB,SAASC,gBAAgB,QAAQ;AAEjC,SAAsCC,aAAa,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ;AACvC,SAASC,UAAU,QAAQ;AAE3B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAAyDC,EAAA;EAAA,MAAAC,CAAA,GAAAzB,EAAA;EAAC;IAAA0B,SAAA;IAAAC,oBAAA;IAAAC,wBAAA;IAAAC,YAAA,EAAAC,gBAAA;IAAAC,YAAA;IAAAC,eAAA,EAAAC,wBAAA;IAAAC,eAAA;IAAAC,SAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAAb,EAWtE;EACC;IAAAc,MAAA;IAAAC;EAAA,IAAoClC,SAAA;EACpC;IAAAmC;EAAA,IAAiBjC,SAAA;EACjB;IAAAkC,IAAA;IAAAC;EAAA,IAAoBjC,cAAA;EAAA,IAAAkC,EAAA;EAAA,IAAAlB,CAAA,QAAAmB,MAAA,CAAAC,GAAA;IAEqCF,EAAA;IAAElB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAA3D,OAAAqB,OAAA,EAAAC,UAAA,IAA8B/B,QAAA,CAA2B2B,EAAE;EAC3D,OAAAK,kBAAA,EAAAC,qBAAA,IAAoDpC,KAAA,CAAAG,QAAA,MAAe;EAAA,IAAAkC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA1B,CAAA,QAAAe,IAAA,IAAAf,CAAA,QAAAa,MAAA,CAAAc,YAAA,IAAA3B,CAAA,QAAAQ,wBAAA;IAEzDiB,EAAA,GAAAA,CAAA;MAAA,IACJZ,MAAA,CAAAc,YAAA;QACF,MAAAC,cAAA,GAAuBf,MAAA,CAAAc,YAAA,CAAAN,OAAA,CAAAQ,GAAA,CAAAC,MAAA;UACrB,IAAAC,KAAA,GAAYD,MAAA,CAAAC,KAAA;UAAY,IACpB,OAAOD,MAAA,CAAAC,KAAA,KAAiB,YAAYD,MAAA,CAAAC,KAAA,CAAahB,IAAA,CAAK;YACxDgB,KAAA,CAAAA,CAAA,CAAQD,MAAA,CAAAC,KAAA,CAAahB,IAAA;UAArB;UAAA;YAAAiB,IAAA,EAIMF,MAAA,CAAAf,IAAA;YAAAkB,KAAA,EACCF,KAAA;YAAAG,QAAA,EACG1B,wBAAA,CAAA2B,QAAA,CAAkCL,MAAA,CAAAf,IAAW;UAAA;QAAA,CAE3D;QACAO,UAAA,CAAWM,cAAA;MAAA;IAAA;IAEZF,EAAA,IAACX,IAAA,EAAMF,MAAA,CAAAc,YAAA,EAAqBnB,wBAAA;IAAyBR,CAAA,MAAAe,IAAA;IAAAf,CAAA,MAAAa,MAAA,CAAAc,YAAA;IAAA3B,CAAA,MAAAQ,wBAAA;IAAAR,CAAA,MAAAyB,EAAA;IAAAzB,CAAA,MAAA0B,EAAA;EAAA;IAAAD,EAAA,GAAAzB,CAAA;IAAA0B,EAAA,GAAA1B,CAAA;EAAA;EAhBxDV,SAAA,CAAUmC,EAgBV,EAAGC,EAAqD;EAExD;IAAAU,EAAA,EAAAC,aAAA;IAAAC,cAAA;IAAAC;EAAA,IAA0D1D,eAAA;EAC1D;IAAA2D;EAAA,IAAiCzD,kBAAA;EAAA,IAAA0D,EAAA;EAAA,IAAAzC,CAAA,QAAAsC,cAAA,IAAAtC,CAAA,QAAAc,eAAA;IAEG2B,EAAA,GAAAA,CAAA,KAAM3B,eAAA;MAAAwB;IAAA,CAAiC;IAAAtC,CAAA,MAAAsC,cAAA;IAAAtC,CAAA,MAAAc,eAAA;IAAAd,CAAA,MAAAyC,EAAA;EAAA;IAAAA,EAAA,GAAAzC,CAAA;EAAA;EAA3E,OAAA0C,gBAAA,IAA2BnD,QAAA,CAASkD,EAAuC;EAAA,IAAAE,EAAA;EAAA,IAAA3C,CAAA,QAAAc,eAAA,IAAAd,CAAA,SAAAuC,UAAA;IAE3CI,EAAA,GAAAA,CAAA,KAAM7B,eAAA;MAAAyB;IAAA,CAA6B;IAAAvC,CAAA,MAAAc,eAAA;IAAAd,CAAA,OAAAuC,UAAA;IAAAvC,CAAA,OAAA2C,EAAA;EAAA;IAAAA,EAAA,GAAA3C,CAAA;EAAA;EAAnE,OAAA4C,YAAA,IAAuBrD,QAAA,CAASoD,EAAmC;EAEnE,MAAAE,MAAA,GAAe3D,SAAA;EACf,MAAA4D,QAAA,GAAiB7D,WAAA;EACjB,MAAA8D,YAAA,GAAqB5D,eAAA;EACrB,OAAAiB,YAAA,EAAA4C,eAAA,IAAwCzD,QAAA,CAASc,gBAAA;EAAA,IAAA4C,EAAA;EAAA,IAAAjD,CAAA,SAAA8C,QAAA,IAAA9C,CAAA,SAAA6C,MAAA,IAAA7C,CAAA,SAAA+C,YAAA,IAAA/C,CAAA,SAAAwC,oBAAA;IAG/CS,EAAA,GAAAC,IAAA;MAOE,MAAAC,OAAA,OAAAC,eAAA,CAAoCC,KAAA,CAAAC,IAAA,CAAWP,YAAA,CAAAQ,OAAA,CAAoB;MAAA,IAE/DL,IAAA,EAAAM,aAAA;QACFL,OAAA,CAAAM,GAAA,CAAY,eAAeP,IAAA,EAAAM,aAAM;MAAA;MAAA,IAG/BN,IAAA,EAAA3C,eAAA;QAAA,KACG2C,IAAA,CAAA3C,eAAA,CAAAmD,MAAA;UACHP,OAAA,CAAAQ,MAAA,CAAe;QAAA;UAEf,MAAAC,mBAAA;UAAwC,KACnC,MAAAC,QAAM,IAAUX,IAAA,CAAA3C,eAAA;YAAA,IACfuB,QAAA,CAAAI,QAAA;cACF0B,mBAAA,CAAAE,IAAA,CAAyBhC,QAAA,CAAAE,IAAW;YAAA;UAAA;UAGxCmB,OAAA,CAAAM,GAAA,CAAY,eAAeM,IAAA,CAAAC,SAAA,CAAeJ,mBAAA;QAAA;MAAA;MAAA,IAI1CV,IAAA,EAAA9C,YAAA,UAAuB;QACzB+C,OAAA,CAAAM,GAAA,CAAY,gBAAgB;MAAA;QAAA,IACnBP,IAAA,EAAA9C,YAAA,SAAuB;UAChC+C,OAAA,CAAAQ,MAAA,CAAe;QAAA;MAAA;MAGjB,MAAAM,MAAA,GAAed,OAAA,CAAAe,QAAA,CAAgB;MAC/B,MAAAC,KAAA,GAAcF,MAAA,GAAS,IAAIA,MAAA,EAAQ,GAAG;MAEtCzB,oBAAA,OAA2BK,MAAA,CAAAiB,IAAA,CAAY,GAAGhB,QAAA,GAAWqB,KAAA,EAAO;IAAA;IAC9DnE,CAAA,OAAA8C,QAAA;IAAA9C,CAAA,OAAA6C,MAAA;IAAA7C,CAAA,OAAA+C,YAAA;IAAA/C,CAAA,OAAAwC,oBAAA;IAAAxC,CAAA,OAAAiD,EAAA;EAAA;IAAAA,EAAA,GAAAjD,CAAA;EAAA;EAtCF,MAAAoE,kBAAA,GAA2BnB,EAuC6B;EAAA,IAAAoB,EAAA;EAAA,IAAArE,CAAA,SAAAoE,kBAAA;IAItDC,EAAA,GAAAC,KAAA;MACE,MAAAC,WAAA,GAAoBD,KAAC,CAAAE,MAAA,CAAAC,OAAA;MACrBzB,eAAA,CAAgBuB,WAAA;MAEhBH,kBAAA;QAAAhE,YAAA,EACgBmE;MAAA,CAChB;IAAA;IACFvE,CAAA,OAAAoE,kBAAA;IAAApE,CAAA,OAAAqE,EAAA;EAAA;IAAAA,EAAA,GAAArE,CAAA;EAAA;EARF,MAAA0E,oBAAA,GAAiEL,EAS3C;EAAA,IAAAM,EAAA;EAAA,IAAA3E,CAAA,SAAAoE,kBAAA;IAIpBO,EAAA,GAAAC,EAAA;MAAC;QAAAvD,OAAA,EAAAwD;MAAA,IAAAD,EAAW;MACVtD,UAAA,CAAWD,SAAA;MACX+C,kBAAA;QAAA7D,eAAA,EACmBc;MAAA,CACnB;IAAA;IACFrB,CAAA,OAAAoE,kBAAA;IAAApE,CAAA,OAAA2E,EAAA;EAAA;IAAAA,EAAA,GAAA3E,CAAA;EAAA;EANF,MAAA8E,uBAAA,GAAwDH,EAOlC;EAAA,IAAAC,EAAA;EAAA,IAAA5E,CAAA,SAAAoE,kBAAA;IAIpBQ,EAAA,GAAAG,GAAA;MACEX,kBAAA;QAAAZ,aAAA,EACiBuB,GAAA,CAAAC;MAAA,CACjB;IAAA;IACFhF,CAAA,OAAAoE,kBAAA;IAAApE,CAAA,OAAA4E,EAAA;EAAA;IAAAA,EAAA,GAAA5E,CAAA;EAAA;EALF,MAAAiF,mBAAA,GAA0DL,EAMpC;EAGtB;IAAAjD,YAAA;IAAAuD,MAAA,EAAAC,GAAA;IAAAC;EAAA,IAIIvE,MAAA;EAFM;IAAAwE,GAAA,EAAAC;EAAA,IAAAH,GAAiB;EAI3B,MAAAI,cAAA,GAAuB,GAAGH,SAAA,GAAYE,QAAA,IAAY/C,UAAA,GAAa,aAAa,KAC1ED,cAAA,IAAkBC,UAAA,WACT;EAEX,MAAAiD,aAAA,GAAsBC,OAAA,EAAS/C,gBAAA,IAAoBE,YAAW,GAAA8C,QAAA,CAAAC,MAAa;EAAA,IAAAC,GAAA;EAAA,IAAA5F,CAAA,SAAAM,YAAA,IAAAN,CAAA,SAAAY,uBAAA,IAAAZ,CAAA,SAAAC,SAAA,IAAAD,CAAA,SAAA0C,gBAAA,IAAA1C,CAAA,SAAAsC,cAAA,IAAAtC,CAAA,SAAAuF,cAAA,IAAAvF,CAAA,SAAAwF,aAAA,IAAAxF,CAAA,SAAA4C,YAAA,IAAA5C,CAAA,SAAAuC,UAAA,IAAAvC,CAAA,SAAAgB,IAAA,IAAAhB,CAAA,SAAAE,oBAAA,IAAAF,CAAA,SAAAG,wBAAA,IAAAH,CAAA,SAAAuB,kBAAA,IAAAvB,CAAA,SAAAqB,OAAA,IAAArB,CAAA,SAAA2B,YAAA,IAAA3B,CAAA,SAAAI,YAAA,IAAAJ,CAAA,SAAA8E,uBAAA,IAAA9E,CAAA,SAAAiF,mBAAA,IAAAjF,CAAA,SAAA0E,oBAAA,IAAA1E,CAAA,SAAAqC,aAAA,IAAArC,CAAA,SAAAiB,CAAA,IAAAjB,CAAA,SAAAS,eAAA,CAAAwB,KAAA,IAAAjC,CAAA,SAAAS,eAAA,CAAA2B,EAAA,IAAApC,CAAA,SAAAU,SAAA,IAAAV,CAAA,SAAAW,kBAAA;IAAA,IAAAkF,GAAA;IAAA,IAAA7F,CAAA,SAAAuB,kBAAA,IAAAvB,CAAA,SAAA2B,YAAA,IAAA3B,CAAA,SAAAiB,CAAA;MAgBhE4E,GAAA,GAAAlE,YAAA,IACCmE,IAAA,CAAAnH,IAAA;QAAA,iBACiB,GAAAkB,SAAA,UAAsB;QAAA,iBACtB0B,kBAAA;QAAAwE,SAAA,EACJ,GAAAlG,SAAA,kBAA8B;QAAAmG,IAAA,EACnCF,IAAA,CAAArH,WAAA;UAAAwH,SAAA,EAAwB1E,kBAAA,GAAqB,OAAO;QAAA,C;uBAC3CC,qBAAA,CAAA0E,KAA+C;QAAAC,SAAA,EACpD;QAAAC,QAAA,EAETnF,CAAA,CAAE;MAAA,C;;;;;;;;;;MAMVoF,GAAA,GAAA1E,YAAA,IACCmE,IAAA,CAAApG,aAAA;QAAA2B,OAAA;QAAAE,kBAAA;QAAA+E,QAAA,EAGYxB;MAAA,C;;;;;;;;;;;MAwBTyB,GAAA,GAAAtG,SAAA,IACC6F,IAAA,CAAAtG,OAAA;QAAAuG,SAAA,EACa,GAAAlG,SAAA,WAAuB;QAAAyC,cAAA;QAAAC,UAAA;QAAAR,KAAA,EAG3BW,gBAAA,EAAA8D,MAAA,CAAAC,QAAA,IAAqC7D,YAAA,EAAAb,KAAc;QAAAM,aAAA;QAAAqE,MAAA,EAElDhG,SAAA,EAAAiG,OAAA,EAAAC,OAAA;QAAAC,WAAA,EACKlG,kBAAA;QAAAmG,SAAA,EACFpG,SAAA,EAAA0B;MAAA,C;;;;;;;;;;;;;;IAjEvBwD,GAAA,GAAAmB,KAAA,CAAC;MAAAhB,SAAA,EAAAlG,SAAA;MAAAuG,QAAA,GACCW,KAAA,CAAArI,MAAA;QAAAqH,SAAA,EAAmB,GAAAlG,SAAA,eAA2B;QAAAuG,QAAA,GAC5CW,KAAA,CAAC;UAAAhB,SAAA,EAAe,GAAAlG,SAAA,wBAAoC;UAAAuG,QAAA,GAClDN,IAAA,CAAC;YAAAM,QAAA,EAAIpF,IAAA,CAAAC,CAAA,CAAO;UAAA,C,GACZ8F,KAAA,CAAC;YAAAhB,SAAA,EAAe,GAAAlG,SAAA,gCAA4C;YAAAuG,QAAA,GAC1DN,IAAA,CAAC;cAAAC,SAAA,EAAgB,GAAAlG,SAAA,oBAAgC;cAAAuG,QAAA,EAC/CN,IAAA,CAAAtH,aAAA;gBAAAiG,OAAA,EACWrE,YAAA;gBAAAgC,EAAA,EACL;gBAAAL,KAAA,EACGf,IAAA,CAAAC,CAAA,CAAO;gBAAA+F,QAAA,EACJtC;cAAA,C;gBAGbmB,G;;YAeJQ,G;UAQHP,IAAA,CAAApH,MAAA;QAAAqH,SAAA,EAAmB,GAAAlG,SAAA,kBAA8B;QAAAuG,QAAA,EAC/CW,KAAA,CAAC;UAAAhB,SAAA,EAAe,GAAAlG,SAAA,2BAAuC;UAAAuG,QAAA,GACrDN,IAAA,CAAC;YAAAC,SAAA,EAAe,GAAAlG,SAAA,gCAA4C;YAAAuG,QAAA,EAC1DN,IAAA,CAAArG,gBAAA;cAAAwH,OAAA,EACW1B,cAAA;cAAAC,aAAA;cAAAtF,oBAAA;cAAAC,wBAAA;cAAAmG,QAAA,EAICrB,mBAAA;cAAAiC,QAAA,EACA7E,aAAA;cAAA8E,iBAAA;gBAAApF,KAAA,EAEDtB,eAAA,CAAAwB,KAAA;gBAAA+C,KAAA,EACAvE,eAAA,CAAA2B;cAAA;cAAAgF,WAAA,EAEI1G,SAAA,CAAA0B;YAAA,C;cAIjB2E,KAAA,CAAC;YAAAhB,SAAA,EAAe,GAAAlG,SAAA,8BAA0C;YAAAuG,QAAA,GACvDxF,uBAAA,EACA2F,G;;;UAePT,IAAA,CAAAlG,UAAA;QAAA8C,gBAAA;QAAAJ,cAAA;QAAA+E,GAAA,EAGO3G,SAAA;QAAA4G,MAAA,GACI5E,gBAAA,IAAoBE,YAAW,GAAA0E,MAAA;QAAA1E,YAAA;QAAAL,UAAA;QAAAH,EAAA,EAGpCC;MAAA,C,GAENyD,IAAA,CAAApH,MAAA;QAAAqH,SAAA,EAAmB,GAAAlG,SAAA,aAAyB;QAAAuG,QAAA,EAC1CN,IAAA,CAAAnG,sBAAA;UAAAqF,KAAA;YAAAzE,eAAA,EAAkDc,OAAA,CAAAQ,GAAA,CAAA0F,MAAmC;UAAA;UAAAnB,QAAA,EAClF1F,SAAA,EAAAiG,OAAA,IAAsBrG;QAAA,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAlF7BsF,G;CAuFJ;AA9NsE,SAAAM,MAAAsB,oBAAA;EAAA,QA0JQjG,oBAAA;AAAA;AA1JR,SAAAgG,OAAAE,QAAA;EAAA,OAwNY3F,QAAA,CAAAE,IAAA;AAAA","ignoreList":[]}

package/dist/views/Version/Default/index.scss

@@ -5,72 +5,142 @@
     width: 100%;
     padding-bottom: var(--spacing-view-bottom);
 
-    &__wrap {
-      padding-top: calc(var(--base) * 1.5);
-      display: flex;
-      flex-direction: column;
-      gap: var(--base);
-    }
+    &-controls-top {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
 
-    &__header-wrap {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
-    }
+      &__wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
 
-    &__header {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+        &-actions {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: var(--base);
+        }
+      }
 
       h2 {
-        margin: 0;
+        font-size: 18px;
       }
     }
 
-    &__created-at {
-      margin: 0;
-      color: var(--theme-elevation-500);
-    }
+    &-controls-bottom {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
+      position: relative;
 
-    &__controls {
-      display: flex;
-      gap: var(--base);
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
+      }
+
+      &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--base);
+        gap: var(--base);
+      }
+
+      &__version-from {
+      }
 
-      > * {
-        flex-basis: 100%;
+      &__version-to {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--base);
+
+        h2 {
+          font-size: 13px;
+          font-weight: 400;
+        }
       }
     }
 
     &__restore {
       margin: 0 0 0 var(--base);
+      div {
+        margin-block: 0;
+      }
     }
 
     &__modifiedCheckBox {
       margin: 0 0 0 var(--base);
+      display: flex;
+      align-items: center;
     }
 
-    @include mid-break {
-      &__intro,
-      &__header {
-        display: block;
+    &__diff-wrap {
+      padding-top: calc(var(--base) * 1.5);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      position: relative;
+
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
       }
+    }
 
+    @include mid-break {
       &__controls {
         flex-direction: column;
         gap: calc(var(--base) / 4);
       }
 
-
       &__restore {
         margin: calc(var(--base) * 0.5) 0 0 0;
       }
+
+      &-controls-top {
+        &__wrapper {
+          flex-direction: column;
+          align-items: flex-start;
+
+          .view-version__modifiedCheckBox {
+            margin-left: 0;
+          }
+        }
+      }
+
+      &-controls-bottom {
+        &__version-from {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        &__version-to {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0;
+        }
+      }
     }
 
     @include small-break {
-      &__wrap {
+      &__diff-wrap {
         padding-top: calc(var(--base) / 2);
-        gap: calc(var(--base) / 2);
       }
     }
   }

package/dist/views/Version/Default/types.d.ts

@@ -1,18 +1,22 @@
-import type { Document, OptionObject } from 'payload';
+import type { TypeWithVersion } from 'payload';
 export type CompareOption = {
     label: React.ReactNode | string;
-    options?: CompareOption[];
-    relationTo?: string;
     value: string;
 };
+export type VersionPill = {
+    id: string;
+    Label: React.ReactNode;
+};
 export type DefaultVersionsViewProps = {
     readonly canUpdate: boolean;
-    readonly doc: Document;
-    readonly latestDraftVersion?: string;
-    readonly latestPublishedVersion?: string;
+    readonly latestDraftVersionID: string;
+    readonly latestPublishedVersionID: string;
     modifiedOnly: boolean;
     readonly RenderedDiff: React.ReactNode;
-    readonly selectedLocales: OptionObject[];
-    readonly versionID?: string;
+    readonly selectedLocales: string[];
+    readonly versionFromPill: VersionPill;
+    readonly versionTo: TypeWithVersion<any>;
+    versionToCreatedAt: string;
+    VersionToCreatedAtLabel: React.ReactNode;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/views/Version/Default/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IAC/B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAA;IACtB,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IACxC,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,YAAY,EAAE,CAAA;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAA;IACrC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,CAAA;IACzC,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,eAAe,EAAE,WAAW,CAAA;IACrC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,CAAA;IACxC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAA;CACzC,CAAA"}

package/dist/views/Version/Default/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["import type { Document, OptionObject } from 'payload'\n\nexport type CompareOption = {\n  label: React.ReactNode | string\n  options?: CompareOption[]\n  relationTo?: string\n  value: string\n}\n\nexport type DefaultVersionsViewProps = {\n  readonly canUpdate: boolean\n  readonly doc: Document\n  readonly latestDraftVersion?: string\n  readonly latestPublishedVersion?: string\n  modifiedOnly: boolean\n  readonly RenderedDiff: React.ReactNode\n  readonly selectedLocales: OptionObject[]\n  readonly versionID?: string\n}\n"],"mappings":"AASA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["import type { TypeWithVersion } from 'payload'\n\nexport type CompareOption = {\n  label: React.ReactNode | string\n  value: string\n}\n\nexport type VersionPill = {\n  id: string\n  Label: React.ReactNode\n}\n\nexport type DefaultVersionsViewProps = {\n  readonly canUpdate: boolean\n  readonly latestDraftVersionID: string\n  readonly latestPublishedVersionID: string\n  modifiedOnly: boolean\n  readonly RenderedDiff: React.ReactNode\n  readonly selectedLocales: string[]\n  readonly versionFromPill: VersionPill\n  readonly versionTo: TypeWithVersion<any>\n  versionToCreatedAt: string\n  VersionToCreatedAtLabel: React.ReactNode\n}\n"],"mappings":"AAYA","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.d.ts

@@ -3,7 +3,6 @@ import React from 'react';
 import './index.scss';
 type Props = {
     children: React.ReactNode;
-    comparison: unknown;
     field?: never;
     fields: ClientField[];
     initCollapsed?: boolean;
@@ -11,10 +10,10 @@ type Props = {
     label: React.ReactNode;
     locales: string[] | undefined;
     parentIsLocalized: boolean;
-    version: unknown;
+    valueFrom: unknown;
+    valueTo: unknown;
 } | {
     children: React.ReactNode;
-    comparison?: unknown;
     field: ClientField;
     fields?: never;
     initCollapsed?: boolean;
@@ -22,7 +21,8 @@ type Props = {
     label: React.ReactNode;
     locales: string[] | undefined;
     parentIsLocalized: boolean;
-    version: unknown;
+    valueFrom?: unknown;
+    valueTo: unknown;
 };
 export declare const DiffCollapser: React.FC<Props>;
 export {};

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GACN;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgFzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GACN;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFzC,CAAA"}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui';
+import { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui';
 import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared';
 import React, { useState } from 'react';
 import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js';
@@ -11,7 +11,6 @@ export const DiffCollapser = t0 => {
   const $ = _c(21);
   const {
     children,
-    comparison,
     field,
     fields,
     initCollapsed: t1,
@@ -19,7 +18,8 @@ export const DiffCollapser = t0 => {
     label,
     locales,
     parentIsLocalized,
-    version
+    valueFrom,
+    valueTo
   } = t0;
   const initCollapsed = t1 === undefined ? false : t1;
   const isIterable = t2 === undefined ? false : t2;
@@ -31,25 +31,25 @@ export const DiffCollapser = t0 => {
     config
   } = useConfig();
   let t3;
-  if ($[0] !== children || $[1] !== comparison || $[2] !== config || $[3] !== field || $[4] !== fields || $[5] !== isCollapsed || $[6] !== isIterable || $[7] !== label || $[8] !== locales || $[9] !== parentIsLocalized || $[10] !== t || $[11] !== version) {
+  if ($[0] !== children || $[1] !== config || $[2] !== field || $[3] !== fields || $[4] !== isCollapsed || $[5] !== isIterable || $[6] !== label || $[7] !== locales || $[8] !== parentIsLocalized || $[9] !== t || $[10] !== valueFrom || $[11] !== valueTo) {
     let changeCount;
     if (isIterable) {
       if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
         throw new Error("DiffCollapser: field must be an array or blocks field when isIterable is true");
       }
       let t4;
-      if ($[13] !== comparison) {
-        t4 = comparison ?? [];
-        $[13] = comparison;
+      if ($[13] !== valueFrom) {
+        t4 = valueFrom ?? [];
+        $[13] = valueFrom;
         $[14] = t4;
       } else {
         t4 = $[14];
       }
       const comparisonRows = t4;
       let t5;
-      if ($[15] !== version) {
-        t5 = version ?? [];
-        $[15] = version;
+      if ($[15] !== valueTo) {
+        t5 = valueTo ?? [];
+        $[15] = valueTo;
         $[16] = t5;
       } else {
         t5 = $[16];
@@ -68,12 +68,12 @@ export const DiffCollapser = t0 => {
       });
     } else {
       changeCount = countChangedFields({
-        comparison,
+        comparison: valueFrom,
         config,
         fields,
         locales,
         parentIsLocalized,
-        version
+        version: valueTo
       });
     }
     const t4 = isCollapsed && `${baseClass}__content--is-collapsed`;
@@ -97,21 +97,20 @@ export const DiffCollapser = t0 => {
     t3 = _jsxs("div", {
       className: baseClass,
       children: [_jsxs(FieldDiffLabel, {
-        children: [_jsx("button", {
+        children: [_jsxs("button", {
           "aria-label": isCollapsed ? "Expand" : "Collapse",
           className: `${baseClass}__toggle-button`,
           onClick: t6,
           type: "button",
-          children: _jsx(ChevronIcon, {
-            direction: isCollapsed ? "right" : "down"
-          })
-        }), _jsx("span", {
-          className: `${baseClass}__label`,
-          children: label
-        }), changeCount > 0 && _jsx(Pill, {
+          children: [_jsx("span", {
+            className: `${baseClass}__label`,
+            children: label
+          }), _jsx(ChevronIcon, {
+            direction: isCollapsed ? "right" : "down",
+            size: "small"
+          })]
+        }), changeCount > 0 && isCollapsed && _jsx("span", {
           className: `${baseClass}__field-change-count`,
-          pillStyle: "light-gray",
-          size: "small",
           children: t("version:changedFieldsCount", {
             count: changeCount
           })
@@ -122,17 +121,17 @@ export const DiffCollapser = t0 => {
       })]
     });
     $[0] = children;
-    $[1] = comparison;
-    $[2] = config;
-    $[3] = field;
-    $[4] = fields;
-    $[5] = isCollapsed;
-    $[6] = isIterable;
-    $[7] = label;
-    $[8] = locales;
-    $[9] = parentIsLocalized;
-    $[10] = t;
-    $[11] = version;
+    $[1] = config;
+    $[2] = field;
+    $[3] = fields;
+    $[4] = isCollapsed;
+    $[5] = isIterable;
+    $[6] = label;
+    $[7] = locales;
+    $[8] = parentIsLocalized;
+    $[9] = t;
+    $[10] = valueFrom;
+    $[11] = valueTo;
     $[12] = t3;
   } else {
     t3 = $[12];

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","FieldDiffLabel","Pill","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","t0","$","children","comparison","field","fields","initCollapsed","t1","isIterable","t2","label","locales","parentIsLocalized","version","undefined","t","isCollapsed","setIsCollapsed","config","t3","changeCount","Error","t4","comparisonRows","t5","versionRows","Array","isArray","filter","Boolean","contentClassNames","join","t6","_jsxs","className","_jsx","onClick","type","direction","pillStyle","size","count"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props =\n  | {\n      // fields collapser\n      children: React.ReactNode\n      comparison: unknown\n      field?: never\n      fields: ClientField[]\n      initCollapsed?: boolean\n      isIterable?: false\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      version: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      comparison?: unknown\n      field: ClientField\n      fields?: never\n      initCollapsed?: boolean\n      isIterable: true\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      version: unknown\n    }\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  comparison,\n  field,\n  fields,\n  initCollapsed = false,\n  isIterable = false,\n  label,\n  locales,\n  parentIsLocalized,\n  version,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const comparisonRows = comparison ?? []\n    const versionRows = version ?? []\n\n    if (!Array.isArray(comparisonRows) || !Array.isArray(versionRows)) {\n      throw new Error(\n        'DiffCollapser: comparison and version must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      comparisonRows,\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      versionRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      comparison,\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      version,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} />\n        </button>\n        <span className={`${baseClass}__label`}>{label}</span>\n        {changeCount > 0 && (\n          <Pill className={`${baseClass}__field-change-count`} pillStyle=\"light-gray\" size=\"small\">\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </Pill>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","FieldDiffLabel","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","t0","$","children","field","fields","initCollapsed","t1","isIterable","t2","label","locales","parentIsLocalized","valueFrom","valueTo","undefined","t","isCollapsed","setIsCollapsed","config","t3","changeCount","Error","t4","comparisonRows","t5","versionRows","Array","isArray","version","filter","Boolean","contentClassNames","join","t6","_jsxs","className","onClick","type","_jsx","direction","size","count"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props =\n  | {\n      // fields collapser\n      children: React.ReactNode\n      field?: never\n      fields: ClientField[]\n      initCollapsed?: boolean\n      isIterable?: false\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      valueFrom: unknown\n      valueTo: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      field: ClientField\n      fields?: never\n      initCollapsed?: boolean\n      isIterable: true\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      valueFrom?: unknown\n      valueTo: unknown\n    }\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  field,\n  fields,\n  initCollapsed = false,\n  isIterable = false,\n  label,\n  locales,\n  parentIsLocalized,\n  valueFrom,\n  valueTo,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const comparisonRows = valueFrom ?? []\n    const versionRows = valueTo ?? []\n\n    if (!Array.isArray(comparisonRows) || !Array.isArray(versionRows)) {\n      throw new Error(\n        'DiffCollapser: comparison and version must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      comparisonRows,\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      versionRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      comparison: valueFrom,\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      version: valueTo,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <span className={`${baseClass}__label`}>{label}</span>\n\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={'small'} />\n        </button>\n        {changeCount > 0 && isCollapsed && (\n          <span className={`${baseClass}__field-change-count`}>\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </span>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss

@@ -1,3 +1,5 @@
+@import '../../../../scss/styles.scss';
+
 @layer payload-default {
   .diff-collapser {
     &__toggle-button {
@@ -5,22 +7,47 @@
       cursor: pointer;
       // Align the chevron visually with the label text
       vertical-align: 1px;
+      position: relative;
+      z-index: 1;
+
+      .icon {
+        color: var(--theme-elevation-500);
+      }
+
+      &:hover {
+        // Apply background color but with padding, thus we use after
+        &::before {
+          content: '';
+          position: absolute;
+          top: -(base(0.15));
+          left: -(base(0.15));
+          right: -(base(0.15));
+          bottom: -(base(0.15));
+          background-color: var(--theme-elevation-50);
+          border-radius: var(--style-radius-s);
+          z-index: -1;
+        }
+      }
     }
 
     &__label {
       // Add space between label, chevron, and change count
-      margin: 0 calc(var(--base) * 0.25);
+      margin: 0 calc(var(--base) * 0.3) 0 0;
     }
 
     &__field-change-count {
       // Reset the font weight of the change count to normal
       font-weight: normal;
+      margin-left: calc(var(--base) * 0.3);
+      padding: calc(var(--base) * 0.2);
+      background: var(--theme-elevation-100);
+      border-radius: var(--style-radius-s);
     }
 
     &__content {
       [dir='ltr'] & {
         // Vertical gutter
-        border-left: 3px solid var(--theme-elevation-50);
+        border-left: 2px solid var(--theme-elevation-100);
         // Center-align the gutter with the chevron
         margin-left: 3px;
         // Content indentation
@@ -28,7 +55,7 @@
       }
       [dir='rtl'] & {
         // Vertical gutter
-        border-right: 3px solid var(--theme-elevation-50);
+        border-right: 2px solid var(--theme-elevation-100);
         // Center-align the gutter with the chevron
         margin-right: 3px;
         // Content indentation

package/dist/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.d.ts

@@ -1,7 +1,12 @@
 import type { VersionField } from 'payload';
 import './index.scss';
 import React from 'react';
-export declare const RenderVersionFieldsToDiff: ({ versionFields, }: {
+export declare const RenderVersionFieldsToDiff: ({ parent, versionFields, }: {
+    /**
+     * If true, this is the parent render version fields component, not one nested in
+     * a field with children (e.g. group)
+     */
+    parent?: boolean;
     versionFields: VersionField[];
 }) => React.ReactNode;
 //# sourceMappingURL=RenderVersionFieldsToDiff.d.ts.map

package/dist/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderVersionFieldsToDiff.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,cAAc,CAAA;AAGrB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,eAAO,MAAM,yBAAyB,uBAEnC;IACD,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,KAAG,KAAK,CAAC,SAqDT,CAAA"}
+{"version":3,"file":"RenderVersionFieldsToDiff.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,cAAc,CAAA;AAGrB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,eAAO,MAAM,yBAAyB,+BAGnC;IACD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,KAAG,KAAK,CAAC,SAqDT,CAAA"}