@payloadcms/ui 3.0.0-canary.c27a334 → 3.0.0-canary.cb7fa00

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DuplicateDocument/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\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 { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/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 { PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'duplicate'\n\nexport type Props = {\n  id: string\n  singularLabel: SanitizedCollectionConfig['labels']['singular']\n  slug: string\n}\n\nexport const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel }) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const router = useRouter()\n  const modified = useFormModified()\n  const { toggleModal } = useModal()\n  const locale = useLocale()\n  const { setModified } = useForm()\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const {\n    routes: { admin },\n  } = useConfig()\n  const [hasClicked, setHasClicked] = useState<boolean>(false)\n  const { i18n, t } = useTranslation()\n\n  const modalSlug = `duplicate-${id}`\n\n  const handleClick = useCallback(\n    async (override = false) => {\n      setHasClicked(true)\n\n      if (modified && !override) {\n        toggleModal(modalSlug)\n        return\n      }\n      await requests\n        .post(`${serverURL}${api}/${slug}/${id}/duplicate?locale=${locale.code}`, {\n          body: JSON.stringify({}),\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n            credentials: 'include',\n          },\n        })\n        .then(async (res) => {\n          const { doc, errors, message } = await res.json()\n          if (res.status < 400) {\n            toast.success(\n              message ||\n                t('general:successfullyDuplicated', { label: getTranslation(singularLabel, i18n) }),\n              {\n                autoClose: 3000,\n              },\n            )\n            setModified(false)\n            router.push(`${admin}/collections/${slug}/${doc.id}?locale=${locale.code}`)\n          } else {\n            toast.error(\n              errors?.[0].message ||\n                message ||\n                t('error:unspecific', { label: getTranslation(singularLabel, i18n) }),\n              { autoClose: 5000 },\n            )\n          }\n        })\n    },\n    [\n      locale,\n      modified,\n      serverURL,\n      api,\n      slug,\n      id,\n      i18n,\n      toggleModal,\n      modalSlug,\n      t,\n      singularLabel,\n      setModified,\n      router,\n      admin,\n    ],\n  )\n\n  const confirm = useCallback(async () => {\n    setHasClicked(false)\n    await handleClick(true)\n  }, [handleClick])\n\n  return (\n    <React.Fragment>\n      <PopupList.Button id=\"action-duplicate\" onClick={() => handleClick(false)}>\n        {t('general:duplicate')}\n      </PopupList.Button>\n      {modified && hasClicked && (\n        <Modal className={`${baseClass}__modal`} slug={modalSlug}>\n          <MinimalTemplate className={`${baseClass}__modal-template`}>\n            <h1>{t('general:confirmDuplication')}</h1>\n            <p>{t('general:unsavedChangesDuplicate')}</p>\n            <Button\n              buttonStyle=\"secondary\"\n              id=\"confirm-cancel\"\n              onClick={() => toggleModal(modalSlug)}\n              type=\"button\"\n            >\n              {t('general:cancel')}\n            </Button>\n            <Button id=\"confirm-duplicate\" onClick={confirm}>\n              {t('general:duplicateWithoutSaving')}\n            </Button>\n          </MinimalTemplate>\n        </Modal>\n      )}\n    </React.Fragment>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","toast","useForm","useFormModified","useConfig","useLocale","useTranslation","MinimalTemplate","requests","Button","PopupList","baseClass","DuplicateDocument","id","slug","singularLabel","Modal","useModal","router","modified","toggleModal","locale","setModified","routes","api","serverURL","admin","hasClicked","setHasClicked","i18n","t","modalSlug","handleClick","override","post","code","body","JSON","stringify","headers","language","credentials","then","res","doc","errors","message","json","status","success","label","autoClose","push","error","confirm","Fragment","onClick","className","h1","p","buttonStyle","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/DuplicateDocument/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Button } from '../Button/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'duplicate'\n\nexport type Props = {\n  id: string\n  singularLabel: SanitizedCollectionConfig['labels']['singular']\n  slug: string\n}\n\nexport const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel }) => {\n  const router = useRouter()\n  const modified = useFormModified()\n  const { toggleModal } = useModal()\n  const locale = useLocale()\n  const { setModified } = useForm()\n\n  const {\n    config: {\n      serverURL,\n      routes: { admin: adminRoute, api: apiRoute },\n    },\n  } = useConfig()\n\n  const [hasClicked, setHasClicked] = useState<boolean>(false)\n  const { i18n, t } = useTranslation()\n\n  const modalSlug = `duplicate-${id}`\n\n  const handleClick = useCallback(\n    async (override = false) => {\n      setHasClicked(true)\n\n      if (modified && !override) {\n        toggleModal(modalSlug)\n        return\n      }\n      await requests\n        .post(\n          `${serverURL}${apiRoute}/${slug}/${id}/duplicate${locale?.code ? `?locale=${locale.code}` : ''}`,\n          {\n            body: JSON.stringify({}),\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n              credentials: 'include',\n            },\n          },\n        )\n        .then(async (res) => {\n          const { doc, errors, message } = await res.json()\n          if (res.status < 400) {\n            toast.success(\n              message ||\n                t('general:successfullyDuplicated', { label: getTranslation(singularLabel, i18n) }),\n            )\n            setModified(false)\n            router.push(\n              formatAdminURL({\n                adminRoute,\n                path: `/collections/${slug}/${doc.id}${locale?.code ? `?locale=${locale.code}` : ''}`,\n              }),\n            )\n          } else {\n            toast.error(\n              errors?.[0].message ||\n                message ||\n                t('error:unspecific', { label: getTranslation(singularLabel, i18n) }),\n            )\n          }\n        })\n    },\n    [\n      locale,\n      modified,\n      serverURL,\n      apiRoute,\n      slug,\n      id,\n      i18n,\n      toggleModal,\n      modalSlug,\n      t,\n      singularLabel,\n      setModified,\n      router,\n      adminRoute,\n    ],\n  )\n\n  const confirm = useCallback(async () => {\n    setHasClicked(false)\n    await handleClick(true)\n  }, [handleClick])\n\n  return (\n    <React.Fragment>\n      <PopupList.Button id=\"action-duplicate\" onClick={() => handleClick(false)}>\n        {t('general:duplicate')}\n      </PopupList.Button>\n      {modified && hasClicked && (\n        <Modal className={`${baseClass}__modal`} slug={modalSlug}>\n          <div className={`${baseClass}__modal-template`}>\n            <h1>{t('general:confirmDuplication')}</h1>\n            <p>{t('general:unsavedChangesDuplicate')}</p>\n            <Button\n              buttonStyle=\"secondary\"\n              id=\"confirm-cancel\"\n              onClick={() => toggleModal(modalSlug)}\n              type=\"button\"\n            >\n              {t('general:cancel')}\n            </Button>\n            <Button id=\"confirm-duplicate\" onClick={confirm}>\n              {t('general:duplicateWithoutSaving')}\n            </Button>\n          </div>\n        </Modal>\n      )}\n    </React.Fragment>\n  )\n}\n"],"names":["Modal","useModal","getTranslation","useRouter","React","useCallback","useState","toast","useForm","useFormModified","useConfig","useLocale","useTranslation","requests","formatAdminURL","Button","PopupList","baseClass","DuplicateDocument","id","slug","singularLabel","router","modified","toggleModal","locale","setModified","config","serverURL","routes","admin","adminRoute","api","apiRoute","hasClicked","setHasClicked","i18n","t","modalSlug","handleClick","override","post","code","body","JSON","stringify","headers","language","credentials","then","res","doc","errors","message","json","status","success","label","push","path","error","confirm","Fragment","onClick","className","div","h1","p","buttonStyle","type"],"mappings":"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"}

package/dist/elements/DuplicateDocument/index.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     .btn {
       margin-right: $baseline;

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

@@ -1,10 +1,9 @@
+import type { ClientCollectionConfig, ClientField } from 'payload';
 import React from 'react';
 import './index.scss';
-import type { ClientCollectionConfig } from 'payload/types';
-import type { FieldMap } from '../../utilities/buildComponentMap.js';
 export type EditManyProps = {
-    collection: ClientCollectionConfig;
-    fieldMap: FieldMap;
+    readonly collection: ClientCollectionConfig;
+    readonly fields: ClientField[];
 };
 export declare const EditMany: React.FC<EditManyProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditMany/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAoBpD,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAEpE,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,sBAAsB,CAAA;IAClC,QAAQ,EAAE,QAAQ,CAAA;CACnB,CAAA;AAgED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoJ5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAa,MAAM,SAAS,CAAA;AAK7E,OAAO,KAAgC,MAAM,OAAO,CAAA;AAoBpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;IAC3C,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAC/B,CAAA;AAmED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoJ5C,CAAA"}

package/dist/elements/EditMany/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
 import React, { useCallback, useState } from 'react';
@@ -8,7 +8,7 @@ import { useForm } from '../../forms/Form/context.js';
 import { Form } from '../../forms/Form/index.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { FormSubmit } from '../../forms/Submit/index.js';
-import { X } from '../../icons/X/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js';
@@ -20,6 +20,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormState } from '../../utilities/getFormState.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { FieldSelect } from '../FieldSelect/index.js';
+import './index.scss';
 const baseClass = 'edit-many';
 const Submit = ({ action, disabled })=>{
     const { submit } = useForm();
@@ -88,11 +89,10 @@ const SaveDraftButton = ({ action, disabled })=>{
     });
 };
 export const EditMany = (props)=>{
-    const { useModal } = facelessUIImport;
-    const { collection: { slug, labels: { plural } } = {}, collection, fieldMap } = props;
+    const { collection: { slug, labels: { plural } } = {}, collection, fields } = props;
     const { permissions } = useAuth();
     const { closeModal } = useModal();
-    const { routes: { api: apiRoute }, serverURL } = useConfig();
+    const { config: { routes: { api: apiRoute }, serverURL } } = useConfig();
     const { count, getQueryParams, selectAll } = useSelection();
     const { i18n, t } = useTranslation();
     const [selected, setSelected] = useState([]);
@@ -193,7 +193,7 @@ export const EditMany = (props)=>{
                                             id: `close-drawer__${drawerSlug}`,
                                             onClick: ()=>closeModal(drawerSlug),
                                             type: "button",
-                                            children: /*#__PURE__*/ _jsx(X, {})
+                                            children: /*#__PURE__*/ _jsx(XIcon, {})
                                         })
                                     ]
                                 }),
@@ -206,11 +206,11 @@ export const EditMany = (props)=>{
                                     onSuccess: onSuccess,
                                     children: [
                                         /*#__PURE__*/ _jsx(FieldSelect, {
-                                            fieldMap: fieldMap,
+                                            fields: fields,
                                             setSelected: setSelected
                                         }),
                                         selected.length === 0 ? null : /*#__PURE__*/ _jsx(RenderFields, {
-                                            fieldMap: selected,
+                                            fields: selected,
                                             path: "",
                                             readOnly: false,
                                             schemaPath: slug

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormProps } from '../../forms/Form/index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { OperationContext } from '../../providers/Operation/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 { getFormState } from '../../utilities/getFormState.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-many'\n\nimport type { ClientCollectionConfig } from 'payload/types'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nexport type EditManyProps = {\n  collection: ClientCollectionConfig\n  fieldMap: FieldMap\n}\n\nconst Submit: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__save`} disabled={disabled} onClick={save}>\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\n\nconst PublishButton: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'published',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__publish`} disabled={disabled} onClick={save}>\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\n\nconst SaveDraftButton: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'draft',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__draft`} disabled={disabled} onClick={save}>\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\nexport const EditMany: React.FC<EditManyProps> = (props) => {\n  const { useModal } = facelessUIImport\n\n  const { collection: { slug, labels: { plural } } = {}, collection, fieldMap } = props\n\n  const { permissions } = useAuth()\n  const { closeModal } = useModal()\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = useConfig()\n  const { count, getQueryParams, selectAll } = useSelection()\n  const { i18n, t } = useTranslation()\n  const [selected, setSelected] = useState([])\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const [initialState, setInitialState] = useState<FormState>()\n  const hasInitializedState = React.useRef(false)\n  const { clearRouteCache } = useRouteCache()\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update?.permission\n\n  const drawerSlug = `edit-${slug}`\n\n  React.useEffect(() => {\n    if (!hasInitializedState.current) {\n      const getInitialState = async () => {\n        const result = await getFormState({\n          apiRoute,\n          body: {\n            collectionSlug: slug,\n            data: {},\n            operation: 'update',\n            schemaPath: slug,\n          },\n          serverURL,\n        })\n\n        setInitialState(result)\n        hasInitializedState.current = true\n      }\n\n      void getInitialState()\n    }\n  }, [apiRoute, hasInitializedState, serverURL, slug])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    ({ formState: prevFormState }) =>\n      getFormState({\n        apiRoute,\n        body: {\n          collectionSlug: slug,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: slug,\n        },\n        serverURL,\n      }),\n    [serverURL, apiRoute, slug],\n  )\n\n  if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {\n    return null\n  }\n\n  const onSuccess = () => {\n    router.replace(\n      stringifyParams({\n        params: { page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined },\n      }),\n    )\n    clearRouteCache()\n    closeModal(drawerSlug)\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:edit')}\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSelected([])\n        }}\n        slug={drawerSlug}\n      >\n        {t('general:edit')}\n      </DrawerToggler>\n      <Drawer Header={null} slug={drawerSlug}>\n        <DocumentInfoProvider collectionSlug={slug} id={null}>\n          <OperationContext.Provider value=\"update\">\n            <div className={`${baseClass}__main`}>\n              <div className={`${baseClass}__header`}>\n                <h2 className={`${baseClass}__header__title`}>\n                  {t('general:editingLabel', { count, label: getTranslation(plural, i18n) })}\n                </h2>\n                <button\n                  aria-label={t('general:close')}\n                  className={`${baseClass}__header__close`}\n                  id={`close-drawer__${drawerSlug}`}\n                  onClick={() => closeModal(drawerSlug)}\n                  type=\"button\"\n                >\n                  <X />\n                </button>\n              </div>\n              <Form\n                className={`${baseClass}__form`}\n                initialState={initialState}\n                onChange={[onChange]}\n                onSuccess={onSuccess}\n              >\n                <FieldSelect fieldMap={fieldMap} setSelected={setSelected} />\n                {selected.length === 0 ? null : (\n                  <RenderFields fieldMap={selected} path=\"\" readOnly={false} schemaPath={slug} />\n                )}\n                <div className={`${baseClass}__sidebar-wrap`}>\n                  <div className={`${baseClass}__sidebar`}>\n                    <div className={`${baseClass}__sidebar-sticky-wrap`}>\n                      <div className={`${baseClass}__document-actions`}>\n                        {collection?.versions?.drafts ? (\n                          <React.Fragment>\n                            <PublishButton\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}&draft=true`}\n                              disabled={selected.length === 0}\n                            />\n                            <SaveDraftButton\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}&draft=true`}\n                              disabled={selected.length === 0}\n                            />\n                          </React.Fragment>\n                        ) : (\n                          <Submit\n                            action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                            disabled={selected.length === 0}\n                          />\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </Form>\n            </div>\n          </OperationContext.Provider>\n        </DocumentInfoProvider>\n      </Drawer>\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","useForm","Form","RenderFields","FormSubmit","X","useAuth","useConfig","DocumentInfoProvider","OperationContext","useRouteCache","useSearchParams","SelectAllStatus","useSelection","useTranslation","getFormState","Drawer","DrawerToggler","FieldSelect","baseClass","Submit","action","disabled","submit","t","save","method","skipValidation","className","onClick","PublishButton","overrides","_status","SaveDraftButton","EditMany","props","useModal","collection","slug","labels","plural","fieldMap","permissions","closeModal","routes","api","apiRoute","serverURL","count","getQueryParams","selectAll","i18n","selected","setSelected","stringifyParams","router","initialState","setInitialState","hasInitializedState","useRef","clearRouteCache","collectionPermissions","collections","hasUpdatePermission","update","permission","drawerSlug","useEffect","current","getInitialState","result","body","collectionSlug","data","operation","schemaPath","onChange","formState","prevFormState","None","onSuccess","replace","params","page","AllAvailable","undefined","div","aria-label","Header","id","Provider","value","h2","label","button","type","length","path","readOnly","versions","drafts","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientField, FormState } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormProps } from '../../forms/Form/index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { OperationContext } from '../../providers/Operation/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 { getFormState } from '../../utilities/getFormState.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-many'\n\nexport type EditManyProps = {\n  readonly collection: ClientCollectionConfig\n  readonly fields: ClientField[]\n}\n\nconst Submit: React.FC<{\n  readonly action: string\n  readonly disabled: boolean\n}> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__save`} disabled={disabled} onClick={save}>\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\n\nconst PublishButton: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'published',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__publish`} disabled={disabled} onClick={save}>\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\n\nconst SaveDraftButton: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'draft',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__draft`} disabled={disabled} onClick={save}>\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\nexport const EditMany: React.FC<EditManyProps> = (props) => {\n  const { collection: { slug, labels: { plural } } = {}, collection, fields } = props\n\n  const { permissions } = useAuth()\n  const { closeModal } = useModal()\n  const {\n    config: {\n      routes: { api: apiRoute },\n      serverURL,\n    },\n  } = useConfig()\n  const { count, getQueryParams, selectAll } = useSelection()\n  const { i18n, t } = useTranslation()\n  const [selected, setSelected] = useState([])\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const [initialState, setInitialState] = useState<FormState>()\n  const hasInitializedState = React.useRef(false)\n  const { clearRouteCache } = useRouteCache()\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update?.permission\n\n  const drawerSlug = `edit-${slug}`\n\n  React.useEffect(() => {\n    if (!hasInitializedState.current) {\n      const getInitialState = async () => {\n        const result = await getFormState({\n          apiRoute,\n          body: {\n            collectionSlug: slug,\n            data: {},\n            operation: 'update',\n            schemaPath: slug,\n          },\n          serverURL,\n        })\n\n        setInitialState(result)\n        hasInitializedState.current = true\n      }\n\n      void getInitialState()\n    }\n  }, [apiRoute, hasInitializedState, serverURL, slug])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    ({ formState: prevFormState }) =>\n      getFormState({\n        apiRoute,\n        body: {\n          collectionSlug: slug,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: slug,\n        },\n        serverURL,\n      }),\n    [serverURL, apiRoute, slug],\n  )\n\n  if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {\n    return null\n  }\n\n  const onSuccess = () => {\n    router.replace(\n      stringifyParams({\n        params: { page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined },\n      }),\n    )\n    clearRouteCache()\n    closeModal(drawerSlug)\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:edit')}\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSelected([])\n        }}\n        slug={drawerSlug}\n      >\n        {t('general:edit')}\n      </DrawerToggler>\n      <Drawer Header={null} slug={drawerSlug}>\n        <DocumentInfoProvider collectionSlug={slug} id={null}>\n          <OperationContext.Provider value=\"update\">\n            <div className={`${baseClass}__main`}>\n              <div className={`${baseClass}__header`}>\n                <h2 className={`${baseClass}__header__title`}>\n                  {t('general:editingLabel', { count, label: getTranslation(plural, i18n) })}\n                </h2>\n                <button\n                  aria-label={t('general:close')}\n                  className={`${baseClass}__header__close`}\n                  id={`close-drawer__${drawerSlug}`}\n                  onClick={() => closeModal(drawerSlug)}\n                  type=\"button\"\n                >\n                  <XIcon />\n                </button>\n              </div>\n              <Form\n                className={`${baseClass}__form`}\n                initialState={initialState}\n                onChange={[onChange]}\n                onSuccess={onSuccess}\n              >\n                <FieldSelect fields={fields} setSelected={setSelected} />\n                {selected.length === 0 ? null : (\n                  <RenderFields fields={selected} path=\"\" readOnly={false} schemaPath={slug} />\n                )}\n                <div className={`${baseClass}__sidebar-wrap`}>\n                  <div className={`${baseClass}__sidebar`}>\n                    <div className={`${baseClass}__sidebar-sticky-wrap`}>\n                      <div className={`${baseClass}__document-actions`}>\n                        {collection?.versions?.drafts ? (\n                          <React.Fragment>\n                            <PublishButton\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}&draft=true`}\n                              disabled={selected.length === 0}\n                            />\n                            <SaveDraftButton\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}&draft=true`}\n                              disabled={selected.length === 0}\n                            />\n                          </React.Fragment>\n                        ) : (\n                          <Submit\n                            action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                            disabled={selected.length === 0}\n                          />\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </Form>\n            </div>\n          </OperationContext.Provider>\n        </DocumentInfoProvider>\n      </Drawer>\n    </div>\n  )\n}\n"],"names":["useModal","getTranslation","useRouter","React","useCallback","useState","useForm","Form","RenderFields","FormSubmit","XIcon","useAuth","useConfig","DocumentInfoProvider","OperationContext","useRouteCache","useSearchParams","SelectAllStatus","useSelection","useTranslation","getFormState","Drawer","DrawerToggler","FieldSelect","baseClass","Submit","action","disabled","submit","t","save","method","skipValidation","className","onClick","PublishButton","overrides","_status","SaveDraftButton","EditMany","props","collection","slug","labels","plural","fields","permissions","closeModal","config","routes","api","apiRoute","serverURL","count","getQueryParams","selectAll","i18n","selected","setSelected","stringifyParams","router","initialState","setInitialState","hasInitializedState","useRef","clearRouteCache","collectionPermissions","collections","hasUpdatePermission","update","permission","drawerSlug","useEffect","current","getInitialState","result","body","collectionSlug","data","operation","schemaPath","onChange","formState","prevFormState","None","onSuccess","replace","params","page","AllAvailable","undefined","div","aria-label","Header","id","Provider","value","h2","label","button","type","length","path","readOnly","versions","drafts","Fragment"],"mappings":"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"}

package/dist/elements/EditMany/index.scss

@@ -3,7 +3,7 @@
 .edit-many {
   &__toggle {
     font-size: 1rem;
-    line-height: base(1);
+    line-height: base(1.2);
     display: inline-flex;
     background: var(--theme-elevation-150);
     color: var(--theme-elevation-800);
@@ -12,7 +12,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     border: 0;
-    padding: 0 base(0.25);
+    padding: 0 base(0.4);
     align-items: center;
     cursor: pointer;
     text-decoration: none;
@@ -63,17 +63,11 @@
       height: base(1);
 
       svg {
-        width: base(2.75);
-        height: base(2.75);
+        width: base(2);
+        height: base(2);
         position: relative;
-        [dir='ltr'] & {
-          left: base(-0.825);
-        }
-
-        [dir='rtl'] & {
-          right: base(-0.825);
-        }
-        top: base(-0.825);
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
 
         .stroke {
           stroke-width: 2px;

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

@@ -1,4 +1,4 @@
-import type CropType from 'react-image-crop';
+import type { UploadEdits } from 'payload';
 import React from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
 import './index.scss';
@@ -10,12 +10,9 @@ export type EditUploadProps = {
     fileName: string;
     fileSrc: string;
     imageCacheTag?: string;
-    initialCrop?: CropType;
+    initialCrop?: UploadEdits['crop'];
     initialFocalPoint?: FocalPosition;
-    onSave?: ({ crop, focalPosition }: {
-        crop: CropType;
-        focalPosition: FocalPosition;
-    }) => void;
+    onSave?: (uploadEdits: UploadEdits) => void;
     showCrop?: boolean;
     showFocalPoint?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AAerB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAA;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6PhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AA2BrB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsQhD,CAAA"}

package/dist/elements/EditUpload/index.js

@@ -1,25 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
-import React, { useRef, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import React, { forwardRef, useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
-import { Plus } from '../../icons/Plus/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import './index.scss';
 const baseClass = 'edit-upload';
-const Input = ({ name, onChange, value })=>/*#__PURE__*/ _jsxs("div", {
+const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { name, onChange, value } = props;
+    return /*#__PURE__*/ _jsxs("div", {
         className: `${baseClass}__input`,
         children: [
             name,
             /*#__PURE__*/ _jsx("input", {
                 name: name,
                 onChange: (e)=>onChange(e.target.value),
+                ref: ref,
                 type: "number",
                 value: value
             })
         ]
     });
+});
 const defaultCrop = {
     height: 100,
     unit: '%',
@@ -28,35 +34,40 @@ const defaultCrop = {
     y: 0
 };
 export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
-    const { useModal } = facelessUIImport;
     const { closeModal } = useModal();
     const { t } = useTranslation();
     const [crop, setCrop] = useState(()=>({
             ...defaultCrop,
-            ...initialCrop
+            ...initialCrop || {}
         }));
     const defaultFocalPosition = {
         x: 50,
         y: 50
     };
-    console.log({
-        initialFocalPoint
-    });
     const [focalPosition, setFocalPosition] = useState(()=>({
             ...defaultFocalPosition,
             ...initialFocalPoint
         }));
     const [checkBounds, setCheckBounds] = useState(false);
-    const [originalHeight, setOriginalHeight] = useState(0);
-    const [originalWidth, setOriginalWidth] = useState(0);
+    const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState(0);
+    const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState(0);
     const focalWrapRef = useRef(undefined);
     const imageRef = useRef(undefined);
     const cropRef = useRef(undefined);
+    const heightInputRef = useRef(null);
+    const widthInputRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const onImageLoad = (e)=>{
+        // set the default image height/width on load
+        setUncroppedPixelHeight(e.currentTarget.naturalHeight);
+        setUncroppedPixelWidth(e.currentTarget.naturalWidth);
+        setImageLoaded(true);
+    };
     const fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
-        if (dimension === 'width' && intValue >= originalWidth) return null;
-        if (dimension === 'height' && intValue >= originalHeight) return null;
-        const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight));
+        if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null;
+        if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null;
+        const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
         if (percentage === 100 || percentage === 0) return null;
         setCrop({
             ...crop,
@@ -74,8 +85,10 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     };
     const saveEdits = ()=>{
         if (typeof onSave === 'function') onSave({
-            crop,
-            focalPosition
+            crop: crop ? crop : undefined,
+            focalPoint: focalPosition,
+            heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
+            widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
         });
         closeModal(editDrawerSlug);
     };
@@ -125,6 +138,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                 "aria-label": t('general:applyChanges'),
                                 buttonStyle: "primary",
                                 className: `${baseClass}__save`,
+                                disabled: !imageLoaded,
                                 onClick: saveEdits,
                                 children: t('general:applyChanges')
                             })
@@ -141,7 +155,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                             className: `${baseClass}__focal-wrapper`,
                             ref: focalWrapRef,
                             style: {
-                                aspectRatio: `${originalWidth / originalHeight}`
+                                aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
                             },
                             children: [
                                 showCrop ? /*#__PURE__*/ _jsx(ReactCrop, {
@@ -157,19 +171,13 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                     },
                                     children: /*#__PURE__*/ _jsx("img", {
                                         alt: t('upload:setCropArea'),
-                                        onLoad: (e)=>{
-                                            setOriginalHeight(e.currentTarget.naturalHeight);
-                                            setOriginalWidth(e.currentTarget.naturalWidth);
-                                        },
+                                        onLoad: onImageLoad,
                                         ref: imageRef,
                                         src: fileSrcToUse
                                     })
                                 }) : /*#__PURE__*/ _jsx("img", {
                                     alt: t('upload:setFocalPoint'),
-                                    onLoad: (e)=>{
-                                        setOriginalHeight(e.currentTarget.naturalHeight);
-                                        setOriginalWidth(e.currentTarget.naturalWidth);
-                                    },
+                                    onLoad: onImageLoad,
                                     ref: imageRef,
                                     src: fileSrcToUse
                                 }),
@@ -181,7 +189,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                     initialPosition: focalPosition,
                                     onDragEnd: onDragEnd,
                                     setCheckBounds: showCrop ? setCheckBounds : false,
-                                    children: /*#__PURE__*/ _jsx(Plus, {})
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
                                 })
                             ]
                         })
@@ -227,7 +235,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'width',
                                                         value
                                                     }),
-                                                value: (crop.width / 100 * originalWidth).toFixed(0)
+                                                ref: widthInputRef,
+                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
                                             }),
                                             /*#__PURE__*/ _jsx(Input, {
                                                 name: `${t('upload:height')} (px)`,
@@ -235,7 +244,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'height',
                                                         value
                                                     }),
-                                                value: (crop.height / 100 * originalHeight).toFixed(0)
+                                                ref: heightInputRef,
+                                                value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
                                             })
                                         ]
                                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type { Data } from 'payload/types'\nimport type CropType from 'react-image-crop'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\nconst Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({\n  name,\n  onChange,\n  value,\n}) => (\n  <div className={`${baseClass}__input`}>\n    {name}\n    <input name={name} onChange={(e) => onChange(e.target.value)} type=\"number\" value={value} />\n  </div>\n)\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, focalPosition }: { crop: CropType; focalPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  console.log({ initialFocalPoint })\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop,\n        focalPosition,\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${originalWidth / originalHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={(e) => {\n                    setOriginalHeight(e.currentTarget.naturalHeight)\n                    setOriginalWidth(e.currentTarget.naturalWidth)\n                  }}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={(e) => {\n                  setOriginalHeight(e.currentTarget.naturalHeight)\n                  setOriginalWidth(e.currentTarget.naturalWidth)\n                }}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <Plus />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    value={((crop.height / 100) * originalHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["facelessUIImport","React","useRef","useState","ReactCrop","editDrawerSlug","Plus","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","useModal","closeModal","t","crop","setCrop","defaultFocalPosition","console","log","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","onDragEnd","useCallback","centerFocalPoint","containerRect","current","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","ref","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","currentTarget","naturalHeight","naturalWidth","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop ? crop : undefined,\n        focalPoint: focalPosition,\n        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),\n        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            disabled={!imageLoaded}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    ref={widthInputRef}\n                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightInputRef}\n                    value={((crop.height / 100) * uncroppedPixelHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"mappings":"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"}

package/dist/elements/EditUpload/index.scss

@@ -111,6 +111,9 @@ $header-height: base(5);
   &__crop,
   &__focalOnly {
     padding: base(1.5) base(1.5) base(1.5) 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
   }
 
   &__crop {
@@ -181,7 +184,7 @@ $header-height: base(5);
     height: fit-content;
     border-radius: var(--style-radius-s);
     background-color: var(--theme-elevation-150);
-    padding: 0 base(0.25);
+    padding: 0 base(0.4);
   }
 
   &__input {

package/dist/elements/ErrorPill/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'error-pill';
 export const ErrorPill = (props)=>{
     const { className, count, i18n, withMessage } = props;