@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

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

@@ -1 +1 @@
-{"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, { 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  ref?: React.RefObject<HTMLInputElement>\n  value: string\n}\n\nconst Input: React.FC<Props> = (props) => {\n  const { name, onChange, ref, 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) {\n      return null\n    }\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) {\n      return null\n    }\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) {\n      return null\n    }\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    }\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}?${encodeURIComponent(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) {\n      return null\n    }\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) {\n      return\n    }\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","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","name","onChange","ref","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","encodeURIComponent","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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"}
+{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","name","onChange","ref","value","_jsxs","className","_jsx","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","encodeURIComponent","title","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","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","onMouseDown","onMouseUp"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } 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 { 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  ref?: React.RefObject<HTMLInputElement>\n  value: string\n}\n\nconst Input: React.FC<Props> = (props) => {\n  const { name, onChange, ref, 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) {\n      return null\n    }\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) {\n      return null\n    }\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) {\n      return null\n    }\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    }\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}?${encodeURIComponent(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) {\n      return null\n    }\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) {\n      return\n    }\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"],"mappings":"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","ignoreList":[]}

package/dist/elements/EmailAndUsername/index.js

@@ -1,69 +1,89 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { email, getFieldPermissions, username } from 'payload/shared';
+import React from 'react';
 import { EmailField } from '../../fields/Email/index.js';
 import { TextField } from '../../fields/Text/index.js';
 import './index.scss';
 import { FieldPathContext } from '../../forms/RenderFields/context.js';
 const baseClass = 'login-fields';
 export function EmailAndUsernameFields(props) {
-    const { className, loginWithUsername, operation: operationFromProps, permissions, readOnly, t } = props;
-    function getAuthFieldPermission(fieldName, operation) {
-        const permissionsResult = getFieldPermissions({
-            field: {
-                name: fieldName,
-                type: 'text'
-            },
-            operation: operationFromProps === 'create' ? 'create' : operation,
-            parentName: '',
-            permissions
-        });
-        return permissionsResult.operation;
-    }
-    const hasEmailFieldOverride = typeof permissions === 'object' && 'email' in permissions && permissions.email;
-    const hasUsernameFieldOverride = typeof permissions === 'object' && 'username' in permissions && permissions.username;
-    const emailPermissions = hasEmailFieldOverride ? {
-        read: getAuthFieldPermission('email', 'read'),
-        update: getAuthFieldPermission('email', 'update')
-    } : {
-        read: true,
-        update: true
-    };
-    const usernamePermissions = hasUsernameFieldOverride ? {
-        read: getAuthFieldPermission('username', 'read'),
-        update: getAuthFieldPermission('username', 'update')
-    } : {
-        read: true,
-        update: true
-    };
-    const showEmailField = (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) && emailPermissions.read;
-    const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read;
-    if (showEmailField || showUsernameField) {
-        return <div className={[
-            baseClass,
-            className && className
-        ].filter(Boolean).join(' ')}>
-        {showEmailField ? <FieldPathContext value="email">
-            <EmailField field={{
+  const {
+    className,
+    loginWithUsername,
+    operation: operationFromProps,
+    permissions,
+    readOnly,
+    t
+  } = props;
+  function getAuthFieldPermission(fieldName, operation) {
+    const permissionsResult = getFieldPermissions({
+      field: {
+        name: fieldName,
+        type: 'text'
+      },
+      operation: operationFromProps === 'create' ? 'create' : operation,
+      parentName: '',
+      permissions
+    });
+    return permissionsResult.operation;
+  }
+  const hasEmailFieldOverride = typeof permissions === 'object' && 'email' in permissions && permissions.email;
+  const hasUsernameFieldOverride = typeof permissions === 'object' && 'username' in permissions && permissions.username;
+  const emailPermissions = hasEmailFieldOverride ? {
+    read: getAuthFieldPermission('email', 'read'),
+    update: getAuthFieldPermission('email', 'update')
+  } : {
+    read: true,
+    update: true
+  };
+  const usernamePermissions = hasUsernameFieldOverride ? {
+    read: getAuthFieldPermission('username', 'read'),
+    update: getAuthFieldPermission('username', 'update')
+  } : {
+    read: true,
+    update: true
+  };
+  const showEmailField = (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) && emailPermissions.read;
+  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read;
+  if (showEmailField || showUsernameField) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: [baseClass, className && className].filter(Boolean).join(' '),
+      children: [showEmailField ? /*#__PURE__*/_jsx(FieldPathContext, {
+        value: "email",
+        children: /*#__PURE__*/_jsx(EmailField, {
+          field: {
             name: 'email',
             admin: {
-                autoComplete: 'off'
+              autoComplete: 'off'
             },
             label: t('general:email'),
             required: !loginWithUsername || loginWithUsername && loginWithUsername.requireEmail
-        }} path="email" readOnly={readOnly || !emailPermissions.update} schemaPath="email" validate={email}/>
-          </FieldPathContext> : null}
-        {showUsernameField && <FieldPathContext value="username">
-            <TextField field={{
+          },
+          path: "email",
+          readOnly: readOnly || !emailPermissions.update,
+          schemaPath: "email",
+          validate: email
+        })
+      }) : null, showUsernameField && /*#__PURE__*/_jsx(FieldPathContext, {
+        value: "username",
+        children: /*#__PURE__*/_jsx(TextField, {
+          field: {
             name: 'username',
             admin: {
-                autoComplete: 'off'
+              autoComplete: 'off'
             },
             label: t('authentication:username'),
             required: loginWithUsername && loginWithUsername.requireUsername
-        }} path="username" readOnly={readOnly || !usernamePermissions.update} schemaPath="username" validate={username}/>
-          </FieldPathContext>}
-      </div>;
-    }
+          },
+          path: "username",
+          readOnly: readOnly || !usernamePermissions.update,
+          schemaPath: "username",
+          validate: username
+        })
+      })]
+    });
+  }
 }
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@payloadcms/translations'\nimport type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload'\n\nimport { email, getFieldPermissions, username } from 'payload/shared'\nimport React from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\nimport './index.scss'\nimport { FieldPathContext } from '../../forms/RenderFields/context.js'\n\nconst baseClass = 'login-fields'\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | true\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const {\n    className,\n    loginWithUsername,\n    operation: operationFromProps,\n    permissions,\n    readOnly,\n    t,\n  } = props\n\n  function getAuthFieldPermission(fieldName: string, operation: 'read' | 'update') {\n    const permissionsResult = getFieldPermissions({\n      field: { name: fieldName, type: 'text' },\n      operation: operationFromProps === 'create' ? 'create' : operation,\n      parentName: '',\n      permissions,\n    })\n    return permissionsResult.operation\n  }\n\n  const hasEmailFieldOverride =\n    typeof permissions === 'object' && 'email' in permissions && permissions.email\n  const hasUsernameFieldOverride =\n    typeof permissions === 'object' && 'username' in permissions && permissions.username\n\n  const emailPermissions = hasEmailFieldOverride\n    ? {\n        read: getAuthFieldPermission('email', 'read'),\n        update: getAuthFieldPermission('email', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const usernamePermissions = hasUsernameFieldOverride\n    ? {\n        read: getAuthFieldPermission('username', 'read'),\n        update: getAuthFieldPermission('username', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const showEmailField =\n    (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) &&\n    emailPermissions.read\n\n  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read\n\n  if (showEmailField || showUsernameField) {\n    return (\n      <div className={[baseClass, className && className].filter(Boolean).join(' ')}>\n        {showEmailField ? (\n          <FieldPathContext value=\"email\">\n            <EmailField\n              field={{\n                name: 'email',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('general:email'),\n                required:\n                  !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n              }}\n              path=\"email\"\n              readOnly={readOnly || !emailPermissions.update}\n              schemaPath=\"email\"\n              validate={email}\n            />\n          </FieldPathContext>\n        ) : null}\n        {showUsernameField && (\n          <FieldPathContext value=\"username\">\n            <TextField\n              field={{\n                name: 'username',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('authentication:username'),\n                required: loginWithUsername && loginWithUsername.requireUsername,\n              }}\n              path=\"username\"\n              readOnly={readOnly || !usernamePermissions.update}\n              schemaPath=\"username\"\n              validate={username}\n            />\n          </FieldPathContext>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["email","getFieldPermissions","username","EmailField","TextField","FieldPathContext","baseClass","EmailAndUsernameFields","props","className","loginWithUsername","operation","operationFromProps","permissions","readOnly","t","getAuthFieldPermission","fieldName","permissionsResult","field","name","type","parentName","hasEmailFieldOverride","hasUsernameFieldOverride","emailPermissions","read","update","usernamePermissions","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","div","filter","join","value","admin","autoComplete","label","required","path","schemaPath","validate","requireUsername"],"mappings":"AAAA;AAKA,SAASA,KAAK,EAAEC,mBAAmB,EAAEC,QAAQ,QAAQ,iBAAgB;AAGrE,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,SAAS,QAAQ,6BAA4B;AACtD,OAAO,eAAc;AACrB,SAASC,gBAAgB,QAAQ,sCAAqC;AAEtE,MAAMC,YAAY;AAclB,OAAO,SAASC,uBAAuBC,KAAwC;IAC7E,MAAM,EACJC,SAAS,EACTC,iBAAiB,EACjBC,WAAWC,kBAAkB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,CAAC,EACF,GAAGP;IAEJ,SAASQ,uBAAuBC,SAAiB,EAAEN,SAA4B;QAC7E,MAAMO,oBAAoBjB,oBAAoB;YAC5CkB,OAAO;gBAAEC,MAAMH;gBAAWI,MAAM;YAAO;YACvCV,WAAWC,uBAAuB,WAAW,WAAWD;YACxDW,YAAY;YACZT;QACF;QACA,OAAOK,kBAAkBP,SAAS;IACpC;IAEA,MAAMY,wBACJ,OAAOV,gBAAgB,YAAY,WAAWA,eAAeA,YAAYb,KAAK;IAChF,MAAMwB,2BACJ,OAAOX,gBAAgB,YAAY,cAAcA,eAAeA,YAAYX,QAAQ;IAEtF,MAAMuB,mBAAmBF,wBACrB;QACEG,MAAMV,uBAAuB,SAAS;QACtCW,QAAQX,uBAAuB,SAAS;IAC1C,IACA;QACEU,MAAM;QACNC,QAAQ;IACV;IAEJ,MAAMC,sBAAsBJ,2BACxB;QACEE,MAAMV,uBAAuB,YAAY;QACzCW,QAAQX,uBAAuB,YAAY;IAC7C,IACA;QACEU,MAAM;QACNC,QAAQ;IACV;IAEJ,MAAME,iBACJ,AAAC,CAAA,CAACnB,qBAAqBA,mBAAmBoB,gBAAgBpB,mBAAmBqB,eAAc,KAC3FN,iBAAiBC,IAAI;IAEvB,MAAMM,oBAAoBC,QAAQvB,sBAAsBkB,oBAAoBF,IAAI;IAEhF,IAAIG,kBAAkBG,mBAAmB;QACvC,QACGE,IAAIzB,WAAW;YAACH;YAAWG,aAAaA;SAAU,CAAC0B,MAAM,CAACF,SAASG,IAAI,CAAC,MAAM;QAC7E,CAACP,kBACExB,iBAAiBgC,MAAM,QAAQ;YAC9B,CAAClC,WACCgB,OAAO;YACLC,MAAM;YACNkB,OAAO;gBACLC,cAAc;YAChB;YACAC,OAAOzB,EAAE;YACT0B,UACE,CAAC/B,qBAAsBA,qBAAqBA,kBAAkBoB,YAAY;QAC9E,GACAY,KAAK,QACL5B,UAAUA,YAAY,CAACW,iBAAiBE,MAAM,EAC9CgB,WAAW,QACXC,UAAU5C,QACV;UACJ,EAAEK,oBACA,KAAK;QACT,CAAC2B,sBACE3B,iBAAiBgC,MAAM,WAAW;YACjC,CAACjC,UACCe,OAAO;YACLC,MAAM;YACNkB,OAAO;gBACLC,cAAc;YAChB;YACAC,OAAOzB,EAAE;YACT0B,UAAU/B,qBAAqBA,kBAAkBmC,eAAe;QAClE,GACAH,KAAK,WACL5B,UAAUA,YAAY,CAACc,oBAAoBD,MAAM,EACjDgB,WAAW,WACXC,UAAU1C,WACV;UACJ,EAAEG,kBACF;MACJ,EAAE6B;IAEN;AACF"}
+{"version":3,"file":"index.js","names":["email","getFieldPermissions","username","React","EmailField","TextField","FieldPathContext","baseClass","EmailAndUsernameFields","props","className","loginWithUsername","operation","operationFromProps","permissions","readOnly","t","getAuthFieldPermission","fieldName","permissionsResult","field","name","type","parentName","hasEmailFieldOverride","hasUsernameFieldOverride","emailPermissions","read","update","usernamePermissions","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","_jsxs","filter","join","_jsx","value","admin","autoComplete","label","required","path","schemaPath","validate","requireUsername"],"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@payloadcms/translations'\nimport type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload'\n\nimport { email, getFieldPermissions, username } from 'payload/shared'\nimport React from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\nimport './index.scss'\nimport { FieldPathContext } from '../../forms/RenderFields/context.js'\n\nconst baseClass = 'login-fields'\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | true\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const {\n    className,\n    loginWithUsername,\n    operation: operationFromProps,\n    permissions,\n    readOnly,\n    t,\n  } = props\n\n  function getAuthFieldPermission(fieldName: string, operation: 'read' | 'update') {\n    const permissionsResult = getFieldPermissions({\n      field: { name: fieldName, type: 'text' },\n      operation: operationFromProps === 'create' ? 'create' : operation,\n      parentName: '',\n      permissions,\n    })\n    return permissionsResult.operation\n  }\n\n  const hasEmailFieldOverride =\n    typeof permissions === 'object' && 'email' in permissions && permissions.email\n  const hasUsernameFieldOverride =\n    typeof permissions === 'object' && 'username' in permissions && permissions.username\n\n  const emailPermissions = hasEmailFieldOverride\n    ? {\n        read: getAuthFieldPermission('email', 'read'),\n        update: getAuthFieldPermission('email', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const usernamePermissions = hasUsernameFieldOverride\n    ? {\n        read: getAuthFieldPermission('username', 'read'),\n        update: getAuthFieldPermission('username', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const showEmailField =\n    (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) &&\n    emailPermissions.read\n\n  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read\n\n  if (showEmailField || showUsernameField) {\n    return (\n      <div className={[baseClass, className && className].filter(Boolean).join(' ')}>\n        {showEmailField ? (\n          <FieldPathContext value=\"email\">\n            <EmailField\n              field={{\n                name: 'email',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('general:email'),\n                required:\n                  !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n              }}\n              path=\"email\"\n              readOnly={readOnly || !emailPermissions.update}\n              schemaPath=\"email\"\n              validate={email}\n            />\n          </FieldPathContext>\n        ) : null}\n        {showUsernameField && (\n          <FieldPathContext value=\"username\">\n            <TextField\n              field={{\n                name: 'username',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('authentication:username'),\n                required: loginWithUsername && loginWithUsername.requireUsername,\n              }}\n              path=\"username\"\n              readOnly={readOnly || !usernamePermissions.update}\n              schemaPath=\"username\"\n              validate={username}\n            />\n          </FieldPathContext>\n        )}\n      </div>\n    )\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ErrorPill/index.js

@@ -1,23 +1,30 @@
 '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;
-    const lessThan3Chars = !withMessage && count < 99;
-    const classes = [
-        baseClass,
-        lessThan3Chars && `${baseClass}--fixed-width`,
-        className && className
-    ].filter(Boolean).join(' ');
-    if (count === 0) {
-        return null;
-    }
-    return <div className={classes}>
-      <div className={`${baseClass}__content`}>
-        <span className={`${baseClass}__count`}>{count}</span>
-        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}
-      </div>
-    </div>;
+export const ErrorPill = props => {
+  const {
+    className,
+    count,
+    i18n,
+    withMessage
+  } = props;
+  const lessThan3Chars = !withMessage && count < 99;
+  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className].filter(Boolean).join(' ');
+  if (count === 0) {
+    return null;
+  }
+  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":["'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) {\n    return null\n  }\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":["baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAAA;AAKA,OAAO,eAAc;AAErB,MAAMA,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,GAAGP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG;QACf,OAAO;IACT;IAEA,QACGQ,IAAIT,WAAWK,SAAS;MACvB,CAACI,IAAIT,WAAW,GAAGH,UAAU,SAAS,CAAC,EAAE;QACvC,CAACa,KAAKV,WAAW,GAAGH,UAAU,OAAO,CAAC,GAAGI,QAAQS,KAAK;QACtD,CAACP,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,kBAAkB,CAAC;MACvF,EAAEF,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"file":"index.js","names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","_jsx","_jsxs","t"],"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) {\n    return null\n  }\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"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,SAAA,GAAuCC,KAAA;EAClD,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAE,GAAGJ,KAAA;EAChD,MAAMK,cAAA,GAAiB,CAACD,WAAA,IAAeF,KAAA,GAAQ;EAE/C,MAAMI,OAAA,GAAU,CAACR,SAAA,EAAWO,cAAA,IAAkB,GAAGP,SAAA,eAAwB,EAAEG,SAAA,IAAaA,SAAA,CAAU,CAC/FM,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIP,KAAA,KAAU,GAAG;IACf,OAAO;EACT;EAEA,oBACEQ,IAAA,CAAC;IAAIT,SAAA,EAAWK,OAAA;cACd,aAAAK,KAAA,CAAC;MAAIV,SAAA,EAAW,GAAGH,SAAA,WAAoB;8BACrCY,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,SAAkB;kBAAGI;UACxCE,WAAA,IAAe,IAAIF,KAAA,GAAQ,IAAIC,IAAA,CAAKS,CAAC,CAAC,oBAAoBT,IAAA,CAAKS,CAAC,CAAC,kBAAkB;;;AAI5F","ignoreList":[]}

package/dist/elements/FieldDiffContainer/index.js

@@ -1,26 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './index.scss';
 import { getTranslation } from '@payloadcms/translations';
 import { FieldDiffLabel } from '../FieldDiffLabel/index.js';
 const baseClass = 'field-diff';
-export const FieldDiffContainer = (args)=>{
-    const { className, From, i18n, label: { label, locale }, nestingLevel = 0, To } = args;
-    return <div className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`} style={nestingLevel ? {
-        // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
-        '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`
+export const FieldDiffContainer = args => {
+  const {
+    className,
+    From,
+    i18n,
+    label: {
+      label,
+      locale
+    },
+    nestingLevel = 0,
+    To
+  } = args;
+  return /*#__PURE__*/_jsxs("div", {
+    className: `${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`,
+    style: nestingLevel ? {
+      // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
+      '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`
     } : {
-        '--left-offset': '50%'
-    }}>
-      <FieldDiffLabel>
-        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-        {typeof label !== 'function' && getTranslation(label || '', i18n)}
-      </FieldDiffLabel>
-      <div className={`${baseClass}-content`} style={nestingLevel ? {
+      '--left-offset': '50%'
+    },
+    children: [/*#__PURE__*/_jsxs(FieldDiffLabel, {
+      children: [locale && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__locale-label`,
+        children: locale
+      }), typeof label !== 'function' && getTranslation(label || '', i18n)]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}-content`,
+      style: nestingLevel ? {
         gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`
-    } : undefined}>
-        {From}
-        {To}
-      </div>
-    </div>;
+      } : undefined,
+      children: [From, To]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.scss'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  return (\n    <div\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      style={\n        nestingLevel\n          ? ({\n              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns\n              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`,\n            } as React.CSSProperties)\n          : ({\n              '--left-offset': '50%',\n            } as React.CSSProperties)\n      }\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {typeof label !== 'function' && getTranslation(label || '', i18n)}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-content`}\n        style={\n          nestingLevel\n            ? {\n                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,\n              }\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDiffLabel","baseClass","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","div","style","span","gridTemplateColumns","undefined"],"mappings":"AAEA,OAAO,eAAc;AAErB,SAASA,cAAc,QAAyB,2BAA0B;AAE1E,SAASC,cAAc,QAAQ,6BAA4B;AAE3D,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAUR,CAACC;IACJ,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,OAAO,EAAEA,KAAK,EAAEC,MAAM,EAAE,EACxBC,eAAe,CAAC,EAChBC,EAAE,EACH,GAAGP;IAEJ,QACGQ,IACCP,WAAW,GAAGH,UAAU,UAAU,EAAEG,YAAY,CAAC,CAAC,EAAEA,WAAW,GAAG,GAAG,cAAc,EAAEK,cAAc,EACnGG,OACEH,eACK;QACC,uGAAuG;QACvG,iBAAiB,CAAC,aAAa,EAAEA,aAAa,4CAA4C,CAAC;IAC7F,IACC;QACC,iBAAiB;IACnB,GAEP;MACC,CAACT,eAAe;QACd,CAACQ,WAAWK,KAAKT,WAAW,GAAGH,UAAU,cAAc,CAAC,GAAGO,SAASK,MAAM;QAC1E,CAAC,OAAON,UAAU,cAAcR,eAAeQ,SAAS,IAAID,MAAM;MACpE,EAAEN,eAAe;MACjB,CAACW,IACCP,WAAW,GAAGH,UAAU,QAAQ,CAAC,EACjCW,OACEH,eACI;QACEK,qBAAqB,CAAC,wHAAwH,CAAC;IACjJ,IACAC,WAEP;QACC,CAACV,KAAK;QACN,CAACK,GAAG;MACN,EAAEC,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"file":"index.js","names":["getTranslation","FieldDiffLabel","baseClass","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","style","_jsx","gridTemplateColumns","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.scss'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  return (\n    <div\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      style={\n        nestingLevel\n          ? ({\n              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns\n              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`,\n            } as React.CSSProperties)\n          : ({\n              '--left-offset': '50%',\n            } as React.CSSProperties)\n      }\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {typeof label !== 'function' && getTranslation(label || '', i18n)}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-content`}\n        style={\n          nestingLevel\n            ? {\n                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,\n              }\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAEhD,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAUPC,IAAA;EACJ,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,KAAA,EAAO;MAAEA,KAAK;MAAEC;IAAM,CAAE;IACxBC,YAAA,GAAe,CAAC;IAChBC;EAAE,CACH,GAAGP,IAAA;EAEJ,oBACEQ,KAAA,CAAC;IACCP,SAAA,EAAW,GAAGH,SAAA,aAAsBG,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;IACnGG,KAAA,EACEH,YAAA,GACK;MACC;MACA,iBAAiB,gBAAgBA,YAAA;IACnC,IACC;MACC,iBAAiB;IACnB;4BAGNE,KAAA,CAACX,cAAA;iBACEQ,MAAA,iBAAUK,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,gBAAyB;kBAAGO;UAC1D,OAAOD,KAAA,KAAU,cAAcR,cAAA,CAAeQ,KAAA,IAAS,IAAID,IAAA;qBAE9DK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGH,SAAA,UAAmB;MACjCW,KAAA,EACEH,YAAA,GACI;QACEK,mBAAA,EAAqB;MACvB,IACAC,SAAA;iBAGLV,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}

package/dist/elements/FieldDiffLabel/index.js

@@ -1,5 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import './index.scss';
 const baseClass = 'field-diff-label';
-export const FieldDiffLabel = ({ children })=><div className={baseClass}>{children}</div>;
-
+export const FieldDiffLabel = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  className: baseClass,
+  children: children
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'field-diff-label'\n\nexport const FieldDiffLabel: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n  <div className={baseClass}>{children}</div>\n)\n"],"names":["baseClass","FieldDiffLabel","children","div","className"],"mappings":"AAEA,OAAO,eAAc;AAErB,MAAMA,YAAY;AAElB,OAAO,MAAMC,iBAA2D,CAAC,EAAEC,QAAQ,EAAE,IAClFC,IAAIC,WAAWJ,YAAYE,WAAWC,KACxC"}
+{"version":3,"file":"index.js","names":["React","baseClass","FieldDiffLabel","children","_jsx","className"],"sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'field-diff-label'\n\nexport const FieldDiffLabel: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n  <div className={baseClass}>{children}</div>\n)\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA2DA,CAAC;EAAEC;AAAQ,CAAE,kBACnFC,IAAA,CAAC;EAAIC,SAAA,EAAWJ,SAAA;YAAYE","ignoreList":[]}

package/dist/elements/FieldSelect/index.js

@@ -1,5 +1,8 @@
 'use client';
-import { useState } from 'react';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -8,27 +11,77 @@ import { ReactSelect } from '../ReactSelect/index.js';
 import { reduceFieldOptions } from './reduceFieldOptions.js';
 import './index.scss';
 const baseClass = 'field-select';
-export const FieldSelect = ({ fields, onChange, permissions })=>{
-    const { t } = useTranslation();
-    const { dispatchFields, getFields } = useForm();
-    const [options] = useState(()=>reduceFieldOptions({
-            fields: filterOutUploadFields(fields),
-            formState: getFields(),
-            permissions
-        }));
-    return <div className={baseClass}>
-      <FieldLabel label={t('fields:selectFieldsToEdit')}/>
-      <ReactSelect getOptionValue={(option)=>{
-        if (typeof option.value === 'object' && 'path' in option.value) {
-            return String(option.value.path);
-        }
-        return String(option.value);
-    }} isMulti onChange={(selected)=>onChange({
-            dispatchFields,
-            formState: getFields(),
-            selected
-        })} options={options}/>
-    </div>;
+export const FieldSelect = t0 => {
+  const $ = _c(14);
+  const {
+    fields,
+    onChange,
+    permissions
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const {
+    dispatchFields,
+    getFields
+  } = useForm();
+  let t1;
+  if ($[0] !== fields || $[1] !== getFields || $[2] !== permissions) {
+    t1 = () => reduceFieldOptions({
+      fields: filterOutUploadFields(fields),
+      formState: getFields(),
+      permissions
+    });
+    $[0] = fields;
+    $[1] = getFields;
+    $[2] = permissions;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const [options] = useState(t1);
+  let t2;
+  if ($[4] !== dispatchFields || $[5] !== getFields || $[6] !== onChange || $[7] !== options || $[8] !== t) {
+    let t3;
+    if ($[10] !== dispatchFields || $[11] !== getFields || $[12] !== onChange) {
+      t3 = selected => onChange({
+        dispatchFields,
+        formState: getFields(),
+        selected
+      });
+      $[10] = dispatchFields;
+      $[11] = getFields;
+      $[12] = onChange;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx(FieldLabel, {
+        label: t("fields:selectFieldsToEdit")
+      }), _jsx(ReactSelect, {
+        getOptionValue: _temp,
+        isMulti: true,
+        onChange: t3,
+        options
+      })]
+    });
+    $[4] = dispatchFields;
+    $[5] = getFields;
+    $[6] = onChange;
+    $[7] = options;
+    $[8] = t;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 };
-
+function _temp(option) {
+  if (typeof option.value === "object" && "path" in option.value) {
+    return String(option.value.path);
+  }
+  return String(option.value);
+}
 //# sourceMappingURL=index.js.map