npm - @payloadcms/ui - Versions diffs - 4.0.0-internal.f05c47f → 4.0.0-internal.f15737c - Mend

@payloadcms/ui 4.0.0-internal.f05c47f → 4.0.0-internal.f15737c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1575) hide show

package/dist/elements/EditUpload/index.js CHANGED Viewed

@@ -142,6 +142,17 @@ export const EditUpload = ({
               aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
             },
             children: [showCrop ? /*#__PURE__*/_jsx(ReactCrop, {
+              ariaLabels: {
+                cropArea: t('upload:setCropArea'),
+                eDragHandle: t('upload:cropRight'),
+                nDragHandle: t('upload:cropTop'),
+                neDragHandle: t('upload:cropTopRight'),
+                nwDragHandle: t('upload:cropTopLeft'),
+                sDragHandle: t('upload:cropBottom'),
+                seDragHandle: t('upload:cropBottomRight'),
+                swDragHandle: t('upload:cropBottomLeft'),
+                wDragHandle: t('upload:cropLeft')
+              },
               className: `${baseClass}__reactCrop`,
               crop: crop,
               onChange: (_, c) => setCrop(c),
@@ -178,11 +189,11 @@ export const EditUpload = ({
             className: `${baseClass}__section`,
             children: [/*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__section-header`,
-              children: [/*#__PURE__*/_jsx("span", {
+              children: [/*#__PURE__*/_jsx("h3", {
                 className: `${baseClass}__section-title`,
                 children: t('upload:crop')
               }), /*#__PURE__*/_jsx("button", {
-                "aria-label": t('general:reset'),
+                "aria-label": `${t('general:reset')}: ${t('upload:crop')}`,
                 className: `${baseClass}__reset`,
                 onClick: () => setCrop({
                   height: 100,
@@ -224,11 +235,11 @@ export const EditUpload = ({
             className: `${baseClass}__section`,
             children: [/*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__section-header`,
-              children: [/*#__PURE__*/_jsx("span", {
+              children: [/*#__PURE__*/_jsx("h3", {
                 className: `${baseClass}__section-title`,
                 children: t('upload:focalPoint')
               }), /*#__PURE__*/_jsx("button", {
-                "aria-label": t('general:reset'),
+                "aria-label": `${t('general:reset')}: ${t('upload:focalPoint')}`,
                 className: `${baseClass}__reset`,
                 onClick: centerFocalPoint,
                 type: "button",
@@ -296,6 +307,9 @@ const DraggableElement = ({
   onDragEnd,
   setCheckBounds
 }) => {
+  const {
+    t
+  } = useTranslation();
   const [position, setPosition] = useState({
     x: initialPosition.x,
     y: initialPosition.y
@@ -318,6 +332,41 @@ const DraggableElement = ({
     event.preventDefault();
     setIsDragging(true);
   };
+  const handleKeyDown = event_0 => {
+    if (event_0.altKey || event_0.ctrlKey || event_0.metaKey || isDragging) {
+      return;
+    }
+    const step = event_0.shiftKey ? 10 : 1;
+    let {
+      x: x_0,
+      y: y_0
+    } = positionRef.current;
+    switch (event_0.key) {
+      case 'ArrowDown':
+        y_0 += step;
+        break;
+      case 'ArrowLeft':
+        x_0 -= step;
+        break;
+      case 'ArrowRight':
+        x_0 += step;
+        break;
+      case 'ArrowUp':
+        y_0 -= step;
+        break;
+      default:
+        return;
+    }
+    event_0.preventDefault();
+    event_0.stopPropagation();
+    const nextPosition = {
+      x: Math.max(0, Math.min(100, x_0)),
+      y: Math.max(0, Math.min(100, y_0))
+    };
+    positionRef.current = nextPosition;
+    setPosition(nextPosition);
+    onDragEnd(nextPosition);
+  };
   // Attach global listeners while dragging — this ensures events fire even when
   // the cursor leaves the focal wrapper area during a fast drag
   React.useEffect(() => {
@@ -329,12 +378,12 @@ const DraggableElement = ({
         return;
       }
       const {
-        x: x_0,
-        y: y_0
+        x: x_1,
+        y: y_1
       } = getCoordinates(e.clientX, e.clientY);
       setPosition({
-        x: x_0,
-        y: y_0
+        x: x_1,
+        y: y_1
       });
     };
     const handleUp = () => {
@@ -360,16 +409,16 @@ const DraggableElement = ({
       width
     } = dragRef.current.getBoundingClientRect();
     const {
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     } = getCoordinates(left + width / 2, top + height / 2);
     onDragEnd({
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     });
     setPosition({
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     });
     setCheckBounds(false);
   }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd]);
@@ -382,7 +431,10 @@ const DraggableElement = ({
   return /*#__PURE__*/_jsx("div", {
     className: `${baseClass}__draggable-container`,
     children: /*#__PURE__*/_jsx("button", {
+      "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown",
+      "aria-label": t('upload:setFocalPoint'),
       className: [`${baseClass}__draggable`, className].filter(Boolean).join(' '),
+      onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       ref: dragRef,
       style: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","NumberInput","PlusIcon","ResetIcon","useTranslation","appendCacheTag","Button","DialogFooter","DialogHeader","DialogModal","baseClass","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","imageLoaded","setImageLoaded","onImageLoad","e","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","value","intValue","parseInt","Number","isNaN","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Math","round","widthInPixels","onDragEnd","useCallback","centerFocalPoint","fileSrcToUse","cropWidthPx","toFixed","cropHeightPx","_jsxs","className","closeOnBlur","size","slug","_jsx","showClose","title","ref","style","aspectRatio","onChange","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","onClick","type","ariaLabel","target","path","prefix","readOnly","max","min","suffix","buttonStyle","disabled","children","position","setPosition","isDragging","setIsDragging","dragRef","positionRef","current","getCoordinates","mouseX","mouseY","containerRect","getBoundingClientRect","left","top","handleMouseDown","event","preventDefault","useEffect","handleMove","clientX","clientY","handleUp","document","addEventListener","removeEventListener","filter","Boolean","join","onMouseDown"],"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'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { NumberInput } from '../../fields/Number/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { ResetIcon } from '../../icons/Reset/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'\nimport './index.css'\nimport './library.css'\n\nconst baseClass = 'edit-upload'\n\ntype FocalPosition = {\n x: number\n y: number\n}\n\nexport type EditUploadProps = {\n fileName: string\n fileSrc: string\n imageCacheTag?: false \| 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 = { x: 50, y: 50 }\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 [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n const onImageLoad = (e) => {\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 (Number.isNaN(intValue)) {\n return null\n }\n const percentage =\n 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n if (percentage <= 0 \|\| percentage > 100) {\n return null\n }\n setCrop((prev) => ({ ...prev, [dimension]: percentage }))\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: Math.round((crop.height / 100) * uncroppedPixelHeight),\n widthInPixels: Math.round((crop.width / 100) * 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 setFocalPosition({ x: 50, y: 50 })\n }\n\n const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined\n\n const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)\n const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)\n\n return (\n <DialogModal\n className={`${baseClass}__dialog`}\n closeOnBlur={false}\n size=\"large\"\n slug={editDrawerSlug}\n >\n <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />\n <div className={`${baseClass}__body`}>\n <div className={`${baseClass}__content`}>\n {/* Canvas area /}\n <div className={`${baseClass}__crop`}>\n <div\n className={`${baseClass}__focal-wrapper`}\n ref={focalWrapRef}\n style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}\n >\n {showCrop ? (\n <ReactCrop\n className={`${baseClass}__reactCrop`}\n crop={crop}\n onChange={(_, c) => setCrop(c)}\n onComplete={() => setCheckBounds(true)}\n renderSelectionAddon={() => (\n <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\n {/ Sidebar /}\n {(showCrop \|\| showFocalPoint) && (\n <div className={`${baseClass}__sidebar`}>\n {showCrop && (\n <div className={`${baseClass}__section`}>\n <div className={`${baseClass}__section-header`}>\n <span className={`${baseClass}__section-title`}>{t('upload:crop')}</span>\n <button\n aria-label={t('general:reset')}\n className={`${baseClass}__reset`}\n onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}\n type=\"button\"\n >\n <ResetIcon />\n </button>\n </div>\n <div className={`${baseClass}__fieldset`}>\n <NumberInput\n ariaLabel={t('upload:width')}\n onChange={(e) => fineTuneCrop({ dimension: 'width', value: e.target.value })}\n path=\"cropWidth\"\n prefix=\"W\"\n readOnly={!imageLoaded}\n size=\"medium\"\n value={Number(cropWidthPx)}\n />\n <NumberInput\n ariaLabel={t('upload:height')}\n onChange={(e) => fineTuneCrop({ dimension: 'height', value: e.target.value })}\n path=\"cropHeight\"\n prefix=\"H\"\n readOnly={!imageLoaded}\n size=\"medium\"\n value={Number(cropHeightPx)}\n />\n </div>\n </div>\n )}\n\n {showFocalPoint && (\n <div className={`${baseClass}__section`}>\n <div className={`${baseClass}__section-header`}>\n <span className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</span>\n <button\n aria-label={t('general:reset')}\n className={`${baseClass}__reset`}\n onClick={centerFocalPoint}\n type=\"button\"\n >\n <ResetIcon />\n </button>\n </div>\n <div className={`${baseClass}__fieldset`}>\n <NumberInput\n ariaLabel={`${t('upload:focalPoint')} X`}\n max={100}\n min={0}\n onChange={(e) =>\n fineTuneFocalPosition({ coordinate: 'x', value: e.target.value })\n }\n path=\"focalX\"\n prefix=\"X\"\n size=\"medium\"\n suffix=\"%\"\n value={Math.round(focalPosition.x)}\n />\n <NumberInput\n ariaLabel={`${t('upload:focalPoint')} Y`}\n max={100}\n min={0}\n onChange={(e) =>\n fineTuneFocalPosition({ coordinate: 'y', value: e.target.value })\n }\n path=\"focalY\"\n prefix=\"Y\"\n size=\"medium\"\n suffix=\"%\"\n value={Math.round(focalPosition.y)}\n />\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n <DialogFooter>\n <Button\n aria-label={t('general:cancel')}\n buttonStyle=\"secondary\"\n onClick={() => closeModal(editDrawerSlug)}\n >\n {t('general:cancel')}\n </Button>\n <Button\n aria-label={t('general:applyChanges')}\n buttonStyle=\"primary\"\n disabled={!imageLoaded}\n onClick={saveEdits}\n >\n {t('general:applyChanges')}\n </Button>\n </DialogFooter>\n </DialogModal>\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 // Keep a ref to the latest position so global mouseup handler can read it without a stale closure\n const positionRef = useRef(position)\n positionRef.current = position\n\n const getCoordinates = React.useCallback(\n (mouseX: number, mouseY: number) => {\n const containerRect = containerRef.current.getBoundingClientRect()\n const x = ((mouseX - containerRect.left) / containerRect.width) 100\n const y = ((mouseY - containerRect.top) / containerRect.height) * 100\n return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }\n },\n [containerRef],\n )\n\n const handleMouseDown = (event) => {\n event.preventDefault()\n setIsDragging(true)\n }\n\n // Attach global listeners while dragging — this ensures events fire even when\n // the cursor leaves the focal wrapper area during a fast drag\n React.useEffect(() => {\n if (!isDragging) {\n return\n }\n\n const handleMove = (e: MouseEvent) => {\n if (!containerRef.current) {\n return\n }\n const { x, y } = getCoordinates(e.clientX, e.clientY)\n setPosition({ x, y })\n }\n\n const handleUp = () => {\n setIsDragging(false)\n onDragEnd(positionRef.current)\n }\n\n document.addEventListener('mousemove', handleMove)\n document.addEventListener('mouseup', handleUp)\n\n return () => {\n document.removeEventListener('mousemove', handleMove)\n document.removeEventListener('mouseup', handleUp)\n }\n }, [isDragging, getCoordinates, onDragEnd, containerRef])\n\n // Re-check position when crop changes (the crop window may have moved)\n React.useEffect(() => {\n if (isDragging \|\| !checkBounds \|\| !dragRef.current) {\n return\n }\n const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n const { x, y } = getCoordinates(left + width / 2, top + height / 2)\n onDragEnd({ x, y })\n setPosition({ x, y })\n setCheckBounds(false)\n }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])\n\n React.useEffect(() => {\n setPosition({ x: initialPosition.x, y: initialPosition.y })\n }, [initialPosition.x, initialPosition.y])\n\n return (\n <div className={`${baseClass}__draggable-container`}>\n <button\n className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n onMouseDown={handleMouseDown}\n ref={dragRef}\n style={{ left: `${position.x}%`, top: `${position.y}%` }}\n type=\"button\"\n >\n {children}\n </button>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","NumberInput","PlusIcon","ResetIcon","useTranslation","appendCacheTag","Button","DialogFooter","DialogHeader","DialogModal","baseClass","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","imageLoaded","setImageLoaded","onImageLoad","e","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","value","intValue","parseInt","Number","isNaN","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Math","round","widthInPixels","onDragEnd","useCallback","centerFocalPoint","fileSrcToUse","cropWidthPx","toFixed","cropHeightPx","_jsxs","className","closeOnBlur","size","slug","_jsx","showClose","title","ref","style","aspectRatio","ariaLabels","cropArea","eDragHandle","nDragHandle","neDragHandle","nwDragHandle","sDragHandle","seDragHandle","swDragHandle","wDragHandle","onChange","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","onClick","type","ariaLabel","target","path","prefix","readOnly","max","min","suffix","buttonStyle","disabled","children","position","setPosition","isDragging","setIsDragging","dragRef","positionRef","current","getCoordinates","mouseX","mouseY","containerRect","getBoundingClientRect","left","top","handleMouseDown","event","preventDefault","handleKeyDown","altKey","ctrlKey","metaKey","step","shiftKey","key","stopPropagation","nextPosition","useEffect","handleMove","clientX","clientY","handleUp","document","addEventListener","removeEventListener","filter","Boolean","join","onKeyDown","onMouseDown"],"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'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { NumberInput } from '../../fields/Number/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { ResetIcon } from '../../icons/Reset/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'\nimport './index.css'\nimport './library.css'\n\nconst baseClass = 'edit-upload'\n\ntype FocalPosition = {\n x: number\n y: number\n}\n\nexport type EditUploadProps = {\n fileName: string\n fileSrc: string\n imageCacheTag?: false \| 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 = { x: 50, y: 50 }\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 [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n const onImageLoad = (e) => {\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 (Number.isNaN(intValue)) {\n return null\n }\n const percentage =\n 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n if (percentage <= 0 \|\| percentage > 100) {\n return null\n }\n setCrop((prev) => ({ ...prev, [dimension]: percentage }))\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: Math.round((crop.height / 100) * uncroppedPixelHeight),\n widthInPixels: Math.round((crop.width / 100) * 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 setFocalPosition({ x: 50, y: 50 })\n }\n\n const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined\n\n const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)\n const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)\n\n return (\n <DialogModal\n className={`${baseClass}__dialog`}\n closeOnBlur={false}\n size=\"large\"\n slug={editDrawerSlug}\n >\n <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />\n <div className={`${baseClass}__body`}>\n <div className={`${baseClass}__content`}>\n {/* Canvas area /}\n <div className={`${baseClass}__crop`}>\n <div\n className={`${baseClass}__focal-wrapper`}\n ref={focalWrapRef}\n style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}\n >\n {showCrop ? (\n <ReactCrop\n ariaLabels={{\n cropArea: t('upload:setCropArea'),\n eDragHandle: t('upload:cropRight'),\n nDragHandle: t('upload:cropTop'),\n neDragHandle: t('upload:cropTopRight'),\n nwDragHandle: t('upload:cropTopLeft'),\n sDragHandle: t('upload:cropBottom'),\n seDragHandle: t('upload:cropBottomRight'),\n swDragHandle: t('upload:cropBottomLeft'),\n wDragHandle: t('upload:cropLeft'),\n }}\n className={`${baseClass}__reactCrop`}\n crop={crop}\n onChange={(_, c) => setCrop(c)}\n onComplete={() => setCheckBounds(true)}\n renderSelectionAddon={() => (\n <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\n {/ Sidebar /}\n {(showCrop \|\| showFocalPoint) && (\n <div className={`${baseClass}__sidebar`}>\n {showCrop && (\n <div className={`${baseClass}__section`}>\n <div className={`${baseClass}__section-header`}>\n <h3 className={`${baseClass}__section-title`}>{t('upload:crop')}</h3>\n <button\n aria-label={`${t('general:reset')}: ${t('upload:crop')}`}\n className={`${baseClass}__reset`}\n onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}\n type=\"button\"\n >\n <ResetIcon />\n </button>\n </div>\n <div className={`${baseClass}__fieldset`}>\n <NumberInput\n ariaLabel={t('upload:width')}\n onChange={(e) => fineTuneCrop({ dimension: 'width', value: e.target.value })}\n path=\"cropWidth\"\n prefix=\"W\"\n readOnly={!imageLoaded}\n size=\"medium\"\n value={Number(cropWidthPx)}\n />\n <NumberInput\n ariaLabel={t('upload:height')}\n onChange={(e) => fineTuneCrop({ dimension: 'height', value: e.target.value })}\n path=\"cropHeight\"\n prefix=\"H\"\n readOnly={!imageLoaded}\n size=\"medium\"\n value={Number(cropHeightPx)}\n />\n </div>\n </div>\n )}\n\n {showFocalPoint && (\n <div className={`${baseClass}__section`}>\n <div className={`${baseClass}__section-header`}>\n <h3 className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</h3>\n <button\n aria-label={`${t('general:reset')}: ${t('upload:focalPoint')}`}\n className={`${baseClass}__reset`}\n onClick={centerFocalPoint}\n type=\"button\"\n >\n <ResetIcon />\n </button>\n </div>\n <div className={`${baseClass}__fieldset`}>\n <NumberInput\n ariaLabel={`${t('upload:focalPoint')} X`}\n max={100}\n min={0}\n onChange={(e) =>\n fineTuneFocalPosition({ coordinate: 'x', value: e.target.value })\n }\n path=\"focalX\"\n prefix=\"X\"\n size=\"medium\"\n suffix=\"%\"\n value={Math.round(focalPosition.x)}\n />\n <NumberInput\n ariaLabel={`${t('upload:focalPoint')} Y`}\n max={100}\n min={0}\n onChange={(e) =>\n fineTuneFocalPosition({ coordinate: 'y', value: e.target.value })\n }\n path=\"focalY\"\n prefix=\"Y\"\n size=\"medium\"\n suffix=\"%\"\n value={Math.round(focalPosition.y)}\n />\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n <DialogFooter>\n <Button\n aria-label={t('general:cancel')}\n buttonStyle=\"secondary\"\n onClick={() => closeModal(editDrawerSlug)}\n >\n {t('general:cancel')}\n </Button>\n <Button\n aria-label={t('general:applyChanges')}\n buttonStyle=\"primary\"\n disabled={!imageLoaded}\n onClick={saveEdits}\n >\n {t('general:applyChanges')}\n </Button>\n </DialogFooter>\n </DialogModal>\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 { t } = useTranslation()\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 // Keep a ref to the latest position so global mouseup handler can read it without a stale closure\n const positionRef = useRef(position)\n positionRef.current = position\n\n const getCoordinates = React.useCallback(\n (mouseX: number, mouseY: number) => {\n const containerRect = containerRef.current.getBoundingClientRect()\n const x = ((mouseX - containerRect.left) / containerRect.width) 100\n const y = ((mouseY - containerRect.top) / containerRect.height) * 100\n return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }\n },\n [containerRef],\n )\n\n const handleMouseDown = (event) => {\n event.preventDefault()\n setIsDragging(true)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.altKey \|\| event.ctrlKey \|\| event.metaKey \|\| isDragging) {\n return\n }\n const step = event.shiftKey ? 10 : 1\n let { x, y } = positionRef.current\n\n switch (event.key) {\n case 'ArrowDown':\n y += step\n break\n case 'ArrowLeft':\n x -= step\n break\n case 'ArrowRight':\n x += step\n break\n case 'ArrowUp':\n y -= step\n break\n default:\n return\n }\n\n event.preventDefault()\n event.stopPropagation()\n const nextPosition = {\n x: Math.max(0, Math.min(100, x)),\n y: Math.max(0, Math.min(100, y)),\n }\n\n positionRef.current = nextPosition\n setPosition(nextPosition)\n onDragEnd(nextPosition)\n }\n\n // Attach global listeners while dragging — this ensures events fire even when\n // the cursor leaves the focal wrapper area during a fast drag\n React.useEffect(() => {\n if (!isDragging) {\n return\n }\n\n const handleMove = (e: MouseEvent) => {\n if (!containerRef.current) {\n return\n }\n const { x, y } = getCoordinates(e.clientX, e.clientY)\n setPosition({ x, y })\n }\n\n const handleUp = () => {\n setIsDragging(false)\n onDragEnd(positionRef.current)\n }\n\n document.addEventListener('mousemove', handleMove)\n document.addEventListener('mouseup', handleUp)\n\n return () => {\n document.removeEventListener('mousemove', handleMove)\n document.removeEventListener('mouseup', handleUp)\n }\n }, [isDragging, getCoordinates, onDragEnd, containerRef])\n\n // Re-check position when crop changes (the crop window may have moved)\n React.useEffect(() => {\n if (isDragging \|\| !checkBounds \|\| !dragRef.current) {\n return\n }\n const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n const { x, y } = getCoordinates(left + width / 2, top + height / 2)\n onDragEnd({ x, y })\n setPosition({ x, y })\n setCheckBounds(false)\n }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])\n\n React.useEffect(() => {\n setPosition({ x: initialPosition.x, y: initialPosition.y })\n }, [initialPosition.x, initialPosition.y])\n\n return (\n <div className={`${baseClass}__draggable-container`}>\n <button\n aria-keyshortcuts=\"ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown\"\n aria-label={t('upload:setFocalPoint')}\n className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onMouseDown={handleMouseDown}\n ref={dragRef}\n style={{ left: `${position.x}%`, top: `${position.y}%` }}\n type=\"button\"\n >\n {children}\n </button>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ErrorPill/index.css CHANGED Viewed

@@ -7,7 +7,6 @@
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
     line-height: var(--text-body-medium-line-height);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     letter-spacing: var(--text-letter-spacing);

package/dist/elements/FieldDiffContainer/index.css CHANGED Viewed

@@ -23,6 +23,7 @@
     padding-inline: var(--spacer-2-5);
   }
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .field-diff-container .field-diff-content {
       grid-template-columns: 1fr;
@@ -65,7 +66,6 @@
     background-color: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     color: var(--color-text-secondary);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/FieldDiffContainer/index.js CHANGED Viewed

@@ -23,7 +23,7 @@ export const FieldDiffContainer = args => {
       children: [locale && /*#__PURE__*/_jsx("span", {
         className: `${baseClass}__locale-label`,
         children: locale
-      }), label !== false && typeof label !== 'function' && getTranslation(label || '', i18n)]
+      }), label !== false && getTranslation(label || '', i18n)]
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}-content`,
       style: nestingLevel ? {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["getTranslation","React","FieldDiffLabel","baseClass","gutterOffset","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","_jsx","style","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.css'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nconst gutterOffset = 6.5\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 >\n <FieldDiffLabel>\n {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n {label !== false && ~~typeof label !== 'function' &&~~ getTranslation(label \|\| '', i18n)}\n </FieldDiffLabel>\n <div\n className={`${baseClass}-content`}\n style={\n nestingLevel\n ? ({\n '--field-diff-columns': `calc(50% - ${nestingLevel * gutterOffset}px) calc(50% + ${nestingLevel * gutterOffset}px)`,\n } as React.CSSProperties)\n : undefined\n }\n >\n {From}\n {To}\n </div>\n </div>\n )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAChD,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,YAAA,GAAe;AAErB,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,GAAGJ,SAAA,aAAsBI,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;4BAEnGE,KAAA,CAACZ,cAAA;iBACES,MAAA,iBAAUI,IAAA,CAAC;QAAKR,SAAA,EAAW,GAAGJ,SAAA,gBAAyB;kBAAGQ;UAC1DD,KAAA,KAAU,~~SAAS~~,~~OAAOA,KAAA,KAAU,cAAcV,~~cAAA,CAAeU,KAAA,IAAS,IAAID,IAAA;~~qBAEjFK~~,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGJ,SAAA,UAAmB;MACjCa,KAAA,EACEJ,YAAA,GACK;QACC,wBAAwB,cAAcA,YAAA,GAAeR,YAAA,kBAA8BQ,YAAA,GAAeR,YAAA;MACpG,IACAa,SAAA;iBAGLT,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["getTranslation","React","FieldDiffLabel","baseClass","gutterOffset","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","_jsx","style","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.css'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nconst gutterOffset = 6.5\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 >\n <FieldDiffLabel>\n {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n {label !== false && getTranslation(label \|\| '', i18n)}\n </FieldDiffLabel>\n <div\n className={`${baseClass}-content`}\n style={\n nestingLevel\n ? ({\n '--field-diff-columns': `calc(50% - ${nestingLevel * gutterOffset}px) calc(50% + ${nestingLevel * gutterOffset}px)`,\n } as React.CSSProperties)\n : undefined\n }\n >\n {From}\n {To}\n </div>\n </div>\n )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAChD,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,YAAA,GAAe;AAErB,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,GAAGJ,SAAA,aAAsBI,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;4BAEnGE,KAAA,CAACZ,cAAA;iBACES,MAAA,iBAAUI,IAAA,CAAC;QAAKR,SAAA,EAAW,GAAGJ,SAAA,gBAAyB;kBAAGQ;UAC1DD,KAAA,KAAU,SAASV,cAAA,CAAeU,KAAA,IAAS,IAAID,IAAA;qBAElDK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGJ,SAAA,UAAmB;MACjCa,KAAA,EACEJ,YAAA,GACK;QACC,wBAAwB,cAAcA,YAAA,GAAeR,YAAA,kBAA8BQ,YAAA,GAAeR,YAAA;MACpG,IACAa,SAAA;iBAGLT,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}

package/dist/elements/FieldDiffLabel/index.css CHANGED Viewed

@@ -1,11 +1,10 @@
 @layer payload-default {
   .field-diff-label {
     margin-bottom: var(--spacer-2);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
-    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
+    letter-spacing: var(--text-body-medium-bold-letter-spacing);
     display: flex;
     flex-direction: row;
     height: 100%;
@@ -13,6 +12,7 @@
     color: var(--color-text);
   }
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .field-diff-label {
       height: min-content;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAQ1D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,GAAG,CAAC,EAC3B,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,KAAK,IAAI,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,~~CA8BlD~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAQ1D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,GAAG,CAAC,EAC3B,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,KAAK,IAAI,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAA"}

package/dist/elements/FieldSelect/index.js CHANGED Viewed

@@ -12,13 +12,14 @@ import { reduceFieldOptions } from './reduceFieldOptions.js';
 import './index.css';
 const baseClass = 'field-select';
 export const FieldSelect = t0 => {
-  const $ = _c(14);
+  const $ = _c(15);
   const {
     fields,
     onChange,
     permissions
   } = t0;
   const {
+    i18n,
     t
   } = useTranslation();
   const {
@@ -26,62 +27,78 @@ export const FieldSelect = t0 => {
     getFields
   } = useForm();
   let t1;
-  if ($[0] !== fields || $[1] !== getFields || $[2] !== permissions) {
+  if ($[0] !== fields || $[1] !== getFields || $[2] !== i18n || $[3] !== permissions) {
     t1 = () => reduceFieldOptions({
       fields: filterOutUploadFields(fields),
       formState: getFields(),
+      i18n,
       permissions
     });
     $[0] = fields;
     $[1] = getFields;
-    $[2] = permissions;
-    $[3] = t1;
+    $[2] = i18n;
+    $[3] = permissions;
+    $[4] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[4];
   }
   const [options] = useState(t1);
   let t2;
-  if ($[4] !== dispatchFields || $[5] !== getFields || $[6] !== onChange || $[7] !== options || $[8] !== t) {
+  if ($[5] !== dispatchFields || $[6] !== getFields || $[7] !== onChange || $[8] !== options || $[9] !== t) {
+    const selectLabel = t("fields:selectFieldsToEdit");
     let t3;
-    if ($[10] !== dispatchFields || $[11] !== getFields || $[12] !== onChange) {
+    if ($[11] !== dispatchFields || $[12] !== getFields || $[13] !== onChange) {
       t3 = selected => onChange({
         dispatchFields,
         formState: getFields(),
         selected
       });
-      $[10] = dispatchFields;
-      $[11] = getFields;
-      $[12] = onChange;
-      $[13] = t3;
+      $[11] = dispatchFields;
+      $[12] = getFields;
+      $[13] = onChange;
+      $[14] = t3;
     } else {
-      t3 = $[13];
+      t3 = $[14];
     }
     t2 = _jsxs("div", {
       className: baseClass,
       children: [_jsx(FieldLabel, {
-        label: t("fields:selectFieldsToEdit")
+        label: selectLabel
       }), _jsx(ReactSelect, {
-        getOptionValue: _temp,
+        "aria-label": selectLabel,
+        customProps: {
+          clearValueLabel: `${t("general:clear")} ${selectLabel}`,
+          removeValueLabel: t("general:remove")
+        },
+        formatOptionLabel: _temp,
+        getOptionLabel: _temp2,
+        getOptionValue: _temp3,
         isMulti: true,
         onChange: t3,
         options
       })]
     });
-    $[4] = dispatchFields;
-    $[5] = getFields;
-    $[6] = onChange;
-    $[7] = options;
-    $[8] = t;
-    $[9] = t2;
+    $[5] = dispatchFields;
+    $[6] = getFields;
+    $[7] = onChange;
+    $[8] = options;
+    $[9] = t;
+    $[10] = t2;
   } else {
-    t2 = $[9];
+    t2 = $[10];
   }
   return t2;
 };
 function _temp(option) {
-  if (typeof option.value === "object" && "path" in option.value) {
-    return String(option.value.path);
+  return option.label;
+}
+function _temp2(option_0) {
+  return option_0.plainTextLabel;
+}
+function _temp3(option_1) {
+  if (typeof option_1.value === "object" && "path" in option_1.value) {
+    return String(option_1.value.path);
   }
-  return String(option.value);
+  return String(option_1.value);
 }
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["c","_c","React","useState","FieldLabel","useForm","useTranslation","filterOutUploadFields","ReactSelect","reduceFieldOptions","baseClass","FieldSelect","t0","$","fields","onChange","permissions","t","dispatchFields","getFields","t1","formState","options","t2","t3","selected","_jsxs","className","children","_jsx","label","~~getOptionValue~~","_temp","isMulti","option","value","String","path"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport type { FieldAction } from '../../forms/Form/types.js'\nimport type { FieldOption } from './reduceFieldOptions.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { filterOutUploadFields } from '../../utilities/filterOutUploadFields.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { reduceFieldOptions } from './reduceFieldOptions.js'\nimport './index.css'\n\nconst baseClass = 'field-select'\n\nexport type OnFieldSelect = ({\n dispatchFields,\n formState,\n selected,\n}: {\n dispatchFields: React.Dispatch<FieldAction>\n formState: FormState\n selected: FieldOption[]\n}) => void\n\nexport type FieldSelectProps = {\n readonly fields: ClientField[]\n readonly onChange: OnFieldSelect\n readonly permissions:\n \| {\n [fieldName: string]: SanitizedFieldPermissions\n }\n \| SanitizedFieldPermissions\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, onChange, permissions }) => {\n const { t } = useTranslation()\n const { dispatchFields, getFields } = useForm()\n\n const [options] = useState<FieldOption[]>(() =>\n reduceFieldOptions({\n fields: filterOutUploadFields(fields),\n formState: getFields(),\n permissions,\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={(selected: FieldOption[]) =>\n onChange({ dispatchFields, formState: getFields(), selected })\n }\n options={options}\n />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAKhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,WAAW,QAAQ;AAC5B,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,MAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAAiC;EACvF;IAAAK;EAAA,~~IAAcX~~,cAAA;~~EACd~~;~~IAAAY~~,cAAA;IAAAC;EAAA,~~IAAsCd~~,OAAA;EAAA,~~IAAAe~~,EAAA;EAAA,~~IAAAP~~,CAAA,QAAAC,MAAA,IAAAD,CAAA,~~QAAAM~~,SAAA,~~IAAAN~~,CAAA,QAAAG,WAAA;~~IAEII~~,EAAA,GAAAA,CAAA,~~KACxCX~~,kBAAA;MAAAK,MAAA,EACUP,qBAAA,CAAsBO,MAAA;~~MAAAO~~,SAAA,EACnBF,SAAA;MAAAH;IAAA,~~CAEb~~;IAAAH,CAAA,MAAAC,MAAA;IAAAD,CAAA,~~MAAAM~~,SAAA;~~IAAAN~~,CAAA,MAAAG,WAAA;IAAAH,CAAA,~~MAAAO~~,EAAA;EAAA;IAAAA,EAAA,~~GAAAP~~,CAAA;EAAA;~~EALF~~,~~OAAAS~~,OAAA,~~IAAkBnB~~,QAAA,~~CAAwBiB~~,~~EAKxC~~;EAAA,IAAAG,EAAA;EAAA,~~IAAAV~~,CAAA,~~QAAAK~~,cAAA,~~IAAAL~~,CAAA,~~QAAAM~~,SAAA,~~IAAAN~~,CAAA,QAAAE,QAAA,IAAAF,CAAA,~~QAAAS~~,OAAA,~~IAAAT~~,CAAA,~~QAAAI~~,CAAA;IAAA,~~IAAAO~~,EAAA;IAAA,~~IAAAX~~,CAAA,~~SAAAK~~,cAAA,~~IAAAL~~,CAAA,~~SAAAM~~,SAAA,~~IAAAN~~,CAAA,SAAAE,QAAA;~~MAccS~~,EAAA,GAAAC,QAAA,~~IACRV~~,QAAA;~~QAAAG~~,cAAA;QAAAG,SAAA,EAAsCF,SAAA;~~QAAAM~~;MAAA,CAAsB;~~MAAAZ~~,CAAA,~~OAAAK~~,cAAA;~~MAAAL~~,CAAA,~~OAAAM~~,SAAA;~~MAAAN~~,CAAA,OAAAE,QAAA;MAAAF,CAAA,~~OAAAW~~,EAAA;IAAA;MAAAA,EAAA,~~GAAAX~~,CAAA;IAAA;~~IAXlEU~~,EAAA,~~GAAAG~~,KAAA,CAAC;MAAAC,SAAA,~~EAAAjB~~,SAAA;~~MAAAkB~~,QAAA,GACCC,IAAA,~~CAAAzB~~,UAAA;~~QAAA0B~~,KAAA,~~EAAmBb,CAAA,CAAE~~;MAAA,C,~~GACrBY~~,IAAA,~~CAAArB~~,WAAA;~~QAAAuB~~,~~cAAA~~,EAAAC,KAAA;QAAAC,OAAA;~~QAAAlB~~,QAAA,~~EAQYS~~,EACoD;~~QAAAF~~;MAAA,C;;;;;;;;;;;~~SAXlEC~~,E;~~CAiBJ~~;~~AA9BuD~~,~~SAAAS~~,~~MAAAE~~,MAAA;EAAA,~~IAiBzC~~,~~OAAOA~~,~~MAAA~~,~~CAAAC~~,KAAA,KAAiB,YAAY,~~UAAUD~~,~~MAAA~~,~~CAAAC~~,KAAY;IAAA,OACrDC,MAAA,~~CAAOF~~,~~MAAA~~,~~CAAAC~~,KAAA,CAAAE,IAAiB;EAAA;EAAA,OAE1BD,MAAA,~~CAAOF~~,~~MAAA~~,~~CAAAC~~,KAAY;AAAA","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["c","_c","React","useState","FieldLabel","useForm","useTranslation","filterOutUploadFields","ReactSelect","reduceFieldOptions","baseClass","FieldSelect","t0","$","fields","onChange","permissions","i18n","t","dispatchFields","getFields","t1","formState","options","t2","selectLabel","t3","selected","_jsxs","className","children","_jsx","label","customProps","clearValueLabel","removeValueLabel","formatOptionLabel","_temp","getOptionLabel","_temp2","getOptionValue","_temp3","isMulti","option","option_0","plainTextLabel","option_1","value","String","path"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport type { FieldAction } from '../../forms/Form/types.js'\nimport type { FieldOption } from './reduceFieldOptions.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { filterOutUploadFields } from '../../utilities/filterOutUploadFields.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { reduceFieldOptions } from './reduceFieldOptions.js'\nimport './index.css'\n\nconst baseClass = 'field-select'\n\nexport type OnFieldSelect = ({\n dispatchFields,\n formState,\n selected,\n}: {\n dispatchFields: React.Dispatch<FieldAction>\n formState: FormState\n selected: FieldOption[]\n}) => void\n\nexport type FieldSelectProps = {\n readonly fields: ClientField[]\n readonly onChange: OnFieldSelect\n readonly permissions:\n \| {\n [fieldName: string]: SanitizedFieldPermissions\n }\n \| SanitizedFieldPermissions\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, onChange, permissions }) => {\n const { i18n, t } = useTranslation()\n const { dispatchFields, getFields } = useForm()\n\n const [options] = useState<FieldOption[]>(() =>\n reduceFieldOptions({\n fields: filterOutUploadFields(fields),\n formState: getFields(),\n i18n,\n permissions,\n }),\n )\n const selectLabel = t('fields:selectFieldsToEdit')\n\n return (\n <div className={baseClass}>\n <FieldLabel label={selectLabel} />\n <ReactSelect\n aria-label={selectLabel}\n customProps={{\n clearValueLabel: `${t('general:clear')} ${selectLabel}`,\n removeValueLabel: t('general:remove'),\n }}\n formatOptionLabel={(option) => (option as FieldOption).label}\n getOptionLabel={(option) => (option as FieldOption).plainTextLabel}\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={(selected: FieldOption[]) =>\n onChange({ dispatchFields, formState: getFields(), selected })\n }\n options={options}\n />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAKhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,WAAW,QAAQ;AAC5B,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,MAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAAiC;EACvF;IAAAK,IAAA;IAAAC;EAAA,IAAoBZ,cAAA;EACpB;IAAAa,cAAA;IAAAC;EAAA,IAAsCf,OAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAR,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAG,WAAA;IAEIK,EAAA,GAAAA,CAAA,KACxCZ,kBAAA;MAAAK,MAAA,EACUP,qBAAA,CAAsBO,MAAA;MAAAQ,SAAA,EACnBF,SAAA;MAAAH,IAAA;MAAAD;IAAA,CAGb;IAAAH,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAO,SAAA;IAAAP,CAAA,MAAAI,IAAA;IAAAJ,CAAA,MAAAG,WAAA;IAAAH,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EANF,OAAAU,OAAA,IAAkBpB,QAAA,CAAwBkB,EAMxC;EAAA,IAAAG,EAAA;EAAA,IAAAX,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAU,OAAA,IAAAV,CAAA,QAAAK,CAAA;IAEF,MAAAO,WAAA,GAAoBP,CAAA,CAAE;IAAA,IAAAQ,EAAA;IAAA,IAAAb,CAAA,SAAAM,cAAA,IAAAN,CAAA,SAAAO,SAAA,IAAAP,CAAA,SAAAE,QAAA;MAoBNW,EAAA,GAAAC,QAAA,IACRZ,QAAA;QAAAI,cAAA;QAAAG,SAAA,EAAsCF,SAAA;QAAAO;MAAA,CAAsB;MAAAd,CAAA,OAAAM,cAAA;MAAAN,CAAA,OAAAO,SAAA;MAAAP,CAAA,OAAAE,QAAA;MAAAF,CAAA,OAAAa,EAAA;IAAA;MAAAA,EAAA,GAAAb,CAAA;IAAA;IAlBlEW,EAAA,GAAAI,KAAA,CAAC;MAAAC,SAAA,EAAAnB,SAAA;MAAAoB,QAAA,GACCC,IAAA,CAAA3B,UAAA;QAAA4B,KAAA,EAAmBP;MAAA,C,GACnBM,IAAA,CAAAvB,WAAA;QAAA,cACciB,WAAA;QAAAQ,WAAA;UAAAC,eAAA,EAEO,GAAGhB,CAAA,CAAE,oBAAoBO,WAAA,EAAa;UAAAU,gBAAA,EACrCjB,CAAA,CAAE;QAAA;QAAAkB,iBAAA,EAAAC,KAAA;QAAAC,cAAA,EAAAC,MAAA;QAAAC,cAAA,EAAAC,MAAA;QAAAC,OAAA;QAAA3B,QAAA,EAWZW,EACoD;QAAAH;MAAA,C;;;;;;;;;;;SAlBlEC,E;CAwBJ;AAvCuD,SAAAa,MAAAM,MAAA;EAAA,OAuBhBA,MAAC,CAAAX,KAAA;AAAA;AAvBe,SAAAO,OAAAK,QAAA;EAAA,OAwBnBD,QAAC,CAAAE,cAAA;AAAA;AAxBkB,SAAAJ,OAAAK,QAAA;EAAA,IA0BzC,OAAOH,QAAA,CAAAI,KAAA,KAAiB,YAAY,UAAUJ,QAAA,CAAAI,KAAY;IAAA,OACrDC,MAAA,CAAOL,QAAA,CAAAI,KAAA,CAAAE,IAAiB;EAAA;EAAA,OAE1BD,MAAA,CAAOL,QAAA,CAAAI,KAAY;AAAA","ignoreList":[]}

package/dist/elements/FieldSelect/reduceFieldOptions.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { I18nClient } from '@payloadcms/translations';
 import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload';
 export type SelectedField = {
     field: ClientField;
@@ -6,17 +7,20 @@ export type SelectedField = {
 };
 export type FieldOption = {
     label: React.ReactNode;
+    plainTextLabel: string;
     value: SelectedField;
 };
 export declare const ignoreFromBulkEdit: (field: ClientField) => boolean;
-export declare const reduceFieldOptions: ({ fields, formState, labelPrefix, parentPath, path, permissions, }: {
+export declare const reduceFieldOptions: ({ fields, formState, i18n, labelPrefix, parentPath, path, permissions, plainTextLabelPrefix, }: {
     readonly fields: ClientField[];
     readonly formState?: FormState;
+    readonly i18n?: I18nClient;
     readonly labelPrefix?: React.ReactNode;
     readonly parentPath?: string;
     readonly path?: string;
     readonly permissions: {
         [fieldName: string]: SanitizedFieldPermissions;
     } | SanitizedFieldPermissions;
+    readonly plainTextLabelPrefix?: string;
 }) => FieldOption[];
 //# sourceMappingURL=reduceFieldOptions.d.ts.map

package/dist/elements/FieldSelect/reduceFieldOptions.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;~~AAahF~~,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;~~AAED~~,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,~~uEAO5B~~;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;~~CAC9B~~,KAAG,WAAW,~~EA8Fd~~,CAAA"}
1	+ {"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAehF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;AAgBD,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,mGAS5B;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAA;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;IAC7B,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;CACvC,KAAG,WAAW,EAwGd,CAAA"}

package/dist/elements/FieldSelect/reduceFieldOptions.js CHANGED Viewed

@@ -1,14 +1,28 @@
-import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions, isFieldDisabled } from 'payload/shared';
+import { getTranslation } from '@payloadcms/translations';
+import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions, isFieldDisabled, toWords } from 'payload/shared';
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
 import { combineFieldLabel } from '../../utilities/combineFieldLabel.js';
+const getPlainTextFieldLabel = (field, i18n) => {
+  if ('label' in field && field.label) {
+    if (typeof field.label === 'string') {
+      return field.label;
+    }
+    if (i18n) {
+      return getTranslation(field.label, i18n);
+    }
+  }
+  return 'name' in field && field.name ? toWords(field.name) : '';
+};
 export const ignoreFromBulkEdit = field => Boolean((fieldAffectsData(field) || field.type === 'ui') && (isFieldDisabled(field, 'bulkEdit') || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly));
 export const reduceFieldOptions = ({
   fields,
   formState,
+  i18n,
   labelPrefix = null,
   parentPath = '',
   path = '',
-  permissions
+  permissions,
+  plainTextLabelPrefix = ''
 }) => {
   if (!fields) {
     return [];
@@ -31,8 +45,10 @@ export const reduceFieldOptions = ({
     }
     if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
       const fieldHasLabel = 'label' in field && field.label;
+      const fieldPlainTextLabel = getPlainTextFieldLabel(field, i18n);
       return [...fieldsToUse, ...reduceFieldOptions({
         fields: field.fields,
+        i18n,
         labelPrefix: fieldHasLabel ? combineFieldLabel({
           CustomLabel,
           field,
@@ -40,7 +56,8 @@ export const reduceFieldOptions = ({
         }) : labelPrefix,
         parentPath: path,
         path: createNestedClientFieldPath(path, field),
-        permissions: fieldPermissions
+        permissions: fieldPermissions,
+        plainTextLabelPrefix: fieldHasLabel ? [plainTextLabelPrefix, fieldPlainTextLabel].filter(Boolean).join(' > ') : plainTextLabelPrefix
       })];
     }
     if (field.type === 'tabs' && 'tabs' in field) {
@@ -51,10 +68,12 @@ export const reduceFieldOptions = ({
           const tabPermissions = isNamedTab ? namedTabPermissions === true ? true : namedTabPermissions?.fields ?? fieldPermissions : fieldPermissions;
           return [...tabFields, ...reduceFieldOptions({
             fields: tab.fields,
+            i18n,
             labelPrefix,
             parentPath: path,
             path: isNamedTab ? createNestedClientFieldPath(path, tab) : path,
-            permissions: tabPermissions
+            permissions: tabPermissions,
+            plainTextLabelPrefix
           })];
         }
       }, [])];
@@ -65,6 +84,7 @@ export const reduceFieldOptions = ({
         field,
         prefix: labelPrefix
       }),
+      plainTextLabel: [plainTextLabelPrefix, getPlainTextFieldLabel(field, i18n)].filter(Boolean).join(' > '),
       value: {
         field,
         fieldPermissions: fieldPermissions,