@payloadcms/ui 3.0.0-canary.926cbeb → 3.0.0-canary.93a7bbd

package/dist/elements/EditMany/index.js

@@ -89,10 +89,10 @@ const SaveDraftButton = ({ action, disabled })=>{
     });
 };
 export const EditMany = (props)=>{
-    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([]);
@@ -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 { ClientCollectionConfig, 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\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.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 { 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                  <XIcon />\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":["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","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"],"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":"AACA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,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,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;AAYD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,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

@@ -28,10 +28,8 @@ const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 const defaultCrop = {
     height: 100,
-    heightPixels: 0,
     unit: '%',
     width: 100,
-    widthPixels: 0,
     x: 0,
     y: 0
 };
@@ -40,7 +38,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     const { t } = useTranslation();
     const [crop, setCrop] = useState(()=>({
             ...defaultCrop,
-            ...initialCrop
+            ...initialCrop || {}
         }));
     const defaultFocalPosition = {
         x: 50,
@@ -51,24 +49,25 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
             ...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 heightRef = useRef(null);
-    const widthRef = useRef(null);
+    const heightInputRef = useRef(null);
+    const widthInputRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const onImageLoad = (e)=>{
-        setOriginalHeight(e.currentTarget.naturalHeight);
-        setOriginalWidth(e.currentTarget.naturalWidth);
+        // 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,
@@ -86,12 +85,10 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     };
     const saveEdits = ()=>{
         if (typeof onSave === 'function') onSave({
-            crop: crop ? {
-                ...crop,
-                heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),
-                widthPixels: Number(widthRef.current?.value ?? crop.widthPixels)
-            } : undefined,
-            focalPosition
+            crop: crop ? crop : undefined,
+            focalPoint: focalPosition,
+            heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
+            widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
         });
         closeModal(editDrawerSlug);
     };
@@ -158,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, {
@@ -215,10 +212,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                     className: `${baseClass}__reset`,
                                                     onClick: ()=>setCrop({
                                                             height: 100,
-                                                            heightPixels: originalHeight,
                                                             unit: '%',
                                                             width: 100,
-                                                            widthPixels: originalWidth,
                                                             x: 0,
                                                             y: 0
                                                         }),
@@ -240,8 +235,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'width',
                                                         value
                                                     }),
-                                                ref: widthRef,
-                                                value: (crop.width / 100 * originalWidth).toFixed(0)
+                                                ref: widthInputRef,
+                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
                                             }),
                                             /*#__PURE__*/ _jsx(Input, {
                                                 name: `${t('upload:height')} (px)`,
@@ -249,8 +244,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'height',
                                                         value
                                                     }),
-                                                ref: heightRef,
-                                                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 CropType from 'react-image-crop'\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?: 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  heightPixels: 0,\n  unit: '%',\n  width: 100,\n  widthPixels: 0,\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<CropType>(() => ({\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  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 heightRef = useRef<HTMLInputElement | null>(null)\n  const widthRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    setOriginalHeight(e.currentTarget.naturalHeight)\n    setOriginalWidth(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 >= 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: crop\n          ? {\n              ...crop,\n              heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),\n              widthPixels: Number(widthRef.current?.value ?? crop.widthPixels),\n            }\n          : undefined,\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            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: `${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={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                          heightPixels: originalHeight,\n                          unit: '%',\n                          width: 100,\n                          widthPixels: originalWidth,\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={widthRef}\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                    ref={heightRef}\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":["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","heightPixels","unit","width","widthPixels","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","heightRef","widthRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","Number","current","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":"AAAA;;AAGA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC3D,OAAOC,eAAe,mBAAkB;AACxC,OAAO,sCAAqC;AAE5C,SAASC,cAAc,QAAQ,iCAAgC;AAC/D,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAQlB,MAAMC,sBAAQT,WAAoC,CAACU,OAAOC;IACxD,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGJ;IAElC,qBACE,MAACK;QAAIC,WAAW,CAAC,EAAER,UAAU,OAAO,CAAC;;YAClCI;0BACD,KAACK;gBACCL,MAAMA;gBACNC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;gBACxCH,KAAKA;gBACLS,MAAK;gBACLN,OAAOA;;;;AAIf;AAkBA,MAAMO,cAAwB;IAC5BC,QAAQ;IACRC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,aAAa;IACbC,GAAG;IACHC,GAAG;AACL;AAEA,OAAO,MAAMC,aAAwC,CAAC,EACpDC,QAAQ,EACRC,OAAO,EACPC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,MAAM,EACNC,QAAQ,EACRC,cAAc,EACf;IACC,MAAM,EAAEC,UAAU,EAAE,GAAGxC;IACvB,MAAM,EAAEyC,CAAC,EAAE,GAAGjC;IAEd,MAAM,CAACkC,MAAMC,QAAQ,GAAGvC,SAAmB,IAAO,CAAA;YAChD,GAAGmB,WAAW;YACd,GAAGY,WAAW;QAChB,CAAA;IAEA,MAAMS,uBAAsC;QAC1Cf,GAAG;QACHC,GAAG;IACL;IAEA,MAAM,CAACe,eAAeC,iBAAiB,GAAG1C,SAAwB,IAAO,CAAA;YACvE,GAAGwC,oBAAoB;YACvB,GAAGR,iBAAiB;QACtB,CAAA;IACA,MAAM,CAACW,aAAaC,eAAe,GAAG5C,SAAkB;IACxD,MAAM,CAAC6C,gBAAgBC,kBAAkB,GAAG9C,SAAiB;IAC7D,MAAM,CAAC+C,eAAeC,iBAAiB,GAAGhD,SAAiB;IAE3D,MAAMiD,eAAelD,OAAmCmD;IACxD,MAAMC,WAAWpD,OAAqCmD;IACtD,MAAME,UAAUrD,OAAmCmD;IAEnD,MAAMG,YAAYtD,OAAgC;IAClD,MAAMuD,WAAWvD,OAAgC;IAEjD,MAAM,CAACwD,aAAaC,eAAe,GAAGxD,SAAkB;IAExD,MAAMyD,cAAc,CAACzC;QACnB8B,kBAAkB9B,EAAE0C,aAAa,CAACC,aAAa;QAC/CX,iBAAiBhC,EAAE0C,aAAa,CAACE,YAAY;QAC7CJ,eAAe;IACjB;IAEA,MAAMK,eAAe,CAAC,EAAEC,SAAS,EAAElD,KAAK,EAAoD;QAC1F,MAAMmD,WAAWC,SAASpD;QAC1B,IAAIkD,cAAc,WAAWC,YAAYhB,eAAe,OAAO;QAC/D,IAAIe,cAAc,YAAYC,YAAYlB,gBAAgB,OAAO;QAEjE,MAAMoB,aAAa,MAAOF,CAAAA,WAAYD,CAAAA,cAAc,UAAUf,gBAAgBF,cAAa,CAAC;QAE5F,IAAIoB,eAAe,OAAOA,eAAe,GAAG,OAAO;QAEnD1B,QAAQ;YACN,GAAGD,IAAI;YACP,CAACwB,UAAU,EAAEG;QACf;IACF;IAEA,MAAMC,wBAAwB,CAAC,EAC7BC,UAAU,EACVvD,KAAK,EAIN;QACC,MAAMmD,WAAWC,SAASpD;QAC1B,IAAImD,YAAY,KAAKA,YAAY,KAAK;YACpCrB,iBAAiB,CAAC0B,eAAkB,CAAA;oBAAE,GAAGA,YAAY;oBAAE,CAACD,WAAW,EAAEJ;gBAAS,CAAA;QAChF;IACF;IAEA,MAAMM,YAAY;QAChB,IAAI,OAAOpC,WAAW,YACpBA,OAAO;YACLK,MAAMA,OACF;gBACE,GAAGA,IAAI;gBACPjB,cAAciD,OAAOjB,UAAUkB,OAAO,EAAE3D,SAAS0B,KAAKjB,YAAY;gBAClEG,aAAa8C,OAAOhB,SAASiB,OAAO,EAAE3D,SAAS0B,KAAKd,WAAW;YACjE,IACA0B;YACJT;QACF;QACFL,WAAWlC;IACb;IAEA,MAAMsE,YAAY3E,MAAM4E,WAAW,CAAC,CAAC,EAAEhD,CAAC,EAAEC,CAAC,EAAE;QAC3CgB,iBAAiB;YAAEjB;YAAGC;QAAE;QACxBkB,eAAe;IACjB,GAAG,EAAE;IAEL,MAAM8B,mBAAmB;QACvB,MAAMC,gBAAgB1B,aAAasB,OAAO,CAACK,qBAAqB;QAChE,MAAMC,aAAa3C,WACfkB,QAAQmB,OAAO,CAACK,qBAAqB,KACrCzB,SAASoB,OAAO,CAACK,qBAAqB;QAC1C,MAAME,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGJ,cAAcI,IAAI,GAAGF,WAAWtD,KAAK,GAAG,CAAA,IAAKoD,cAAcpD,KAAK,GAAI;QAC1F,MAAMyD,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGN,cAAcM,GAAG,GAAGJ,WAAWzD,MAAM,GAAG,CAAA,IAAKuD,cAAcvD,MAAM,GAAI;QAC1FsB,iBAAiB;YAAEjB,GAAGqD;YAASpD,GAAGsD;QAAQ;IAC5C;IAEA,MAAME,eAAepD,gBAAgB,CAAC,EAAED,QAAQ,CAAC,EAAEC,cAAc,CAAC,GAAGD;IAErE,qBACE,MAAChB;QAAIC,WAAWR;;0BACd,MAACO;gBAAIC,WAAW,CAAC,EAAER,UAAU,QAAQ,CAAC;;kCACpC,MAAC6E;wBAAGC,OAAO,CAAC,EAAE/C,EAAE,mBAAmB,CAAC,EAAET,SAAS,CAAC;;4BAC7CS,EAAE;4BAAmB;4BAAET;;;kCAE1B,MAACf;wBAAIC,WAAW,CAAC,EAAER,UAAU,SAAS,CAAC;;0CACrC,KAACD;gCACCgF,cAAYhD,EAAE;gCACdiD,aAAY;gCACZxE,WAAW,CAAC,EAAER,UAAU,QAAQ,CAAC;gCACjCiF,SAAS,IAAMnD,WAAWlC;0CAEzBmC,EAAE;;0CAEL,KAAChC;gCACCgF,cAAYhD,EAAE;gCACdiD,aAAY;gCACZxE,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;gCAC/BkF,UAAU,CAACjC;gCACXgC,SAASlB;0CAERhC,EAAE;;;;;;0BAIT,MAACxB;gBAAIC,WAAW,CAAC,EAAER,UAAU,UAAU,CAAC;;kCACtC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;kCAClC,cAAA,MAACO;4BACCC,WAAW,CAAC,EAAER,UAAU,eAAe,CAAC;4BACxCG,KAAKwC;4BACLwC,OAAO;gCACLC,aAAa,CAAC,EAAE3C,gBAAgBF,eAAe,CAAC;4BAClD;;gCAECX,yBACC,KAACjC;oCACCa,WAAW,CAAC,EAAER,UAAU,WAAW,CAAC;oCACpCgC,MAAMA;oCACN3B,UAAU,CAACgF,GAAGC,IAAMrD,QAAQqD;oCAC5BC,YAAY,IAAMjD,eAAe;oCACjCkD,sBAAsB;wCACpB,qBAAO,KAACjF;4CAAIC,WAAW,CAAC,EAAER,UAAU,aAAa,CAAC;4CAAEG,KAAK2C;;oCAC3D;8CAEA,cAAA,KAAC2C;wCACCC,KAAK3D,EAAE;wCACP4D,QAAQxC;wCACRhD,KAAK0C;wCACL+C,KAAKhB;;mDAIT,KAACa;oCACCC,KAAK3D,EAAE;oCACP4D,QAAQxC;oCACRhD,KAAK0C;oCACL+C,KAAKhB;;gCAGR/C,gCACC,KAACgE;oCACCC,WAAWlE,WAAWkB,UAAUD;oCAChCR,aAAaT,WAAWS,cAAc;oCACtC7B,WAAW,CAAC,EAAER,UAAU,YAAY,CAAC;oCACrC+F,cAAcpD;oCACdqD,iBAAiB7D;oCACjB+B,WAAWA;oCACX5B,gBAAgBV,WAAWU,iBAAiB;8CAE5C,cAAA,KAACzC;;;;;oBAKP+B,CAAAA,YAAYC,cAAa,mBACzB,MAACtB;wBAAIC,WAAW,CAAC,EAAER,UAAU,SAAS,CAAC;;4BACpC4B,0BACC,MAACrB;gCAAIC,WAAW,CAAC,EAAER,UAAU,WAAW,CAAC;;kDACvC,KAACO;kDACC,cAAA,MAACA;4CAAIC,WAAW,CAAC,EAAER,UAAU,WAAW,CAAC;;8DACvC,KAACiG;8DAAIlE,EAAE;;8DACP,KAAChC;oDACCiF,aAAY;oDACZxE,WAAW,CAAC,EAAER,UAAU,OAAO,CAAC;oDAChCiF,SAAS,IACPhD,QAAQ;4DACNnB,QAAQ;4DACRC,cAAcwB;4DACdvB,MAAM;4DACNC,OAAO;4DACPC,aAAauB;4DACbtB,GAAG;4DACHC,GAAG;wDACL;8DAGDW,EAAE;;;;;kDAIT,KAACmE;wCAAK1F,WAAW,CAAC,EAAER,UAAU,aAAa,CAAC;kDACzC+B,EAAE;;kDAEL,MAACxB;wCAAIC,WAAW,CAAC,EAAER,UAAU,YAAY,CAAC;;0DACxC,KAACC;gDACCG,MAAM,CAAC,EAAE2B,EAAE,gBAAgB,KAAK,CAAC;gDACjC1B,UAAU,CAACC,QAAUiD,aAAa;wDAAEC,WAAW;wDAASlD;oDAAM;gDAC9DH,KAAK6C;gDACL1C,OAAO,AAAC,CAAA,AAAC0B,KAAKf,KAAK,GAAG,MAAOwB,aAAY,EAAG0D,OAAO,CAAC;;0DAEtD,KAAClG;gDACCG,MAAM,CAAC,EAAE2B,EAAE,iBAAiB,KAAK,CAAC;gDAClC1B,UAAU,CAACC,QAAUiD,aAAa;wDAAEC,WAAW;wDAAUlD;oDAAM;gDAC/DH,KAAK4C;gDACLzC,OAAO,AAAC,CAAA,AAAC0B,KAAKlB,MAAM,GAAG,MAAOyB,cAAa,EAAG4D,OAAO,CAAC;;;;;;4BAM7DtE,gCACC,MAACtB;gCAAIC,WAAW,CAAC,EAAER,UAAU,WAAW,CAAC;;kDACvC,KAACO;kDACC,cAAA,MAACA;4CAAIC,WAAW,CAAC,EAAER,UAAU,WAAW,CAAC;;8DACvC,KAACiG;8DAAIlE,EAAE;;8DACP,KAAChC;oDACCiF,aAAY;oDACZxE,WAAW,CAAC,EAAER,UAAU,OAAO,CAAC;oDAChCiF,SAASb;8DAERrC,EAAE;;;;;kDAIT,KAACmE;wCAAK1F,WAAW,CAAC,EAAER,UAAU,aAAa,CAAC;kDACzC+B,EAAE;;kDAEL,MAACxB;wCAAIC,WAAW,CAAC,EAAER,UAAU,YAAY,CAAC;;0DACxC,KAACC;gDACCG,MAAK;gDACLC,UAAU,CAACC,QAAUsD,sBAAsB;wDAAEC,YAAY;wDAAKvD;oDAAM;gDACpEA,OAAO6B,cAAchB,CAAC,CAACgF,OAAO,CAAC;;0DAEjC,KAAClG;gDACCG,MAAK;gDACLC,UAAU,CAACC,QAAUsD,sBAAsB;wDAAEC,YAAY;wDAAKvD;oDAAM;gDACpEA,OAAO6B,cAAcf,CAAC,CAAC+E,OAAO,CAAC;;;;;;;;;;;;AAUnD,EAAC;AAED,MAAMN,mBAAmB,CAAC,EACxBC,SAAS,EACTzD,WAAW,EACX+D,QAAQ,EACR5F,SAAS,EACTuF,YAAY,EACZC,kBAAkB;IAAE7E,GAAG;IAAIC,GAAG;AAAG,CAAC,EAClC8C,SAAS,EACT5B,cAAc,EACf;IACC,MAAM,CAAC+D,UAAUC,YAAY,GAAG5G,SAAS;QAAEyB,GAAG6E,gBAAgB7E,CAAC;QAAEC,GAAG4E,gBAAgB5E,CAAC;IAAC;IACtF,MAAM,CAACmF,YAAYC,cAAc,GAAG9G,SAAS;IAC7C,MAAM+G,UAAUhH,OAAsCmD;IAEtD,MAAM8D,iBAAiBnH,MAAM4E,WAAW,CACtC,CAACwC,WAAoBC,WAAoBC;QACvC,MAAMxC,gBAAgB0B,aAAa9B,OAAO,CAACK,qBAAqB;QAChE,MAAMC,aAAauB,UAAU7B,OAAO,CAACK,qBAAqB;QAC1D,MAAMwC,SAASH,aAAapC,WAAWE,IAAI;QAC3C,MAAMsC,SAASH,aAAarC,WAAWI,GAAG;QAE1C,MAAMqC,eAAeF,SAASvC,WAAWE,IAAI,IAAIqC,SAASvC,WAAW0C,KAAK;QAC1E,MAAMC,eAAeH,SAASxC,WAAWI,GAAG,IAAIoC,SAASxC,WAAW4C,MAAM;QAE1E,IAAIhG,IAAI,AAAE2F,CAAAA,SAASzC,cAAcI,IAAI,AAAD,IAAKJ,cAAcpD,KAAK,GAAI;QAChE,IAAIG,IAAI,AAAE2F,CAAAA,SAAS1C,cAAcM,GAAG,AAAD,IAAKN,cAAcvD,MAAM,GAAI;QAChE,MAAM0D,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGJ,cAAcI,IAAI,GAAGF,WAAWtD,KAAK,GAAG,CAAA,IAAKoD,cAAcpD,KAAK,GAAI;QAC1F,MAAMyD,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGN,cAAcM,GAAG,GAAGJ,WAAWzD,MAAM,GAAG,CAAA,IAAKuD,cAAcvD,MAAM,GAAI;QAC1F,IAAIkG,gBAAgBE,cAAc;YAChCV,cAAc;YACd,IAAIM,SAASvC,WAAWE,IAAI,EAAE;gBAC5BtD,IAAI,AAAEoD,CAAAA,WAAWE,IAAI,GAAGJ,cAAcI,IAAI,AAAD,IAAKJ,cAAcpD,KAAK,GAAI;YACvE,OAAO,IAAI6F,SAASvC,WAAW0C,KAAK,EAAE;gBACpC9F,IACE,AAAEkD,CAAAA,cAAcpD,KAAK,GAAIoD,CAAAA,cAAc4C,KAAK,GAAG1C,WAAW0C,KAAK,AAAD,CAAC,IAC7D5C,cAAcpD,KAAK,GACrB;YACJ;YAEA,IAAI8F,SAASxC,WAAWI,GAAG,EAAE;gBAC3BvD,IAAI,AAAEmD,CAAAA,WAAWI,GAAG,GAAGN,cAAcM,GAAG,AAAD,IAAKN,cAAcvD,MAAM,GAAI;YACtE,OAAO,IAAIiG,SAASxC,WAAW4C,MAAM,EAAE;gBACrC/F,IACE,AAAEiD,CAAAA,cAAcvD,MAAM,GAAIuD,CAAAA,cAAc8C,MAAM,GAAG5C,WAAW4C,MAAM,AAAD,CAAC,IAChE9C,cAAcvD,MAAM,GACtB;YACJ;YAEA,IAAI+F,UAAU;gBACZ1F,IAAI6F,eAAexC,UAAUrD;gBAC7BC,IAAI8F,eAAexC,UAAUtD;YAC/B;QACF;QAEA,OAAO;YAAED;YAAGC;QAAE;IAChB,GACA;QAAC0E;QAAWC;KAAa;IAG3B,MAAMqB,kBAAkB,CAACC;QACvBA,MAAMC,cAAc;QACpBd,cAAc;IAChB;IAEA,MAAMe,kBAAkB,CAACF;QACvB,IAAI,CAACd,YAAY,OAAO;QACxB,MAAM,EAAEpF,CAAC,EAAEC,CAAC,EAAE,GAAGsF,eAAeW,MAAMG,OAAO,EAAEH,MAAMI,OAAO;QAE5DnB,YAAY;YAAEnF;YAAGC;QAAE;IACrB;IAEA,MAAMsG,SAAS;QACblB,cAAc;QACdtC,UAAUmC;IACZ;IAEA9G,MAAMoI,SAAS,CAAC;QACd,IAAIpB,cAAc,CAACE,QAAQxC,OAAO,EAAE;QACpC,IAAI5B,aAAa;YACf,MAAM,EAAEvB,MAAM,EAAE2D,IAAI,EAAEE,GAAG,EAAE1D,KAAK,EAAE,GAAGwF,QAAQxC,OAAO,CAACK,qBAAqB;YAC1E,MAAM,EAAEnD,CAAC,EAAEC,CAAC,EAAE,GAAGsF,eAAejC,OAAOxD,QAAQ,GAAG0D,MAAM7D,SAAS,GAAG;YACpEoD,UAAU;gBAAE/C;gBAAGC;YAAE;YACjBkF,YAAY;gBAAEnF;gBAAGC;YAAE;YACnBkB,eAAe;YACf;QACF;IACF,GAAG;QAACoE;QAAgBH;QAAYlE;QAAaC;QAAgB+D,SAASlF,CAAC;QAAEkF,SAASjF,CAAC;QAAE8C;KAAU;IAE/F3E,MAAMoI,SAAS,CAAC;QACdrB,YAAY;YAAEnF,GAAG6E,gBAAgB7E,CAAC;YAAEC,GAAG4E,gBAAgB5E,CAAC;QAAC;IAC3D,GAAG;QAAC4E,gBAAgB7E,CAAC;QAAE6E,gBAAgB5E,CAAC;KAAC;IAEzC,qBACE,MAACb;QACCC,WAAW;YACT,CAAC,EAAER,UAAU,qBAAqB,CAAC;YACnCuG,cAAc,CAAC,EAAEvG,UAAU,+BAA+B,CAAC;SAC5D,CACE4H,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,aAAaR;;0BAEb,KAACS;gBACCxH,WAAW;oBAAC,CAAC,EAAER,UAAU,WAAW,CAAC;oBAAEQ;iBAAU,CAACoH,MAAM,CAACC,SAASC,IAAI,CAAC;gBACvEG,aAAab;gBACbc,WAAWR;gBACXvH,KAAKsG;gBACLtB,OAAO;oBAAEV,MAAM,CAAC,EAAE4B,SAASlF,CAAC,CAAC,CAAC,CAAC;oBAAEwD,KAAK,CAAC,EAAE0B,SAASjF,CAAC,CAAC,CAAC,CAAC;gBAAC;gBACvDR,MAAK;0BAEJwF;;0BAEH,KAAC7F;;;AAGP"}
+{"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.scss

@@ -14,6 +14,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--theme-error-300);
+  color: var(--theme-error-950);
 
   &--fixed-width {
     width: 18px;
@@ -27,17 +29,3 @@
     margin-left: 0.5px;
   }
 }
-
-html[data-theme='light'] {
-  .error-pill {
-    background: var(--theme-error-250);
-    color: var(--theme-error-750);
-  }
-}
-
-html[data-theme='dark'] {
-  .error-pill {
-    background: var(--theme-error-500);
-    color: var(--color-base-1000);
-  }
-}

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

@@ -1,14 +1,13 @@
-import type { FieldWithPath } from 'payload';
+import type { ClientField, FieldWithPath } from 'payload';
 import React, { type JSX } from 'react';
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
 export type FieldSelectProps = {
-    fieldMap: FieldMap;
-    setSelected: (fields: FieldWithPath[]) => void;
+    readonly fields: ClientField[];
+    readonly setSelected: (fields: FieldWithPath[]) => void;
 };
 export declare const combineLabel: ({ customLabel, field, prefix, }: {
     customLabel?: string;
-    field?: MappedField;
+    field?: ClientField;
     prefix?: JSX.Element | string;
 }) => JSX.Element;
 export declare const FieldSelect: React.FC<FieldSelectProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAOpG,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA8BP,CAAA;AAyED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA6CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,20 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldAffectsData, fieldHasSubFields } from 'payload/shared';
 import React, { Fragment, useState } from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
-import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js';
+import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import './index.scss';
 const baseClass = 'field-select';
 export const combineLabel = ({ customLabel, field, prefix })=>{
-    const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
-    const DefaultLabelToRender = field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? /*#__PURE__*/ _jsx(FieldLabel, {
-        label: field.fieldComponentProps.label,
-        ...field.fieldComponentProps.labelProps || {}
-    }) : null;
-    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel;
+    const CustomLabelToRender = field?.admin?.components && 'Label' in field.admin.components && field?.admin?.components?.Label !== undefined ? field.admin.components.Label : null;
+    const DefaultLabelToRender = field && 'label' in field && field.label ? {
+        type: 'client',
+        Component: FieldLabel,
+        props: {
+            Label: field.admin?.components && 'Label' in field.admin.components ? field.admin?.components?.Label : null,
+            label: field.label
+        }
+    } : null;
+    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || {
+        type: 'client',
+        Component: null,
+        RenderedComponent: customLabel
+    };
     if (!LabelToRender) return null;
     return /*#__PURE__*/ _jsxs(Fragment, {
         children: [
@@ -33,26 +43,27 @@ export const combineLabel = ({ customLabel, field, prefix })=>{
                 style: {
                     display: 'inline-block'
                 },
-                children: LabelToRender
+                children: /*#__PURE__*/ _jsx(RenderComponent, {
+                    mappedComponent: LabelToRender
+                })
             })
         ]
     });
 };
-const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
-    if (!fieldMap) {
+const reduceFields = ({ fields, labelPrefix = null, path = '' })=>{
+    if (!fields) {
         return [];
     }
-    return fieldMap?.reduce((fieldsToUse, field)=>{
-        const { isFieldAffectingData } = field;
+    return fields?.reduce((fieldsToUse, field)=>{
         // escape for a variety of reasons
-        if (isFieldAffectingData && (field.disableBulkEdit || field.unique || field.isHidden || 'readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly)) {
+        if (fieldAffectsData(field) && (field.admin.disableBulkEdit || field.unique || field.admin.hidden || 'readOnly' in field && field.readOnly)) {
             return fieldsToUse;
         }
-        if (!(field.type === 'array' || field.type === 'blocks') && 'fieldMap' in field.fieldComponentProps) {
+        if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
             return [
                 ...fieldsToUse,
                 ...reduceFields({
-                    fieldMap: field.fieldComponentProps.fieldMap,
+                    fields: field.fields,
                     labelPrefix: combineLabel({
                         field,
                         prefix: labelPrefix
@@ -61,16 +72,16 @@ const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
                 })
             ];
         }
-        if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {
+        if (field.type === 'tabs' && 'tabs' in field) {
             return [
                 ...fieldsToUse,
-                ...field.fieldComponentProps.tabs.reduce((tabFields, tab)=>{
-                    if ('fieldMap' in tab) {
+                ...field.tabs.reduce((tabFields, tab)=>{
+                    if ('fields' in tab) {
                         const isNamedTab = 'name' in tab && tab.name;
                         return [
                             ...tabFields,
                             ...reduceFields({
-                                fieldMap: tab.fieldMap,
+                                fields: tab.fields,
                                 labelPrefix,
                                 path: isNamedTab ? createNestedClientFieldPath(path, field) : path
                             })
@@ -95,10 +106,10 @@ const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
         ];
     }, []);
 };
-export const FieldSelect = ({ fieldMap, setSelected })=>{
+export const FieldSelect = ({ fields, setSelected })=>{
     const { t } = useTranslation();
     const [options] = useState(()=>reduceFields({
-            fieldMap
+            fields
         }));
     const { dispatchFields, getFields } = useForm();
     const handleChange = (selected)=>{