npm - @payloadcms/ui - Versions diffs - 4.0.0-canary.5 → 4.0.0-canary.7 - Mend

@payloadcms/ui 4.0.0-canary.5 → 4.0.0-canary.7

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

package/LICENSE.md CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+Copyright (c) 2018-2026 Payload CMS, LLC <info@payloadcms.com>
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/dist/css/forms.css CHANGED Viewed

@@ -1,7 +1,7 @@
 @layer payload-default {
   .form-input {
     width: 100%;
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
@@ -69,7 +69,7 @@
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     transition-property: box-shadow, background-color;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
@@ -91,7 +91,6 @@
     input.form-input {
       flex: 1 1 0%;
-      width: 0;
       min-width: 0;
       background: transparent;
       border: none;
@@ -112,4 +111,8 @@
       border-color: var(--field-color-border-focus);
     }
   }
+  .field-type[data-size='medium'] {
+    --field-min-height-large: var(--field-min-height-medium);
+  }
 }

package/dist/css/theme.css CHANGED Viewed

@@ -10,7 +10,8 @@
 @layer payload-default {
   :root {
     /* Fields — controls text inputs, selects, date pickers, code editors, etc. */
-    --field-min-height: var(--spacer-5);
+    --field-min-height-large: var(--spacer-5);
+    --field-min-height-medium: var(--spacer-4);
     --field-padding-inline: var(--spacer-2);
     --field-border-radius: var(--radius-medium);

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

@@ -16,7 +16,7 @@
     align-items: center;
     justify-content: center;
     padding-inline: var(--spacer-1);
-    height: var(--field-min-height);
+    height: var(--field-min-height-large);
     margin: 0;
     background: var(--color-bg-secondary);
     border: none;

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

@@ -827,7 +827,7 @@
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
     width: 100%;
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
     background: var(--field-color-bg);

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

@@ -6,7 +6,7 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js';
 const DatePicker = /*#__PURE__*/lazy(() => import('./DatePicker.js'));
 export const DatePickerField = props => /*#__PURE__*/_jsx(Suspense, {
   fallback: /*#__PURE__*/_jsx(ShimmerEffect, {
-    height: "var(--field-min-height)"
+    height: "var(--field-min-height-large)"
   }),
   children: /*#__PURE__*/_jsx(DatePicker, {
     ...props

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","lazy","Suspense","ShimmerEffect","DatePicker","DatePickerField","props","_jsx","fallback","height"],"sources":["../../../src/elements/DatePicker/index.tsx"],"sourcesContent":["'use client'\nimport React, { lazy, Suspense } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst DatePicker = lazy(() => import('./DatePicker.js'))\n\nexport const DatePickerField: React.FC<Props> = (props) => (\n <Suspense fallback={<ShimmerEffect height=\"var(--field-min-height)\" />}>\n <DatePicker {...props} />\n </Suspense>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,IAAI,EAAEC,QAAQ,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaH,IAAA,CAAK,MAAM,MAAM,CAAC;AAErC,OAAO,MAAMI,eAAA,GAAoCC,KAAA,iBAC/CC,IAAA,CAACL,QAAA;EAASM,QAAA,eAAUD,IAAA,CAACJ,aAAA;IAAcM,MAAA,EAAO;;YACxC,aAAAF,IAAA,CAACH,UAAA;IAAY,GAAGE","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["React","lazy","Suspense","ShimmerEffect","DatePicker","DatePickerField","props","_jsx","fallback","height"],"sources":["../../../src/elements/DatePicker/index.tsx"],"sourcesContent":["'use client'\nimport React, { lazy, Suspense } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst DatePicker = lazy(() => import('./DatePicker.js'))\n\nexport const DatePickerField: React.FC<Props> = (props) => (\n <Suspense fallback={<ShimmerEffect height=\"var(--field-min-height-large)\" />}>\n <DatePicker {...props} />\n </Suspense>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,IAAI,EAAEC,QAAQ,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaH,IAAA,CAAK,MAAM,MAAM,CAAC;AAErC,OAAO,MAAMI,eAAA,GAAoCC,KAAA,iBAC/CC,IAAA,CAACL,QAAA;EAASM,QAAA,eAAUD,IAAA,CAACJ,aAAA;IAAcM,MAAA,EAAO;;YACxC,aAAAF,IAAA,CAACH,UAAA;IAAY,GAAGE","ignoreList":[]}

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

@@ -79,6 +79,7 @@
     --sidebar-wrap-top: initial;
     --sidebar-wrap-height: initial;
     --sidebar-wrap-flex-shrink: initial;
+    display: none;
   }
   .document-fields__sidebar {

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;AAW/C,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAItB,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,KAAK,GAAG,MAAM,CAAA;IAC9B,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,~~CA4PhD~~,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;AAW/C,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAItB,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,KAAK,GAAG,MAAM,CAAA;IAC9B,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,CAgQhD,CAAA"}

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

@@ -205,6 +205,7 @@ export const EditUpload = ({
                 path: "cropWidth",
                 prefix: "W",
                 readOnly: !imageLoaded,
+                size: "medium",
                 value: Number(cropWidthPx)
               }), /*#__PURE__*/_jsx(NumberInput, {
                 ariaLabel: t('upload:height'),
@@ -215,6 +216,7 @@ export const EditUpload = ({
                 path: "cropHeight",
                 prefix: "H",
                 readOnly: !imageLoaded,
+                size: "medium",
                 value: Number(cropHeightPx)
               })]
             })]
@@ -244,6 +246,7 @@ export const EditUpload = ({
                 }),
                 path: "focalX",
                 prefix: "X",
+                size: "medium",
                 suffix: "%",
                 value: Math.round(focalPosition.x)
               }), /*#__PURE__*/_jsx(NumberInput, {
@@ -256,6 +259,7 @@ export const EditUpload = ({
                 }),
                 path: "focalY",
                 prefix: "Y",
+                size: "medium",
                 suffix: "%",
                 value: Math.round(focalPosition.y)
               })]

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 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 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 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 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","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":[]}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.css CHANGED Viewed

@@ -16,6 +16,7 @@
     justify-content: space-between;
     gap: var(--spacer-2);
     padding: var(--spacer-1) var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
     flex-shrink: 0;
     margin-bottom: var(--spacer-2);
     border-bottom: var(--stroke-width-small) solid var(--color-border);
@@ -23,6 +24,7 @@
   .hierarchy-column__add-button {
     flex-shrink: 0;
+    color: var(--color-text-secondary);
   }
   .hierarchy-column__header-checkbox {
@@ -45,7 +47,7 @@
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    margin: 0 var(--spacer-2);
+    margin: 0 var(--spacer-1);
     gap: var(--spacer-1);
   }

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.css CHANGED Viewed

@@ -8,6 +8,7 @@
     user-select: none;
     gap: var(--spacer-2-5);
     border-radius: var(--button-radius);
+    margin-inline: var(--spacer-1);
     &:first-child {
       margin-top: var(--spacer-1);

package/dist/elements/Hierarchy/ColumnBrowser/types.d.ts CHANGED Viewed

@@ -40,7 +40,7 @@ export type ColumnProps = {
     hasNextPage: boolean;
     isLoading: boolean;
     items: ColumnItemData[];
-    /** Called when user clicks "New" button - parent should open drawer with parentId */
+    /** Called when user clicks "New" button - parent should open modal with parentId */
     onCreateNew: (params: {
         parentId: null | number | string;
     }) => void;

package/dist/elements/Hierarchy/ColumnBrowser/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/ColumnBrowser/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,MAAM,MAAM,cAAc,GAAG;IAC3B,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,sBAAsB,EAAE,OAAO,CAAA;IAC/B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,uBAAuB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC7C,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC,UAAU,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,~~qFAAqF~~;~~IACrF~~,WAAW,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnE,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,IAAI,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACjC,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,4CAA4C;IAC5C,aAAa,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACnE,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,uBAAuB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,UAAU,CAAC,EAAE,IAAI,GAAG,KAAK,CAAA;IACzB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,mBAAmB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACzC,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACpE,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,IAAI,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/ColumnBrowser/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,MAAM,MAAM,cAAc,GAAG;IAC3B,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,sBAAsB,EAAE,OAAO,CAAA;IAC/B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,uBAAuB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC7C,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC,UAAU,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,oFAAoF;IACpF,WAAW,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnE,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,IAAI,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACjC,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,4CAA4C;IAC5C,aAAa,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACnE,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,uBAAuB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,UAAU,CAAC,EAAE,IAAI,GAAG,KAAK,CAAA;IACzB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,mBAAmB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACzC,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACpE,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,IAAI,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA"}

package/dist/elements/Hierarchy/ColumnBrowser/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Hierarchy/ColumnBrowser/types.ts"],"sourcesContent":["import type { Where } from 'payload'\nimport type React from 'react'\n\nexport type ColumnItemData = {\n /** For folders with collectionSpecific config, the allowed collection slugs /\n allowedCollections?: string[]\n hasChildren: boolean\n id: number \| string\n title: string\n}\n\nexport type PathSegment = {\n id: number \| string\n title: string\n}\n\nexport type ColumnItemProps = {\n disabled?: boolean\n /* Required collections that the folder must allow (for superset check) /\n filterByCollection?: string[]\n hasSelectedDescendants: boolean\n isExpanded: boolean\n isSelected: boolean\n item: ColumnItemData\n onExpand: (params: { id: number \| string }) => void\n onSelect: (params: { id: number \| string }) => void\n}\n\nexport type ColumnProps = {\n ancestorsWithSelections: Set<number \| string>\n /* Whether user can create new documents /\n canCreate: boolean\n /* Label for the collection (e.g., \"Folder\") /\n collectionLabel: string\n disabled?: boolean\n /* IDs that should be disabled (e.g., items being moved can't be selected as destination) /\n disabledIds?: Set<number \| string>\n expandedId: null \| number \| string\n /* Required collections for superset check (passed to ColumnItem) /\n filterByCollection?: string[]\n hasNextPage: boolean\n isLoading: boolean\n items: ColumnItemData[]\n /* Called when user clicks \"New\" button - parent should open ~~drawer~~ with parentId /\n onCreateNew: (params: { parentId: null \| number \| string }) => void\n onExpand: (params: { id: number \| string }) => void\n onLoadMore: () => void\n onSelect: (params: { id: number \| string; path: PathSegment[] }) => void\n parentId: null \| number \| string\n parentTitle?: string\n pathToColumn: PathSegment[]\n selectedIds: Set<number \| string>\n totalDocs: number\n}\n\nexport type ColumnState = {\n hasNextPage: boolean\n isLoading: boolean\n items: ColumnItemData[]\n page: number\n parentId: null \| number \| string\n parentTitle?: string\n totalDocs: number\n}\n\nexport type HierarchyColumnBrowserRef = {\n /* Refetch a specific column by parentId /\n refreshColumn: (parentId: null \| number \| string) => Promise<void>\n}\n\nexport type HierarchyColumnBrowserProps = {\n ancestorsWithSelections: Set<number \| string>\n /* Base filter constraint (e.g., tenant filter) to apply to all queries /\n baseFilter?: null \| Where\n /* IDs that should be disabled (e.g., items being moved can't be selected as destination) /\n disabledIds?: Set<number \| string>\n /\n Filters hierarchy items based on collection type restrictions:\n * - `undefined`: No filtering, show all folders\n * - `[]` (empty array): No filtering, show all folders (no constraints)\n * - `['posts', ...]`: Show folders accepting ANY of these collections OR unrestricted folders\n \n Note: Query uses ANY semantics due to PG hasMany enum limitations.\n * Client-side enforcement can disable selection of folders that don't allow ALL required collections.\n /\n filterByCollection?: string[]\n hierarchyCollectionSlug: string\n initialExpandedPath?: (number \| string)[]\n /* Whether the initial expanded path is still being loaded /\n isLoadingPath?: boolean\n /* Called when user clicks \"New\" button to create a new item */\n onCreateNew?: (params: { parentId: null \| number \| string }) => void\n onSelect: (params: { id: number \| string; path: PathSegment[] }) => void\n parentFieldName: string\n selectedIds: Set<number \| string>\n useAsTitle?: string\n}\n"],"mappings":"AAsEA","ignoreList":[]}
1	+ {"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Hierarchy/ColumnBrowser/types.ts"],"sourcesContent":["import type { Where } from 'payload'\nimport type React from 'react'\n\nexport type ColumnItemData = {\n /** For folders with collectionSpecific config, the allowed collection slugs /\n allowedCollections?: string[]\n hasChildren: boolean\n id: number \| string\n title: string\n}\n\nexport type PathSegment = {\n id: number \| string\n title: string\n}\n\nexport type ColumnItemProps = {\n disabled?: boolean\n /* Required collections that the folder must allow (for superset check) /\n filterByCollection?: string[]\n hasSelectedDescendants: boolean\n isExpanded: boolean\n isSelected: boolean\n item: ColumnItemData\n onExpand: (params: { id: number \| string }) => void\n onSelect: (params: { id: number \| string }) => void\n}\n\nexport type ColumnProps = {\n ancestorsWithSelections: Set<number \| string>\n /* Whether user can create new documents /\n canCreate: boolean\n /* Label for the collection (e.g., \"Folder\") /\n collectionLabel: string\n disabled?: boolean\n /* IDs that should be disabled (e.g., items being moved can't be selected as destination) /\n disabledIds?: Set<number \| string>\n expandedId: null \| number \| string\n /* Required collections for superset check (passed to ColumnItem) /\n filterByCollection?: string[]\n hasNextPage: boolean\n isLoading: boolean\n items: ColumnItemData[]\n /* Called when user clicks \"New\" button - parent should open modal with parentId /\n onCreateNew: (params: { parentId: null \| number \| string }) => void\n onExpand: (params: { id: number \| string }) => void\n onLoadMore: () => void\n onSelect: (params: { id: number \| string; path: PathSegment[] }) => void\n parentId: null \| number \| string\n parentTitle?: string\n pathToColumn: PathSegment[]\n selectedIds: Set<number \| string>\n totalDocs: number\n}\n\nexport type ColumnState = {\n hasNextPage: boolean\n isLoading: boolean\n items: ColumnItemData[]\n page: number\n parentId: null \| number \| string\n parentTitle?: string\n totalDocs: number\n}\n\nexport type HierarchyColumnBrowserRef = {\n /* Refetch a specific column by parentId /\n refreshColumn: (parentId: null \| number \| string) => Promise<void>\n}\n\nexport type HierarchyColumnBrowserProps = {\n ancestorsWithSelections: Set<number \| string>\n /* Base filter constraint (e.g., tenant filter) to apply to all queries /\n baseFilter?: null \| Where\n /* IDs that should be disabled (e.g., items being moved can't be selected as destination) /\n disabledIds?: Set<number \| string>\n /\n Filters hierarchy items based on collection type restrictions:\n * - `undefined`: No filtering, show all folders\n * - `[]` (empty array): No filtering, show all folders (no constraints)\n * - `['posts', ...]`: Show folders accepting ANY of these collections OR unrestricted folders\n \n Note: Query uses ANY semantics due to PG hasMany enum limitations.\n * Client-side enforcement can disable selection of folders that don't allow ALL required collections.\n /\n filterByCollection?: string[]\n hierarchyCollectionSlug: string\n initialExpandedPath?: (number \| string)[]\n /* Whether the initial expanded path is still being loaded /\n isLoadingPath?: boolean\n /* Called when user clicks \"New\" button to create a new item */\n onCreateNew?: (params: { parentId: null \| number \| string }) => void\n onSelect: (params: { id: number \| string; path: PathSegment[] }) => void\n parentFieldName: string\n selectedIds: Set<number \| string>\n useAsTitle?: string\n}\n"],"mappings":"AAsEA","ignoreList":[]}

package/dist/elements/Hierarchy/DocHeaderButton/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 import './index.css';
 const baseClass = 'hierarchy-button';
 export const HierarchyButtonClient = ({
@@ -44,13 +44,13 @@ export const HierarchyButtonClient = ({
   });
   const useAsTitle = collectionConfig?.admin?.useAsTitle || 'name';
   const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug;
-  // When in hierarchy collection, let the drawer use allowedCollections from context
+  // When in hierarchy collection, let the modal use allowedCollections from context
   // When in other collections, filter by that collection's slug
   // Memoize to prevent new array references on every render
   const filterByCollection = useMemo(() => isHierarchyCollection || !documentCollectionSlug ? undefined : [documentCollectionSlug], [isHierarchyCollection, documentCollectionSlug]);
-  const [HierarchyDrawer,, {
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     filterByCollection,
     hierarchyCollectionSlug,
     Icon
@@ -87,8 +87,8 @@ export const HierarchyButtonClient = ({
     };
     void fetchItemName();
   }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t]);
-  const handleDrawerSave = useCallback(({
-    closeDrawer,
+  const handleModalSave = useCallback(({
+    closeModal,
     selections
   }) => {
     const ids = Array.from(selections.keys());
@@ -101,13 +101,13 @@ export const HierarchyButtonClient = ({
       });
       setModified(true);
     }
-    closeDrawer();
+    closeModal();
   }, [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified]);
   const handleClick = useCallback(() => {
     if (!readOnly) {
-      openDrawer();
+      openModal();
     }
-  }, [openDrawer, readOnly]);
+  }, [openModal, readOnly]);
   const label = isLoading ? `${t('general:loading')}...` : displayName;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
@@ -119,10 +119,10 @@ export const HierarchyButtonClient = ({
       margin: false,
       onClick: handleClick,
       children: label
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: hasMany,
       initialSelections: currentId ? [currentId] : undefined,
-      onSave: handleDrawerSave
+      onSave: handleModalSave
     })]
   });
 };

package/dist/elements/Hierarchy/DocHeaderButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["formatAdminURL","React","useCallback","useEffect","useMemo","useState","useForm","useFormFields","useConfig","useDocumentInfo","useTranslation","Button","~~useHierarchyDrawer~~","baseClass","HierarchyButtonClient","fieldName","hasMany","hierarchyCollectionSlug","Icon","readOnly","readOnlyFromProps","SmallIcon","t","config","getEntityConfig","collectionSlug","documentCollectionSlug","disabled","formDisabled","setModified","dispatchField","_","dispatch","currentFieldValue","fields","currentId","value","displayName","setDisplayName","isLoading","setIsLoading","collectionConfig","useAsTitle","admin","isHierarchyCollection","filterByCollection","undefined","~~HierarchyDrawer~~","~~openDrawer~~","fetchItemName","response","fetch","apiRoute","routes","api","path","serverURL","credentials","ok","itemData","json","title","name","id","String","~~handleDrawerSave~~","~~closeDrawer~~","selections","ids","Array","from","keys","newValue","type","handleClick","label","_jsxs","_Fragment","_jsx","buttonStyle","className","filter","Boolean","join","icon","iconPosition","margin","onClick","initialSelections","onSave"],"sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { SelectionWithPath } from '../~~Drawer~~/types.js'\n\nimport { useForm, useFormFields } from '../../../forms/Form/context.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ~~useHierarchyDrawer~~ } from '../~~Drawer~~/~~useHierarchyDrawer~~.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-button'\n\nexport type HierarchyButtonClientProps = {\n fieldName: string\n hasMany?: boolean\n hierarchyCollectionSlug: string\n Icon?: React.ReactNode\n readOnly?: boolean\n SmallIcon?: React.ReactNode\n}\n\nexport const HierarchyButtonClient: React.FC<HierarchyButtonClientProps> = ({\n fieldName,\n hasMany = false,\n hierarchyCollectionSlug,\n Icon,\n readOnly: readOnlyFromProps,\n SmallIcon,\n}) => {\n const { t } = useTranslation()\n const { config, getEntityConfig } = useConfig()\n const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n const { disabled: formDisabled, setModified } = useForm()\n const readOnly = readOnlyFromProps \|\| formDisabled\n const dispatchField = useFormFields(([_, dispatch]) => dispatch)\n\n const currentFieldValue = useFormFields(([fields]) => (fields && fields?.[fieldName]) \|\| null)\n const currentId = currentFieldValue?.value as null \| number \| string\n\n const [displayName, setDisplayName] = useState<string>('')\n const [isLoading, setIsLoading] = useState(true)\n\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const useAsTitle = collectionConfig?.admin?.useAsTitle \|\| 'name'\n\n const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug\n\n // When in hierarchy collection, let the ~~drawer~~ use allowedCollections from context\n // When in other collections, filter by that collection's slug\n // Memoize to prevent new array references on every render\n const filterByCollection = useMemo(\n () => (isHierarchyCollection \|\| !documentCollectionSlug ? undefined : [documentCollectionSlug]),\n [isHierarchyCollection, documentCollectionSlug],\n )\n\n const [~~HierarchyDrawer~~, , { ~~openDrawer~~ }] = ~~useHierarchyDrawer~~({\n filterByCollection,\n hierarchyCollectionSlug,\n Icon,\n })\n\n // Fetch item name when currentId changes\n useEffect(() => {\n const fetchItemName = async () => {\n if (currentId && (typeof currentId === 'string' \|\| typeof currentId === 'number')) {\n setIsLoading(true)\n try {\n const response = await fetch(\n formatAdminURL({\n apiRoute: config.routes.api,\n path: `/${hierarchyCollectionSlug}/${currentId}`,\n serverURL: config.serverURL,\n }),\n { credentials: 'include' },\n )\n\n if (response.ok) {\n const itemData = await response.json()\n const title = itemData?.[useAsTitle] \|\| itemData?.name \|\| itemData?.id\n\n setDisplayName(String(title))\n } else {\n setDisplayName(t('general:none'))\n }\n } catch {\n setDisplayName(t('general:none'))\n } finally {\n setIsLoading(false)\n }\n } else {\n setDisplayName(t('general:none'))\n setIsLoading(false)\n }\n }\n\n void fetchItemName()\n }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t])\n\n const ~~handleDrawerSave~~ = useCallback(\n ({\n ~~closeDrawer~~,\n selections,\n }: {\n ~~closeDrawer~~: () => void\n selections: Map<number \| string, SelectionWithPath>\n }) => {\n const ids = Array.from(selections.keys())\n const newValue = hasMany ? ids : (ids[0] ?? null)\n\n if (currentFieldValue?.value !== newValue) {\n dispatchField({\n type: 'UPDATE',\n path: fieldName,\n value: newValue,\n })\n setModified(true)\n }\n ~~closeDrawer~~()\n },\n [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified],\n )\n\n const handleClick = useCallback(() => {\n if (!readOnly) {\n ~~openDrawer~~()\n }\n }, [~~openDrawer~~, readOnly])\n\n const label = isLoading ? `${t('general:loading')}...` : displayName\n\n return (\n <>\n <Button\n buttonStyle=\"secondary\"\n className={[baseClass, readOnly && `${baseClass}--read-only`].filter(Boolean).join(' ')}\n disabled={readOnly}\n icon={SmallIcon ?? Icon}\n iconPosition=\"left\"\n margin={false}\n onClick={handleClick}\n >\n {label}\n </Button>\n <~~HierarchyDrawer~~\n hasMany={hasMany}\n initialSelections={currentId ? [currentId] : undefined}\n onSave={~~handleDrawerSave~~}\n />\n </>\n )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AAIjE,SAASC,OAAO,EAAEC,aAAa,QAAQ;AACvC,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,~~kBAAkB~~,QAAQ;~~AACnC~~,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB,OAAO,MAAMC,qBAAA,GAA8DA,CAAC;EAC1EC,SAAS;EACTC,OAAA,GAAU,KAAK;EACfC,uBAAuB;EACvBC,IAAI;EACJC,QAAA,EAAUC,iBAAiB;EAC3BC;AAAS,CACV;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGZ,cAAA;EACd,MAAM;IAAEa,MAAM;IAAEC;EAAe,CAAE,GAAGhB,SAAA;EACpC,MAAM;IAAEiB,cAAA,EAAgBC;EAAsB,CAAE,GAAGjB,eAAA;EACnD,MAAM;IAAEkB,QAAA,EAAUC,YAAY;IAAEC;EAAW,CAAE,GAAGvB,OAAA;EAChD,MAAMa,QAAA,GAAWC,iBAAA,IAAqBQ,YAAA;EACtC,MAAME,aAAA,GAAgBvB,aAAA,CAAc,CAAC,CAACwB,CAAA,EAAGC,QAAA,CAAS,KAAKA,QAAA;EAEvD,MAAMC,iBAAA,GAAoB1B,aAAA,CAAc,CAAC,CAAC2B,MAAA,CAAO,KAAKA,MAAC,IAAUA,MAAA,GAASnB,SAAA,CAAU,IAAK;EACzF,MAAMoB,SAAA,GAAYF,iBAAA,EAAmBG,KAAA;EAErC,MAAM,CAACC,WAAA,EAAaC,cAAA,CAAe,GAAGjC,QAAA,CAAiB;EACvD,MAAM,CAACkC,SAAA,EAAWC,YAAA,CAAa,GAAGnC,QAAA,CAAS;EAE3C,MAAMoC,gBAAA,GAAmBjB,eAAA,CAAgB;IAAEC,cAAA,EAAgBR;EAAwB;EACnF,MAAMyB,UAAA,GAAaD,gBAAA,EAAkBE,KAAA,EAAOD,UAAA,IAAc;EAE1D,MAAME,qBAAA,GAAwBlB,sBAAA,KAA2BT,uBAAA;EAEzD;EACA;EACA;EACA,MAAM4B,kBAAA,GAAqBzC,OAAA,CACzB,MAAOwC,qBAAA,IAAyB,CAAClB,sBAAA,GAAyBoB,SAAA,GAAY,CAACpB,sBAAA,CAAuB,EAC9F,CAACkB,qBAAA,EAAuBlB,sBAAA,CAAuB;EAGjD,MAAM,CAACqB,~~eAAA~~,~~GAAmB~~;IAAEC;~~EAAU~~,CAAE,CAAC,GAAGpC,~~kBAAA~~,~~CAAmB~~;~~IAC7DiC~~,kBAAA;IACA5B,uBAAA;IACAC;EACF;EAEA;EACAf,SAAA,CAAU;IACR,MAAM8C,aAAA,GAAgB,MAAAA,CAAA;MACpB,IAAId,SAAA,KAAc,OAAOA,SAAA,KAAc,YAAY,OAAOA,SAAA,KAAc,QAAO,GAAI;QACjFK,YAAA,CAAa;QACb,IAAI;UACF,MAAMU,QAAA,GAAW,MAAMC,KAAA,CACrBnD,cAAA,CAAe;YACboD,QAAA,EAAU7B,MAAA,CAAO8B,MAAM,CAACC,GAAG;YAC3BC,IAAA,EAAM,IAAItC,uBAAA,IAA2BkB,SAAA,EAAW;YAChDqB,SAAA,EAAWjC,MAAA,CAAOiC;UACpB,IACA;YAAEC,WAAA,EAAa;UAAU;UAG3B,IAAIP,QAAA,CAASQ,EAAE,EAAE;YACf,MAAMC,QAAA,GAAW,MAAMT,QAAA,CAASU,IAAI;YACpC,MAAMC,KAAA,GAAQF,QAAA,GAAWjB,UAAA,CAAW,IAAIiB,QAAA,EAAUG,IAAA,IAAQH,QAAA,EAAUI,EAAA;YAEpEzB,cAAA,CAAe0B,MAAA,CAAOH,KAAA;UACxB,OAAO;YACLvB,cAAA,CAAehB,CAAA,CAAE;UACnB;QACF,EAAE,MAAM;UACNgB,cAAA,CAAehB,CAAA,CAAE;QACnB,UAAU;UACRkB,YAAA,CAAa;QACf;MACF,OAAO;QACLF,cAAA,CAAehB,CAAA,CAAE;QACjBkB,YAAA,CAAa;MACf;IACF;IAEA,KAAKS,aAAA;EACP,GAAG,CAACd,SAAA,EAAWlB,uBAAA,EAAyBM,MAAA,CAAO8B,MAAM,CAACC,GAAG,EAAE/B,MAAA,CAAOiC,SAAS,EAAEd,UAAA,EAAYpB,CAAA,CAAE;EAE3F,MAAM2C,~~gBAAA~~,~~GAAmB~~/D,WAAA,~~CACvB~~,CAAC;IACCgE,~~WAAW~~;~~IACXC~~;EAAU,CAIX;IACC,MAAMC,GAAA,GAAMC,KAAA,CAAMC,IAAI,CAACH,UAAA,CAAWI,IAAI;IACtC,MAAMC,QAAA,GAAWxD,OAAA,GAAUoD,GAAA,GAAOA,GAAG,CAAC,EAAE,IAAI;IAE5C,IAAInC,iBAAA,EAAmBG,KAAA,KAAUoC,QAAA,EAAU;MACzC1C,aAAA,CAAc;QACZ2C,IAAA,EAAM;QACNlB,IAAA,EAAMxC,SAAA;QACNqB,KAAA,EAAOoC;MACT;MACA3C,WAAA,CAAY;IACd;IACAqC,~~WAAA~~;EACF,GACA,CAACjC,iBAAA,EAAmBG,KAAA,EAAON,aAAA,EAAef,SAAA,EAAWC,OAAA,EAASa,WAAA,CAAY;EAG5E,MAAM6C,WAAA,GAAcxE,WAAA,CAAY;IAC9B,IAAI,CAACiB,QAAA,EAAU;MACb6B,~~UAAA~~;IACF;EACF,GAAG,CAACA,~~UAAA~~,~~EAAY7B~~,QAAA,CAAS;~~EAEzB~~,MAAMwD,KAAA,GAAQpC,SAAA,GAAY,GAAGjB,CAAA,CAAE,uBAAuB,GAAGe,WAAA;EAEzD,oBACEuC,KAAA,CAAAC,SAAA;4BACEC,IAAA,CAACnE,MAAA;MACCoE,WAAA,EAAY;MACZC,SAAA,EAAW,CAACnE,SAAA,EAAWM,QAAA,IAAY,GAAGN,SAAA,aAAsB,CAAC,CAACoE,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACnFxD,QAAA,EAAUR,QAAA;MACViE,IAAA,EAAM/D,SAAA,IAAaH,IAAA;MACnBmE,YAAA,EAAa;MACbC,MAAA,EAAQ;MACRC,OAAA,EAASb,WAAA;gBAERC;qBAEHG,IAAA,CAAC/B,~~eAAA~~;MACC/B,OAAA,EAASA,OAAA;MACTwE,iBAAA,EAAmBrD,SAAA,GAAY,CAACA,SAAA,CAAU,GAAGW,SAAA;MAC7C2C,MAAA,EAAQxB;;;AAIhB","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["formatAdminURL","React","useCallback","useEffect","useMemo","useState","useForm","useFormFields","useConfig","useDocumentInfo","useTranslation","Button","useHierarchyModal","baseClass","HierarchyButtonClient","fieldName","hasMany","hierarchyCollectionSlug","Icon","readOnly","readOnlyFromProps","SmallIcon","t","config","getEntityConfig","collectionSlug","documentCollectionSlug","disabled","formDisabled","setModified","dispatchField","_","dispatch","currentFieldValue","fields","currentId","value","displayName","setDisplayName","isLoading","setIsLoading","collectionConfig","useAsTitle","admin","isHierarchyCollection","filterByCollection","undefined","HierarchyModal","openModal","fetchItemName","response","fetch","apiRoute","routes","api","path","serverURL","credentials","ok","itemData","json","title","name","id","String","handleModalSave","closeModal","selections","ids","Array","from","keys","newValue","type","handleClick","label","_jsxs","_Fragment","_jsx","buttonStyle","className","filter","Boolean","join","icon","iconPosition","margin","onClick","initialSelections","onSave"],"sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { SelectionWithPath } from '../Modal/types.js'\n\nimport { useForm, useFormFields } from '../../../forms/Form/context.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useHierarchyModal } from '../Modal/useHierarchyModal.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-button'\n\nexport type HierarchyButtonClientProps = {\n fieldName: string\n hasMany?: boolean\n hierarchyCollectionSlug: string\n Icon?: React.ReactNode\n readOnly?: boolean\n SmallIcon?: React.ReactNode\n}\n\nexport const HierarchyButtonClient: React.FC<HierarchyButtonClientProps> = ({\n fieldName,\n hasMany = false,\n hierarchyCollectionSlug,\n Icon,\n readOnly: readOnlyFromProps,\n SmallIcon,\n}) => {\n const { t } = useTranslation()\n const { config, getEntityConfig } = useConfig()\n const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n const { disabled: formDisabled, setModified } = useForm()\n const readOnly = readOnlyFromProps \|\| formDisabled\n const dispatchField = useFormFields(([_, dispatch]) => dispatch)\n\n const currentFieldValue = useFormFields(([fields]) => (fields && fields?.[fieldName]) \|\| null)\n const currentId = currentFieldValue?.value as null \| number \| string\n\n const [displayName, setDisplayName] = useState<string>('')\n const [isLoading, setIsLoading] = useState(true)\n\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const useAsTitle = collectionConfig?.admin?.useAsTitle \|\| 'name'\n\n const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug\n\n // When in hierarchy collection, let the modal use allowedCollections from context\n // When in other collections, filter by that collection's slug\n // Memoize to prevent new array references on every render\n const filterByCollection = useMemo(\n () => (isHierarchyCollection \|\| !documentCollectionSlug ? undefined : [documentCollectionSlug]),\n [isHierarchyCollection, documentCollectionSlug],\n )\n\n const [HierarchyModal, , { openModal }] = useHierarchyModal({\n filterByCollection,\n hierarchyCollectionSlug,\n Icon,\n })\n\n // Fetch item name when currentId changes\n useEffect(() => {\n const fetchItemName = async () => {\n if (currentId && (typeof currentId === 'string' \|\| typeof currentId === 'number')) {\n setIsLoading(true)\n try {\n const response = await fetch(\n formatAdminURL({\n apiRoute: config.routes.api,\n path: `/${hierarchyCollectionSlug}/${currentId}`,\n serverURL: config.serverURL,\n }),\n { credentials: 'include' },\n )\n\n if (response.ok) {\n const itemData = await response.json()\n const title = itemData?.[useAsTitle] \|\| itemData?.name \|\| itemData?.id\n\n setDisplayName(String(title))\n } else {\n setDisplayName(t('general:none'))\n }\n } catch {\n setDisplayName(t('general:none'))\n } finally {\n setIsLoading(false)\n }\n } else {\n setDisplayName(t('general:none'))\n setIsLoading(false)\n }\n }\n\n void fetchItemName()\n }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t])\n\n const handleModalSave = useCallback(\n ({\n closeModal,\n selections,\n }: {\n closeModal: () => void\n selections: Map<number \| string, SelectionWithPath>\n }) => {\n const ids = Array.from(selections.keys())\n const newValue = hasMany ? ids : (ids[0] ?? null)\n\n if (currentFieldValue?.value !== newValue) {\n dispatchField({\n type: 'UPDATE',\n path: fieldName,\n value: newValue,\n })\n setModified(true)\n }\n closeModal()\n },\n [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified],\n )\n\n const handleClick = useCallback(() => {\n if (!readOnly) {\n openModal()\n }\n }, [openModal, readOnly])\n\n const label = isLoading ? `${t('general:loading')}...` : displayName\n\n return (\n <>\n <Button\n buttonStyle=\"secondary\"\n className={[baseClass, readOnly && `${baseClass}--read-only`].filter(Boolean).join(' ')}\n disabled={readOnly}\n icon={SmallIcon ?? Icon}\n iconPosition=\"left\"\n margin={false}\n onClick={handleClick}\n >\n {label}\n </Button>\n <HierarchyModal\n hasMany={hasMany}\n initialSelections={currentId ? [currentId] : undefined}\n onSave={handleModalSave}\n />\n </>\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Field/index.client.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 import { RenderCustomComponent } from '../../RenderCustomComponent/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 import { SelectedHierarchies } from './SelectedHierarchies.js';
 import './index.css';
 const baseClass = 'hierarchy-field';
@@ -88,7 +88,7 @@ export const HierarchyFieldClient = props => {
     }
     return [value_0];
   }, [value_0]);
-  // Initialize selections for the drawer - use current value so drawer expands to current selection
+  // Initialize selections for the modal - use current value so modal expands to current selection
   const initialSelections = useMemo(() => {
     if (!value_0) {
       return [];
@@ -100,21 +100,21 @@ export const HierarchyFieldClient = props => {
   }, [value_0]);
   // Memoize to prevent new array references on every render
   const filterByCollection = useMemo(() => documentCollectionSlug ? [documentCollectionSlug] : undefined, [documentCollectionSlug]);
-  const [HierarchyDrawer,, {
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     filterByCollection,
     hierarchyCollectionSlug: hierarchySlug,
     Icon
   });
-  const handleDrawerSave = useCallback(({
-    closeDrawer,
+  const handleModalSave = useCallback(({
+    closeModal,
     selections
   }) => {
     const ids = Array.from(selections.keys());
     const newValue = hasMany ? ids : ids[0] ?? null;
     setValue(newValue);
-    closeDrawer();
+    closeModal();
   }, [hasMany, setValue]);
   const handleRemove = useCallback(({
     id: idToRemove
@@ -126,9 +126,9 @@ export const HierarchyFieldClient = props => {
       setValue(null);
     }
   }, [hasMany, selectedIds, setValue]);
-  const handleOpenDrawer = useCallback(() => {
-    openDrawer();
-  }, [openDrawer]);
+  const handleOpenModal = useCallback(() => {
+    openModal();
+  }, [openModal]);
   const hierarchyLabel = getTranslation(hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular, i18n) || hierarchySlug;
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && `${baseClass}--read-only`].filter(Boolean).join(' '),
@@ -166,7 +166,7 @@ export const HierarchyFieldClient = props => {
           }),
           iconPosition: "left",
           margin: false,
-          onClick: handleOpenDrawer,
+          onClick: handleOpenModal,
           size: "medium",
           children: t('general:selectLabel', {
             label: hierarchyLabel
@@ -179,10 +179,10 @@ export const HierarchyFieldClient = props => {
           path: path
         })
       })]
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: hasMany,
       initialSelections: initialSelections,
-      onSave: handleDrawerSave
+      onSave: handleModalSave
     })]
   });
 };