@payloadcms/ui 3.0.0-beta.7 → 3.0.0-beta.70

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 { useFormQueryParams } from '../../providers/FormQueryParams/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\nexport type EditUploadProps = {\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const { uploadEdits } = formQueryParams || {}\n  const [crop, setCrop] = useState<CropType>({\n    height: uploadEdits?.crop?.height || 100,\n    unit: '%',\n    width: uploadEdits?.crop?.width || 100,\n    x: uploadEdits?.crop?.x || 0,\n    y: uploadEdits?.crop?.y || 0,\n  })\n\n  const [pointPosition, setPointPosition] = useState<{ x: number; y: number }>({\n    x: uploadEdits?.focalPoint?.x || 50,\n    y: uploadEdits?.focalPoint?.y || 50,\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>()\n  const imageRef = useRef<HTMLImageElement | undefined>()\n  const cropRef = useRef<HTMLDivElement | 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 fineTuneFocalPoint = ({ coordinate, value }: { coordinate: 'x' | 'y'; value: string }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setPointPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    dispatchFormQueryParams({\n      type: 'SET',\n      params: {\n        uploadEdits:\n          crop || pointPosition\n            ? {\n                crop: crop || null,\n                focalPoint: pointPosition ? pointPosition : null,\n              }\n            : null,\n      },\n    })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setPointPosition({ 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    setPointPosition({ 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={pointPosition}\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) => fineTuneFocalPoint({ coordinate: 'x', value })}\n                    value={pointPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'y', value })}\n                    value={pointPosition.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>()\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","useFormQueryParams","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","EditUpload","fileName","fileSrc","imageCacheTag","showCrop","showFocalPoint","Modal","useModal","closeModal","t","dispatchFormQueryParams","formQueryParams","uploadEdits","crop","setCrop","height","unit","width","x","y","pointPosition","setPointPosition","focalPoint","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPoint","coordinate","prevPosition","saveEdits","params","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":"AAAA;AAIA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC/C,OAAOC,eAAe,mBAAkB;AAGxC,SAASC,cAAc,QAAQ,iCAAgC;AAC/D,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,kBAAkB,QAAQ,2CAA0C;AAC7E,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAG3C,MAAMC,YAAY;AAElB,MAAMC,QAAsF,CAAC,EAC3FC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACN,iBACC,oBAACC;QAAIC,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;OAClCE,oBACD,oBAACK;QAAML,MAAMA;QAAMC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QAAGM,MAAK;QAASN,OAAOA;;AAavF,OAAO,MAAMO,aAAwC,CAAC,EACpDC,QAAQ,EACRC,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACf;IACC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAG5B;IAE5B,MAAM,EAAE6B,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,CAAC,EAAE,GAAGtB;IACd,MAAM,EAAEuB,uBAAuB,EAAEC,eAAe,EAAE,GAAGzB;IACrD,MAAM,EAAE0B,WAAW,EAAE,GAAGD,mBAAmB,CAAC;IAC5C,MAAM,CAACE,MAAMC,QAAQ,GAAGhC,SAAmB;QACzCiC,QAAQH,aAAaC,MAAME,UAAU;QACrCC,MAAM;QACNC,OAAOL,aAAaC,MAAMI,SAAS;QACnCC,GAAGN,aAAaC,MAAMK,KAAK;QAC3BC,GAAGP,aAAaC,MAAMM,KAAK;IAC7B;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGvC,SAAmC;QAC3EoC,GAAGN,aAAaU,YAAYJ,KAAK;QACjCC,GAAGP,aAAaU,YAAYH,KAAK;IACnC;IACA,MAAM,CAACI,aAAaC,eAAe,GAAG1C,SAAkB;IACxD,MAAM,CAAC2C,gBAAgBC,kBAAkB,GAAG5C,SAAiB;IAC7D,MAAM,CAAC6C,eAAeC,iBAAiB,GAAG9C,SAAiB;IAE3D,MAAM+C,eAAehD;IACrB,MAAMiD,WAAWjD;IACjB,MAAMkD,UAAUlD;IAEhB,MAAMmD,eAAe,CAAC,EAAEC,SAAS,EAAExC,KAAK,EAAoD;QAC1F,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIwC,cAAc,WAAWC,YAAYP,eAAe,OAAO;QAC/D,IAAIM,cAAc,YAAYC,YAAYT,gBAAgB,OAAO;QAEjE,MAAMW,aAAa,MAAOF,CAAAA,WAAYD,CAAAA,cAAc,UAAUN,gBAAgBF,cAAa,CAAC;QAE5F,IAAIW,eAAe,OAAOA,eAAe,GAAG,OAAO;QAEnDtB,QAAQ;YACN,GAAGD,IAAI;YACP,CAACoB,UAAU,EAAEG;QACf;IACF;IAEA,MAAMC,qBAAqB,CAAC,EAAEC,UAAU,EAAE7C,KAAK,EAA4C;QACzF,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIyC,YAAY,KAAKA,YAAY,KAAK;YACpCb,iBAAiB,CAACkB,eAAkB,CAAA;oBAAE,GAAGA,YAAY;oBAAE,CAACD,WAAW,EAAEJ;gBAAS,CAAA;QAChF;IACF;IAEA,MAAMM,YAAY;QAChB9B,wBAAwB;YACtBX,MAAM;YACN0C,QAAQ;gBACN7B,aACEC,QAAQO,gBACJ;oBACEP,MAAMA,QAAQ;oBACdS,YAAYF,gBAAgBA,gBAAgB;gBAC9C,IACA;YACR;QACF;QACAZ,WAAWxB;IACb;IAEA,MAAM0D,YAAY9D,MAAM+D,WAAW,CAAC,CAAC,EAAEzB,CAAC,EAAEC,CAAC,EAAE;QAC3CE,iBAAiB;YAAEH;YAAGC;QAAE;QACxBK,eAAe;IACjB,GAAG,EAAE;IAEL,MAAMoB,mBAAmB;QACvB,MAAMC,gBAAgBhB,aAAaiB,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAa5C,WACf2B,QAAQe,OAAO,CAACC,qBAAqB,KACrCjB,SAASgB,OAAO,CAACC,qBAAqB;QAC1C,MAAME,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW/B,KAAK,GAAG,CAAA,IAAK4B,cAAc5B,KAAK,GAAI;QAC1F,MAAMkC,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAWjC,MAAM,GAAG,CAAA,IAAK8B,cAAc9B,MAAM,GAAI;QAC1FM,iBAAiB;YAAEH,GAAG+B;YAAS9B,GAAGgC;QAAQ;IAC5C;IAEA,MAAME,eAAelD,gBAAgB,CAAC,EAAED,QAAQ,CAAC,EAAEC,cAAc,CAAC,GAAGD;IAErE,qBACE,oBAACR;QAAIC,WAAWN;qBACd,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;qBACpC,oBAACiE;QAAGC,OAAO,CAAC,EAAE9C,EAAE,mBAAmB,CAAC,EAAER,SAAS,CAAC;OAC7CQ,EAAE,oBAAmB,KAAER,yBAE1B,oBAACP;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;qBACrC,oBAACD;QACCoE,cAAY/C,EAAE;QACdgD,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;QACjCqE,SAAS,IAAMlD,WAAWxB;OAEzByB,EAAE,kCAEL,oBAACrB;QACCoE,cAAY/C,EAAE;QACdgD,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;QAC/BqE,SAAS,IAAMlB;OAEd/B,EAAE,0CAIT,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,UAAU,CAAC;qBACtC,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;qBAClC,oBAACK;QACCC,WAAW,CAAC,EAAEN,UAAU,eAAe,CAAC;QACxCsE,KAAK9B;QACL+B,OAAO;YACLC,aAAa,CAAC,EAAElC,gBAAgBF,eAAe,CAAC;QAClD;OAECrB,yBACC,oBAACrB;QACCY,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;QACpCwB,MAAMA;QACNrB,UAAU,CAACsE,GAAGC,IAAMjD,QAAQiD;QAC5BC,YAAY,IAAMxC,eAAe;QACjCyC,sBAAsB;YACpB,qBAAO,oBAACvE;gBAAIC,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;gBAAEsE,KAAK5B;;QAC3D;qBAEA,oBAACmC;QACCC,KAAK1D,EAAE;QACP2D,QAAQ,CAACvE;YACP6B,kBAAkB7B,EAAEwE,aAAa,CAACC,aAAa;YAC/C1C,iBAAiB/B,EAAEwE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK7B;QACL0C,KAAKnB;wBAIT,oBAACa;QACCC,KAAK1D,EAAE;QACP2D,QAAQ,CAACvE;YACP6B,kBAAkB7B,EAAEwE,aAAa,CAACC,aAAa;YAC/C1C,iBAAiB/B,EAAEwE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK7B;QACL0C,KAAKnB;QAGRhD,gCACC,oBAACoE;QACCC,WAAWtE,WAAW2B,UAAUD;QAChCP,aAAanB,WAAWmB,cAAc;QACtC5B,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;QACrCsF,cAAc9C;QACd+C,iBAAiBxD;QACjBsB,WAAWA;QACXlB,gBAAgBpB,WAAWoB,iBAAiB;qBAE5C,oBAACvC,gBAKR,AAACmB,CAAAA,YAAYC,cAAa,mBACzB,oBAACX;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;OACpCe,0BACC,oBAACV;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACwF,YAAIpE,EAAE,+BACP,oBAACrB;QACCqE,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCqE,SAAS,IACP5C,QAAQ;gBACNC,QAAQ;gBACRC,MAAM;gBACNC,OAAO;gBACPC,GAAG;gBACHC,GAAG;YACL;OAGDV,EAAE,mCAIT,oBAACqE;QAAKnF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzCoB,EAAE,8CAEL,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAM,CAAC,EAAEkB,EAAE,gBAAgB,KAAK,CAAC;QACjCjB,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAASxC;YAAM;QAC9DA,OAAO,AAAC,CAAA,AAACoB,KAAKI,KAAK,GAAG,MAAOU,aAAY,EAAGoD,OAAO,CAAC;sBAEtD,oBAACzF;QACCC,MAAM,CAAC,EAAEkB,EAAE,iBAAiB,KAAK,CAAC;QAClCjB,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAAUxC;YAAM;QAC/DA,OAAO,AAAC,CAAA,AAACoB,KAAKE,MAAM,GAAG,MAAOU,cAAa,EAAGsD,OAAO,CAAC;UAM7D1E,gCACC,oBAACX;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACwF,YAAIpE,EAAE,qCACP,oBAACrB;QACCqE,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCqE,SAASd;OAERnC,EAAE,mCAIT,oBAACqE;QAAKnF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzCoB,EAAE,gDAEL,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO2B,cAAcF,CAAC,CAAC6D,OAAO,CAAC;sBAEjC,oBAACzF;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO2B,cAAcD,CAAC,CAAC4D,OAAO,CAAC;;AAUnD,EAAC;AAED,MAAMN,mBAAmB,CAAC,EACxBC,SAAS,EACTnD,WAAW,EACXyD,QAAQ,EACRrF,SAAS,EACTgF,YAAY,EACZC,kBAAkB;IAAE1D,GAAG;IAAIC,GAAG;AAAG,CAAC,EAClCuB,SAAS,EACTlB,cAAc,EACf;IACC,MAAM,CAACyD,UAAUC,YAAY,GAAGpG,SAAS;QAAEoC,GAAG0D,gBAAgB1D,CAAC;QAAEC,GAAGyD,gBAAgBzD,CAAC;IAAC;IACtF,MAAM,CAACgE,YAAYC,cAAc,GAAGtG,SAAS;IAC7C,MAAMuG,UAAUxG;IAEhB,MAAMyG,iBAAiB1G,MAAM+D,WAAW,CACtC,CAAC4C,WAAoBC,WAAoBC;QACvC,MAAM5C,gBAAgB8B,aAAa7B,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAa0B,UAAU5B,OAAO,CAACC,qBAAqB;QAC1D,MAAM2C,SAASH,aAAavC,WAAWE,IAAI;QAC3C,MAAMyC,SAASH,aAAaxC,WAAWI,GAAG;QAE1C,MAAMwC,eAAeF,SAAS1C,WAAWE,IAAI,IAAIwC,SAAS1C,WAAW6C,KAAK;QAC1E,MAAMC,eAAeH,SAAS3C,WAAWI,GAAG,IAAIuC,SAAS3C,WAAW+C,MAAM;QAE1E,IAAI7E,IAAI,AAAEwE,CAAAA,SAAS7C,cAAcK,IAAI,AAAD,IAAKL,cAAc5B,KAAK,GAAI;QAChE,IAAIE,IAAI,AAAEwE,CAAAA,SAAS9C,cAAcO,GAAG,AAAD,IAAKP,cAAc9B,MAAM,GAAI;QAChE,MAAMkC,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW/B,KAAK,GAAG,CAAA,IAAK4B,cAAc5B,KAAK,GAAI;QAC1F,MAAMkC,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAWjC,MAAM,GAAG,CAAA,IAAK8B,cAAc9B,MAAM,GAAI;QAC1F,IAAI6E,gBAAgBE,cAAc;YAChCV,cAAc;YACd,IAAIM,SAAS1C,WAAWE,IAAI,EAAE;gBAC5BhC,IAAI,AAAE8B,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,AAAD,IAAKL,cAAc5B,KAAK,GAAI;YACvE,OAAO,IAAIyE,SAAS1C,WAAW6C,KAAK,EAAE;gBACpC3E,IACE,AAAE2B,CAAAA,cAAc5B,KAAK,GAAI4B,CAAAA,cAAcgD,KAAK,GAAG7C,WAAW6C,KAAK,AAAD,CAAC,IAC7DhD,cAAc5B,KAAK,GACrB;YACJ;YAEA,IAAI0E,SAAS3C,WAAWI,GAAG,EAAE;gBAC3BjC,IAAI,AAAE6B,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,AAAD,IAAKP,cAAc9B,MAAM,GAAI;YACtE,OAAO,IAAI4E,SAAS3C,WAAW+C,MAAM,EAAE;gBACrC5E,IACE,AAAE0B,CAAAA,cAAc9B,MAAM,GAAI8B,CAAAA,cAAckD,MAAM,GAAG/C,WAAW+C,MAAM,AAAD,CAAC,IAChElD,cAAc9B,MAAM,GACtB;YACJ;YAEA,IAAI0E,UAAU;gBACZvE,IAAI0E,eAAe3C,UAAU/B;gBAC7BC,IAAI2E,eAAe3C,UAAUhC;YAC/B;QACF;QAEA,OAAO;YAAED;YAAGC;QAAE;IAChB,GACA;QAACuD;QAAWC;KAAa;IAG3B,MAAMqB,kBAAkB,CAACC;QACvBA,MAAMC,cAAc;QACpBd,cAAc;IAChB;IAEA,MAAMe,kBAAkB,CAACF;QACvB,IAAI,CAACd,YAAY,OAAO;QACxB,MAAM,EAAEjE,CAAC,EAAEC,CAAC,EAAE,GAAGmE,eAAeW,MAAMG,OAAO,EAAEH,MAAMI,OAAO;QAE5DnB,YAAY;YAAEhE;YAAGC;QAAE;IACrB;IAEA,MAAMmF,SAAS;QACblB,cAAc;QACd1C,UAAUuC;IACZ;IAEArG,MAAM2H,SAAS,CAAC;QACd,IAAIpB,cAAc,CAACE,QAAQvC,OAAO,EAAE;QACpC,IAAIvB,aAAa;YACf,MAAM,EAAER,MAAM,EAAEmC,IAAI,EAAEE,GAAG,EAAEnC,KAAK,EAAE,GAAGoE,QAAQvC,OAAO,CAACC,qBAAqB;YAC1E,MAAM,EAAE7B,CAAC,EAAEC,CAAC,EAAE,GAAGmE,eAAepC,OAAOjC,QAAQ,GAAGmC,MAAMrC,SAAS,GAAG;YACpE2B,UAAU;gBAAExB;gBAAGC;YAAE;YACjB+D,YAAY;gBAAEhE;gBAAGC;YAAE;YACnBK,eAAe;YACf;QACF;IACF,GAAG;QAAC8D;QAAgBH;QAAY5D;QAAaC;QAAgByD,SAAS/D,CAAC;QAAE+D,SAAS9D,CAAC;QAAEuB;KAAU;IAE/F9D,MAAM2H,SAAS,CAAC;QACdrB,YAAY;YAAEhE,GAAG0D,gBAAgB1D,CAAC;YAAEC,GAAGyD,gBAAgBzD,CAAC;QAAC;IAC3D,GAAG;QAACyD,gBAAgB1D,CAAC;QAAE0D,gBAAgBzD,CAAC;KAAC;IAEzC,qBACE,oBAACzB;QACCC,WAAW;YACT,CAAC,EAAEN,UAAU,qBAAqB,CAAC;YACnC8F,cAAc,CAAC,EAAE9F,UAAU,+BAA+B,CAAC;SAC5D,CACEmH,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,aAAaR;qBAEb,oBAACS;QACCjH,WAAW;YAAC,CAAC,EAAEN,UAAU,WAAW,CAAC;YAAEM;SAAU,CAAC6G,MAAM,CAACC,SAASC,IAAI,CAAC;QACvEG,aAAab;QACbc,WAAWR;QACX3C,KAAK0B;QACLzB,OAAO;YAAEV,MAAM,CAAC,EAAE+B,SAAS/D,CAAC,CAAC,CAAC,CAAC;YAAEkC,KAAK,CAAC,EAAE6B,SAAS9D,CAAC,CAAC,CAAC,CAAC;QAAC;QACvDpB,MAAK;OAEJiF,yBAEH,oBAACtF;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/ErrorPill/index.d.ts

@@ -1,10 +1,10 @@
-import type { I18n } from '@payloadcms/translations';
+import type { I18nClient } from '@payloadcms/translations';
 import React from 'react';
 import './index.scss';
 export type ErrorPillProps = {
     className?: string;
     count: number;
-    i18n: I18n;
+    i18n: I18nClient;
     withMessage?: boolean;
 };
 export declare const ErrorPill: React.FC<ErrorPillProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,CAAA"}

package/dist/elements/ErrorPill/index.js

@@ -1,4 +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;
@@ -9,13 +12,19 @@ export const ErrorPill = (props)=>{
         className && className
     ].filter(Boolean).join(' ');
     if (count === 0) return null;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__count`
-    }, count), withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`));
+    return /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__content`,
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: `${baseClass}__count`,
+                    children: count
+                }),
+                withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`
+            ]
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18n\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,oBAACQ;QAAIT,WAAWK;qBACd,oBAACI;QAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;qBACrC,oBAACa;QAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;OAAGI,QACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;AAI5F,EAAC"}
+{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,KAACQ;QAAIT,WAAWK;kBACd,cAAA,MAACI;YAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;;8BACrC,KAACa;oBAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;8BAAGI;;gBACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;;;;AAI5F,EAAC"}

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,10 +1,15 @@
-import type { FieldWithPath } from 'payload/types';
-import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { 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;
 };
+export declare const combineLabel: ({ customLabel, field, prefix, }: {
+    customLabel?: string;
+    field?: MappedField;
+    prefix?: JSX.Element | string;
+}) => JSX.Element;
 export declare const FieldSelect: React.FC<FieldSelectProps>;
 //# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,QAAQ,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;AA8GD,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,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"}

package/dist/elements/FieldSelect/index.js

@@ -1,24 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment, useState } from 'react';
-import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
+import './index.scss';
 const baseClass = 'field-select';
-const combineLabel = ({ customLabel, field, prefix })=>{
+export const combineLabel = ({ customLabel, field, prefix })=>{
     const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
-    const DefaultLabelToRender = field && 'labelProps' in field.fieldComponentProps && field.fieldComponentProps.labelProps ? /*#__PURE__*/ React.createElement(FieldLabel, field.fieldComponentProps.labelProps) : 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;
     if (!LabelToRender) return null;
-    return /*#__PURE__*/ React.createElement(Fragment, null, prefix && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement("span", {
-        style: {
-            display: 'inline-block'
-        }
-    }, prefix), ' > '), /*#__PURE__*/ React.createElement("span", {
-        style: {
-            display: 'inline-block'
-        }
-    }, LabelToRender));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            prefix && /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            display: 'inline-block'
+                        },
+                        children: prefix
+                    }),
+                    ' > '
+                ]
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    display: 'inline-block'
+                },
+                children: LabelToRender
+            })
+        ]
+    });
 };
 const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
     if (!fieldMap) {
@@ -104,21 +122,25 @@ export const FieldSelect = ({ fieldMap, setSelected })=>{
             });
         }
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement(FieldLabel, {
-        label: t('fields:selectFieldsToEdit')
-    }), /*#__PURE__*/ React.createElement(ReactSelect, {
-        getOptionValue: (option)=>{
-            if (typeof option.value === 'object' && 'path' in option.value) {
-                return String(option.value.path);
-            }
-            return String(option.value);
-        },
-        isMulti: true,
-        onChange: handleChange,
-        options: options
-    }));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                label: t('fields:selectFieldsToEdit')
+            }),
+            /*#__PURE__*/ _jsx(ReactSelect, {
+                getOptionValue: (option)=>{
+                    if (typeof option.value === 'object' && 'path' in option.value) {
+                        return String(option.value.path);
+                    }
+                    return String(option.value);
+                },
+                isMulti: true,
+                onChange: handleChange,
+                options: options
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["import type { FieldWithPath } from 'payload/types'\n\nimport React, { Fragment, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nconst combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'labelProps' in field.fieldComponentProps && field.fieldComponentProps.labelProps ? (\n      <FieldLabel {...field.fieldComponentProps.labelProps} />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","label","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldWithPath } from 'payload'\n\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? (\n      <FieldLabel\n        label={field.fieldComponentProps.label}\n        {...(field.fieldComponentProps.labelProps || {})}\n      />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","label","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"mappings":"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"}

package/dist/elements/FileDetails/FileMeta/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/elements/FileDetails/FileMeta/index.js

@@ -1,9 +1,12 @@
-import { formatFilesize } from 'payload/utilities';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatFilesize } from 'payload/shared';
 import React, { useState } from 'react';
-import { Edit } from '../../../icons/Edit/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
+import './index.scss';
 const baseClass = 'file-meta';
 export const FileMeta = (props)=>{
     const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props;
@@ -13,26 +16,59 @@ export const FileMeta = (props)=>{
         id,
         collectionSlug: collection
     });
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__url`
-    }, openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawer, null), /*#__PURE__*/ React.createElement("a", {
-        href: fileURL,
-        rel: "noopener noreferrer",
-        target: "_blank"
-    }, filename), /*#__PURE__*/ React.createElement(CopyToClipboard, {
-        defaultMessage: "Copy URL",
-        value: fileURL
-    }), openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__edit`,
-        onMouseEnter: ()=>setHovered(true),
-        onMouseLeave: ()=>setHovered(false)
-    }, /*#__PURE__*/ React.createElement(Edit, null), /*#__PURE__*/ React.createElement(Tooltip, {
-        show: hovered
-    }, "Edit"))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__size-type`
-    }, formatFilesize(filesize), width && height && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", width, "x", height), mimeType && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", mimeType)));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__url`,
+                children: [
+                    openInDrawer && /*#__PURE__*/ _jsx(DocumentDrawer, {}),
+                    /*#__PURE__*/ _jsx("a", {
+                        href: fileURL,
+                        rel: "noopener noreferrer",
+                        target: "_blank",
+                        children: filename
+                    }),
+                    /*#__PURE__*/ _jsx(CopyToClipboard, {
+                        defaultMessage: "Copy URL",
+                        value: fileURL
+                    }),
+                    openInDrawer && /*#__PURE__*/ _jsxs(DocumentDrawerToggler, {
+                        className: `${baseClass}__edit`,
+                        onMouseEnter: ()=>setHovered(true),
+                        onMouseLeave: ()=>setHovered(false),
+                        children: [
+                            /*#__PURE__*/ _jsx(EditIcon, {}),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                show: hovered,
+                                children: "Edit"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__size-type`,
+                children: [
+                    formatFilesize(filesize),
+                    width && height && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            " - ",
+                            width,
+                            "x",
+                            height
+                        ]
+                    }),
+                    mimeType && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            " - ",
+                            mimeType
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["import { formatFilesize } from 'payload/utilities'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { Edit } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <Edit />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","Edit","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAGhD,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,oBAACe;QAAIC,WAAWpB;qBACd,oBAACmB;QAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;OAChCc,8BAAgB,oBAACE,qCAClB,oBAACK;QAAEC,MAAMZ;QAASa,KAAI;QAAsBC,QAAO;OAChDnB,yBAEH,oBAACR;QAAgB4B,gBAAe;QAAWC,OAAOhB;QACjDI,8BACC,oBAACG;QACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;QAC/B2B,cAAc,IAAMd,WAAW;QAC/Be,cAAc,IAAMf,WAAW;qBAE/B,oBAACjB,2BACD,oBAACG;QAAQ8B,MAAMjB;OAAS,yBAI9B,oBAACO;QAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;OACtCP,eAAea,WACfK,SAASJ,wBACR,oBAACb,MAAMoC,QAAQ,QAAC,OAEbnB,OAAM,KAAEJ,SAGZC,0BACC,oBAACd,MAAMoC,QAAQ,QAAC,OAEbtB;AAMb,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <EditIcon />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","EditIcon","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAChD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,MAACe;QAAIC,WAAWpB;;0BACd,MAACmB;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;;oBAChCc,8BAAgB,KAACE;kCAClB,KAACK;wBAAEC,MAAMZ;wBAASa,KAAI;wBAAsBC,QAAO;kCAChDnB;;kCAEH,KAACR;wBAAgB4B,gBAAe;wBAAWC,OAAOhB;;oBACjDI,8BACC,MAACG;wBACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;wBAC/B2B,cAAc,IAAMd,WAAW;wBAC/Be,cAAc,IAAMf,WAAW;;0CAE/B,KAACjB;0CACD,KAACG;gCAAQ8B,MAAMjB;0CAAS;;;;;;0BAI9B,MAACO;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;;oBACtCP,eAAea;oBACfK,SAASJ,wBACR,MAACb,MAAMoC,QAAQ;;4BAAC;4BAEbnB;4BAAM;4BAAEJ;;;oBAGZC,0BACC,MAACd,MAAMoC,QAAQ;;4BAAC;4BAEbtB;;;;;;;AAMb,EAAC"}

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import './index.scss';
-import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type FileDetailsProps = {
-    canEdit?: boolean;
     collectionSlug: string;
-    doc: Data & {
+    customUploadActions?: React.ReactNode[];
+    doc: {
         sizes?: FileSizes;
-    };
+    } & Data;
+    enableAdjustments?: boolean;
     handleRemove?: () => void;
     hasImageSizes?: boolean;
     imageCacheTag?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwDlD,CAAA"}