@payloadcms/ui 3.55.0-canary.1 → 3.55.0-canary.10

package/dist/elements/Autosave/index.js

@@ -105,12 +105,12 @@ export const Autosave = ({
         let entitySlug;
         if (collection && id) {
           entitySlug = collection.slug;
-          url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`;
+          url = `${serverURL}${api}/${entitySlug}/${id}?depth=0&draft=true&autosave=true&locale=${localeRef.current}`;
           method = 'PATCH';
         }
         if (globalDoc) {
           entitySlug = globalDoc.slug;
-          url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`;
+          url = `${serverURL}${api}/globals/${entitySlug}?depth=0&draft=true&autosave=true&locale=${localeRef.current}`;
           method = 'POST';
         }
         const {

package/dist/elements/Autosave/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dequal","reduceFieldsToValues","versionDefaults","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueues","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","serverURL","docConfig","lastUpdateTime","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","code","locale","i18n","t","versionsConfig","versions","interval","autosaveInterval","drafts","autosave","validateOnDraft","Boolean","validate","_saving","setSaving","saving","debouncedFormState","formStateRef","modifiedRef","localeRef","current","queueTask","autosaveTimeoutRef","handleAutosave","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","slug","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","updatedAt","_","formData","__","prevFormData","clearTimeout","_jsxs","className","_jsx","Fragment","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport { reduceFieldsToValues, versionDefaults } from 'payload/shared'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueues } from '../../hooks/useQueues.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.scss'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    lastUpdateTime,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const versionsConfig = docConfig?.versions\n  let interval = versionDefaults.autosaveInterval\n\n  if (versionsConfig.drafts && versionsConfig.drafts.autosave) {\n    interval = versionsConfig.drafts.autosave.interval\n  }\n\n  const validateOnDraft = Boolean(\n    docConfig?.versions?.drafts && docConfig?.versions?.drafts.validate,\n  )\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const formStateRef = useRef(formState)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n\n  // Store fields in ref so the autosave func\n  // can always retrieve the most to date copies\n  // after the timeout has executed\n  formStateRef.current = formState\n\n  // Store modified in ref so the autosave func\n  // can bail out if modified becomes false while\n  // timing out during autosave\n  modifiedRef.current = modified\n\n  // Store locale in ref so the autosave func\n  // can always retrieve the most to date locale\n  localeRef.current = locale\n\n  const { queueTask } = useQueues()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formStateRef.current, true)\n\n          const skipSubmission =\n            submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n          if (!skipSubmission && modifiedRef.current && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: versionsConfig?.drafts && !versionsConfig?.drafts?.validate,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n\n    handleAutosave()\n  }, [debouncedFormState])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  return (\n    <div className={baseClass}>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {saving && t('general:saving')}\n      {!saving && Boolean(lastUpdateTime) && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dequal","reduceFieldsToValues","versionDefaults","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueues","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","serverURL","docConfig","lastUpdateTime","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","code","locale","i18n","t","versionsConfig","versions","interval","autosaveInterval","drafts","autosave","validateOnDraft","Boolean","validate","_saving","setSaving","saving","debouncedFormState","formStateRef","modifiedRef","localeRef","current","queueTask","autosaveTimeoutRef","handleAutosave","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","slug","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","updatedAt","_","formData","__","prevFormData","clearTimeout","_jsxs","className","_jsx","Fragment","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport { reduceFieldsToValues, versionDefaults } from 'payload/shared'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueues } from '../../hooks/useQueues.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.scss'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    lastUpdateTime,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const versionsConfig = docConfig?.versions\n  let interval = versionDefaults.autosaveInterval\n\n  if (versionsConfig.drafts && versionsConfig.drafts.autosave) {\n    interval = versionsConfig.drafts.autosave.interval\n  }\n\n  const validateOnDraft = Boolean(\n    docConfig?.versions?.drafts && docConfig?.versions?.drafts.validate,\n  )\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const formStateRef = useRef(formState)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n\n  // Store fields in ref so the autosave func\n  // can always retrieve the most to date copies\n  // after the timeout has executed\n  formStateRef.current = formState\n\n  // Store modified in ref so the autosave func\n  // can bail out if modified becomes false while\n  // timing out during autosave\n  modifiedRef.current = modified\n\n  // Store locale in ref so the autosave func\n  // can always retrieve the most to date locale\n  localeRef.current = locale\n\n  const { queueTask } = useQueues()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = `${serverURL}${api}/${entitySlug}/${id}?depth=0&draft=true&autosave=true&locale=${localeRef.current}`\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = `${serverURL}${api}/globals/${entitySlug}?depth=0&draft=true&autosave=true&locale=${localeRef.current}`\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formStateRef.current, true)\n\n          const skipSubmission =\n            submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n          if (!skipSubmission && modifiedRef.current && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: versionsConfig?.drafts && !versionsConfig?.drafts?.validate,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n\n    handleAutosave()\n  }, [debouncedFormState])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  return (\n    <div className={baseClass}>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {saving && t('general:saving')}\n      {!saving && Boolean(lastUpdateTime) && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,MAAM,QAAQ;AACvB,SAASC,oBAAoB,EAAEC,eAAe,QAAQ;AACtD,OAAOC,KAAA,IAASC,gBAAgB,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIrE,SACEC,gBAAgB,EAChBC,OAAO,EACPC,eAAe,EACfC,gBAAgB,QACX;AACP,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,SAASC,kCAAkC,QAAQ;AACnD,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB;AACA,MAAMC,oBAAA,GAAuB;AAS7B,OAAO,MAAMC,QAAA,GAA4BA,CAAC;EAAEC,EAAE;EAAEC,UAAU;EAAEC,MAAA,EAAQC;AAAS,CAAE;EAC7E,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IACJkB,SAAS;IACTC,cAAc;IACdC,4BAA4B;IAC5BC,+BAA+B;IAC/BC;EAA0B,CAC3B,GAAGrB,eAAA;EAEJ,MAAM;IAAEsB,OAAO;IAAEC,uBAAuB;IAAEC;EAAM,CAAE,GAAG/B,OAAA;EAErD,MAAM,CAACgC,SAAA,CAAU,GAAGjC,gBAAA;EACpB,MAAMkC,QAAA,GAAWhC,eAAA;EACjB,MAAMiC,SAAA,GAAYhC,gBAAA;EAElB,MAAM;IAAEiC,IAAA,EAAMC;EAAM,CAAE,GAAG5B,SAAA;EACzB,MAAM;IAAE6B,IAAI;IAAEC;EAAC,CAAE,GAAG7B,cAAA;EAEpB,MAAM8B,cAAA,GAAiBf,SAAA,EAAWgB,QAAA;EAClC,IAAIC,QAAA,GAAWhD,eAAA,CAAgBiD,gBAAgB;EAE/C,IAAIH,cAAA,CAAeI,MAAM,IAAIJ,cAAA,CAAeI,MAAM,CAACC,QAAQ,EAAE;IAC3DH,QAAA,GAAWF,cAAA,CAAeI,MAAM,CAACC,QAAQ,CAACH,QAAQ;EACpD;EAEA,MAAMI,eAAA,GAAkBC,OAAA,CACtBtB,SAAA,EAAWgB,QAAA,EAAUG,MAAA,IAAUnB,SAAA,EAAWgB,QAAA,EAAUG,MAAA,CAAOI,QAAA;EAG7D,MAAM,CAACC,OAAA,EAASC,SAAA,CAAU,GAAGnD,QAAA,CAAS;EAEtC,MAAMoD,MAAA,GAASvD,gBAAA,CAAiBqD,OAAA;EAEhC,MAAMG,kBAAA,GAAqBhD,WAAA,CAAY6B,SAAA,EAAWS,QAAA;EAElD,MAAMW,YAAA,GAAevD,MAAA,CAAOmC,SAAA;EAC5B,MAAMqB,WAAA,GAAcxD,MAAA,CAAOoC,QAAA;EAC3B,MAAMqB,SAAA,GAAYzD,MAAA,CAAOuC,MAAA;EAEzB;EACA;EACA;EACAgB,YAAA,CAAaG,OAAO,GAAGvB,SAAA;EAEvB;EACA;EACA;EACAqB,WAAA,CAAYE,OAAO,GAAGtB,QAAA;EAEtB;EACA;EACAqB,SAAA,CAAUC,OAAO,GAAGnB,MAAA;EAEpB,MAAM;IAAEoB;EAAS,CAAE,GAAGnD,SAAA;EAEtB,MAAMoD,kBAAA,GAAqB5D,MAAA,CAA8B;EAEzD,MAAM6D,cAAA,GAAiBtD,cAAA,CAAe;IACpCqD,kBAAA,CAAmBF,OAAO,GAAGI,SAAA;IAC7B;IACA,IAAIC,cAAA,GAAiBD,SAAA;IACrB,IAAIE,YAAA,GAAeF,SAAA;IAEnB,MAAMG,aAAA,GAAgBA,CAAA;MACpB;MACA,IAAID,YAAA,GAAeD,cAAA,GAAiB9C,oBAAA,EAAsB;QACxD2C,kBAAA,CAAmBF,OAAO,GAAGQ,UAAA,CAC3B;UACEd,SAAA,CAAU;QACZ,GACAnC,oBAAA,IAAwB+C,YAAA,GAAeD,cAAa;MAExD,OAAO;QACLI,qBAAA;MACF;IACF;IAEAR,SAAA,CACE;MACE,IAAIvB,QAAA,EAAU;QACZ2B,cAAA,GAAiB,IAAIK,IAAA,GAAOC,OAAO;QAEnCjB,SAAA,CAAU;QAEV,IAAIkB,GAAA;QACJ,IAAIC,MAAA;QACJ,IAAIC,UAAA;QAEJ,IAAIpD,UAAA,IAAcD,EAAA,EAAI;UACpBqD,UAAA,GAAapD,UAAA,CAAWqD,IAAI;UAC5BH,GAAA,GAAM,GAAG5C,SAAA,GAAYD,GAAA,IAAO+C,UAAA,IAAcrD,EAAA,4CAA8CsC,SAAA,CAAUC,OAAO,EAAE;UAC3Ga,MAAA,GAAS;QACX;QAEA,IAAIjD,SAAA,EAAW;UACbkD,UAAA,GAAalD,SAAA,CAAUmD,IAAI;UAC3BH,GAAA,GAAM,GAAG5C,SAAA,GAAYD,GAAA,YAAe+C,UAAA,4CAAsDf,SAAA,CAAUC,OAAO,EAAE;UAC7Ga,MAAA,GAAS;QACX;QAEA,MAAM;UAAEG;QAAK,CAAE,GAAG5D,kCAAA,CAAmCyC,YAAA,CAAaG,OAAO,EAAE;QAE3E,MAAMiB,cAAA,GACJtC,SAAA,IAAa,CAACqC,KAAA,IAAShC,cAAA,EAAgBI,MAAA,IAAUJ,cAAA,EAAgBI,MAAA,EAAQI,QAAA;QAE3E,IAAI,CAACyB,cAAA,IAAkBnB,WAAA,CAAYE,OAAO,IAAIY,GAAA,EAAK;UACjD,MAAMM,MAAA,GAAS,MAAM1C,MAAA,CAA2B;YAC9C2C,YAAA,EAAc;cACZC,oBAAA,EAAsB;YACxB;YACAC,MAAA,EAAQT,GAAA;YACRU,OAAA,EAAS;cACPC,iBAAA,EAAmB;cACnBC,qBAAA,EAAuB,CAACrD;YAC1B;YACAsD,0BAAA,EAA4B;YAC5BC,oBAAA,EAAsB;YACtBb,MAAA;YACAc,SAAA,EAAW;cACTC,OAAA,EAAS;YACX;YACAC,cAAA,EAAgB7C,cAAA,EAAgBI,MAAA,IAAU,CAACJ,cAAA,EAAgBI,MAAA,EAAQI;UACrE;UAEA,IAAI0B,MAAA,IAAUA,MAAA,EAAQY,GAAA,EAAKC,EAAA,IAAM,CAAC5D,4BAAA,EAA8B;YAC9DC,+BAAA,CAAgC;YAChCC,0BAAA,CAA4B2D,IAAA,IAASA,IAAA,GAAO;UAC9C;UAEA,MAAMC,OAAA,GAAU,IAAIvB,IAAA;UAEpB;UACAJ,YAAA,GAAe2B,OAAA,CAAQtB,OAAO;UAE9BJ,aAAA;QACF;MACF;IACF,GACA;MACE2B,YAAA,EAAcA,CAAA;QACZ3D,uBAAA,CAAwB;MAC1B;MACA4D,aAAA,EAAeA,CAAA;QACb5D,uBAAA,CAAwB;MAC1B;IACF;EAEJ;EAEA,MAAM6D,QAAA,GAAW9F,MAAA,CAAO;EACxB,MAAM+F,qBAAA,GAAwB/F,MAAA,CAAOL,oBAAA,CAAqB2D,kBAAA;EAE1D;EACAvD,SAAA,CAAU;IACR;;;IAGA,IAAI,CAAC+F,QAAA,CAASpC,OAAO,EAAE;MACrBoC,QAAA,CAASpC,OAAO,GAAG;MACnB;IACF;IAEA;;;;IAIA,MAAM;MAAEsC,SAAA,EAAWC,CAAC;MAAE,GAAGC;IAAA,CAAU,GAAGvG,oBAAA,CAAqB2D,kBAAA;IAC3D,MAAM;MAAE0C,SAAA,EAAWG,EAAE;MAAE,GAAGC;IAAA,CAAc,GAAGL,qBAAA,CAAsBrC,OAAO;IAExE,IAAIhE,MAAA,CAAOwG,QAAA,EAAUE,YAAA,GAAe;MAClC;IACF;IAEAL,qBAAA,CAAsBrC,OAAO,GAAGwC,QAAA;IAEhCrC,cAAA;EACF,GAAG,CAACP,kBAAA,CAAmB;EAEvB;;;EAGAvD,SAAA,CAAU;IACR,OAAO;MACLoE,qBAAA;IACF;EACF,GAAG,EAAE;EAEL,MAAMA,qBAAA,GAAwB5D,cAAA,CAAe;IAC3C,IAAIqD,kBAAA,CAAmBF,OAAO,EAAE;MAC9B2C,YAAA,CAAazC,kBAAA,CAAmBF,OAAO;IACzC;IAEAN,SAAA,CAAU;EACZ;EAEA,oBACEkD,KAAA,CAAC;IAAIC,SAAA,EAAWvF,SAAA;eACbgC,eAAA,IAAmB,CAAChB,OAAA,iBAAWwE,IAAA,CAACzF,kBAAA,OAChCsC,MAAA,IAAUZ,CAAA,CAAE,mBACZ,CAACY,MAAA,IAAUJ,OAAA,CAAQrB,cAAA,kBAClB4E,IAAA,CAAC3G,KAAA,CAAM4G,QAAQ;gBACZhE,CAAA,CAAE,wBAAwB;QACzBiE,QAAA,EAAU7F,eAAA,CAAgB;UAAE8F,IAAA,EAAM/E,cAAA;UAAgBY;QAAK;MACzD;;;AAKV","ignoreList":[]}

package/dist/elements/DocumentFields/index.scss

@@ -93,7 +93,7 @@
       }
 
       position: var(--sidebar-wrap-position, sticky);
-      top: var(--sidebar-wrap-top, 0);
+      top: var(--sidebar-wrap-top, var(--doc-controls-height));
       width: var(--sidebar-wrap-width, 33.33%);
       height: var(--sidebar-wrap-height, calc(100vh - var(--doc-controls-height)));
       min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));

package/dist/elements/ListControls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAiBnD,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8NpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAgBnD,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgOpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -9,7 +9,6 @@ import { Popup } from '../../elements/Popup/index.js';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { Dots } from '../../icons/Dots/index.js';
-import { SearchIcon } from '../../icons/Search/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { AnimateHeight } from '../AnimateHeight/index.js';
@@ -17,7 +16,7 @@ import { ColumnSelector } from '../ColumnSelector/index.js';
 import { GroupByBuilder } from '../GroupByBuilder/index.js';
 import { Pill } from '../Pill/index.js';
 import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js';
-import { SearchFilter } from '../SearchFilter/index.js';
+import { SearchBar } from '../SearchBar/index.js';
 import { WhereBuilder } from '../WhereBuilder/index.js';
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js';
 import './index.scss';
@@ -97,82 +96,74 @@ export const ListControls = props => {
       activePreset: activePreset,
       collectionSlug: collectionSlug,
       queryPresetPermissions: queryPresetPermissions
-    }), /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__wrap`,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__search`,
-        children: [/*#__PURE__*/_jsx(SearchIcon, {}), /*#__PURE__*/_jsx(SearchFilter, {
-          handleChange: handleSearchChange,
-          label: searchLabelTranslated.current,
-          searchQueryParam: query?.search
-        }, collectionSlug)]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__buttons`,
-        children: [!smallBreak && /*#__PURE__*/_jsx(React.Fragment, {
-          children: beforeActions && beforeActions
-        }), enableColumns && /*#__PURE__*/_jsx(Pill, {
-          "aria-controls": `${baseClass}-columns`,
-          "aria-expanded": visibleDrawer === 'columns',
-          className: `${baseClass}__toggle-columns`,
-          icon: /*#__PURE__*/_jsx(ChevronIcon, {
-            direction: visibleDrawer === 'columns' ? 'up' : 'down'
-          }),
-          id: "toggle-list-columns",
-          onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
-          pillStyle: "light",
-          size: "small",
-          children: t('general:columns')
-        }), enableFilters && /*#__PURE__*/_jsx(Pill, {
-          "aria-controls": `${baseClass}-where`,
-          "aria-expanded": visibleDrawer === 'where',
-          className: `${baseClass}__toggle-where`,
-          icon: /*#__PURE__*/_jsx(ChevronIcon, {
-            direction: visibleDrawer === 'where' ? 'up' : 'down'
-          }),
-          id: "toggle-list-filters",
-          onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
-          pillStyle: "light",
-          size: "small",
-          children: t('general:filters')
-        }), enableSort && /*#__PURE__*/_jsx(Pill, {
-          "aria-controls": `${baseClass}-sort`,
-          "aria-expanded": visibleDrawer === 'sort',
-          className: `${baseClass}__toggle-sort`,
-          icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
-          id: "toggle-list-sort",
-          onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
-          pillStyle: "light",
-          size: "small",
-          children: t('general:sort')
-        }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(Pill, {
-          "aria-controls": `${baseClass}-group-by`,
-          "aria-expanded": visibleDrawer === 'group-by',
-          className: `${baseClass}__toggle-group-by`,
-          icon: /*#__PURE__*/_jsx(ChevronIcon, {
-            direction: visibleDrawer === 'group-by' ? 'up' : 'down'
-          }),
-          id: "toggle-group-by",
-          onClick: () => setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined),
-          pillStyle: "light",
-          size: "small",
-          children: t('general:groupByLabel', {
-            label: ''
-          })
-        }), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && /*#__PURE__*/_jsx(Popup, {
-          button: /*#__PURE__*/_jsx(Dots, {
-            ariaLabel: t('general:moreOptions')
-          }),
-          className: `${baseClass}__popup`,
-          horizontalAlign: "right",
-          id: "list-menu",
-          size: "small",
-          verticalAlign: "bottom",
-          children: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
-            children: item
-          }, `list-menu-item-${i_0}`))
-        })]
-      })]
-    }), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
+    }), /*#__PURE__*/_jsx(SearchBar, {
+      Actions: [!smallBreak && /*#__PURE__*/_jsx(React.Fragment, {
+        children: beforeActions && beforeActions
+      }, "before-actions"), enableColumns && /*#__PURE__*/_jsx(Pill, {
+        "aria-controls": `${baseClass}-columns`,
+        "aria-expanded": visibleDrawer === 'columns',
+        className: `${baseClass}__toggle-columns`,
+        icon: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: visibleDrawer === 'columns' ? 'up' : 'down'
+        }),
+        id: "toggle-list-columns",
+        onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
+        pillStyle: "light",
+        size: "small",
+        children: t('general:columns')
+      }, "toggle-list-columns"), enableFilters && /*#__PURE__*/_jsx(Pill, {
+        "aria-controls": `${baseClass}-where`,
+        "aria-expanded": visibleDrawer === 'where',
+        className: `${baseClass}__toggle-where`,
+        icon: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: visibleDrawer === 'where' ? 'up' : 'down'
+        }),
+        id: "toggle-list-filters",
+        onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
+        pillStyle: "light",
+        size: "small",
+        children: t('general:filters')
+      }, "toggle-list-filters"), enableSort && /*#__PURE__*/_jsx(Pill, {
+        "aria-controls": `${baseClass}-sort`,
+        "aria-expanded": visibleDrawer === 'sort',
+        className: `${baseClass}__toggle-sort`,
+        icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
+        id: "toggle-list-sort",
+        onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
+        pillStyle: "light",
+        size: "small",
+        children: t('general:sort')
+      }, "toggle-list-sort"), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(Pill, {
+        "aria-controls": `${baseClass}-group-by`,
+        "aria-expanded": visibleDrawer === 'group-by',
+        className: `${baseClass}__toggle-group-by`,
+        icon: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: visibleDrawer === 'group-by' ? 'up' : 'down'
+        }),
+        id: "toggle-group-by",
+        onClick: () => setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined),
+        pillStyle: "light",
+        size: "small",
+        children: t('general:groupByLabel', {
+          label: ''
+        })
+      }, "toggle-group-by"), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && /*#__PURE__*/_jsx(Popup, {
+        button: /*#__PURE__*/_jsx(Dots, {
+          ariaLabel: t('general:moreOptions')
+        }),
+        className: `${baseClass}__popup`,
+        horizontalAlign: "right",
+        id: "list-menu",
+        size: "small",
+        verticalAlign: "bottom",
+        children: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
+          children: item
+        }, `list-menu-item-${i_0}`))
+      }, "list-menu")].filter(Boolean),
+      label: searchLabelTranslated.current,
+      onSearchChange: handleSearchChange,
+      searchQueryParam: query?.search
+    }, collectionSlug), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
       className: `${baseClass}__columns`,
       height: visibleDrawer === 'columns' ? 'auto' : 0,
       id: `${baseClass}-columns`,

package/dist/elements/ListControls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","useUseTitleField","ChevronIcon","Dots","SearchIcon","useListQuery","useTranslation","AnimateHeight","ColumnSelector","GroupByBuilder","Pill","QueryPresetBar","SearchFilter","WhereBuilder","getTextFieldsToBeSearched","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","enableFilters","enableSort","listMenuItems","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","handleSearchChange","query","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","_jsxs","className","enableQueryPresets","_jsx","handleChange","searchQueryParam","search","icon","direction","id","onClick","pillStyle","size","groupBy","Array","isArray","button","ariaLabel","horizontalAlign","verticalAlign","map","item","height","slug","collectionPluralLabel","labels","plural"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup } from '../../elements/Popup/index.js'\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { GroupByBuilder } from '../GroupByBuilder/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    listMenuItems,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField &&\n          (typeof titleField.label === 'string' || typeof titleField.label === 'object')\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n    i18n,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'group-by' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n        <QueryPresetBar\n          activePreset={activePreset}\n          collectionSlug={collectionSlug}\n          queryPresetPermissions={queryPresetPermissions}\n        />\n      )}\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__search`}>\n          <SearchIcon />\n          <SearchFilter\n            handleChange={handleSearchChange}\n            key={collectionSlug}\n            label={searchLabelTranslated.current}\n            searchQueryParam={query?.search}\n          />\n        </div>\n        <div className={`${baseClass}__buttons`}>\n          {!smallBreak && <React.Fragment>{beforeActions && beforeActions}</React.Fragment>}\n          {enableColumns && (\n            <Pill\n              aria-controls={`${baseClass}-columns`}\n              aria-expanded={visibleDrawer === 'columns'}\n              className={`${baseClass}__toggle-columns`}\n              icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\n              id=\"toggle-list-columns\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:columns')}\n            </Pill>\n          )}\n          {enableFilters && (\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where`}\n              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\n              id=\"toggle-list-filters\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:filters')}\n            </Pill>\n          )}\n          {enableSort && (\n            <Pill\n              aria-controls={`${baseClass}-sort`}\n              aria-expanded={visibleDrawer === 'sort'}\n              className={`${baseClass}__toggle-sort`}\n              icon={<ChevronIcon />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:sort')}\n            </Pill>\n          )}\n          {collectionConfig.admin.groupBy && (\n            <Pill\n              aria-controls={`${baseClass}-group-by`}\n              aria-expanded={visibleDrawer === 'group-by'}\n              className={`${baseClass}__toggle-group-by`}\n              icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'} />}\n              id=\"toggle-group-by\"\n              onClick={() =>\n                setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)\n              }\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:groupByLabel', {\n                label: '',\n              })}\n            </Pill>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            >\n              {listMenuItems.map((item, i) => (\n                <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n              ))}\n            </Popup>\n          )}\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fields={collectionConfig?.fields}\n          renderedFilters={renderedFilters}\n          resolvedFilterOptions={resolvedFilterOptions}\n        />\n      </AnimateHeight>\n      {collectionConfig.admin.groupBy && (\n        <AnimateHeight\n          className={`${baseClass}__group-by`}\n          height={visibleDrawer === 'group-by' ? 'auto' : 0}\n          id={`${baseClass}-group-by`}\n        >\n          <GroupByBuilder collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","useUseTitleField","ChevronIcon","Dots","useListQuery","useTranslation","AnimateHeight","ColumnSelector","GroupByBuilder","Pill","QueryPresetBar","SearchBar","WhereBuilder","getTextFieldsToBeSearched","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","enableFilters","enableSort","listMenuItems","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","handleSearchChange","query","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","_jsxs","className","enableQueryPresets","_jsx","Actions","icon","direction","id","onClick","pillStyle","size","groupBy","Array","isArray","button","ariaLabel","horizontalAlign","verticalAlign","map","item","filter","onSearchChange","searchQueryParam","search","height","slug","collectionPluralLabel","labels","plural"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup } from '../../elements/Popup/index.js'\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { GroupByBuilder } from '../GroupByBuilder/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { SearchBar } from '../SearchBar/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    listMenuItems,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField &&\n          (typeof titleField.label === 'string' || typeof titleField.label === 'object')\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n    i18n,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'group-by' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n        <QueryPresetBar\n          activePreset={activePreset}\n          collectionSlug={collectionSlug}\n          queryPresetPermissions={queryPresetPermissions}\n        />\n      )}\n      <SearchBar\n        Actions={[\n          !smallBreak && (\n            <React.Fragment key=\"before-actions\">{beforeActions && beforeActions}</React.Fragment>\n          ),\n          enableColumns && (\n            <Pill\n              aria-controls={`${baseClass}-columns`}\n              aria-expanded={visibleDrawer === 'columns'}\n              className={`${baseClass}__toggle-columns`}\n              icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\n              id=\"toggle-list-columns\"\n              key=\"toggle-list-columns\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:columns')}\n            </Pill>\n          ),\n          enableFilters && (\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where`}\n              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\n              id=\"toggle-list-filters\"\n              key=\"toggle-list-filters\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:filters')}\n            </Pill>\n          ),\n          enableSort && (\n            <Pill\n              aria-controls={`${baseClass}-sort`}\n              aria-expanded={visibleDrawer === 'sort'}\n              className={`${baseClass}__toggle-sort`}\n              icon={<ChevronIcon />}\n              id=\"toggle-list-sort\"\n              key=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:sort')}\n            </Pill>\n          ),\n          collectionConfig.admin.groupBy && (\n            <Pill\n              aria-controls={`${baseClass}-group-by`}\n              aria-expanded={visibleDrawer === 'group-by'}\n              className={`${baseClass}__toggle-group-by`}\n              icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'} />}\n              id=\"toggle-group-by\"\n              key=\"toggle-group-by\"\n              onClick={() =>\n                setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)\n              }\n              pillStyle=\"light\"\n              size=\"small\"\n            >\n              {t('general:groupByLabel', {\n                label: '',\n              })}\n            </Pill>\n          ),\n          listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              key=\"list-menu\"\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            >\n              {listMenuItems.map((item, i) => (\n                <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n              ))}\n            </Popup>\n          ),\n        ].filter(Boolean)}\n        key={collectionSlug}\n        label={searchLabelTranslated.current}\n        onSearchChange={handleSearchChange}\n        searchQueryParam={query?.search}\n      />\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fields={collectionConfig?.fields}\n          renderedFilters={renderedFilters}\n          resolvedFilterOptions={resolvedFilterOptions}\n        />\n      </AnimateHeight>\n      {collectionConfig.admin.groupBy && (\n        <AnimateHeight\n          className={`${baseClass}__group-by`}\n          height={visibleDrawer === 'group-by' ? 'auto' : 0}\n          id={`${baseClass}-group-by`}\n        >\n          <GroupByBuilder collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/index.scss

@@ -6,101 +6,21 @@
     flex-direction: column;
     gap: 2px;
 
-    &__wrap {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: base(0.5);
-      background-color: var(--theme-elevation-50);
-      border-radius: var(--style-radius-m);
-    }
-
-    &__search {
-      display: flex;
-      background-color: var(--theme-elevation-50);
-      border-radius: var(--style-radius-m);
-      gap: base(0.4);
-      flex-grow: 1;
-      position: relative;
-
-      .icon {
-        flex-shrink: 0;
-      }
-    }
-
-    .icon--search {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-      inset-inline-start: base(0.4);
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .search-filter {
-      flex-grow: 1;
-
-      input {
-        height: 46px;
-        padding-left: 36px;
-        margin: 0;
-      }
-    }
-
-    &__custom-control {
-      padding: 0;
-      border-radius: 0;
-    }
-
-    &__buttons {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) / 4);
-      padding-right: 10px;
-    }
-
     .pill-selector,
     .where-builder,
     .sort-complex,
     .group-by-builder {
-      margin-top: base(1);
+      margin-top: calc(var(--base) / 2);
     }
 
     @include small-break {
-      &__wrap {
-        flex-direction: column;
-        align-items: stretch;
-        background-color: transparent;
-        border-radius: 0;
-      }
-
-      .search-filter {
-        width: 100%;
-
-        input {
-          height: 40px;
-          padding: 0 base(1.5);
-        }
-      }
-
-      &__buttons {
-        padding-right: 0;
-        margin: 0;
-        width: 100%;
-
+      .search-bar__actions {
         .pill {
           padding: base(0.2) base(0.2) base(0.2) base(0.4);
           justify-content: space-between;
         }
       }
 
-      .pill-selector,
-      .where-builder,
-      .sort-complex {
-        margin-top: calc(var(--base) / 2);
-      }
-
       &__toggle-columns,
       &__toggle-where,
       &__toggle-sort,

package/dist/elements/LivePreview/Window/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+HrD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAoB,MAAM,OAAO,CAAA;AASxC,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0HrD,CAAA"}