@payloadcms/ui 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/elements/Translation/index.js

@@ -1,30 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const RecursiveTranslation = ({ elements, translationString })=>{
     const regex = /(<[^>]+>.*?<\/[^>]+>)/g;
     const sections = translationString.split(regex);
-    return /*#__PURE__*/ React.createElement("span", null, sections.map((section, index)=>{
-        if (elements && section.startsWith('<') && section.endsWith('>')) {
-            const elementKey = section[1];
-            const Element = elements[elementKey];
-            if (Element) {
-                const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
-                const children = section.replace(regex, (_, group)=>group);
-                return /*#__PURE__*/ React.createElement(Element, {
-                    key: index
-                }, /*#__PURE__*/ React.createElement(RecursiveTranslation, {
-                    translationString: children
-                }));
+    return /*#__PURE__*/ _jsx("span", {
+        children: sections.map((section, index)=>{
+            if (elements && section.startsWith('<') && section.endsWith('>')) {
+                const elementKey = section[1];
+                const Element = elements[elementKey];
+                if (Element) {
+                    const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
+                    const children = section.replace(regex, (_, group)=>group);
+                    return /*#__PURE__*/ _jsx(Element, {
+                        children: /*#__PURE__*/ _jsx(RecursiveTranslation, {
+                            translationString: children
+                        })
+                    }, index);
+                }
             }
-        }
-        return section;
-    }));
+            return section;
+        })
+    });
 };
 export const Translation = ({ elements, i18nKey, t, variables })=>{
     const stringWithVariables = t(i18nKey, variables || {});
     if (!elements) {
         return stringWithVariables;
     }
-    return /*#__PURE__*/ React.createElement(RecursiveTranslation, {
+    return /*#__PURE__*/ _jsx(RecursiveTranslation, {
         elements: elements,
         translationString: stringWithVariables
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","span","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","key","Translation","i18nKey","t","variables","stringWithVariables"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,YAAYA,WAAW,QAAO;AAE9B,MAAMC,uBAGD,CAAC,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;IACnC,MAAMC,QAAQ;IACd,MAAMC,WAAWF,kBAAkBG,KAAK,CAACF;IAEzC,qBACE,oBAACG,cACEF,SAASG,GAAG,CAAC,CAACC,SAASC;QACtB,IAAIR,YAAYO,QAAQE,UAAU,CAAC,QAAQF,QAAQG,QAAQ,CAAC,MAAM;YAChE,MAAMC,aAAaJ,OAAO,CAAC,EAAE;YAC7B,MAAMK,UAAUZ,QAAQ,CAACW,WAAW;YAEpC,IAAIC,SAAS;gBACX,MAAMV,QAAQ,IAAIW,OAAO,CAAC,CAAC,EAAEF,WAAW,SAAS,EAAEA,WAAW,CAAC,CAAC,EAAE;gBAClE,MAAMG,WAAWP,QAAQQ,OAAO,CAACb,OAAO,CAACc,GAAGC,QAAUA;gBAEtD,qBACE,oBAACL;oBAAQM,KAAKV;iCACZ,oBAACT;oBAAqBE,mBAAmBa;;YAG/C;QACF;QAEA,OAAOP;IACT;AAGN;AASA,OAAO,MAAMY,cAA0C,CAAC,EAAEnB,QAAQ,EAAEoB,OAAO,EAAEC,CAAC,EAAEC,SAAS,EAAE;IACzF,MAAMC,sBAAsBF,EAAED,SAASE,aAAa,CAAC;IAErD,IAAI,CAACtB,UAAU;QACb,OAAOuB;IACT;IAEA,qBAAO,oBAACxB;QAAqBC,UAAUA;QAAUC,mBAAmBsB;;AACtE,EAAC"}
+{"version":3,"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","span","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAEA,YAAYA,WAAW,QAAO;AAE9B,MAAMC,uBAGD,CAAC,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;IACnC,MAAMC,QAAQ;IACd,MAAMC,WAAWF,kBAAkBG,KAAK,CAACF;IAEzC,qBACE,KAACG;kBACEF,SAASG,GAAG,CAAC,CAACC,SAASC;YACtB,IAAIR,YAAYO,QAAQE,UAAU,CAAC,QAAQF,QAAQG,QAAQ,CAAC,MAAM;gBAChE,MAAMC,aAAaJ,OAAO,CAAC,EAAE;gBAC7B,MAAMK,UAAUZ,QAAQ,CAACW,WAAW;gBAEpC,IAAIC,SAAS;oBACX,MAAMV,QAAQ,IAAIW,OAAO,CAAC,CAAC,EAAEF,WAAW,SAAS,EAAEA,WAAW,CAAC,CAAC,EAAE;oBAClE,MAAMG,WAAWP,QAAQQ,OAAO,CAACb,OAAO,CAACc,GAAGC,QAAUA;oBAEtD,qBACE,KAACL;kCACC,cAAA,KAACb;4BAAqBE,mBAAmBa;;uBAD7BN;gBAIlB;YACF;YAEA,OAAOD;QACT;;AAGN;AASA,OAAO,MAAMW,cAA0C,CAAC,EAAElB,QAAQ,EAAEmB,OAAO,EAAEC,CAAC,EAAEC,SAAS,EAAE;IACzF,MAAMC,sBAAsBF,EAAED,SAASE,aAAa,CAAC;IAErD,IAAI,CAACrB,UAAU;QACb,OAAOsB;IACT;IAEA,qBAAO,KAACvB;QAAqBC,UAAUA;QAAUC,mBAAmBqB;;AACtE,EAAC"}

package/dist/elements/UnpublishMany/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
@@ -91,28 +92,47 @@ export const UnpublishMany = (props)=>{
     if (!versions?.drafts || selectAll === SelectAllStatus.None || !hasPermission) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Pill, {
-        className: `${baseClass}__toggle`,
-        onClick: ()=>{
-            setSubmitted(false);
-            toggleModal(modalSlug);
-        }
-    }, t('version:unpublish')), /*#__PURE__*/ React.createElement(Modal, {
-        className: baseClass,
-        slug: modalSlug
-    }, /*#__PURE__*/ React.createElement(MinimalTemplate, {
-        className: `${baseClass}__template`
-    }, /*#__PURE__*/ React.createElement("h1", null, t('version:confirmUnpublish')), /*#__PURE__*/ React.createElement("p", null, t('version:aboutToUnpublishSelection', {
-        label: getTranslation(plural, i18n)
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        id: "confirm-cancel",
-        onClick: submitted ? undefined : ()=>toggleModal(modalSlug),
-        type: "button"
-    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
-        id: "confirm-unpublish",
-        onClick: submitted ? undefined : handleUnpublish
-    }, submitted ? t('version:unpublishing') : t('general:confirm')))));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Pill, {
+                className: `${baseClass}__toggle`,
+                onClick: ()=>{
+                    setSubmitted(false);
+                    toggleModal(modalSlug);
+                },
+                children: t('version:unpublish')
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                className: baseClass,
+                slug: modalSlug,
+                children: /*#__PURE__*/ _jsxs(MinimalTemplate, {
+                    className: `${baseClass}__template`,
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            children: t('version:confirmUnpublish')
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: t('version:aboutToUnpublishSelection', {
+                                label: getTranslation(plural, i18n)
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "secondary",
+                            id: "confirm-cancel",
+                            onClick: submitted ? undefined : ()=>toggleModal(modalSlug),
+                            type: "button",
+                            children: t('general:cancel')
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            id: "confirm-unpublish",
+                            onClick: submitted ? undefined : handleUnpublish,
+                            children: submitted ? t('version:unpublishing') : t('general:confirm')
+                        })
+                    ]
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/UnpublishMany/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MinimalTemplate } from '../../templates/Minimal/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'unpublish-many'\n\nimport type { ClientCollectionConfig } from 'payload/types'\n\nexport type UnpublishManyProps = {\n  collection: ClientCollectionConfig\n}\n\nexport const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {\n  const { collection: { slug, labels: { plural }, versions } = {} } = props\n  const { Modal, useModal } = facelessUIImport\n\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const { permissions } = useAuth()\n  const { toggleModal } = useModal()\n  const { i18n, t } = useTranslation()\n  const { getQueryParams, selectAll } = useSelection()\n  const [submitted, setSubmitted] = useState(false)\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { clearRouteCache } = useRouteCache()\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasPermission = collectionPermissions?.update?.permission\n\n  const modalSlug = `unpublish-${slug}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:unknown'))\n  }, [t])\n\n  const handleUnpublish = useCallback(async () => {\n    setSubmitted(true)\n    await requests\n      .patch(`${serverURL}${api}/${slug}${getQueryParams({ _status: { not_equals: 'draft' } })}`, {\n        body: JSON.stringify({\n          _status: 'draft',\n        }),\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n      .then(async (res) => {\n        try {\n          const json = await res.json()\n          toggleModal(modalSlug)\n          if (res.status < 400) {\n            toast.success(t('general:updatedSuccessfully'))\n            router.replace(\n              stringifyParams({\n                params: {\n                  page: selectAll ? '1' : undefined,\n                },\n              }),\n            )\n            clearRouteCache()\n            return null\n          }\n\n          if (json.errors) {\n            json.errors.forEach((error) => toast.error(error.message))\n          } else {\n            addDefaultError()\n          }\n          return false\n        } catch (e) {\n          return addDefaultError()\n        }\n      })\n  }, [\n    addDefaultError,\n    api,\n    getQueryParams,\n    i18n.language,\n    modalSlug,\n    selectAll,\n    serverURL,\n    slug,\n    t,\n    toggleModal,\n    router,\n    clearRouteCache,\n    stringifyParams,\n  ])\n\n  if (!versions?.drafts || selectAll === SelectAllStatus.None || !hasPermission) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <Pill\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSubmitted(false)\n          toggleModal(modalSlug)\n        }}\n      >\n        {t('version:unpublish')}\n      </Pill>\n      <Modal className={baseClass} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__template`}>\n          <h1>{t('version:confirmUnpublish')}</h1>\n          <p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p>\n          <Button\n            buttonStyle=\"secondary\"\n            id=\"confirm-cancel\"\n            onClick={submitted ? undefined : () => toggleModal(modalSlug)}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-unpublish\" onClick={submitted ? undefined : handleUnpublish}>\n            {submitted ? t('version:unpublishing') : t('general:confirm')}\n          </Button>\n        </MinimalTemplate>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","toast","useAuth","useConfig","useRouteCache","useSearchParams","SelectAllStatus","useSelection","useTranslation","MinimalTemplate","requests","Button","Pill","baseClass","UnpublishMany","props","collection","slug","labels","plural","versions","Modal","useModal","routes","api","serverURL","permissions","toggleModal","i18n","t","getQueryParams","selectAll","submitted","setSubmitted","stringifyParams","router","clearRouteCache","collectionPermissions","collections","hasPermission","update","permission","modalSlug","addDefaultError","error","handleUnpublish","patch","_status","not_equals","body","JSON","stringify","headers","language","then","res","json","status","success","replace","params","page","undefined","errors","forEach","message","e","drafts","None","Fragment","className","onClick","h1","p","label","buttonStyle","id","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/UnpublishMany/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MinimalTemplate } from '../../templates/Minimal/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'unpublish-many'\n\nimport type { ClientCollectionConfig } from 'payload/types'\n\nexport type UnpublishManyProps = {\n  collection: ClientCollectionConfig\n}\n\nexport const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {\n  const { collection: { slug, labels: { plural }, versions } = {} } = props\n  const { Modal, useModal } = facelessUIImport\n\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const { permissions } = useAuth()\n  const { toggleModal } = useModal()\n  const { i18n, t } = useTranslation()\n  const { getQueryParams, selectAll } = useSelection()\n  const [submitted, setSubmitted] = useState(false)\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { clearRouteCache } = useRouteCache()\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasPermission = collectionPermissions?.update?.permission\n\n  const modalSlug = `unpublish-${slug}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:unknown'))\n  }, [t])\n\n  const handleUnpublish = useCallback(async () => {\n    setSubmitted(true)\n    await requests\n      .patch(`${serverURL}${api}/${slug}${getQueryParams({ _status: { not_equals: 'draft' } })}`, {\n        body: JSON.stringify({\n          _status: 'draft',\n        }),\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n      .then(async (res) => {\n        try {\n          const json = await res.json()\n          toggleModal(modalSlug)\n          if (res.status < 400) {\n            toast.success(t('general:updatedSuccessfully'))\n            router.replace(\n              stringifyParams({\n                params: {\n                  page: selectAll ? '1' : undefined,\n                },\n              }),\n            )\n            clearRouteCache()\n            return null\n          }\n\n          if (json.errors) {\n            json.errors.forEach((error) => toast.error(error.message))\n          } else {\n            addDefaultError()\n          }\n          return false\n        } catch (e) {\n          return addDefaultError()\n        }\n      })\n  }, [\n    addDefaultError,\n    api,\n    getQueryParams,\n    i18n.language,\n    modalSlug,\n    selectAll,\n    serverURL,\n    slug,\n    t,\n    toggleModal,\n    router,\n    clearRouteCache,\n    stringifyParams,\n  ])\n\n  if (!versions?.drafts || selectAll === SelectAllStatus.None || !hasPermission) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <Pill\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSubmitted(false)\n          toggleModal(modalSlug)\n        }}\n      >\n        {t('version:unpublish')}\n      </Pill>\n      <Modal className={baseClass} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__template`}>\n          <h1>{t('version:confirmUnpublish')}</h1>\n          <p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p>\n          <Button\n            buttonStyle=\"secondary\"\n            id=\"confirm-cancel\"\n            onClick={submitted ? undefined : () => toggleModal(modalSlug)}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-unpublish\" onClick={submitted ? undefined : handleUnpublish}>\n            {submitted ? t('version:unpublishing') : t('general:confirm')}\n          </Button>\n        </MinimalTemplate>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","toast","useAuth","useConfig","useRouteCache","useSearchParams","SelectAllStatus","useSelection","useTranslation","MinimalTemplate","requests","Button","Pill","baseClass","UnpublishMany","props","collection","slug","labels","plural","versions","Modal","useModal","routes","api","serverURL","permissions","toggleModal","i18n","t","getQueryParams","selectAll","submitted","setSubmitted","stringifyParams","router","clearRouteCache","collectionPermissions","collections","hasPermission","update","permission","modalSlug","addDefaultError","error","handleUnpublish","patch","_status","not_equals","body","JSON","stringify","headers","language","then","res","json","status","success","replace","params","page","undefined","errors","forEach","message","e","drafts","None","Fragment","className","onClick","h1","p","label","buttonStyle","id","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/Upload/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isImage } from 'payload/utilities';
 import React, { useCallback, useEffect, useState } from 'react';
 import { fieldBaseClass } from '../../fields/shared/index.js';
@@ -27,15 +28,21 @@ const validate = (value)=>{
 };
 export const UploadActions = ({ canEdit, showSizePreviews })=>{
     const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__file-mutation`
-    }, showSizePreviews && /*#__PURE__*/ React.createElement(DrawerToggler, {
-        className: `${baseClass}__previewSizes`,
-        slug: sizePreviewSlug
-    }, t('upload:previewSizes')), canEdit && /*#__PURE__*/ React.createElement(DrawerToggler, {
-        className: `${baseClass}__edit`,
-        slug: editDrawerSlug
-    }, t('upload:editImage')));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${baseClass}__file-mutation`,
+        children: [
+            showSizePreviews && /*#__PURE__*/ _jsx(DrawerToggler, {
+                className: `${baseClass}__previewSizes`,
+                slug: sizePreviewSlug,
+                children: t('upload:previewSizes')
+            }),
+            canEdit && /*#__PURE__*/ _jsx(DrawerToggler, {
+                className: `${baseClass}__edit`,
+                slug: editDrawerSlug,
+                children: t('upload:editImage')
+            })
+        ]
+    });
 };
 export const Upload = (props)=>{
     const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props;
@@ -138,77 +145,101 @@ export const Upload = (props)=>{
     const { crop: showCrop = true, focalPoint = true } = uploadConfig;
     const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
     const lastSubmittedTime = submitted ? new Date().toISOString() : null;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             fieldBaseClass,
             baseClass
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        message: errorMessage,
-        showError: showError
-    }), doc.filename && !replacingFile && /*#__PURE__*/ React.createElement(FileDetails, {
-        canEdit: showCrop || showFocalPoint,
-        collectionSlug: collectionSlug,
-        doc: doc,
-        handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-        hasImageSizes: hasImageSizes,
-        imageCacheTag: lastSubmittedTime,
-        uploadConfig: uploadConfig
-    }), (!doc.filename || replacingFile) && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__upload`
-    }, !value && /*#__PURE__*/ React.createElement(Dropzone, {
-        className: `${baseClass}__dropzone`,
-        mimeTypes: uploadConfig?.mimeTypes,
-        onChange: handleFileSelection
-    }), value && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail-wrap`
-    }, /*#__PURE__*/ React.createElement(Thumbnail, {
-        collectionSlug: collectionSlug,
-        fileSrc: isImage(value.type) ? fileSrc : null
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__file-adjustments`
-    }, /*#__PURE__*/ React.createElement("input", {
-        className: `${baseClass}__filename`,
-        onChange: handleFileNameChange,
-        type: "text",
-        value: value.name
-    }), isImage(value.type) && value.type !== 'image/svg+xml' && /*#__PURE__*/ React.createElement(UploadActions, {
-        canEdit: showCrop || showFocalPoint,
-        showSizePreviews: hasImageSizes && doc.filename && !replacingFile
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__remove`,
-        icon: "x",
-        iconStyle: "with-border",
-        onClick: handleFileRemoval,
-        round: true,
-        tooltip: t('general:cancel')
-    }))), (value || doc.filename) && /*#__PURE__*/ React.createElement(Drawer, {
-        Header: null,
-        slug: editDrawerSlug
-    }, /*#__PURE__*/ React.createElement(EditUpload, {
-        fileName: value?.name || doc?.filename,
-        fileSrc: fileSrc || doc?.url,
-        imageCacheTag: lastSubmittedTime,
-        initialCrop: formQueryParams?.uploadEdits?.crop ?? {},
-        initialFocalPoint: {
-            x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,
-            y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50
-        },
-        onSave: onEditsSave,
-        showCrop: showCrop,
-        showFocalPoint: showFocalPoint
-    })), doc && hasImageSizes && /*#__PURE__*/ React.createElement(Drawer, {
-        className: `${baseClass}__previewDrawer`,
-        hoverTitle: true,
-        slug: sizePreviewSlug,
-        title: t('upload:sizesFor', {
-            label: doc?.filename
-        })
-    }, /*#__PURE__*/ React.createElement(PreviewSizes, {
-        doc: doc,
-        uploadConfig: uploadConfig
-    })));
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsx(FieldError, {
+                message: errorMessage,
+                showError: showError
+            }),
+            doc.filename && !replacingFile && /*#__PURE__*/ _jsx(FileDetails, {
+                canEdit: showCrop || showFocalPoint,
+                collectionSlug: collectionSlug,
+                doc: doc,
+                handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
+                hasImageSizes: hasImageSizes,
+                imageCacheTag: lastSubmittedTime,
+                uploadConfig: uploadConfig
+            }),
+            (!doc.filename || replacingFile) && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__upload`,
+                children: [
+                    !value && /*#__PURE__*/ _jsx(Dropzone, {
+                        className: `${baseClass}__dropzone`,
+                        mimeTypes: uploadConfig?.mimeTypes,
+                        onChange: handleFileSelection
+                    }),
+                    value && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__thumbnail-wrap`,
+                                children: /*#__PURE__*/ _jsx(Thumbnail, {
+                                    collectionSlug: collectionSlug,
+                                    fileSrc: isImage(value.type) ? fileSrc : null
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__file-adjustments`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        className: `${baseClass}__filename`,
+                                        onChange: handleFileNameChange,
+                                        type: "text",
+                                        value: value.name
+                                    }),
+                                    isImage(value.type) && value.type !== 'image/svg+xml' && /*#__PURE__*/ _jsx(UploadActions, {
+                                        canEdit: showCrop || showFocalPoint,
+                                        showSizePreviews: hasImageSizes && doc.filename && !replacingFile
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "icon-label",
+                                className: `${baseClass}__remove`,
+                                icon: "x",
+                                iconStyle: "with-border",
+                                onClick: handleFileRemoval,
+                                round: true,
+                                tooltip: t('general:cancel')
+                            })
+                        ]
+                    })
+                ]
+            }),
+            (value || doc.filename) && /*#__PURE__*/ _jsx(Drawer, {
+                Header: null,
+                slug: editDrawerSlug,
+                children: /*#__PURE__*/ _jsx(EditUpload, {
+                    fileName: value?.name || doc?.filename,
+                    fileSrc: fileSrc || doc?.url,
+                    imageCacheTag: lastSubmittedTime,
+                    initialCrop: formQueryParams?.uploadEdits?.crop ?? {},
+                    initialFocalPoint: {
+                        x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,
+                        y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50
+                    },
+                    onSave: onEditsSave,
+                    showCrop: showCrop,
+                    showFocalPoint: showFocalPoint
+                })
+            }),
+            doc && hasImageSizes && /*#__PURE__*/ _jsx(Drawer, {
+                className: `${baseClass}__previewDrawer`,
+                hoverTitle: true,
+                slug: sizePreviewSlug,
+                title: t('upload:sizesFor', {
+                    label: doc?.filename
+                }),
+                children: /*#__PURE__*/ _jsx(PreviewSizes, {
+                    doc: doc,
+                    uploadConfig: uploadConfig
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload/types'\n\nimport { isImage } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { FieldError } from '../../forms/FieldError/index.js'\nimport { useForm, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\nexport const UploadActions = ({ canEdit, showSizePreviews }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={`${baseClass}__file-mutation`}>\n      {showSizePreviews && (\n        <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n          {t('upload:previewSizes')}\n        </DrawerToggler>\n      )}\n      {canEdit && (\n        <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n          {t('upload:editImage')}\n        </DrawerToggler>\n      )}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  updatedAt?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props\n\n  const submitted = useFormSubmitted()\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n  const [crop, setCrop] = useState({ x: 0, y: 0 })\n\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\n    if (value) {\n      const fileValue = value\n      // Creating a new File object with updated properties\n      const newFile = new File([fileValue], updatedFileName, { type: fileValue.type })\n      setValue(newFile) // Updating the state with the new File object\n    }\n  }\n\n  const handleFileSelection = React.useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      setValue(fileToUpload)\n    },\n    [setValue],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    setValue(null)\n    setFileSrc('')\n  }, [setValue])\n\n  const onEditsSave = React.useCallback(\n    ({ crop, focalPosition }) => {\n      setCrop({\n        x: crop.x || 0,\n        y: crop.y || 0,\n      })\n      const zoomScale = 100 / Math.min(crop.width, crop.height)\n\n      document.documentElement.style.setProperty('--file-details-thumbnail--zoom', `${zoomScale}`)\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--top-offset',\n        `${zoomScale * (50 - crop.height / 2 - crop.y)}%`,\n      )\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--left-offset',\n        `${zoomScale * (50 - crop.width / 2 - crop.x)}%`,\n      )\n      setModified(true)\n      dispatchFormQueryParams({\n        type: 'SET',\n        params: {\n          uploadEdits:\n            crop || focalPosition\n              ? {\n                  crop: crop || null,\n                  focalPoint: focalPosition ? focalPosition : null,\n                }\n              : null,\n        },\n      })\n    },\n    [dispatchFormQueryParams, setModified],\n  )\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (value instanceof File) {\n      const fileReader = new FileReader()\n      fileReader.onload = (e) => {\n        const imgSrc = e.target?.result\n\n        if (typeof imgSrc === 'string') {\n          setFileSrc(imgSrc)\n        }\n      }\n      fileReader.readAsDataURL(value)\n    }\n\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n  }, [value, onChange, updatedAt])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n  // Explicity check if set to true, default is undefined\n  const focalPointEnabled = uploadConfig?.focalPoint === true\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)\n\n  const lastSubmittedTime = submitted ? new Date().toISOString() : null\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          canEdit={showCrop || showFocalPoint}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={lastSubmittedTime}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n            />\n          )}\n\n          {value && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n\n                {isImage(value.type) && value.type !== 'image/svg+xml' && (\n                  <UploadActions\n                    canEdit={showCrop || showFocalPoint}\n                    showSizePreviews={hasImageSizes && doc.filename && !replacingFile}\n                  />\n                )}\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            fileName={value?.name || doc?.filename}\n            fileSrc={fileSrc || doc?.url}\n            imageCacheTag={lastSubmittedTime}\n            initialCrop={formQueryParams?.uploadEdits?.crop ?? {}}\n            initialFocalPoint={{\n              x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,\n              y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["isImage","React","useCallback","useEffect","useState","fieldBaseClass","FieldError","useForm","useFormSubmitted","useField","useDocumentInfo","useFormQueryParams","useTranslation","reduceFieldsToValues","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","canEdit","showSizePreviews","t","div","className","slug","Upload","props","collectionSlug","initialState","onChange","updatedAt","uploadConfig","submitted","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","dispatchFormQueryParams","formQueryParams","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","crop","setCrop","x","y","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","focalPosition","zoomScale","Math","min","width","height","document","documentElement","style","setProperty","params","uploadEdits","focalPoint","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","showCrop","showFocalPoint","lastSubmittedTime","Date","toISOString","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","initialCrop","initialFocalPoint","focalX","focalY","onSave","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload/types'\n\nimport { isImage } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { FieldError } from '../../forms/FieldError/index.js'\nimport { useForm, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\nexport const UploadActions = ({ canEdit, showSizePreviews }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={`${baseClass}__file-mutation`}>\n      {showSizePreviews && (\n        <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n          {t('upload:previewSizes')}\n        </DrawerToggler>\n      )}\n      {canEdit && (\n        <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n          {t('upload:editImage')}\n        </DrawerToggler>\n      )}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  updatedAt?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props\n\n  const submitted = useFormSubmitted()\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n  const [crop, setCrop] = useState({ x: 0, y: 0 })\n\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\n    if (value) {\n      const fileValue = value\n      // Creating a new File object with updated properties\n      const newFile = new File([fileValue], updatedFileName, { type: fileValue.type })\n      setValue(newFile) // Updating the state with the new File object\n    }\n  }\n\n  const handleFileSelection = React.useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      setValue(fileToUpload)\n    },\n    [setValue],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    setValue(null)\n    setFileSrc('')\n  }, [setValue])\n\n  const onEditsSave = React.useCallback(\n    ({ crop, focalPosition }) => {\n      setCrop({\n        x: crop.x || 0,\n        y: crop.y || 0,\n      })\n      const zoomScale = 100 / Math.min(crop.width, crop.height)\n\n      document.documentElement.style.setProperty('--file-details-thumbnail--zoom', `${zoomScale}`)\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--top-offset',\n        `${zoomScale * (50 - crop.height / 2 - crop.y)}%`,\n      )\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--left-offset',\n        `${zoomScale * (50 - crop.width / 2 - crop.x)}%`,\n      )\n      setModified(true)\n      dispatchFormQueryParams({\n        type: 'SET',\n        params: {\n          uploadEdits:\n            crop || focalPosition\n              ? {\n                  crop: crop || null,\n                  focalPoint: focalPosition ? focalPosition : null,\n                }\n              : null,\n        },\n      })\n    },\n    [dispatchFormQueryParams, setModified],\n  )\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (value instanceof File) {\n      const fileReader = new FileReader()\n      fileReader.onload = (e) => {\n        const imgSrc = e.target?.result\n\n        if (typeof imgSrc === 'string') {\n          setFileSrc(imgSrc)\n        }\n      }\n      fileReader.readAsDataURL(value)\n    }\n\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n  }, [value, onChange, updatedAt])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n  // Explicity check if set to true, default is undefined\n  const focalPointEnabled = uploadConfig?.focalPoint === true\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)\n\n  const lastSubmittedTime = submitted ? new Date().toISOString() : null\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          canEdit={showCrop || showFocalPoint}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={lastSubmittedTime}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n            />\n          )}\n\n          {value && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n\n                {isImage(value.type) && value.type !== 'image/svg+xml' && (\n                  <UploadActions\n                    canEdit={showCrop || showFocalPoint}\n                    showSizePreviews={hasImageSizes && doc.filename && !replacingFile}\n                  />\n                )}\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            fileName={value?.name || doc?.filename}\n            fileSrc={fileSrc || doc?.url}\n            imageCacheTag={lastSubmittedTime}\n            initialCrop={formQueryParams?.uploadEdits?.crop ?? {}}\n            initialFocalPoint={{\n              x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,\n              y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["isImage","React","useCallback","useEffect","useState","fieldBaseClass","FieldError","useForm","useFormSubmitted","useField","useDocumentInfo","useFormQueryParams","useTranslation","reduceFieldsToValues","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","canEdit","showSizePreviews","t","div","className","slug","Upload","props","collectionSlug","initialState","onChange","updatedAt","uploadConfig","submitted","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","dispatchFormQueryParams","formQueryParams","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","crop","setCrop","x","y","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","focalPosition","zoomScale","Math","min","width","height","document","documentElement","style","setProperty","params","uploadEdits","focalPoint","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","showCrop","showFocalPoint","lastSubmittedTime","Date","toISOString","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","initialCrop","initialFocalPoint","focalX","focalY","onSave","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,cAAc,QAAQ,+BAA8B;AAC7D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,OAAO,EAAEC,gBAAgB,QAAQ,8BAA6B;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,kBAAkB,QAAQ,2CAA0C;AAC7E,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,oBAAoB,QAAQ,0CAAyC;AAC9E,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,MAAM,EAAEC,aAAa,QAAQ,qBAAoB;AAC1D,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,WAAW,QAAQ,0BAAyB;AACrD,SAASC,YAAY,QAAQ,2BAA0B;AACvD,SAASC,SAAS,QAAQ,wBAAuB;AAGjD,MAAMC,YAAY;AAClB,OAAO,MAAMC,iBAAiB,cAAa;AAC3C,OAAO,MAAMC,kBAAkB,gBAAe;AAE9C,MAAMC,WAAW,CAACC;IAChB,IAAI,CAACA,SAASA,UAAUC,WAAW;QACjC,OAAO;IACT;IAEA,OAAO;AACT;AAEA,OAAO,MAAMC,gBAAgB,CAAC,EAAEC,OAAO,EAAEC,gBAAgB,EAAE;IACzD,MAAM,EAAEC,CAAC,EAAE,GAAGnB;IACd,qBACE,MAACoB;QAAIC,WAAW,CAAC,EAAEX,UAAU,eAAe,CAAC;;YAC1CQ,kCACC,KAACd;gBAAciB,WAAW,CAAC,EAAEX,UAAU,cAAc,CAAC;gBAAEY,MAAMV;0BAC3DO,EAAE;;YAGNF,yBACC,KAACb;gBAAciB,WAAW,CAAC,EAAEX,UAAU,MAAM,CAAC;gBAAEY,MAAMX;0BACnDQ,EAAE;;;;AAKb,EAAC;AAUD,OAAO,MAAMI,SAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGL;IAE5E,MAAMM,YAAYlC;IAClB,MAAM,CAACmC,eAAeC,iBAAiB,GAAGxC,SAAS;IACnD,MAAM,CAACyC,SAASC,WAAW,GAAG1C,SAAwB;IACtD,MAAM,EAAE2B,CAAC,EAAE,GAAGnB;IACd,MAAM,EAAEmC,WAAW,EAAE,GAAGxC;IACxB,MAAM,EAAEyC,uBAAuB,EAAEC,eAAe,EAAE,GAAGtC;IACrD,MAAM,CAACuC,KAAKC,OAAO,GAAG/C,SAASS,qBAAqByB,gBAAgB,CAAC,GAAG;IACxE,MAAM,EAAEc,cAAc,EAAE,GAAG1C;IAC3B,MAAM,EAAE2C,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAE7B,KAAK,EAAE,GAAGjB,SAAe;QAClE+C,MAAM;QACN/B;IACF;IACA,MAAM,CAACgC,MAAMC,QAAQ,GAAGtD,SAAS;QAAEuD,GAAG;QAAGC,GAAG;IAAE;IAE9C,MAAMC,uBAAuB,CAACC;QAC5B,MAAMC,kBAAkBD,EAAEE,MAAM,CAACtC,KAAK;QACtC,IAAIA,OAAO;YACT,MAAMuC,YAAYvC;YAClB,qDAAqD;YACrD,MAAMwC,UAAU,IAAIC,KAAK;gBAACF;aAAU,EAAEF,iBAAiB;gBAAEK,MAAMH,UAAUG,IAAI;YAAC;YAC9Ed,SAASY,SAAS,8CAA8C;;QAClE;IACF;IAEA,MAAMG,sBAAsBpE,MAAMC,WAAW,CAC3C,CAACoE;QACC,MAAMC,eAAeD,OAAO,CAAC,EAAE;QAC/BhB,SAASiB;IACX,GACA;QAACjB;KAAS;IAGZ,MAAMkB,oBAAoBtE,YAAY;QACpC0C,iBAAiB;QACjBU,SAAS;QACTR,WAAW;IACb,GAAG;QAACQ;KAAS;IAEb,MAAMmB,cAAcxE,MAAMC,WAAW,CACnC,CAAC,EAAEuD,IAAI,EAAEiB,aAAa,EAAE;QACtBhB,QAAQ;YACNC,GAAGF,KAAKE,CAAC,IAAI;YACbC,GAAGH,KAAKG,CAAC,IAAI;QACf;QACA,MAAMe,YAAY,MAAMC,KAAKC,GAAG,CAACpB,KAAKqB,KAAK,EAAErB,KAAKsB,MAAM;QAExDC,SAASC,eAAe,CAACC,KAAK,CAACC,WAAW,CAAC,kCAAkC,CAAC,EAAER,UAAU,CAAC;QAC3FK,SAASC,eAAe,CAACC,KAAK,CAACC,WAAW,CACxC,wCACA,CAAC,EAAER,YAAa,CAAA,KAAKlB,KAAKsB,MAAM,GAAG,IAAItB,KAAKG,CAAC,AAADA,EAAG,CAAC,CAAC;QAEnDoB,SAASC,eAAe,CAACC,KAAK,CAACC,WAAW,CACxC,yCACA,CAAC,EAAER,YAAa,CAAA,KAAKlB,KAAKqB,KAAK,GAAG,IAAIrB,KAAKE,CAAC,AAADA,EAAG,CAAC,CAAC;QAElDZ,YAAY;QACZC,wBAAwB;YACtBoB,MAAM;YACNgB,QAAQ;gBACNC,aACE5B,QAAQiB,gBACJ;oBACEjB,MAAMA,QAAQ;oBACd6B,YAAYZ,gBAAgBA,gBAAgB;gBAC9C,IACA;YACR;QACF;IACF,GACA;QAAC1B;QAAyBD;KAAY;IAGxC5C,UAAU;QACRgD,OAAOtC,qBAAqByB,gBAAgB,CAAC,GAAG;QAChDM,iBAAiB;IACnB,GAAG;QAACN;KAAa;IAEjBnC,UAAU;QACR,IAAIuB,iBAAiByC,MAAM;YACzB,MAAMoB,aAAa,IAAIC;YACvBD,WAAWE,MAAM,GAAG,CAAC3B;gBACnB,MAAM4B,SAAS5B,EAAEE,MAAM,EAAE2B;gBAEzB,IAAI,OAAOD,WAAW,UAAU;oBAC9B5C,WAAW4C;gBACb;YACF;YACAH,WAAWK,aAAa,CAAClE;QAC3B;QAEA,IAAI,OAAOa,aAAa,YAAY;YAClCA,SAASb;QACX;IACF,GAAG;QAACA;QAAOa;QAAUC;KAAU;IAE/B,MAAMqD,kBACJzC,gBAAgB0C,QAAQC,cACxB,YAAY3C,kBACZA,gBAAgB4C,QAAQD;IAE1B,MAAME,gBAAgBxD,cAAcyD,YAAYC,SAAS;IACzD,MAAMC,mBAAmBC,QAAQ5D,cAAc6D;IAC/C,uDAAuD;IACvD,MAAMC,oBAAoB9D,cAAc6C,eAAe;IAEvD,MAAM,EAAE7B,MAAM+C,WAAW,IAAI,EAAElB,aAAa,IAAI,EAAE,GAAG7C;IAErD,MAAMgE,iBAAiBnB,cAAeW,CAAAA,iBAAiBG,oBAAoBG,iBAAgB;IAE3F,MAAMG,oBAAoBhE,YAAY,IAAIiE,OAAOC,WAAW,KAAK;IAEjE,qBACE,MAAC5E;QAAIC,WAAW;YAAC5B;YAAgBiB;SAAU,CAACuF,MAAM,CAACR,SAASS,IAAI,CAAC;;0BAC/D,KAACxG;gBAAWyG,SAAS1D;gBAAcE,WAAWA;;YAC7CL,IAAI8D,QAAQ,IAAI,CAACrE,+BAChB,KAACxB;gBACCU,SAAS2E,YAAYC;gBACrBpE,gBAAgBA;gBAChBa,KAAKA;gBACL+D,cAAcpB,kBAAkBrB,oBAAoB7C;gBACpDsE,eAAeA;gBACfiB,eAAeR;gBACfjE,cAAcA;;YAGhB,CAAA,CAACS,IAAI8D,QAAQ,IAAIrE,aAAY,mBAC7B,MAACX;gBAAIC,WAAW,CAAC,EAAEX,UAAU,QAAQ,CAAC;;oBACnC,CAACI,uBACA,KAACT;wBACCgB,WAAW,CAAC,EAAEX,UAAU,UAAU,CAAC;wBACnC6F,WAAW1E,cAAc0E;wBACzB5E,UAAU8B;;oBAIb3C,uBACC,MAACzB,MAAMmH,QAAQ;;0CACb,KAACpF;gCAAIC,WAAW,CAAC,EAAEX,UAAU,gBAAgB,CAAC;0CAC5C,cAAA,KAACD;oCACCgB,gBAAgBA;oCAChBQ,SAAS7C,QAAQ0B,MAAM0C,IAAI,IAAIvB,UAAU;;;0CAG7C,MAACb;gCAAIC,WAAW,CAAC,EAAEX,UAAU,kBAAkB,CAAC;;kDAC9C,KAAC+F;wCACCpF,WAAW,CAAC,EAAEX,UAAU,UAAU,CAAC;wCACnCiB,UAAUsB;wCACVO,MAAK;wCACL1C,OAAOA,MAAM4F,IAAI;;oCAGlBtH,QAAQ0B,MAAM0C,IAAI,KAAK1C,MAAM0C,IAAI,KAAK,iCACrC,KAACxC;wCACCC,SAAS2E,YAAYC;wCACrB3E,kBAAkBmE,iBAAiB/C,IAAI8D,QAAQ,IAAI,CAACrE;;;;0CAI1D,KAAC7B;gCACCyG,aAAY;gCACZtF,WAAW,CAAC,EAAEX,UAAU,QAAQ,CAAC;gCACjCkG,MAAK;gCACLC,WAAU;gCACVC,SAASlD;gCACTmD,KAAK;gCACLC,SAAS7F,EAAE;;;;;;YAMnBL,CAAAA,SAASwB,IAAI8D,QAAQ,AAAD,mBACpB,KAACjG;gBAAO8G,QAAQ;gBAAM3F,MAAMX;0BAC1B,cAAA,KAACL;oBACC4G,UAAUpG,OAAO4F,QAAQpE,KAAK8D;oBAC9BnE,SAASA,WAAWK,KAAK6E;oBACzBb,eAAeR;oBACfsB,aAAa/E,iBAAiBoC,aAAa5B,QAAQ,CAAC;oBACpDwE,mBAAmB;wBACjBtE,GAAGV,iBAAiBoC,aAAaC,WAAW3B,KAAKT,IAAIgF,MAAM,IAAI;wBAC/DtE,GAAGX,iBAAiBoC,aAAaC,WAAW1B,KAAKV,IAAIiF,MAAM,IAAI;oBACjE;oBACAC,QAAQ3D;oBACR+B,UAAUA;oBACVC,gBAAgBA;;;YAIrBvD,OAAO+C,+BACN,KAAClF;gBACCkB,WAAW,CAAC,EAAEX,UAAU,eAAe,CAAC;gBACxC+G,UAAU;gBACVnG,MAAMV;gBACN8G,OAAOvG,EAAE,mBAAmB;oBAAEwG,OAAOrF,KAAK8D;gBAAS;0BAEnD,cAAA,KAAC5F;oBAAa8B,KAAKA;oBAAKT,cAAcA;;;;;AAKhD,EAAC"}

package/dist/elements/ViewDescription/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -10,12 +11,13 @@ export const ViewDescription = (props)=>{
     const { description } = props;
     if (isComponent(description)) {
         const Description = description;
-        return /*#__PURE__*/ React.createElement(Description, null);
+        return /*#__PURE__*/ _jsx(Description, {});
     }
     if (description) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "view-description"
-        }, typeof description === 'function' ? description() : getTranslation(description, i18n));
+        return /*#__PURE__*/ _jsx("div", {
+            className: "view-description",
+            children: typeof description === 'function' ? description() : getTranslation(description, i18n)
+        });
     }
     return null;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type DescriptionFunction = () => string\n\nexport type DescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionComponent | DescriptionFunction | Record<string, string> | string\n\nexport type ViewDescriptionProps = {\n  description?: Description\n}\n\nexport function isComponent(description: Description): description is DescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (isComponent(description)) {\n    const Description = description\n    return <Description />\n  }\n\n  if (description) {\n    return (\n      <div className=\"view-description\">\n        {typeof description === 'function' ? description() : getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","i18n","Description","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,uCAAsC;AAarE,OAAO,SAASC,YAAYC,WAAwB;IAClD,qBAAOH,MAAMI,cAAc,CAACD;AAC9B;AAEA,OAAO,MAAME,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEE,WAAW,EAAE,GAAGG;IAExB,IAAIJ,YAAYC,cAAc;QAC5B,MAAMK,cAAcL;QACpB,qBAAO,oBAACK;IACV;IAEA,IAAIL,aAAa;QACf,qBACE,oBAACM;YAAIC,WAAU;WACZ,OAAOP,gBAAgB,aAAaA,gBAAgBJ,eAAeI,aAAaI;IAGvF;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type DescriptionFunction = () => string\n\nexport type DescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionComponent | DescriptionFunction | Record<string, string> | string\n\nexport type ViewDescriptionProps = {\n  description?: Description\n}\n\nexport function isComponent(description: Description): description is DescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (isComponent(description)) {\n    const Description = description\n    return <Description />\n  }\n\n  if (description) {\n    return (\n      <div className=\"view-description\">\n        {typeof description === 'function' ? description() : getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","i18n","Description","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,uCAAsC;AAarE,OAAO,SAASC,YAAYC,WAAwB;IAClD,qBAAOH,MAAMI,cAAc,CAACD;AAC9B;AAEA,OAAO,MAAME,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEE,WAAW,EAAE,GAAGG;IAExB,IAAIJ,YAAYC,cAAc;QAC5B,MAAMK,cAAcL;QACpB,qBAAO,KAACK;IACV;IAEA,IAAIL,aAAa;QACf,qBACE,KAACM;YAAIC,WAAU;sBACZ,OAAOP,gBAAgB,aAAaA,gBAAgBJ,eAAeI,aAAaI;;IAGvF;IAEA,OAAO;AACT,EAAC"}

package/dist/elements/WhereBuilder/Condition/Date/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQrC,CAAA"}

package/dist/elements/WhereBuilder/Condition/Date/index.js

@@ -1,16 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { DatePickerField } from '../../../DatePicker/index.js';
 const baseClass = 'condition-value-date';
 export const DateField = ({ admin, disabled, onChange, value })=>{
     const { date } = admin || {};
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement(DatePickerField, {
-        ...date,
-        onChange: onChange,
-        readOnly: disabled,
-        value: value
-    }));
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsx(DatePickerField, {
+            ...date,
+            onChange: onChange,
+            readOnly: disabled,
+            value: value
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/WhereBuilder/Condition/Date/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {\n  const { date } = admin || {}\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />\n    </div>\n  )\n}\n"],"names":["React","DatePickerField","baseClass","DateField","admin","disabled","onChange","value","date","div","className","readOnly"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAA6B,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IAC7E,MAAM,EAAEC,IAAI,EAAE,GAAGJ,SAAS,CAAC;IAE3B,qBACE,oBAACK;QAAIC,WAAWR;qBACd,oBAACD;QAAiB,GAAGO,IAAI;QAAEF,UAAUA;QAAUK,UAAUN;QAAUE,OAAOA;;AAGhF,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {\n  const { date } = admin || {}\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />\n    </div>\n  )\n}\n"],"names":["React","DatePickerField","baseClass","DateField","admin","disabled","onChange","value","date","div","className","readOnly"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAA6B,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IAC7E,MAAM,EAAEC,IAAI,EAAE,GAAGJ,SAAS,CAAC;IAE3B,qBACE,KAACK;QAAIC,WAAWR;kBACd,cAAA,KAACD;YAAiB,GAAGO,IAAI;YAAEF,UAAUA;YAAUK,UAAUN;YAAUE,OAAOA;;;AAGhF,EAAC"}

package/dist/elements/WhereBuilder/Condition/Number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYvC,CAAA"}

package/dist/elements/WhereBuilder/Condition/Number/index.js

@@ -1,9 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 const baseClass = 'condition-value-number';
 export const NumberField = ({ disabled, onChange, value })=>{
     const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement("input", {
+    return /*#__PURE__*/ _jsx("input", {
         className: baseClass,
         disabled: disabled,
         onChange: (e)=>onChange(e.target.value),

package/dist/elements/WhereBuilder/Condition/Number/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {\n  const { t } = useTranslation()\n  return (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"number\"\n      value={value}\n    />\n  )\n}\n"],"names":["React","useTranslation","baseClass","NumberField","disabled","onChange","value","t","input","className","e","target","placeholder","type"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,6CAA4C;AAG3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAA+B,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IACxE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IACd,qBACE,oBAACO;QACCC,WAAWP;QACXE,UAAUA;QACVC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QACxCM,aAAaL,EAAE;QACfM,MAAK;QACLP,OAAOA;;AAGb,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {\n  const { t } = useTranslation()\n  return (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"number\"\n      value={value}\n    />\n  )\n}\n"],"names":["React","useTranslation","baseClass","NumberField","disabled","onChange","value","t","input","className","e","target","placeholder","type"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,6CAA4C;AAG3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAA+B,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IACxE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IACd,qBACE,KAACO;QACCC,WAAWP;QACXE,UAAUA;QACVC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QACxCM,aAAaL,EAAE;QACfM,MAAK;QACLP,OAAOA;;AAGb,EAAC"}