@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.c6494b5

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

@@ -0,0 +1,223 @@
+@layer payload-default {
+  .view-version {
+    width: 100%;
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  .view-version__toggle-locales-label {
+    color: var(--color-text-secondary);
+  }
+
+  .view-version-controls-top {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2) var(--gutter-h);
+  }
+
+  .view-version-controls-top__wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .view-version-controls-top__wrapper-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-4);
+  }
+
+  .view-version-controls-top h2 {
+    color: var(--color-text);
+    font-size: var(--text-body-large-bold-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-large-bold-font-weight);
+    line-height: var(--text-body-large-bold-line-height);
+    letter-spacing: var(--text-body-large-bold-letter-spacing);
+  }
+
+  .view-version-controls-bottom {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2-5) var(--gutter-h);
+    position: relative;
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+    }
+  }
+
+  .view-version-controls-bottom__wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-4);
+  }
+
+  .view-version__time-elapsed {
+    color: var(--color-text-secondary);
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .view-version__version-from,
+  .view-version__version-to {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-from-labels,
+  .view-version__version-to-labels {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--color-text);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__version-to-version {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1) var(--spacer-2);
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-to-version h2 {
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .view-version__restore div {
+    margin-block: 0;
+  }
+
+  .view-version__modifiedCheckBox {
+    margin: 0 0 0 var(--spacer-4);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    font-size: var(--text-body-medium-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__modifiedCheckBox label.field-label {
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .compare-version .rs__control {
+    padding: var(--spacer-2);
+  }
+
+  .view-version__diff-wrap {
+    padding: var(--spacer-3) var(--gutter-h);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    position: relative;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+      z-index: 2;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1024px) {
+    .view-version__version-to-version {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .view-version {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .view-version__version-to-version {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    /* Reorder: controls-bottom first, controls-top (checkbox) second, diff last */
+    .view-version-controls-bottom {
+      order: 1;
+      padding-inline: var(--spacer-3);
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    .view-version-controls-top {
+      order: 2;
+    }
+
+    .view-version__diff-wrap {
+      order: 3;
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    /* Hide title on mobile */
+    .view-version-controls-top h2 {
+      display: none;
+    }
+
+    /* Checkbox: remove left margin */
+    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
+      margin-left: 0;
+    }
+
+    .view-version-controls-top__wrapper-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    /* Single column for version selectors */
+    .view-version-controls-bottom__wrapper {
+      grid-template-columns: 1fr;
+      gap: var(--spacer-3);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DefaultVersionsViewProps } from './types.js';
+import './index.css';
+export declare const DefaultVersionView: React.FC<DefaultVersionsViewProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2E,MAAM,OAAO,CAAA;AAG/F,OAAO,KAAK,EAAiB,wBAAwB,EAAE,MAAM,YAAY,CAAA;AAYzE,OAAO,aAAa,CAAA;AAQpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmOjE,CAAA"}

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

@@ -0,0 +1,241 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Gutter } from '../../../elements/Gutter/index.js';
+import { CheckboxInput } from '../../../fields/Checkbox/Input.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+import { useLocale } from '../../../providers/Locale/index.js';
+import { usePathname, useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js';
+import { useRouteTransition } from '../../../providers/RouteTransition/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { formatTimeToNow } from '../../../utilities/formatDocTitle/formatDateTitle.js';
+import { Restore } from '../Restore/index.js';
+import './index.css';
+import { SelectComparison } from '../SelectComparison/index.js';
+import { SelectLocales } from '../SelectLocales/index.js';
+import { SelectedLocalesContext } from './SelectedLocalesContext.js';
+import { SetStepNav } from './SetStepNav.js';
+const baseClass = 'view-version';
+export const DefaultVersionView = ({
+  canUpdate,
+  modifiedOnly: modifiedOnlyProp,
+  RenderedDiff,
+  selectedLocales: selectedLocalesFromProps,
+  versionFromCreatedAt,
+  versionFromID,
+  versionFromOptions,
+  versionToCreatedAt,
+  versionToCreatedAtFormatted,
+  VersionToCreatedAtLabel,
+  versionToID,
+  versionToStatus
+}) => {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const locale = useLocale();
+  const code = locale?.code;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [locales, setLocales] = useState([]);
+  useEffect(() => {
+    if (config.localization) {
+      const updatedLocales = config.localization.locales.map(locale_0 => {
+        let label = locale_0.label;
+        if (typeof locale_0.label !== 'string' && locale_0.label[code]) {
+          label = locale_0.label[code];
+        }
+        return {
+          name: locale_0.code,
+          Label: label,
+          selected: selectedLocalesFromProps.includes(locale_0.code)
+        };
+      });
+      setLocales(updatedLocales);
+    }
+  }, [code, config.localization, selectedLocalesFromProps]);
+  const {
+    id: originalDocID,
+    collectionSlug,
+    globalSlug,
+    isTrashed
+  } = useDocumentInfo();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  const {
+    collectionConfig,
+    globalConfig
+  } = useMemo(() => {
+    return {
+      collectionConfig: getEntityConfig({
+        collectionSlug
+      }),
+      globalConfig: getEntityConfig({
+        globalSlug
+      })
+    };
+  }, [collectionSlug, globalSlug, getEntityConfig]);
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp);
+  const updateSearchParams = useCallback(args => {
+    // If the selected comparison doc or locales change, update URL params so that version page
+    // This is so that RSC can update the version comparison state
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    if (args?.versionFromID) {
+      current.set('versionFrom', args?.versionFromID);
+    }
+    if (args?.selectedLocales) {
+      if (!args.selectedLocales.length) {
+        current.delete('localeCodes');
+      } else {
+        const selectedLocaleCodes = [];
+        for (const locale_1 of args.selectedLocales) {
+          if (locale_1.selected) {
+            selectedLocaleCodes.push(locale_1.name);
+          }
+        }
+        current.set('localeCodes', JSON.stringify(selectedLocaleCodes));
+      }
+    }
+    if (args?.modifiedOnly === false) {
+      current.set('modifiedOnly', 'false');
+    } else if (args?.modifiedOnly === true) {
+      current.delete('modifiedOnly');
+    }
+    const search = current.toString();
+    const query = search ? `?${search}` : '';
+    startRouteTransition(() => router.push(`${pathname}${query}`));
+  }, [pathname, router, searchParams, startRouteTransition]);
+  const onToggleModifiedOnly = useCallback(event => {
+    const newModified = event.target.checked;
+    setModifiedOnly(newModified);
+    updateSearchParams({
+      modifiedOnly: newModified
+    });
+  }, [updateSearchParams]);
+  const onChangeSelectedLocales = useCallback(({
+    locales: locales_0
+  }) => {
+    setLocales(locales_0);
+    updateSearchParams({
+      selectedLocales: locales_0
+    });
+  }, [updateSearchParams]);
+  const onChangeVersionFrom = useCallback(val => {
+    updateSearchParams({
+      versionFromID: val.value
+    });
+  }, [updateSearchParams]);
+  const {
+    localization
+  } = config;
+  const versionToTimeAgo = useMemo(() => t('version:versionAgo', {
+    distance: formatTimeToNow({
+      date: versionToCreatedAt,
+      i18n
+    })
+  }), [versionToCreatedAt, i18n, t]);
+  const versionFromTimeAgo = useMemo(() => versionFromCreatedAt ? t('version:versionAgo', {
+    distance: formatTimeToNow({
+      date: versionFromCreatedAt,
+      i18n
+    })
+  }) : undefined, [versionFromCreatedAt, i18n, t]);
+  return /*#__PURE__*/_jsxs("main", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsx(Gutter, {
+      className: `${baseClass}-controls-top`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}-controls-top__wrapper`,
+        children: [/*#__PURE__*/_jsx("h2", {
+          children: i18n.t('version:compareVersions')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}-controls-top__wrapper-actions`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__modifiedCheckBox`,
+            children: /*#__PURE__*/_jsx(CheckboxInput, {
+              checked: modifiedOnly,
+              id: 'modifiedOnly',
+              label: i18n.t('version:modifiedOnly'),
+              onToggle: onToggleModifiedOnly
+            })
+          }), localization && /*#__PURE__*/_jsx(SelectLocales, {
+            locales: locales,
+            onChange: onChangeSelectedLocales
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Gutter, {
+      className: `${baseClass}-controls-bottom`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}-controls-bottom__wrapper`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__version-from`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__version-from-labels`,
+            children: [/*#__PURE__*/_jsx("span", {
+              children: t('version:comparingAgainst')
+            }), versionFromTimeAgo && /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__time-elapsed`,
+              children: versionFromTimeAgo
+            })]
+          }), /*#__PURE__*/_jsx(SelectComparison, {
+            collectionSlug: collectionSlug,
+            docID: originalDocID,
+            globalSlug: globalSlug,
+            onChange: onChangeVersionFrom,
+            versionFromID: versionFromID,
+            versionFromOptions: versionFromOptions
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__version-to`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__version-to-labels`,
+            children: [/*#__PURE__*/_jsx("span", {
+              children: t('version:currentlyViewing')
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__time-elapsed`,
+              children: versionToTimeAgo
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__version-to-version`,
+            children: [VersionToCreatedAtLabel, canUpdate && !isTrashed && /*#__PURE__*/_jsx(Restore, {
+              className: `${baseClass}__restore`,
+              collectionConfig: collectionConfig,
+              globalConfig: globalConfig,
+              label: collectionConfig?.labels.singular || globalConfig?.label,
+              originalDocID: originalDocID,
+              status: versionToStatus,
+              versionDateFormatted: versionToCreatedAtFormatted,
+              versionID: versionToID
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(SetStepNav, {
+      collectionConfig: collectionConfig,
+      globalConfig: globalConfig,
+      id: originalDocID,
+      isTrashed: isTrashed,
+      versionToCreatedAtFormatted: versionToCreatedAtFormatted,
+      versionToID: versionToID
+    }), /*#__PURE__*/_jsx(Gutter, {
+      className: `${baseClass}__diff-wrap`,
+      children: /*#__PURE__*/_jsx(SelectedLocalesContext, {
+        value: {
+          selectedLocales: locales.map(locale_2 => locale_2.name)
+        },
+        children: versionToCreatedAt && RenderedDiff
+      })
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","Gutter","CheckboxInput","useConfig","useDocumentInfo","useLocale","usePathname","useRouter","useSearchParams","useRouteTransition","useTranslation","formatTimeToNow","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromCreatedAt","versionFromID","versionFromOptions","versionToCreatedAt","versionToCreatedAtFormatted","VersionToCreatedAtLabel","versionToID","versionToStatus","config","getEntityConfig","locale","code","i18n","t","locales","setLocales","localization","updatedLocales","map","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","isTrashed","startRouteTransition","collectionConfig","globalConfig","router","pathname","searchParams","setModifiedOnly","updateSearchParams","args","current","URLSearchParams","Array","from","entries","set","length","delete","selectedLocaleCodes","push","JSON","stringify","search","toString","query","onToggleModifiedOnly","event","newModified","target","checked","onChangeSelectedLocales","onChangeVersionFrom","val","value","versionToTimeAgo","distance","date","versionFromTimeAgo","undefined","_jsxs","className","_jsx","onToggle","onChange","docID","labels","singular","status","versionDateFormatted","versionID"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { SelectablePill } from '../../../elements/PillSelector/index.js'\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport { Gutter } from '../../../elements/Gutter/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { usePathname, useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Restore } from '../Restore/index.js'\nimport './index.css'\nimport { SelectComparison } from '../SelectComparison/index.js'\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  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromCreatedAt,\n  versionFromID,\n  versionFromOptions,\n  versionToCreatedAt,\n  versionToCreatedAtFormatted,\n  VersionToCreatedAtLabel,\n  versionToID,\n  versionToStatus,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const locale = useLocale()\n  const code = locale?.code\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\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, isTrashed } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { collectionConfig, globalConfig } = useMemo(() => {\n    return {\n      collectionConfig: getEntityConfig({ collectionSlug }),\n      globalConfig: getEntityConfig({ globalSlug }),\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\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      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 { localization } = config\n\n  const versionToTimeAgo = useMemo(\n    () =>\n      t('version:versionAgo', {\n        distance: formatTimeToNow({\n          date: versionToCreatedAt,\n          i18n,\n        }),\n      }),\n    [versionToCreatedAt, i18n, t],\n  )\n\n  const versionFromTimeAgo = useMemo(\n    () =>\n      versionFromCreatedAt\n        ? t('version:versionAgo', {\n            distance: formatTimeToNow({\n              date: versionFromCreatedAt,\n              i18n,\n            }),\n          })\n        : undefined,\n    [versionFromCreatedAt, i18n, t],\n  )\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 && <SelectLocales locales={locales} onChange={onChangeSelectedLocales} />}\n          </div>\n        </div>\n      </Gutter>\n      <Gutter className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}__version-from`}>\n            <div className={`${baseClass}__version-from-labels`}>\n              <span>{t('version:comparingAgainst')}</span>\n              {versionFromTimeAgo && (\n                <span className={`${baseClass}__time-elapsed`}>{versionFromTimeAgo}</span>\n              )}\n            </div>\n            <SelectComparison\n              collectionSlug={collectionSlug}\n              docID={originalDocID}\n              globalSlug={globalSlug}\n              onChange={onChangeVersionFrom}\n              versionFromID={versionFromID}\n              versionFromOptions={versionFromOptions}\n            />\n          </div>\n\n          <div className={`${baseClass}__version-to`}>\n            <div className={`${baseClass}__version-to-labels`}>\n              <span>{t('version:currentlyViewing')}</span>\n              <span className={`${baseClass}__time-elapsed`}>{versionToTimeAgo}</span>\n            </div>\n            <div className={`${baseClass}__version-to-version`}>\n              {VersionToCreatedAtLabel}\n              {canUpdate && !isTrashed && (\n                <Restore\n                  className={`${baseClass}__restore`}\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  label={collectionConfig?.labels.singular || globalConfig?.label}\n                  originalDocID={originalDocID}\n                  status={versionToStatus}\n                  versionDateFormatted={versionToCreatedAtFormatted}\n                  versionID={versionToID}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </Gutter>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        globalConfig={globalConfig}\n        id={originalDocID}\n        isTrashed={isTrashed}\n        versionToCreatedAtFormatted={versionToCreatedAtFormatted}\n        versionToID={versionToID}\n      />\n      <Gutter className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>\n          {versionToCreatedAt && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+export type CompareOption = {
+    label: React.ReactNode | string;
+    value: string;
+};
+export type VersionPill = {
+    id: string;
+    Label: React.ReactNode;
+};
+export type DefaultVersionsViewProps = {
+    canUpdate: boolean;
+    modifiedOnly: boolean;
+    RenderedDiff: React.ReactNode;
+    selectedLocales: string[];
+    versionFromCreatedAt?: string;
+    versionFromID?: string;
+    versionFromOptions: CompareOption[];
+    versionToCreatedAt?: string;
+    versionToCreatedAtFormatted: string;
+    VersionToCreatedAtLabel: React.ReactNode;
+    versionToID?: string;
+    versionToStatus?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/types.ts"],"names":[],"mappings":"AAAA,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,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,aAAa,EAAE,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,2BAA2B,EAAE,MAAM,CAAA;IACnC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["export 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  canUpdate: boolean\n  modifiedOnly: boolean\n  RenderedDiff: React.ReactNode\n  selectedLocales: string[]\n  versionFromCreatedAt?: string\n  versionFromID?: string\n  versionFromOptions: CompareOption[]\n  versionToCreatedAt?: string\n  versionToCreatedAtFormatted: string\n  VersionToCreatedAtLabel: React.ReactNode\n  versionToID?: string\n  versionToStatus?: string\n}\n"],"mappings":"AAUA","ignoreList":[]}

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

@@ -0,0 +1,63 @@
+@layer payload-default {
+  .diff-collapser__toggle-button {
+    all: unset;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      color: var(--color-icon-tertiary);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0 0 0 calc(var(--spacer-1) * -1);
+      border-radius: var(--radius-medium);
+      z-index: -1;
+    }
+
+    &:hover::before {
+      background-color: var(--color-bg-hover);
+    }
+
+    &:active::before {
+      background-color: var(--color-bg-pressed);
+    }
+  }
+
+  .diff-collapser__label {
+    margin: 0;
+    display: inline-flex;
+    height: 100%;
+  }
+
+  .diff-collapser__field-change-count {
+    margin-inline-start: var(--spacer-2);
+    padding-inline: var(--spacer-1);
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-medium);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
+    [dir='ltr'] & {
+      border-left: var(--stroke-width-small) solid var(--color-border);
+      padding-left: var(--spacer-2-5);
+    }
+
+    [dir='rtl'] & {
+      border-right: var(--stroke-width-small) solid var(--color-border);
+      padding-right: var(--spacer-2-5);
+    }
+  }
+
+  .diff-collapser__content--is-collapsed {
+    display: none;
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { ClientField } from 'payload';
+import React from 'react';
+import './index.css';
+type Props = {
+    changeCount?: number;
+    hideGutter?: boolean;
+    initCollapsed?: boolean;
+    Label: React.ReactNode;
+    locales: string[] | undefined;
+    parentIsLocalized: boolean;
+    valueTo: unknown;
+} & ({
+    children: React.ReactNode;
+    field?: never;
+    fields: ClientField[];
+    isIterable?: false;
+    valueFrom: unknown;
+} | {
+    children: React.ReactNode;
+    field: ClientField;
+    fields?: never;
+    isIterable: true;
+    valueFrom?: unknown;
+});
+export declare const DiffCollapser: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAG1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,aAAa,CAAA;AAKpB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,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,GAAG,CACA;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;CACnB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,EAAE,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CACJ,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsFzC,CAAA"}