npm - @payloadcms/ui - Versions diffs - 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec - Mend

@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

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 (2423) hide show

package/dist/elements/EditUpload/index.css ADDED Viewed

@@ -0,0 +1,226 @@
+@layer payload-default {
+  .edit-upload {
+    --edit-upload-cell-spacing: var(--spacer-4);
+    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .edit-upload__header {
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacer-2-5);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .edit-upload__header h2 {
+    margin: 0;
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  [dir='rtl'] .edit-upload__actions {
+    margin-right: auto;
+    margin-left: unset;
+  }
+  .edit-upload__actions {
+    min-width: 350px;
+    margin-left: auto;
+    padding: var(--spacer-2) 0 var(--spacer-2) var(--spacer-4);
+    justify-content: flex-end;
+    display: flex;
+    gap: var(--spacer-3);
+    text-wrap: nowrap;
+  }
+  .edit-upload__toolWrap {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+    min-height: 0;
+  }
+  .edit-upload .ReactCrop__selection-addon,
+  .edit-upload__crop-window {
+    height: 100%;
+    width: 100%;
+  }
+  .edit-upload__focal-wrapper {
+    position: relative;
+    display: inline-flex;
+    max-height: 100%;
+  }
+  .edit-upload__draggable-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    pointer-events: none;
+  }
+  .edit-upload__draggable-container--dragging {
+    pointer-events: all;
+  }
+  .edit-upload__draggable-container--dragging .edit-upload__focalPoint {
+    cursor: grabbing;
+  }
+  .edit-upload__draggable {
+    position: absolute;
+  }
+  .edit-upload__focalPoint {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    width: 50px;
+    height: 50px;
+    transform: translate3d(-50%, -50%, 0);
+    pointer-events: all;
+  }
+  .edit-upload__focalPoint svg {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+    width: var(--spacer-6);
+    height: var(--spacer-6);
+    color: white;
+  }
+  .edit-upload__crop,
+  .edit-upload__focalOnly {
+    padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .edit-upload__crop {
+    padding: var(--edit-upload-cell-spacing);
+    padding-left: var(--gutter-h);
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+  }
+  .edit-upload__imageWrap {
+    position: relative;
+  }
+  .edit-upload__point {
+    cursor: move;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+  }
+  .edit-upload__point svg {
+    width: var(--spacer-6);
+    height: var(--spacer-6);
+  }
+  .edit-upload__sidebar {
+    border-left: 1px solid var(--color-border);
+    padding-top: var(--edit-upload-cell-spacing);
+    min-width: var(--edit-upload-sidebar-width);
+  }
+  .edit-upload__sidebar > div:first-child {
+    margin-bottom: var(--spacer-3);
+  }
+  .edit-upload__groupWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    padding-right: var(--gutter-h);
+    padding-left: var(--edit-upload-cell-spacing);
+    width: 100%;
+  }
+  .edit-upload__groupWrap + .edit-upload__groupWrap {
+    padding-top: var(--edit-upload-cell-spacing);
+    margin-top: var(--edit-upload-cell-spacing);
+    border-top: 1px solid var(--color-border);
+  }
+  .edit-upload__inputsWrap,
+  .edit-upload__titleWrap {
+    display: flex;
+    gap: var(--spacer-3);
+  }
+  .edit-upload__titleWrap {
+    justify-content: space-between;
+    align-items: center;
+  }
+  .edit-upload__titleWrap h3 {
+    margin: 0;
+  }
+  .edit-upload__reset {
+    height: fit-content;
+    border-radius: var(--radius-small);
+    background-color: var(--color-bg-secondary);
+    padding: 0 var(--spacer-2);
+  }
+  .edit-upload__input {
+    flex: 1;
+  }
+  @media (max-width: 1024px) {
+    .edit-upload {
+      --edit-upload-cell-spacing: var(--gutter-h);
+    }
+    .edit-upload__sidebar {
+      padding-left: 0;
+      border-left: 0;
+      width: 100%;
+    }
+    .edit-upload__toolWrap {
+      flex-direction: column-reverse;
+    }
+  }
+  @media (max-width: 768px) {
+    .edit-upload {
+      flex-direction: column;
+    }
+    .edit-upload__focalPoint {
+      border-right: none;
+      padding: var(--spacer-3) 0;
+    }
+    .edit-upload__inputsWrap {
+      flex-direction: column;
+      gap: var(--spacer-3);
+    }
+    .edit-upload__sidebar {
+      min-width: 0;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { UploadEdits } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type FocalPosition = {
     x: number;
     y: number;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAQ/C,OAAO,~~cAAc~~,CAAA;~~AA8BrB~~,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAQ/C,OAAO,aAAa,CAAA;AA8BpB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,CAAA"}

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

@@ -9,7 +9,7 @@ import { PlusIcon } from '../../icons/Plus/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';
 import { Button } from '../Button/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'edit-upload';
 const Input = props => {
   const {
@@ -216,7 +216,7 @@ export const EditUpload = ({
               children: [/*#__PURE__*/_jsx("h3", {
                 children: t('upload:crop')
               }), /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "none",
+                buttonStyle: "ghost",
                 className: `${baseClass}__reset`,
                 onClick: () => setCrop({
                   height: 100,
@@ -261,7 +261,7 @@ export const EditUpload = ({
               children: [/*#__PURE__*/_jsx("h3", {
                 children: t('upload:focalPoint')
               }), /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "none",
+                buttonStyle: "ghost",
                 className: `${baseClass}__reset`,
                 onClick: centerFocalPoint,
                 children: t('general:reset')

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","appendCacheTag","Button","baseClass","Input","props","name","disabled","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","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","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'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n disabled?: boolean\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, disabled, onChange, ref, value } = props\n\n return (\n <div className={`${baseClass}__input`}>\n {name}\n <input\n disabled={disabled}\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\n const percentage =\n 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n if (percentage <= 0 \|\| percentage > 100) {\n return null\n }\n\n setCrop((prev) => ({\n ...prev,\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 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : fileSrc\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__header`}>\n <h2 title={`${t('general:editing')} ${fileName}`}>\n {t('general:editing')} {fileName}\n </h2>\n <div className={`${baseClass}__actions`}>\n <Button\n aria-label={t('general:cancel')}\n buttonStyle=\"secondary\"\n className={`${baseClass}__cancel`}\n onClick={() => closeModal(editDrawerSlug)}\n >\n {t('general:cancel')}\n </Button>\n <Button\n aria-label={t('general:applyChanges')}\n buttonStyle=\"primary\"\n className={`${baseClass}__save`}\n disabled={!imageLoaded}\n onClick={saveEdits}\n >\n {t('general:applyChanges')}\n </Button>\n </div>\n </div>\n <div className={`${baseClass}__toolWrap`}>\n <div className={`${baseClass}__crop`}>\n <div\n className={`${baseClass}__focal-wrapper`}\n ref={focalWrapRef}\n style={{\n aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n }}\n >\n {showCrop ? (\n <ReactCrop\n className={`${baseClass}__reactCrop`}\n crop={crop}\n onChange={(_, c) => setCrop(c)}\n onComplete={() => setCheckBounds(true)}\n renderSelectionAddon={() => {\n return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n }}\n >\n <img\n alt={t('upload:setCropArea')}\n onLoad={onImageLoad}\n ref={imageRef}\n src={fileSrcToUse}\n />\n </ReactCrop>\n ) : (\n <img\n alt={t('upload:setFocalPoint')}\n onLoad={onImageLoad}\n ref={imageRef}\n src={fileSrcToUse}\n />\n )}\n {showFocalPoint && (\n <DraggableElement\n boundsRef={showCrop ? cropRef : imageRef}\n checkBounds={showCrop ? checkBounds : false}\n className={`${baseClass}__focalPoint`}\n containerRef={focalWrapRef}\n initialPosition={focalPosition}\n onDragEnd={onDragEnd}\n setCheckBounds={showCrop ? setCheckBounds : false}\n >\n <PlusIcon />\n </DraggableElement>\n )}\n </div>\n </div>\n {(showCrop \|\| showFocalPoint) && (\n <div className={`${baseClass}__sidebar`}>\n {showCrop && (\n <div className={`${baseClass}__groupWrap`}>\n <div>\n <div className={`${baseClass}__titleWrap`}>\n <h3>{t('upload:crop')}</h3>\n <Button\n buttonStyle=\"none\"\n className={`${baseClass}__reset`}\n onClick={() =>\n setCrop({\n height: 100,\n unit: '%',\n width: 100,\n x: 0,\n y: 0,\n })\n }\n >\n {t('general:reset')}\n </Button>\n </div>\n </div>\n <span className={`${baseClass}__description`}>\n {t('upload:cropToolDescription')}\n </span>\n <div className={`${baseClass}__inputsWrap`}>\n <Input\n disabled={!imageLoaded}\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 disabled={!imageLoaded}\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":[]}
1	+ {"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","appendCacheTag","Button","baseClass","Input","props","name","disabled","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","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","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'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n disabled?: boolean\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, disabled, onChange, ref, value } = props\n\n return (\n <div className={`${baseClass}__input`}>\n {name}\n <input\n disabled={disabled}\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\n const percentage =\n 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n if (percentage <= 0 \|\| percentage > 100) {\n return null\n }\n\n setCrop((prev) => ({\n ...prev,\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 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : fileSrc\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__header`}>\n <h2 title={`${t('general:editing')} ${fileName}`}>\n {t('general:editing')} {fileName}\n </h2>\n <div className={`${baseClass}__actions`}>\n <Button\n aria-label={t('general:cancel')}\n buttonStyle=\"secondary\"\n className={`${baseClass}__cancel`}\n onClick={() => closeModal(editDrawerSlug)}\n >\n {t('general:cancel')}\n </Button>\n <Button\n aria-label={t('general:applyChanges')}\n buttonStyle=\"primary\"\n className={`${baseClass}__save`}\n disabled={!imageLoaded}\n onClick={saveEdits}\n >\n {t('general:applyChanges')}\n </Button>\n </div>\n </div>\n <div className={`${baseClass}__toolWrap`}>\n <div className={`${baseClass}__crop`}>\n <div\n className={`${baseClass}__focal-wrapper`}\n ref={focalWrapRef}\n style={{\n aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n }}\n >\n {showCrop ? (\n <ReactCrop\n className={`${baseClass}__reactCrop`}\n crop={crop}\n onChange={(_, c) => setCrop(c)}\n onComplete={() => setCheckBounds(true)}\n renderSelectionAddon={() => {\n return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n }}\n >\n <img\n alt={t('upload:setCropArea')}\n onLoad={onImageLoad}\n ref={imageRef}\n src={fileSrcToUse}\n />\n </ReactCrop>\n ) : (\n <img\n alt={t('upload:setFocalPoint')}\n onLoad={onImageLoad}\n ref={imageRef}\n src={fileSrcToUse}\n />\n )}\n {showFocalPoint && (\n <DraggableElement\n boundsRef={showCrop ? cropRef : imageRef}\n checkBounds={showCrop ? checkBounds : false}\n className={`${baseClass}__focalPoint`}\n containerRef={focalWrapRef}\n initialPosition={focalPosition}\n onDragEnd={onDragEnd}\n setCheckBounds={showCrop ? setCheckBounds : false}\n >\n <PlusIcon />\n </DraggableElement>\n )}\n </div>\n </div>\n {(showCrop \|\| showFocalPoint) && (\n <div className={`${baseClass}__sidebar`}>\n {showCrop && (\n <div className={`${baseClass}__groupWrap`}>\n <div>\n <div className={`${baseClass}__titleWrap`}>\n <h3>{t('upload:crop')}</h3>\n <Button\n buttonStyle=\"ghost\"\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 disabled={!imageLoaded}\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 disabled={!imageLoaded}\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=\"ghost\"\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/EditUpload/library.scss CHANGED Viewed

@@ -64,12 +64,19 @@
   .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
     animation: marching-ants 1s;
-    background-image: linear-gradient(to right, #fff 50%, #444 50%),
-      linear-gradient(to right, #fff 50%, #444 50%),
-      linear-gradient(to bottom, #fff 50%, #444 50%),
-      linear-gradient(to bottom, #fff 50%, #444 50%);
-    background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
-    background-position: 0 0, 0 100%, 0 0, 100% 0;
+    background-image:
+      linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%),
+      linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
+    background-size:
+      10px 1px,
+      10px 1px,
+      1px 10px,
+      1px 10px;
+    background-position:
+      0 0,
+      0 100%,
+      0 0,
+      100% 0;
     background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
     color: #fff;
     animation-play-state: running;
@@ -79,10 +86,18 @@
   @keyframes marching-ants {
     0% {
-      background-position: 0 0, 0 100%, 0 0, 100% 0;
+      background-position:
+        0 0,
+        0 100%,
+        0 0,
+        100% 0;
     }
     to {
-      background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
+      background-position:
+        20px 0,
+        -20px 100%,
+        0 -20px,
+        100% 20px;
     }
   }
@@ -145,7 +160,7 @@
     width: 10px;
     height: 10px;
     background-color: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.7);
+    border: var(--stroke-width-small) solid rgba(255, 255, 255, 0.7);
     outline: 1px solid transparent;
   }

package/dist/elements/EmailAndUsername/index.css ADDED Viewed

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .login-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+}

package/dist/elements/EmailAndUsername/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { TFunction } from '@payloadcms/translations';
 import type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type RenderEmailAndUsernameFieldsProps = {
     className?: string;
     loginWithUsername?: false | LoginWithUsernameOptions;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGlF,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAIzB~~,OAAO,~~cAAc~~,CAAA;~~AAIrB~~,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EACR;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,IAAI,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA8F9E"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAGpB,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EACR;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,IAAI,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA8F9E"}

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

@@ -5,8 +5,8 @@ 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';
+import './index.css';
 const baseClass = 'login-fields';
 export function EmailAndUsernameFields(props) {
   const {

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

	@@ -1 +1 @@
1	- {"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":"AAAA;;;AAKA,SAASA,KAAK,EAAEC,mBAAmB,EAAEC,QAAQ,QAAQ;AACrD,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,~~OAAO;AACP,~~SAASC,gBAAgB,QAAQ;~~AAEjC~~,MAAMC,SAAA,GAAY;AAclB,OAAO,SAASC,uBAAuBC,KAAwC;EAC7E,MAAM;IACJC,SAAS;IACTC,iBAAiB;IACjBC,SAAA,EAAWC,kBAAkB;IAC7BC,WAAW;IACXC,QAAQ;IACRC;EAAC,CACF,GAAGP,KAAA;EAEJ,SAASQ,uBAAuBC,SAAiB,EAAEN,SAA4B;IAC7E,MAAMO,iBAAA,GAAoBlB,mBAAA,CAAoB;MAC5CmB,KAAA,EAAO;QAAEC,IAAA,EAAMH,SAAA;QAAWI,IAAA,EAAM;MAAO;MACvCV,SAAA,EAAWC,kBAAA,KAAuB,WAAW,WAAWD,SAAA;MACxDW,UAAA,EAAY;MACZT;IACF;IACA,OAAOK,iBAAA,CAAkBP,SAAS;EACpC;EAEA,MAAMY,qBAAA,GACJ,OAAOV,WAAA,KAAgB,YAAY,WAAWA,WAAA,IAAeA,WAAA,CAAYd,KAAK;EAChF,MAAMyB,wBAAA,GACJ,OAAOX,WAAA,KAAgB,YAAY,cAAcA,WAAA,IAAeA,WAAA,CAAYZ,QAAQ;EAEtF,MAAMwB,gBAAA,GAAmBF,qBAAA,GACrB;IACEG,IAAA,EAAMV,sBAAA,CAAuB,SAAS;IACtCW,MAAA,EAAQX,sBAAA,CAAuB,SAAS;EAC1C,IACA;IACEU,IAAA,EAAM;IACNC,MAAA,EAAQ;EACV;EAEJ,MAAMC,mBAAA,GAAsBJ,wBAAA,GACxB;IACEE,IAAA,EAAMV,sBAAA,CAAuB,YAAY;IACzCW,MAAA,EAAQX,sBAAA,CAAuB,YAAY;EAC7C,IACA;IACEU,IAAA,EAAM;IACNC,MAAA,EAAQ;EACV;EAEJ,MAAME,cAAA,GACJ,CAAC,CAACnB,iBAAA,IAAqBA,iBAAA,EAAmBoB,YAAA,IAAgBpB,iBAAA,EAAmBqB,eAAc,KAC3FN,gBAAA,CAAiBC,IAAI;EAEvB,MAAMM,iBAAA,GAAoBC,OAAA,CAAQvB,iBAAA,KAAsBkB,mBAAA,CAAoBF,IAAI;EAEhF,IAAIG,cAAA,IAAkBG,iBAAA,EAAmB;IACvC,oBACEE,KAAA,CAAC;MAAIzB,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,IAAaA,SAAA,CAAU,CAAC0B,MAAM,CAACF,OAAA,EAASG,IAAI,CAAC;iBACtEP,cAAA,gBACCQ,IAAA,CAAChC,gBAAA;QAAiBiC,KAAA,EAAM;kBACtB,aAAAD,IAAA,CAAClC,UAAA;UACCgB,KAAA,EAAO;YACLC,IAAA,EAAM;YACNmB,KAAA,EAAO;cACLC,YAAA,EAAc;YAChB;YACAC,KAAA,EAAO1B,CAAA,CAAE;YACT2B,QAAA,EACE,CAAChC,iBAAA,IAAsBA,iBAAA,IAAqBA,iBAAA,CAAkBoB;UAClE;UACAa,IAAA,EAAK;UACL7B,QAAA,EAAUA,QAAA,IAAY,CAACW,gBAAA,CAAiBE,MAAM;UAC9CiB,UAAA,EAAW;UACXC,QAAA,EAAU9C;;WAGZ,MACHiC,iBAAA,iBACCK,IAAA,CAAChC,gBAAA;QAAiBiC,KAAA,EAAM;kBACtB,aAAAD,IAAA,CAACjC,SAAA;UACCe,KAAA,EAAO;YACLC,IAAA,EAAM;YACNmB,KAAA,EAAO;cACLC,YAAA,EAAc;YAChB;YACAC,KAAA,EAAO1B,CAAA,CAAE;YACT2B,QAAA,EAAUhC,iBAAA,IAAqBA,iBAAA,CAAkBoC;UACnD;UACAH,IAAA,EAAK;UACL7B,QAAA,EAAUA,QAAA,IAAY,CAACc,mBAAA,CAAoBD,MAAM;UACjDiB,UAAA,EAAW;UACXC,QAAA,EAAU5C;;;;EAMtB;AACF","ignoreList":[]}
1	+ {"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 { FieldPathContext } from '../../forms/RenderFields/context.js'\nimport './index.css'\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/FieldDiffContainer/index.css ADDED Viewed

@@ -0,0 +1,73 @@
+@layer payload-default {
+  .field-diff__locale-label {
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    margin-inline-end: var(--spacer-1);
+  }
+  .field-diff-container {
+    position: relative;
+  }
+  .field-diff-content {
+    display: grid;
+    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
+    background: var(--color-bg-secondary);
+    padding-block: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    overflow: clip;
+  }
+  .field-diff-content > * {
+    padding-inline: var(--spacer-2-5);
+  }
+  @media (max-width: 768px) {
+    .field-diff-container .field-diff-content {
+      grid-template-columns: 1fr;
+      gap: calc(var(--stroke-width-small) * 2);
+      padding: 0;
+      background: transparent;
+      isolation: isolate;
+    }
+    .field-diff-content > * {
+      background: var(--color-bg-secondary);
+      padding: var(--spacer-1) var(--spacer-2);
+      min-height: var(--spacer-5);
+      overflow: hidden;
+      align-content: center;
+    }
+    .field-diff-content > *:first-child {
+      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+    }
+    .field-diff-content > *:last-child {
+      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+    }
+    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
+      background: var(--diff-delete-parent-bg);
+    }
+    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
+      background: var(--diff-create-parent-bg);
+    }
+  }
+  .diff-no-value {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    max-height: var(--spacer-5);
+    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.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { LabelFunction, StaticLabel } from 'payload';
-import './index.scss';
+import './index.css';
 import { type I18nClient } from '@payloadcms/translations';
+import React from 'react';
 export declare const FieldDiffContainer: React.FC<{
     className?: string;
     From: React.ReactNode;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,~~cAAc~~,CAAA;~~AAErB~~,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;~~AAM1E~~,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,~~CA2CA~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CAiCA,CAAA"}