@payloadcms/ui 3.0.0-canary.93a7bbd → 3.0.0-canary.95569e4

package/dist/elements/Autosave/index.js

@@ -107,7 +107,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
                                     return res.json();
                                 }
                             }).then((json)=>{
-                                if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json.errors) {
+                                if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {
                                     if (Array.isArray(json.errors)) {
                                         const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err)=>{
                                             const newFieldErrs = [];
@@ -170,7 +170,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
             if (autosaveTimeout) clearTimeout(autosaveTimeout);
             if (abortController.signal) {
                 try {
-                    abortController.abort();
+                    abortController.abort('Autosave closed early.');
                 } catch (error) {
                 // swallow error
                 }

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

@@ -1 +1 @@
-{"version":3,"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 { versionDefaults } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/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/formatDate.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.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> = ({\n  id,\n  collection,\n  global: globalDoc,\n  publishedDocUpdatedAt,\n}) => {\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const { docConfig, getVersions, versions } = useDocumentInfo()\n  const { reportUpdate } = useDocumentEvents()\n  const { dispatchFields, setModified, setSubmitted } = useForm()\n  const submitted = useFormSubmitted()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const formModified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = versionDefaults.autosaveInterval\n  if (versionsConfig.drafts && versionsConfig.drafts.autosave)\n    interval = versionsConfig.drafts.autosave.interval\n\n  const [saving, setSaving] = useState(false)\n  const [lastSaved, setLastSaved] = useState<number>()\n  const debouncedFields = useDebounce(fields, interval)\n  const modified = useDebounce(formModified, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n  const debouncedRef = useRef(debouncedFields)\n\n  debouncedRef.current = debouncedFields\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  fieldRef.current = fields\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  // When debounced fields change, autosave\n  useEffect(() => {\n    const abortController = new AbortController()\n    let autosaveTimeout = 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 autosave = () => {\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        if (url) {\n          if (modifiedRef.current) {\n            const { data, valid } = {\n              ...reduceFieldsToValuesWithValidation(fieldRef.current, true),\n            }\n            data._status = 'draft'\n            const skipSubmission =\n              submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n            if (!skipSubmission) {\n              void fetch(url, {\n                body: JSON.stringify(data),\n                credentials: 'include',\n                headers: {\n                  'Accept-Language': i18n.language,\n                  'Content-Type': 'application/json',\n                },\n                method,\n                signal: abortController.signal,\n              })\n                .then((res) => {\n                  const newDate = new Date()\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                  if (res.status === 200) {\n                    setLastSaved(newDate.getTime())\n\n                    reportUpdate({\n                      id,\n                      entitySlug,\n                      updatedAt: newDate.toISOString(),\n                    })\n                    setModified(false)\n                    void getVersions()\n                  } else {\n                    return res.json()\n                  }\n                })\n                .then((json) => {\n                  if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json.errors) {\n                    if (Array.isArray(json.errors)) {\n                      const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n                        ([fieldErrs, nonFieldErrs], err) => {\n                          const newFieldErrs = []\n                          const newNonFieldErrs = []\n\n                          if (err?.message) {\n                            newNonFieldErrs.push(err)\n                          }\n\n                          if (Array.isArray(err?.data)) {\n                            err.data.forEach((dataError) => {\n                              if (dataError?.field) {\n                                newFieldErrs.push(dataError)\n                              } else {\n                                newNonFieldErrs.push(dataError)\n                              }\n                            })\n                          }\n\n                          return [\n                            [...fieldErrs, ...newFieldErrs],\n                            [...nonFieldErrs, ...newNonFieldErrs],\n                          ]\n                        },\n                        [[], []],\n                      )\n\n                      dispatchFields({\n                        type: 'ADD_SERVER_ERRORS',\n                        errors: fieldErrors,\n                      })\n\n                      nonFieldErrors.forEach((err) => {\n                        toast.error(err.message || i18n.t('error:unknown'))\n                      })\n\n                      setSubmitted(true)\n                      setSaving(false)\n                      return\n                    }\n                  }\n                })\n                .then(() => {\n                  // If request was faster than minimum animation time, animate the difference\n                  if (endTimestamp - startTimestamp < minimumAnimationTime) {\n                    autosaveTimeout = setTimeout(\n                      () => {\n                        setSaving(false)\n                      },\n                      minimumAnimationTime - (endTimestamp - startTimestamp),\n                    )\n                  } else {\n                    setSaving(false)\n                  }\n                })\n            }\n          }\n        }\n      }\n    }\n\n    void autosave()\n\n    return () => {\n      if (autosaveTimeout) clearTimeout(autosaveTimeout)\n      if (abortController.signal) {\n        try {\n          abortController.abort()\n        } catch (error) {\n          // swallow error\n        }\n      }\n      setSaving(false)\n    }\n  }, [\n    api,\n    collection,\n    dispatchFields,\n    getVersions,\n    globalDoc,\n    i18n,\n    id,\n    interval,\n    modified,\n    reportUpdate,\n    serverURL,\n    setSubmitted,\n    setModified,\n    versionsConfig?.drafts,\n    debouncedFields,\n    submitted,\n  ])\n\n  useEffect(() => {\n    if (versions?.docs?.[0]) {\n      setLastSaved(new Date(versions.docs[0].updatedAt).getTime())\n    } else if (publishedDocUpdatedAt) {\n      setLastSaved(new Date(publishedDocUpdatedAt).getTime())\n    }\n  }, [publishedDocUpdatedAt, versions])\n\n  return (\n    <div className={baseClass}>\n      {saving && t('general:saving')}\n      {!saving && Boolean(lastSaved) && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastSaved, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["versionDefaults","React","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","config","routes","api","serverURL","docConfig","getVersions","versions","reportUpdate","dispatchFields","setModified","setSubmitted","submitted","versionsConfig","fields","formModified","code","locale","i18n","t","interval","autosaveInterval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","modified","fieldRef","modifiedRef","localeRef","debouncedRef","current","abortController","AbortController","autosaveTimeout","undefined","startTimestamp","endTimestamp","Date","getTime","url","method","entitySlug","slug","data","valid","_status","skipSubmission","validate","fetch","body","JSON","stringify","credentials","headers","language","signal","then","res","newDate","status","updatedAt","toISOString","json","errors","Array","isArray","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","error","setTimeout","clearTimeout","abort","docs","div","className","Boolean","Fragment","distance","date"],"mappings":"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"}
+{"version":3,"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 { versionDefaults } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/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/formatDate.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.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> = ({\n  id,\n  collection,\n  global: globalDoc,\n  publishedDocUpdatedAt,\n}) => {\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const { docConfig, getVersions, versions } = useDocumentInfo()\n  const { reportUpdate } = useDocumentEvents()\n  const { dispatchFields, setModified, setSubmitted } = useForm()\n  const submitted = useFormSubmitted()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const formModified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = versionDefaults.autosaveInterval\n  if (versionsConfig.drafts && versionsConfig.drafts.autosave)\n    interval = versionsConfig.drafts.autosave.interval\n\n  const [saving, setSaving] = useState(false)\n  const [lastSaved, setLastSaved] = useState<number>()\n  const debouncedFields = useDebounce(fields, interval)\n  const modified = useDebounce(formModified, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n  const debouncedRef = useRef(debouncedFields)\n\n  debouncedRef.current = debouncedFields\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  fieldRef.current = fields\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  // When debounced fields change, autosave\n  useEffect(() => {\n    const abortController = new AbortController()\n    let autosaveTimeout = 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 autosave = () => {\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        if (url) {\n          if (modifiedRef.current) {\n            const { data, valid } = {\n              ...reduceFieldsToValuesWithValidation(fieldRef.current, true),\n            }\n            data._status = 'draft'\n            const skipSubmission =\n              submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n            if (!skipSubmission) {\n              void fetch(url, {\n                body: JSON.stringify(data),\n                credentials: 'include',\n                headers: {\n                  'Accept-Language': i18n.language,\n                  'Content-Type': 'application/json',\n                },\n                method,\n                signal: abortController.signal,\n              })\n                .then((res) => {\n                  const newDate = new Date()\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                  if (res.status === 200) {\n                    setLastSaved(newDate.getTime())\n\n                    reportUpdate({\n                      id,\n                      entitySlug,\n                      updatedAt: newDate.toISOString(),\n                    })\n                    setModified(false)\n                    void getVersions()\n                  } else {\n                    return res.json()\n                  }\n                })\n                .then((json) => {\n                  if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {\n                    if (Array.isArray(json.errors)) {\n                      const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n                        ([fieldErrs, nonFieldErrs], err) => {\n                          const newFieldErrs = []\n                          const newNonFieldErrs = []\n\n                          if (err?.message) {\n                            newNonFieldErrs.push(err)\n                          }\n\n                          if (Array.isArray(err?.data)) {\n                            err.data.forEach((dataError) => {\n                              if (dataError?.field) {\n                                newFieldErrs.push(dataError)\n                              } else {\n                                newNonFieldErrs.push(dataError)\n                              }\n                            })\n                          }\n\n                          return [\n                            [...fieldErrs, ...newFieldErrs],\n                            [...nonFieldErrs, ...newNonFieldErrs],\n                          ]\n                        },\n                        [[], []],\n                      )\n\n                      dispatchFields({\n                        type: 'ADD_SERVER_ERRORS',\n                        errors: fieldErrors,\n                      })\n\n                      nonFieldErrors.forEach((err) => {\n                        toast.error(err.message || i18n.t('error:unknown'))\n                      })\n\n                      setSubmitted(true)\n                      setSaving(false)\n                      return\n                    }\n                  }\n                })\n                .then(() => {\n                  // If request was faster than minimum animation time, animate the difference\n                  if (endTimestamp - startTimestamp < minimumAnimationTime) {\n                    autosaveTimeout = setTimeout(\n                      () => {\n                        setSaving(false)\n                      },\n                      minimumAnimationTime - (endTimestamp - startTimestamp),\n                    )\n                  } else {\n                    setSaving(false)\n                  }\n                })\n            }\n          }\n        }\n      }\n    }\n\n    void autosave()\n\n    return () => {\n      if (autosaveTimeout) clearTimeout(autosaveTimeout)\n      if (abortController.signal) {\n        try {\n          abortController.abort('Autosave closed early.')\n        } catch (error) {\n          // swallow error\n        }\n      }\n      setSaving(false)\n    }\n  }, [\n    api,\n    collection,\n    dispatchFields,\n    getVersions,\n    globalDoc,\n    i18n,\n    id,\n    interval,\n    modified,\n    reportUpdate,\n    serverURL,\n    setSubmitted,\n    setModified,\n    versionsConfig?.drafts,\n    debouncedFields,\n    submitted,\n  ])\n\n  useEffect(() => {\n    if (versions?.docs?.[0]) {\n      setLastSaved(new Date(versions.docs[0].updatedAt).getTime())\n    } else if (publishedDocUpdatedAt) {\n      setLastSaved(new Date(publishedDocUpdatedAt).getTime())\n    }\n  }, [publishedDocUpdatedAt, versions])\n\n  return (\n    <div className={baseClass}>\n      {saving && t('general:saving')}\n      {!saving && Boolean(lastSaved) && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastSaved, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["versionDefaults","React","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","config","routes","api","serverURL","docConfig","getVersions","versions","reportUpdate","dispatchFields","setModified","setSubmitted","submitted","versionsConfig","fields","formModified","code","locale","i18n","t","interval","autosaveInterval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","modified","fieldRef","modifiedRef","localeRef","debouncedRef","current","abortController","AbortController","autosaveTimeout","undefined","startTimestamp","endTimestamp","Date","getTime","url","method","entitySlug","slug","data","valid","_status","skipSubmission","validate","fetch","body","JSON","stringify","credentials","headers","language","signal","then","res","newDate","status","updatedAt","toISOString","json","errors","Array","isArray","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","error","setTimeout","clearTimeout","abort","docs","div","className","Boolean","Fragment","distance","date"],"mappings":"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"}

package/dist/elements/Dropzone/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import './index.scss';
 export type Props = {
-    className?: string;
-    mimeTypes?: string[];
-    onChange: (e: FileList) => void;
-    onPasteUrlClick?: () => void;
+    readonly className?: string;
+    readonly mimeTypes?: string[];
+    readonly multipleFiles?: boolean;
+    readonly onChange: (e: FileList) => void;
+    readonly onPasteUrlClick?: () => void;
 };
 export declare const Dropzone: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiHpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2HpC,CAAA"}

package/dist/elements/Dropzone/index.js

@@ -9,7 +9,7 @@ const handleDragOver = (e)=>{
     e.stopPropagation();
 };
 const baseClass = 'dropzone';
-export const Dropzone = ({ className, mimeTypes, onChange, onPasteUrlClick })=>{
+export const Dropzone = ({ className, mimeTypes, multipleFiles, onChange, onPasteUrlClick })=>{
     const dropRef = React.useRef(null);
     const [dragging, setDragging] = React.useState(false);
     const inputRef = React.useRef(null);
@@ -93,7 +93,7 @@ export const Dropzone = ({ className, mimeTypes, onChange, onPasteUrlClick })=>{
                 size: "medium",
                 children: t('upload:selectFile')
             }),
-            /*#__PURE__*/ _jsx(Button, {
+            typeof onPasteUrlClick === 'function' && /*#__PURE__*/ _jsx(Button, {
                 buttonStyle: "secondary",
                 className: `${baseClass}__file-button`,
                 onClick: onPasteUrlClick,
@@ -102,7 +102,9 @@ export const Dropzone = ({ className, mimeTypes, onChange, onPasteUrlClick })=>{
             }),
             /*#__PURE__*/ _jsx("input", {
                 accept: mimeTypes?.join(','),
+                "aria-hidden": "true",
                 className: `${baseClass}__hidden-input`,
+                multiple: multipleFiles,
                 onChange: handleFileSelection,
                 ref: inputRef,
                 type: "file"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  className?: string\n  mimeTypes?: string[]\n  onChange: (e: FileList) => void\n  onPasteUrlClick?: () => void\n}\n\nexport const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPasteUrlClick }) => {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const inputRef = React.useRef(null)\n\n  const { t } = useTranslation()\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        onChange(e.clipboardData.files)\n      }\n    },\n    [onChange],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        onChange(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [onChange],\n  )\n\n  const handleFileSelection = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        onChange(e.target.files)\n      }\n    },\n    [onChange],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={() => {\n          inputRef.current.click()\n        }}\n        size=\"medium\"\n      >\n        {t('upload:selectFile')}\n      </Button>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={onPasteUrlClick}\n        size=\"medium\"\n      >\n        {t('upload:pasteURL')}\n      </Button>\n      <input\n        accept={mimeTypes?.join(',')}\n        className={`${baseClass}__hidden-input`}\n        onChange={handleFileSelection}\n        ref={inputRef}\n        type=\"file\"\n      />\n\n      <p className={`${baseClass}__label`}>\n        {t('general:or')} {t('upload:dragAndDrop')}\n      </p>\n    </div>\n  )\n}\n"],"names":["React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","className","mimeTypes","onChange","onPasteUrlClick","dropRef","useRef","dragging","setDragging","useState","inputRef","t","handlePaste","useCallback","clipboardData","files","length","handleDragEnter","handleDragLeave","handleDrop","dataTransfer","clearData","handleFileSelection","target","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","ref","buttonStyle","onClick","click","size","input","accept","type","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n  readonly className?: string\n  readonly mimeTypes?: string[]\n  readonly multipleFiles?: boolean\n  readonly onChange: (e: FileList) => void\n  readonly onPasteUrlClick?: () => void\n}\n\nexport const Dropzone: React.FC<Props> = ({\n  className,\n  mimeTypes,\n  multipleFiles,\n  onChange,\n  onPasteUrlClick,\n}) => {\n  const dropRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const inputRef = React.useRef(null)\n\n  const { t } = useTranslation()\n\n  const handlePaste = React.useCallback(\n    (e: ClipboardEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n        onChange(e.clipboardData.files)\n      }\n    },\n    [onChange],\n  )\n\n  const handleDragEnter = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(true)\n  }, [])\n\n  const handleDragLeave = React.useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setDragging(false)\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setDragging(false)\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        onChange(e.dataTransfer.files)\n        setDragging(false)\n\n        e.dataTransfer.clearData()\n      }\n    },\n    [onChange],\n  )\n\n  const handleFileSelection = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        onChange(e.target.files)\n      }\n    },\n    [onChange],\n  )\n\n  React.useEffect(() => {\n    const div = dropRef.current\n\n    if (div) {\n      div.addEventListener('dragenter', handleDragEnter)\n      div.addEventListener('dragleave', handleDragLeave)\n      div.addEventListener('dragover', handleDragOver)\n      div.addEventListener('drop', handleDrop)\n      div.addEventListener('paste', handlePaste)\n\n      return () => {\n        div.removeEventListener('dragenter', handleDragEnter)\n        div.removeEventListener('dragleave', handleDragLeave)\n        div.removeEventListener('dragover', handleDragOver)\n        div.removeEventListener('drop', handleDrop)\n        div.removeEventListener('paste', handlePaste)\n      }\n    }\n\n    return () => null\n  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} ref={dropRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__file-button`}\n        onClick={() => {\n          inputRef.current.click()\n        }}\n        size=\"medium\"\n      >\n        {t('upload:selectFile')}\n      </Button>\n      {typeof onPasteUrlClick === 'function' && (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__file-button`}\n          onClick={onPasteUrlClick}\n          size=\"medium\"\n        >\n          {t('upload:pasteURL')}\n        </Button>\n      )}\n      <input\n        accept={mimeTypes?.join(',')}\n        aria-hidden=\"true\"\n        className={`${baseClass}__hidden-input`}\n        multiple={multipleFiles}\n        onChange={handleFileSelection}\n        ref={inputRef}\n        type=\"file\"\n      />\n\n      <p className={`${baseClass}__label`}>\n        {t('general:or')} {t('upload:dragAndDrop')}\n      </p>\n    </div>\n  )\n}\n"],"names":["React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","className","mimeTypes","multipleFiles","onChange","onPasteUrlClick","dropRef","useRef","dragging","setDragging","useState","inputRef","t","handlePaste","useCallback","clipboardData","files","length","handleDragEnter","handleDragLeave","handleDrop","dataTransfer","clearData","handleFileSelection","target","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","ref","buttonStyle","onClick","click","size","input","accept","aria-hidden","multiple","type","p"],"mappings":"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"}

package/dist/elements/Hamburger/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './index.scss';
 export declare const Hamburger: React.FC<{
-    closeIcon?: 'collapse' | 'x';
-    isActive?: boolean;
+    readonly closeIcon?: 'collapse' | 'x';
+    readonly isActive?: boolean;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CA2BA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CA2BA,CAAA"}

package/dist/elements/Hamburger/index.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseMenuIcon, MenuIcon } from '@payloadcms/ui';
 import React from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CloseMenuIcon } from '../../icons/CloseMenu/index.js';
+import { MenuIcon } from '../../icons/Menu/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'hamburger';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport { CloseMenuIcon, MenuIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  closeIcon?: 'collapse' | 'x'\n  isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      {!isActive && (\n        <div\n          aria-label={t('general:open')}\n          className={`${baseClass}__open-icon`}\n          title={t('general:open')}\n        >\n          <MenuIcon />\n        </div>\n      )}\n      {isActive && (\n        <div\n          aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n          className={`${baseClass}__close-icon`}\n          title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n        >\n          {closeIcon === 'x' && <CloseMenuIcon />}\n          {closeIcon === 'collapse' && <ChevronIcon direction=\"left\" />}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["CloseMenuIcon","MenuIcon","React","ChevronIcon","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","aria-label","title","direction"],"mappings":"AAAA;;AACA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,iBAAgB;AACxD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,MAACI;QAAIC,WAAWP;;YACb,CAACK,0BACA,KAACC;gBACCE,cAAYL,EAAE;gBACdI,WAAW,CAAC,EAAEP,UAAU,WAAW,CAAC;gBACpCS,OAAON,EAAE;0BAET,cAAA,KAACP;;YAGJS,0BACC,MAACC;gBACCE,cAAYJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;gBACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;gBACrCS,OAAOL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;;oBAE3DC,cAAc,qBAAO,KAACT;oBACtBS,cAAc,4BAAc,KAACN;wBAAYY,WAAU;;;;;;AAK9D,EAAC"}
+{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CloseMenuIcon } from '../../icons/CloseMenu/index.js'\nimport { MenuIcon } from '../../icons/Menu/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  readonly closeIcon?: 'collapse' | 'x'\n  readonly isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      {!isActive && (\n        <div\n          aria-label={t('general:open')}\n          className={`${baseClass}__open-icon`}\n          title={t('general:open')}\n        >\n          <MenuIcon />\n        </div>\n      )}\n      {isActive && (\n        <div\n          aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n          className={`${baseClass}__close-icon`}\n          title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n        >\n          {closeIcon === 'x' && <CloseMenuIcon />}\n          {closeIcon === 'collapse' && <ChevronIcon direction=\"left\" />}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","CloseMenuIcon","MenuIcon","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","aria-label","title","direction"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,MAACI;QAAIC,WAAWP;;YACb,CAACK,0BACA,KAACC;gBACCE,cAAYL,EAAE;gBACdI,WAAW,CAAC,EAAEP,UAAU,WAAW,CAAC;gBACpCS,OAAON,EAAE;0BAET,cAAA,KAACL;;YAGJO,0BACC,MAACC;gBACCE,cAAYJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;gBACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;gBACrCS,OAAOL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;;oBAE3DC,cAAc,qBAAO,KAACP;oBACtBO,cAAc,4BAAc,KAACR;wBAAYc,WAAU;;;;;;AAK9D,EAAC"}

package/dist/elements/IDLabel/index.scss

@@ -1,11 +1,12 @@
 @import '../../scss/styles';
 
 .id-label {
-  font-size: base(0.75);
+  font-size: base(0.8);
+  line-height: base(1.2);
   font-weight: normal;
   color: var(--theme-elevation-600);
   background: var(--theme-elevation-100);
-  padding: 0 base(0.6);
+  padding: base(0.2) base(0.4);
   border-radius: $style-radius-m;
   display: inline-flex;
 }

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

@@ -2,13 +2,13 @@ import type { ClientCollectionConfig, ClientField, Where } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ListControlsProps = {
-    collectionConfig: ClientCollectionConfig;
-    enableColumns?: boolean;
-    enableSort?: boolean;
-    fields: ClientField[];
-    handleSearchChange?: (search: string) => void;
-    handleSortChange?: (sort: string) => void;
-    handleWhereChange?: (where: Where) => void;
+    readonly collectionConfig: ClientCollectionConfig;
+    readonly enableColumns?: boolean;
+    readonly enableSort?: boolean;
+    readonly fields: ClientField[];
+    readonly handleSearchChange?: (search: string) => void;
+    readonly handleSortChange?: (sort: string) => void;
+    readonly handleWhereChange?: (where: Where) => void;
 };
 /**
  * The ListControls component is used to render the controls (search, filter, where)

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":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAwB1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAuB1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -5,10 +5,10 @@ import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useRef, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
-import { useListInfo } from '@payloadcms/ui';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { SearchIcon } from '../../icons/Search/index.js';
+import { useListInfo } from '../../providers/ListInfo/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientField, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useListInfo } from '@payloadcms/ui'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fields: ClientField[]\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\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 { collectionConfig, enableColumns = true, enableSort = false, fields } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { collectionSlug } = useListInfo()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fields)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n  const [search, setSearch] = useState(\n    typeof searchParams?.search === 'string' ? searchParams?.search : '',\n  )\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField && typeof titleField.label === 'string'\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    fields,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.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      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          initialParams={searchParams}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n          setValue={setSearch}\n          value={search}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fields={fields} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\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={fields}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useListInfo","useUseTitleField","ChevronIcon","SearchIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fields","handleSearchChange","collectionSlug","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","search","setSearch","searchLabel","label","name","listSearchableFields","admin","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","div","className","fieldName","handleChange","initialParams","setValue","value","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientField, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListInfo } from '../../providers/ListInfo/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly enableColumns?: boolean\n  readonly enableSort?: boolean\n  readonly fields: ClientField[]\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n}\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 { collectionConfig, enableColumns = true, enableSort = false, fields } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { collectionSlug } = useListInfo()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fields)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n  const [search, setSearch] = useState(\n    typeof searchParams?.search === 'string' ? searchParams?.search : '',\n  )\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField && typeof titleField.label === 'string'\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    fields,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.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      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          initialParams={searchParams}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n          setValue={setSearch}\n          value={search}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fields={fields} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\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={fields}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","SearchIcon","useListInfo","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fields","handleSearchChange","collectionSlug","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","search","setSearch","searchLabel","label","name","listSearchableFields","admin","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","div","className","fieldName","handleChange","initialParams","setValue","value","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}

package/dist/elements/Nav/context.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 type NavContextType = {
+    hydrated: boolean;
     navOpen: boolean;
     navRef: React.RefObject<HTMLDivElement | null>;
     setNavOpen: (value: boolean) => void;
+    shouldAnimate: boolean;
 };
 export declare const NavContext: React.Context<NavContextType>;
 export declare const useNav: () => NavContextType;
 export declare const NavProvider: React.FC<{
     children: React.ReactNode;
+    initialIsOpen?: boolean;
 }>;
 export {};
 //# sourceMappingURL=context.d.ts.map

package/dist/elements/Nav/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,UAAU,+BAIrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAAqC,CAAA;AAYxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA4DA,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,UAAU,+BAMrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAAqC,CAAA;AAYxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAsEA,CAAA"}

package/dist/elements/Nav/context.js

@@ -5,9 +5,11 @@ import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'bo
 import React, { useEffect, useRef } from 'react';
 import { usePreferences } from '../../providers/Preferences/index.js';
 export const NavContext = /*#__PURE__*/ React.createContext({
+    hydrated: false,
     navOpen: true,
     navRef: null,
-    setNavOpen: ()=>{}
+    setNavOpen: ()=>{},
+    shouldAnimate: false
 });
 export const useNav = ()=>React.useContext(NavContext);
 const getNavPreference = async (getPreference)=>{
@@ -19,7 +21,7 @@ const getNavPreference = async (getPreference)=>{
         return true;
     }
 };
-export const NavProvider = ({ children })=>{
+export const NavProvider = ({ children, initialIsOpen })=>{
     const { breakpoints: { l: largeBreak, m: midBreak, s: smallBreak } } = useWindowInfo();
     const { getPreference } = usePreferences();
     const navRef = useRef(null);
@@ -27,7 +29,9 @@ export const NavProvider = ({ children })=>{
     // this is because getting the preference is async
     // so instead of closing it after the preference is loaded
     // we will open it after the preference is loaded
-    const [navOpen, setNavOpen] = React.useState(false);
+    const [navOpen, setNavOpen] = React.useState(initialIsOpen);
+    const [shouldAnimate, setShouldAnimate] = React.useState(false);
+    const [hydrated, setHydrated] = React.useState(false);
     // on load check the user's preference and set "initial" state
     useEffect(()=>{
         if (largeBreak === false) {
@@ -35,8 +39,7 @@ export const NavProvider = ({ children })=>{
                 const preferredState = await getNavPreference(getPreference);
                 setNavOpen(preferredState);
             };
-            setNavFromPreferences() // eslint-disable-line @typescript-eslint/no-floating-promises
-            ;
+            void setNavFromPreferences();
         }
     }, [
         largeBreak,
@@ -63,9 +66,13 @@ export const NavProvider = ({ children })=>{
     // close the nav when the user resizes down to mobile
     // the sidebar is a modal on mobile
     useEffect(()=>{
-        if (largeBreak === false || midBreak === false || smallBreak === false) {
+        if (largeBreak === true || midBreak === true || smallBreak === true) {
             setNavOpen(false);
         }
+        setHydrated(true);
+        setTimeout(()=>{
+            setShouldAnimate(true);
+        }, 100);
     }, [
         largeBreak,
         midBreak,
@@ -79,9 +86,11 @@ export const NavProvider = ({ children })=>{
     }, []);
     return /*#__PURE__*/ _jsx(NavContext.Provider, {
         value: {
+            hydrated,
             navOpen,
             navRef,
-            setNavOpen
+            setNavOpen,
+            shouldAnimate
         },
         children: children
     });

package/dist/elements/Nav/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n})\n\nexport const useNav = () => React.useContext(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n}> = ({ children }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const { getPreference } = usePreferences()\n  const navRef = useRef(null)\n\n  // initialize the nav to be closed\n  // this is because getting the preference is async\n  // so instead of closing it after the preference is loaded\n  // we will open it after the preference is loaded\n  const [navOpen, setNavOpen] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      setNavFromPreferences() // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // TODO: on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        disableBodyScroll(navRef.current)\n      } else {\n        enableBodyScroll(navRef.current)\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    if (largeBreak === false || midBreak === false || smallBreak === false) {\n      setNavOpen(false)\n    }\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      clearAllBodyScrollLocks()\n    }\n  }, [])\n\n  return (\n    <NavContext.Provider value={{ navOpen, navRef, setNavOpen }}>{children}</NavContext.Provider>\n  )\n}\n"],"names":["useWindowInfo","clearAllBodyScrollLocks","disableBodyScroll","enableBodyScroll","React","useEffect","useRef","usePreferences","NavContext","createContext","navOpen","navRef","setNavOpen","useNav","useContext","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","useState","setNavFromPreferences","current","Provider","value"],"mappings":"AAAA;;AACA,SAASA,aAAa,QAAQ,2BAA0B;AACxD,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAkB;AAC/F,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,cAAc,QAAQ,uCAAsC;AAQrE,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAAiB;IAC5DC,SAAS;IACTC,QAAQ;IACRC,YAAY,KAAO;AACrB,GAAE;AAEF,OAAO,MAAMC,SAAS,IAAMT,MAAMU,UAAU,CAACN,YAAW;AAExD,MAAMO,mBAAmB,OAAOC;IAC9B,MAAMC,WAAW,MAAMD,cAAc;IACrC,MAAME,iBAAiBD,UAAUE;IACjC,IAAI,OAAOD,mBAAmB,WAAW;QACvC,OAAOA;IACT,OAAO;QACL,OAAO;IACT;AACF;AAEA,OAAO,MAAME,cAER,CAAC,EAAEC,QAAQ,EAAE;IAChB,MAAM,EACJC,aAAa,EAAEC,GAAGC,UAAU,EAAEC,GAAGC,QAAQ,EAAEC,GAAGC,UAAU,EAAE,EAC3D,GAAG5B;IAEJ,MAAM,EAAEgB,aAAa,EAAE,GAAGT;IAC1B,MAAMI,SAASL,OAAO;IAEtB,kCAAkC;IAClC,kDAAkD;IAClD,0DAA0D;IAC1D,iDAAiD;IACjD,MAAM,CAACI,SAASE,WAAW,GAAGR,MAAMyB,QAAQ,CAAC;IAE7C,8DAA8D;IAC9DxB,UAAU;QACR,IAAImB,eAAe,OAAO;YACxB,MAAMM,wBAAwB;gBAC5B,MAAMZ,iBAAiB,MAAMH,iBAAiBC;gBAC9CJ,WAAWM;YACb;YAEAY,wBAAwB,8DAA8D;;QACxF;IACF,GAAG;QAACN;QAAYR;QAAeJ;KAAW;IAE1C,oDAAoD;IACpD,6CAA6C;IAE7C,0CAA0C;IAC1C,wDAAwD;IACxDP,UAAU;QACR,IAAIM,OAAOoB,OAAO,EAAE;YAClB,IAAIrB,WAAWgB,UAAU;gBACvBxB,kBAAkBS,OAAOoB,OAAO;YAClC,OAAO;gBACL5B,iBAAiBQ,OAAOoB,OAAO;YACjC;QACF;IACF,GAAG;QAACrB;QAASgB;KAAS;IAEtB,8CAA8C;IAC9C,qDAAqD;IACrD,mCAAmC;IACnCrB,UAAU;QACR,IAAImB,eAAe,SAASE,aAAa,SAASE,eAAe,OAAO;YACtEhB,WAAW;QACb;IACF,GAAG;QAACY;QAAYE;QAAUE;KAAW;IAErC,2DAA2D;IAC3DvB,UAAU;QACR,OAAO;YACLJ;QACF;IACF,GAAG,EAAE;IAEL,qBACE,KAACO,WAAWwB,QAAQ;QAACC,OAAO;YAAEvB;YAASC;YAAQC;QAAW;kBAAIS;;AAElE,EAAC"}
+{"version":3,"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n  shouldAnimate: boolean\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n  shouldAnimate: false,\n})\n\nexport const useNav = () => React.useContext(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n  initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const { getPreference } = usePreferences()\n  const navRef = useRef(null)\n\n  // initialize the nav to be closed\n  // this is because getting the preference is async\n  // so instead of closing it after the preference is loaded\n  // we will open it after the preference is loaded\n  const [navOpen, setNavOpen] = React.useState(initialIsOpen)\n\n  const [shouldAnimate, setShouldAnimate] = React.useState(false)\n  const [hydrated, setHydrated] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      void setNavFromPreferences()\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // TODO: on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        disableBodyScroll(navRef.current)\n      } else {\n        enableBodyScroll(navRef.current)\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    if (largeBreak === true || midBreak === true || smallBreak === true) {\n      setNavOpen(false)\n    }\n    setHydrated(true)\n\n    setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      clearAllBodyScrollLocks()\n    }\n  }, [])\n\n  return (\n    <NavContext.Provider value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext.Provider>\n  )\n}\n"],"names":["useWindowInfo","clearAllBodyScrollLocks","disableBodyScroll","enableBodyScroll","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","useContext","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","setTimeout","Provider","value"],"mappings":"AAAA;;AACA,SAASA,aAAa,QAAQ,2BAA0B;AACxD,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAkB;AAC/F,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,cAAc,QAAQ,uCAAsC;AAUrE,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAAiB;IAC5DC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY,KAAO;IACnBC,eAAe;AACjB,GAAE;AAEF,OAAO,MAAMC,SAAS,IAAMX,MAAMY,UAAU,CAACR,YAAW;AAExD,MAAMS,mBAAmB,OAAOC;IAC9B,MAAMC,WAAW,MAAMD,cAAc;IACrC,MAAME,iBAAiBD,UAAUE;IACjC,IAAI,OAAOD,mBAAmB,WAAW;QACvC,OAAOA;IACT,OAAO;QACL,OAAO;IACT;AACF;AAEA,OAAO,MAAME,cAGR,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAE;IAC/B,MAAM,EACJC,aAAa,EAAEC,GAAGC,UAAU,EAAEC,GAAGC,QAAQ,EAAEC,GAAGC,UAAU,EAAE,EAC3D,GAAG/B;IAEJ,MAAM,EAAEkB,aAAa,EAAE,GAAGX;IAC1B,MAAMK,SAASN,OAAO;IAEtB,kCAAkC;IAClC,kDAAkD;IAClD,0DAA0D;IAC1D,iDAAiD;IACjD,MAAM,CAACK,SAASE,WAAW,GAAGT,MAAM4B,QAAQ,CAACR;IAE7C,MAAM,CAACV,eAAemB,iBAAiB,GAAG7B,MAAM4B,QAAQ,CAAC;IACzD,MAAM,CAACtB,UAAUwB,YAAY,GAAG9B,MAAM4B,QAAQ,CAAC;IAE/C,8DAA8D;IAC9D3B,UAAU;QACR,IAAIsB,eAAe,OAAO;YACxB,MAAMQ,wBAAwB;gBAC5B,MAAMf,iBAAiB,MAAMH,iBAAiBC;gBAC9CL,WAAWO;YACb;YAEA,KAAKe;QACP;IACF,GAAG;QAACR;QAAYT;QAAeL;KAAW;IAE1C,oDAAoD;IACpD,6CAA6C;IAE7C,0CAA0C;IAC1C,wDAAwD;IACxDR,UAAU;QACR,IAAIO,OAAOwB,OAAO,EAAE;YAClB,IAAIzB,WAAWkB,UAAU;gBACvB3B,kBAAkBU,OAAOwB,OAAO;YAClC,OAAO;gBACLjC,iBAAiBS,OAAOwB,OAAO;YACjC;QACF;IACF,GAAG;QAACzB;QAASkB;KAAS;IAEtB,8CAA8C;IAC9C,qDAAqD;IACrD,mCAAmC;IACnCxB,UAAU;QACR,IAAIsB,eAAe,QAAQE,aAAa,QAAQE,eAAe,MAAM;YACnElB,WAAW;QACb;QACAqB,YAAY;QAEZG,WAAW;YACTJ,iBAAiB;QACnB,GAAG;IACL,GAAG;QAACN;QAAYE;QAAUE;KAAW;IAErC,2DAA2D;IAC3D1B,UAAU;QACR,OAAO;YACLJ;QACF;IACF,GAAG,EAAE;IAEL,qBACE,KAACO,WAAW8B,QAAQ;QAACC,OAAO;YAAE7B;YAAUC;YAASC;YAAQC;YAAYC;QAAc;kBAChFS;;AAGP,EAAC"}

package/dist/elements/ReactSelect/Control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/Control/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAsCvD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/Control/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAqCvD,CAAA"}

package/dist/elements/ReactSelect/Control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/Control/index.tsx"],"sourcesContent":["'use client'\nimport type { ControlProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nexport const Control: React.FC<ControlProps<Option, any>> = (props) => {\n  const {\n    children,\n    innerProps,\n    // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableKeyDown, disableMouseDown } = {} } = {},\n  } = props\n\n  return (\n    <React.Fragment>\n      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}\n      <SelectComponents.Control\n        {...props}\n        innerProps={{\n          ...innerProps,\n          onKeyDown: (e) => {\n            if (disableKeyDown) {\n              e.stopPropagation()\n              // Create event for keydown listeners which specifically want to bypass this stopPropagation\n              const bypassEvent = new CustomEvent('bypassKeyDown', { detail: e })\n              document.dispatchEvent(bypassEvent)\n            }\n          },\n          // react-select has this typed incorrectly so we disable the linting rule\n          // we need to prevent react-select from hijacking the 'onKeyDown' event while modals are open (i.e. the 'Relationship' field component)\n\n          onMouseDown: (e) => {\n            // we need to prevent react-select from hijacking the 'onMouseDown' event while modals are open (i.e. the 'Relationship' field component)\n            if (!disableMouseDown) {\n              innerProps.onMouseDown(e)\n            }\n          },\n        }}\n      >\n        {children}\n      </SelectComponents.Control>\n    </React.Fragment>\n  )\n}\n"],"names":["React","components","SelectComponents","Control","props","children","innerProps","selectProps","customProps","disableKeyDown","disableMouseDown","Fragment","onKeyDown","e","stopPropagation","bypassEvent","CustomEvent","detail","document","dispatchEvent","onMouseDown"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,OAAO,MAAMC,UAA+C,CAACC;IAC3D,MAAM,EACJC,QAAQ,EACRC,UAAU,EACV,8FAA8F;IAC9FC,aAAa,EAAEC,aAAa,EAAEC,cAAc,EAAEC,gBAAgB,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAC7E,GAAGN;IAEJ,qBACE,KAACJ,MAAMW,QAAQ;kBAEb,cAAA,KAACT,iBAAiBC,OAAO;YACtB,GAAGC,KAAK;YACTE,YAAY;gBACV,GAAGA,UAAU;gBACbM,WAAW,CAACC;oBACV,IAAIJ,gBAAgB;wBAClBI,EAAEC,eAAe;wBACjB,4FAA4F;wBAC5F,MAAMC,cAAc,IAAIC,YAAY,iBAAiB;4BAAEC,QAAQJ;wBAAE;wBACjEK,SAASC,aAAa,CAACJ;oBACzB;gBACF;gBACA,yEAAyE;gBACzE,uIAAuI;gBAEvIK,aAAa,CAACP;oBACZ,yIAAyI;oBACzI,IAAI,CAACH,kBAAkB;wBACrBJ,WAAWc,WAAW,CAACP;oBACzB;gBACF;YACF;sBAECR;;;AAIT,EAAC"}
+{"version":3,"sources":["../../../../src/elements/ReactSelect/Control/index.tsx"],"sourcesContent":["'use client'\nimport type { ControlProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nexport const Control: React.FC<ControlProps<Option, any>> = (props) => {\n  const {\n    children,\n    innerProps,\n    // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableKeyDown, disableMouseDown } = {} } = {},\n  } = props\n\n  return (\n    <React.Fragment>\n      <SelectComponents.Control\n        {...props}\n        innerProps={{\n          ...innerProps,\n          onKeyDown: (e) => {\n            if (disableKeyDown) {\n              e.stopPropagation()\n              // Create event for keydown listeners which specifically want to bypass this stopPropagation\n              const bypassEvent = new CustomEvent('bypassKeyDown', { detail: e })\n              document.dispatchEvent(bypassEvent)\n            }\n          },\n          // react-select has this typed incorrectly so we disable the linting rule\n          // we need to prevent react-select from hijacking the 'onKeyDown' event while modals are open (i.e. the 'Relationship' field component)\n\n          onMouseDown: (e) => {\n            // we need to prevent react-select from hijacking the 'onMouseDown' event while modals are open (i.e. the 'Relationship' field component)\n            if (!disableMouseDown) {\n              innerProps.onMouseDown(e)\n            }\n          },\n        }}\n      >\n        {children}\n      </SelectComponents.Control>\n    </React.Fragment>\n  )\n}\n"],"names":["React","components","SelectComponents","Control","props","children","innerProps","selectProps","customProps","disableKeyDown","disableMouseDown","Fragment","onKeyDown","e","stopPropagation","bypassEvent","CustomEvent","detail","document","dispatchEvent","onMouseDown"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,OAAO,MAAMC,UAA+C,CAACC;IAC3D,MAAM,EACJC,QAAQ,EACRC,UAAU,EACV,8FAA8F;IAC9FC,aAAa,EAAEC,aAAa,EAAEC,cAAc,EAAEC,gBAAgB,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAC7E,GAAGN;IAEJ,qBACE,KAACJ,MAAMW,QAAQ;kBACb,cAAA,KAACT,iBAAiBC,OAAO;YACtB,GAAGC,KAAK;YACTE,YAAY;gBACV,GAAGA,UAAU;gBACbM,WAAW,CAACC;oBACV,IAAIJ,gBAAgB;wBAClBI,EAAEC,eAAe;wBACjB,4FAA4F;wBAC5F,MAAMC,cAAc,IAAIC,YAAY,iBAAiB;4BAAEC,QAAQJ;wBAAE;wBACjEK,SAASC,aAAa,CAACJ;oBACzB;gBACF;gBACA,yEAAyE;gBACzE,uIAAuI;gBAEvIK,aAAa,CAACP;oBACZ,yIAAyI;oBACzI,IAAI,CAACH,kBAAkB;wBACrBJ,WAAWc,WAAW,CAACP;oBACzB;gBACF;YACF;sBAECR;;;AAIT,EAAC"}

package/dist/elements/ReactSelect/DropdownIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAG1D,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvD,OAAO,cAAc,CAAA;AAGrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC;IACE,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CAC5C,GAAG,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,CAmB7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAGvD,OAAO,cAAc,CAAA;AAGrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC;IACE,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CAC5C,GAAG,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,CAmB7C,CAAA"}

package/dist/elements/ReactSelect/DropdownIndicator/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronIcon } from '@payloadcms/ui';
 import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import './index.scss';
 const baseClass = 'dropdown-indicator';
 export const DropdownIndicator = (props)=>{

package/dist/elements/ReactSelect/DropdownIndicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport { ChevronIcon } from '@payloadcms/ui'\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className={baseClass}\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') e.key = ' '\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon className={`${baseClass}__icon`} />\n    </button>\n  )\n}\n"],"names":["ChevronIcon","React","baseClass","DropdownIndicator","props","innerProps","ref","restInnerProps","button","className","onKeyDown","e","key","type"],"mappings":"AAAA;;AAGA,SAASA,WAAW,QAAQ,iBAAgB;AAC5C,OAAOC,WAAyB,QAAO;AAIvC,OAAO,eAAc;AAErB,MAAMC,YAAY;AAClB,OAAO,MAAMC,oBAIT,CAACC;IACH,MAAM,EACJC,YAAY,EAAEC,GAAG,EAAE,GAAGC,gBAAgB,EACvC,GAAGH;IAEJ,qBACE,KAACI;QACCC,WAAWP;QACXI,KAAKA;QACJ,GAAGC,cAAc;QAClBG,WAAW,CAACC;YACV,IAAIA,EAAEC,GAAG,KAAK,SAASD,EAAEC,GAAG,GAAG;QACjC;QACAC,MAAK;kBAEL,cAAA,KAACb;YAAYS,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;;;AAGlD,EAAC"}
+{"version":3,"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.scss'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className={baseClass}\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') e.key = ' '\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon className={`${baseClass}__icon`} />\n    </button>\n  )\n}\n"],"names":["React","ChevronIcon","baseClass","DropdownIndicator","props","innerProps","ref","restInnerProps","button","className","onKeyDown","e","key","type"],"mappings":"AAAA;;AAGA,OAAOA,WAAyB,QAAO;AAIvC,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAClB,OAAO,MAAMC,oBAIT,CAACC;IACH,MAAM,EACJC,YAAY,EAAEC,GAAG,EAAE,GAAGC,gBAAgB,EACvC,GAAGH;IAEJ,qBACE,KAACI;QACCC,WAAWP;QACXI,KAAKA;QACJ,GAAGC,cAAc;QAClBG,WAAW,CAACC;YACV,IAAIA,EAAEC,GAAG,KAAK,SAASD,EAAEC,GAAG,GAAG;QACjC;QACAC,MAAK;kBAEL,cAAA,KAACZ;YAAYQ,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;;;AAGlD,EAAC"}

package/dist/elements/ReactSelect/MultiValue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,cAAc,CAAA;AAIrB,wBAAgB,6BAA6B,CAAC,UAAU,KAAA,EAAE,aAAa,KAAA,OAEtE;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAuDxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,cAAc,CAAA;AAIrB,wBAAgB,6BAA6B,CAAC,UAAU,KAAA,EAAE,aAAa,KAAA,OAEtE;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAsDxD,CAAA"}

package/dist/elements/ReactSelect/MultiValue/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'multi-value'\n\nexport function generateMultiValueDraggableID(optionData, valueFunction) {\n  return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData.value\n}\nexport const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    className,\n    data,\n    innerProps,\n    isDisabled,\n    // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},\n  } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id: generateMultiValueDraggableID(data, getOptionValue),\n    disabled: !isSortable,\n  })\n\n  const classes = [\n    baseClass,\n    className,\n    !isDisabled && isSortable && 'draggable',\n    isDragging && `${baseClass}--is-dragging`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <React.Fragment>\n      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}\n      <SelectComponents.MultiValue\n        {...props}\n        className={classes}\n        innerProps={{\n          ...(isSortable\n            ? {\n                ...attributes,\n                ...listeners,\n              }\n            : {}),\n          ...innerProps,\n          onMouseDown: (e) => {\n            if (!disableMouseDown) {\n              // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)\n              e.stopPropagation()\n            }\n          },\n          ref: setNodeRef,\n          style: isSortable\n            ? {\n                transform,\n                ...attributes?.style,\n              }\n            : {},\n        }}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["React","components","SelectComponents","useDraggableSortable","baseClass","generateMultiValueDraggableID","optionData","valueFunction","value","MultiValue","props","className","data","innerProps","isDisabled","selectProps","customProps","disableMouseDown","getOptionValue","isSortable","attributes","isDragging","listeners","setNodeRef","transform","id","disabled","classes","filter","Boolean","join","Fragment","onMouseDown","e","stopPropagation","ref","style"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,SAASC,oBAAoB,QAAQ,wDAAuD;AAC5F,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,SAASC,8BAA8BC,UAAU,EAAEC,aAAa;IACrE,OAAO,OAAOA,kBAAkB,aAAaA,cAAcD,cAAcA,WAAWE,KAAK;AAC3F;AACA,OAAO,MAAMC,aAAgD,CAACC;IAC5D,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,UAAU,EACVC,UAAU,EACV,oFAAoF;IACpFC,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAG,CAAC,CAAC,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAG,CAAC,CAAC,EACzF,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGrB,qBAAqB;QACxFsB,IAAIpB,8BAA8BO,MAAMM;QACxCQ,UAAU,CAACP;IACb;IAEA,MAAMQ,UAAU;QACdvB;QACAO;QACA,CAACG,cAAcK,cAAc;QAC7BE,cAAc,CAAC,EAAEjB,UAAU,aAAa,CAAC;KAC1C,CACEwB,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAAC9B,MAAM+B,QAAQ;kBAEb,cAAA,KAAC7B,iBAAiBO,UAAU;YACzB,GAAGC,KAAK;YACTC,WAAWgB;YACXd,YAAY;gBACV,GAAIM,aACA;oBACE,GAAGC,UAAU;oBACb,GAAGE,SAAS;gBACd,IACA,CAAC,CAAC;gBACN,GAAGT,UAAU;gBACbmB,aAAa,CAACC;oBACZ,IAAI,CAAChB,kBAAkB;wBACrB,wJAAwJ;wBACxJgB,EAAEC,eAAe;oBACnB;gBACF;gBACAC,KAAKZ;gBACLa,OAAOjB,aACH;oBACEK;oBACA,GAAGJ,YAAYgB,KAAK;gBACtB,IACA,CAAC;YACP;;;AAIR,EAAC"}
+{"version":3,"sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'multi-value'\n\nexport function generateMultiValueDraggableID(optionData, valueFunction) {\n  return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData.value\n}\nexport const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    className,\n    data,\n    innerProps,\n    isDisabled,\n    // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},\n  } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id: generateMultiValueDraggableID(data, getOptionValue),\n    disabled: !isSortable,\n  })\n\n  const classes = [\n    baseClass,\n    className,\n    !isDisabled && isSortable && 'draggable',\n    isDragging && `${baseClass}--is-dragging`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <React.Fragment>\n      <SelectComponents.MultiValue\n        {...props}\n        className={classes}\n        innerProps={{\n          ...(isSortable\n            ? {\n                ...attributes,\n                ...listeners,\n              }\n            : {}),\n          ...innerProps,\n          onMouseDown: (e) => {\n            if (!disableMouseDown) {\n              // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)\n              e.stopPropagation()\n            }\n          },\n          ref: setNodeRef,\n          style: isSortable\n            ? {\n                transform,\n                ...attributes?.style,\n              }\n            : {},\n        }}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["React","components","SelectComponents","useDraggableSortable","baseClass","generateMultiValueDraggableID","optionData","valueFunction","value","MultiValue","props","className","data","innerProps","isDisabled","selectProps","customProps","disableMouseDown","getOptionValue","isSortable","attributes","isDragging","listeners","setNodeRef","transform","id","disabled","classes","filter","Boolean","join","Fragment","onMouseDown","e","stopPropagation","ref","style"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,SAASC,oBAAoB,QAAQ,wDAAuD;AAC5F,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,SAASC,8BAA8BC,UAAU,EAAEC,aAAa;IACrE,OAAO,OAAOA,kBAAkB,aAAaA,cAAcD,cAAcA,WAAWE,KAAK;AAC3F;AACA,OAAO,MAAMC,aAAgD,CAACC;IAC5D,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,UAAU,EACVC,UAAU,EACV,oFAAoF;IACpFC,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAG,CAAC,CAAC,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAG,CAAC,CAAC,EACzF,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGrB,qBAAqB;QACxFsB,IAAIpB,8BAA8BO,MAAMM;QACxCQ,UAAU,CAACP;IACb;IAEA,MAAMQ,UAAU;QACdvB;QACAO;QACA,CAACG,cAAcK,cAAc;QAC7BE,cAAc,CAAC,EAAEjB,UAAU,aAAa,CAAC;KAC1C,CACEwB,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAAC9B,MAAM+B,QAAQ;kBACb,cAAA,KAAC7B,iBAAiBO,UAAU;YACzB,GAAGC,KAAK;YACTC,WAAWgB;YACXd,YAAY;gBACV,GAAIM,aACA;oBACE,GAAGC,UAAU;oBACb,GAAGE,SAAS;gBACd,IACA,CAAC,CAAC;gBACN,GAAGT,UAAU;gBACbmB,aAAa,CAACC;oBACZ,IAAI,CAAChB,kBAAkB;wBACrB,wJAAwJ;wBACxJgB,EAAEC,eAAe;oBACnB;gBACF;gBACAC,KAAKZ;gBACLa,OAAOjB,aACH;oBACEK;oBACA,GAAGJ,YAAYgB,KAAK;gBACtB,IACA,CAAC;YACP;;;AAIR,EAAC"}

package/dist/elements/ReactSelect/MultiValueLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAgB7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAe7D,CAAA"}