@payloadcms/ui 3.0.0-canary.a0b06af → 3.0.0-canary.a5aaf21

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload'\n\nimport { isImage, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\ntype UploadActionsArgs = {\n  customActions?: React.ReactNode[]\n  enableAdjustments: boolean\n  enablePreviewSizes: boolean\n  mimeType: string\n}\n\nexport const UploadActions = ({\n  customActions,\n  enableAdjustments,\n  enablePreviewSizes,\n  mimeType,\n}: UploadActionsArgs) => {\n  const { t } = useTranslation()\n\n  const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== 'image/svg+xml'\n\n  if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) return null\n\n  return (\n    <div className={`${baseClass}__upload-actions`}>\n      {fileTypeIsAdjustable && (\n        <React.Fragment>\n          {enablePreviewSizes && (\n            <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n              {t('upload:previewSizes')}\n            </DrawerToggler>\n          )}\n          {enableAdjustments && (\n            <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n              {t('upload:editImage')}\n            </DrawerToggler>\n          )}\n        </React.Fragment>\n      )}\n\n      {customActions &&\n        customActions.map((CustomAction, i) => {\n          return <React.Fragment key={i}>{CustomAction}</React.Fragment>\n        })}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  customActions?: React.ReactNode[]\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, customActions, initialState, onChange, uploadConfig } = props\n\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n  const [_crop, setCrop] = useState({ x: 0, y: 0 })\n\n  const [showUrlInput, setShowUrlInput] = useState(false)\n  const [fileUrl, setFileUrl] = useState<string>('')\n\n  const cursorPositionRef = useRef(null)\n  const urlInputRef = useRef<HTMLInputElement>(null)\n\n  const handleFileChange = useCallback(\n    (newFile: File) => {\n      if (newFile instanceof File) {\n        const fileReader = new FileReader()\n        fileReader.onload = (e) => {\n          const imgSrc = e.target?.result\n\n          if (typeof imgSrc === 'string') {\n            setFileSrc(imgSrc)\n          }\n        }\n        fileReader.readAsDataURL(newFile)\n      }\n\n      setValue(newFile)\n      setShowUrlInput(false)\n\n      if (typeof onChange === 'function') {\n        onChange(newFile)\n      }\n    },\n    [onChange, setValue],\n  )\n\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\n    const cursorPosition = e.target.selectionStart\n\n    cursorPositionRef.current = cursorPosition\n\n    if (value) {\n      const fileValue = value\n      // Creating a new File object with updated properties\n      const newFile = new File([fileValue], updatedFileName, { type: fileValue.type })\n      handleFileChange(newFile)\n    }\n  }\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    const inputElement = document.querySelector(`.${baseClass}__filename`) as HTMLInputElement\n    if (inputElement && cursorPositionRef.current !== null) {\n      inputElement.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current)\n    }\n  }, [value])\n\n  const handleFileSelection = useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      handleFileChange(fileToUpload)\n    },\n    [handleFileChange],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    handleFileChange(null)\n    setFileSrc('')\n    setFileUrl('')\n    setDoc({})\n    setShowUrlInput(false)\n  }, [handleFileChange])\n\n  const onEditsSave = useCallback(\n    ({ crop, focalPosition }) => {\n      setCrop({\n        x: crop.x || 0,\n        y: crop.y || 0,\n      })\n\n      setModified(true)\n      dispatchFormQueryParams({\n        type: 'SET',\n        params: {\n          uploadEdits:\n            crop || focalPosition\n              ? {\n                  crop: crop || null,\n                  focalPoint: focalPosition ? focalPosition : null,\n                }\n              : null,\n        },\n      })\n    },\n    [dispatchFormQueryParams, setModified],\n  )\n\n  const handlePasteUrlClick = () => {\n    setShowUrlInput((prev) => !prev)\n  }\n\n  const handleUrlSubmit = async () => {\n    if (fileUrl) {\n      try {\n        const response = await fetch(fileUrl)\n        const data = await response.blob()\n\n        // Extract the file name from the URL\n        const fileName = fileUrl.split('/').pop()\n\n        // Create a new File object from the Blob data\n        const file = new File([data], fileName, { type: data.type })\n        handleFileChange(file)\n      } catch (e) {\n        toast.error(e.message)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (showUrlInput && urlInputRef.current) {\n      urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true\n    }\n  }, [showUrlInput])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n  // Explicity check if set to true, default is undefined\n  const focalPointEnabled = uploadConfig?.focalPoint === true\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          collectionSlug={collectionSlug}\n          customUploadActions={customActions}\n          doc={doc}\n          enableAdjustments={showCrop || showFocalPoint}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={doc.updatedAt}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && !showUrlInput && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n              onPasteUrlClick={handlePasteUrlClick}\n            />\n          )}\n          {showUrlInput && (\n            <React.Fragment>\n              <div className={`${baseClass}__remote-file-wrap`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__remote-file`}\n                  onChange={(e) => {\n                    setFileUrl(e.target.value)\n                  }}\n                  ref={urlInputRef}\n                  type=\"text\"\n                  value={fileUrl}\n                />\n                <div className={`${baseClass}__add-file-wrap`}>\n                  <button\n                    className={`${baseClass}__add-file`}\n                    onClick={handleUrlSubmit}\n                    type=\"button\"\n                  >\n                    {t('upload:addImage')}\n                  </button>\n                </div>\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n          {value && fileSrc && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n                <UploadActions\n                  customActions={customActions}\n                  enableAdjustments={showCrop || showFocalPoint}\n                  enablePreviewSizes={hasImageSizes && doc.filename && !replacingFile}\n                  mimeType={value.type}\n                />\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            fileName={value?.name || doc?.filename}\n            fileSrc={doc?.url || fileSrc}\n            imageCacheTag={doc.updatedAt}\n            initialCrop={formQueryParams?.uploadEdits?.crop ?? {}}\n            initialFocalPoint={{\n              x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,\n              y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} imageCacheTag={doc.updatedAt} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["isImage","reduceFieldsToValues","React","useCallback","useEffect","useRef","useState","toast","FieldError","fieldBaseClass","useForm","useField","useDocumentInfo","useFormQueryParams","useTranslation","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","customActions","enableAdjustments","enablePreviewSizes","mimeType","t","fileTypeIsAdjustable","length","div","className","Fragment","slug","map","CustomAction","i","Upload","props","collectionSlug","initialState","onChange","uploadConfig","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","dispatchFormQueryParams","formQueryParams","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","_crop","setCrop","x","y","showUrlInput","setShowUrlInput","fileUrl","setFileUrl","cursorPositionRef","urlInputRef","handleFileChange","newFile","File","fileReader","FileReader","onload","e","imgSrc","target","result","readAsDataURL","handleFileNameChange","updatedFileName","cursorPosition","selectionStart","current","fileValue","type","inputElement","document","querySelector","setSelectionRange","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","crop","focalPosition","params","uploadEdits","focalPoint","handlePasteUrlClick","prev","handleUrlSubmit","response","fetch","data","blob","fileName","split","pop","file","error","message","focus","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","showCrop","showFocalPoint","filter","join","filename","customUploadActions","handleRemove","imageCacheTag","updatedAt","mimeTypes","onPasteUrlClick","input","ref","button","onClick","buttonStyle","icon","iconStyle","round","tooltip","name","Header","url","initialCrop","initialFocalPoint","focalX","focalY","onSave","hoverTitle","title","label"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","isImage","reduceFieldsToValues","React","useCallback","useEffect","useRef","useState","toast","FieldError","fieldBaseClass","useForm","useField","useDocumentInfo","useTranslation","useUploadEdits","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","t0","$","customActions","enableAdjustments","enablePreviewSizes","mimeType","t","t1","t2","Symbol","for","bb0","fileTypeIsAdjustable","length","t3","map","_temp","_jsxs","className","children","Fragment","_jsx","slug","Upload","props","collectionSlug","initialState","onChange","uploadConfig","setModified","resetUploadEdits","updateUploadEdits","uploadEdits","docPermissions","errorMessage","setValue","showError","path","doc","setDoc","fileSrc","setFileSrc","replacingFile","setReplacingFile","filename","setFilename","name","showUrlInput","setShowUrlInput","fileUrl","setFileUrl","urlInputRef","inputRef","handleFileChange","newFile","File","URL","createObjectURL","renameFile","fileToChange","newName","type","lastModified","handleFileNameChange","e","updatedFileName","target","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","args","handleUrlSubmit","response","fetch","data","blob","fileName","split","pop","file","error","message","current","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","focalPoint","crop","showCrop","showFocalPoint","filter","join","field","customUploadActions","handleRemove","imageCacheTag","updatedAt","buttonStyle","onClick","click","size","hidden","ref","icon","iconStyle","round","tooltip","Header","url","initialCrop","initialFocalPoint","x","focalX","y","focalY","onSave","hoverTitle","title","label","CustomAction","i"],"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig, UploadEdits } from 'payload'\n\nimport { isImage, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { useForm } from '../../forms/Form/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useUploadEdits } from '../../providers/UploadEdits/index.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\ntype UploadActionsArgs = {\n  readonly customActions?: React.ReactNode[]\n  readonly enableAdjustments: boolean\n  readonly enablePreviewSizes: boolean\n  readonly mimeType: string\n}\n\nexport const UploadActions = ({\n  customActions,\n  enableAdjustments,\n  enablePreviewSizes,\n  mimeType,\n}: UploadActionsArgs) => {\n  const { t } = useTranslation()\n\n  const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== 'image/svg+xml'\n\n  if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) {\n    return null\n  }\n\n  return (\n    <div className={`${baseClass}__upload-actions`}>\n      {fileTypeIsAdjustable && (\n        <React.Fragment>\n          {enablePreviewSizes && (\n            <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n              {t('upload:previewSizes')}\n            </DrawerToggler>\n          )}\n          {enableAdjustments && (\n            <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n              {t('upload:editImage')}\n            </DrawerToggler>\n          )}\n        </React.Fragment>\n      )}\n\n      {customActions &&\n        customActions.map((CustomAction, i) => {\n          return <React.Fragment key={i}>{CustomAction}</React.Fragment>\n        })}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  readonly collectionSlug: string\n  readonly customActions?: React.ReactNode[]\n  readonly initialState?: FormState\n  readonly onChange?: (file?: File) => void\n  readonly uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, customActions, initialState, onChange, uploadConfig } = props\n\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { resetUploadEdits, updateUploadEdits, uploadEdits } = useUploadEdits()\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [filename, setFilename] = useState<string>(value?.name || '')\n  const [showUrlInput, setShowUrlInput] = useState(false)\n  const [fileUrl, setFileUrl] = useState<string>('')\n\n  const urlInputRef = useRef<HTMLInputElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleFileChange = useCallback(\n    (newFile: File) => {\n      if (newFile instanceof File) {\n        setFileSrc(URL.createObjectURL(newFile))\n      }\n\n      setValue(newFile)\n      setShowUrlInput(false)\n\n      if (typeof onChange === 'function') {\n        onChange(newFile)\n      }\n    },\n    [onChange, setValue],\n  )\n\n  const renameFile = (fileToChange: File, newName: string): File => {\n    // Creating a new File object with updated properties\n    const newFile = new File([fileToChange], newName, {\n      type: fileToChange.type,\n      lastModified: fileToChange.lastModified,\n    })\n    return newFile\n  }\n\n  const handleFileNameChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const updatedFileName = e.target.value\n\n      if (value) {\n        handleFileChange(renameFile(value, updatedFileName))\n        setFilename(updatedFileName)\n      }\n    },\n    [handleFileChange, value],\n  )\n\n  const handleFileSelection = useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      handleFileChange(fileToUpload)\n    },\n    [handleFileChange],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    handleFileChange(null)\n    setFileSrc('')\n    setFileUrl('')\n    setDoc({})\n    resetUploadEdits()\n    setShowUrlInput(false)\n  }, [handleFileChange, resetUploadEdits])\n\n  const onEditsSave = useCallback(\n    (args: UploadEdits) => {\n      setModified(true)\n      updateUploadEdits(args)\n    },\n    [setModified, updateUploadEdits],\n  )\n\n  const handleUrlSubmit = async () => {\n    if (fileUrl) {\n      try {\n        const response = await fetch(fileUrl)\n        const data = await response.blob()\n\n        // Extract the file name from the URL\n        const fileName = fileUrl.split('/').pop()\n\n        // Create a new File object from the Blob data\n        const file = new File([data], fileName, { type: data.type })\n        handleFileChange(file)\n      } catch (e) {\n        toast.error(e.message)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    if (initialState?.file?.value instanceof File) {\n      setFileSrc(URL.createObjectURL(initialState.file.value))\n    }\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (showUrlInput && urlInputRef.current) {\n      // urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true\n    }\n  }, [showUrlInput])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n  // Explicity check if set to true, default is undefined\n  const focalPointEnabled = uploadConfig?.focalPoint === true\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError field={null} message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          collectionSlug={collectionSlug}\n          customUploadActions={customActions}\n          doc={doc}\n          enableAdjustments={showCrop || showFocalPoint}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={doc.updatedAt}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && !showUrlInput && (\n            <Dropzone onChange={handleFileSelection}>\n              <div className={`${baseClass}__dropzoneContent`}>\n                <div className={`${baseClass}__dropzoneButtons`}>\n                  <Button\n                    buttonStyle=\"pill\"\n                    onClick={() => {\n                      if (inputRef.current) {\n                        inputRef.current.click()\n                      }\n                    }}\n                    size=\"small\"\n                  >\n                    {t('upload:selectFile')}\n                  </Button>\n                  <input\n                    aria-hidden=\"true\"\n                    className={`${baseClass}__hidden-input`}\n                    hidden\n                    onChange={(e) => {\n                      if (e.target.files && e.target.files.length > 0) {\n                        handleFileSelection(e.target.files)\n                      }\n                    }}\n                    ref={inputRef}\n                    type=\"file\"\n                  />\n                  <span className={`${baseClass}__orText`}>{t('general:or')}</span>\n                  <Button\n                    buttonStyle=\"pill\"\n                    onClick={() => {\n                      setShowUrlInput(true)\n                    }}\n                    size=\"small\"\n                  >\n                    {t('upload:pasteURL')}\n                  </Button>\n                </div>\n\n                <p className={`${baseClass}__dragAndDropText`}>\n                  {t('general:or')} {t('upload:dragAndDrop')}\n                </p>\n              </div>\n            </Dropzone>\n          )}\n          {showUrlInput && (\n            <React.Fragment>\n              <div className={`${baseClass}__remote-file-wrap`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__remote-file`}\n                  onChange={(e) => {\n                    setFileUrl(e.target.value)\n                  }}\n                  ref={urlInputRef}\n                  type=\"text\"\n                  value={fileUrl}\n                />\n                <div className={`${baseClass}__add-file-wrap`}>\n                  <button\n                    className={`${baseClass}__add-file`}\n                    onClick={() => {\n                      void handleUrlSubmit()\n                    }}\n                    type=\"button\"\n                  >\n                    {t('upload:addFile')}\n                  </button>\n                </div>\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={() => {\n                  setShowUrlInput(false)\n                }}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n          {value && fileSrc && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={filename || value.name}\n                />\n                <UploadActions\n                  customActions={customActions}\n                  enableAdjustments={showCrop || showFocalPoint}\n                  enablePreviewSizes={hasImageSizes && doc.filename && !replacingFile}\n                  mimeType={value.type}\n                />\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            fileName={value?.name || doc?.filename}\n            fileSrc={doc?.url || fileSrc}\n            imageCacheTag={doc.updatedAt}\n            initialCrop={uploadEdits?.crop ?? undefined}\n            initialFocalPoint={{\n              x: uploadEdits?.focalPoint?.x || doc.focalX || 50,\n              y: uploadEdits?.focalPoint?.y || doc.focalY || 50,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} imageCacheTag={doc.updatedAt} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Upload/index.scss

@@ -4,6 +4,7 @@
   position: relative;
   margin-bottom: var(--base);
   background: var(--theme-elevation-50);
+  border-radius: var(--style-radius-s);
 
   &__upload {
     display: flex;
@@ -27,6 +28,7 @@
       width: 100%;
       height: 100%;
       object-fit: contain;
+      border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
     }
   }
 
@@ -60,7 +62,7 @@
       cursor: pointer;
       background-color: var(--theme-elevation-150);
       border: none;
-      border-radius: $style-radius-s;
+      border-radius: $style-radius-m;
       padding: base(0.25) base(0.5);
       text-wrap: nowrap;
       overflow: hidden;
@@ -82,6 +84,37 @@
     }
   }
 
+  .dropzone {
+    background-color: transparent;
+    padding-block: calc(var(--base) * 2.25);
+  }
+
+  &__dropzoneContent {
+    display: flex;
+    flex-wrap: wrap;
+    gap: base(0.4);
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__dropzoneButtons {
+    display: flex;
+    gap: calc(var(--base) * 0.5);
+  }
+
+  &__orText {
+    color: var(--theme-elevation-500);
+    text-transform: lowercase;
+  }
+
+  &__dragAndDropText {
+    flex-shrink: 0;
+    margin: 0;
+    text-transform: lowercase;
+    align-self: center;
+    color: var(--theme-elevation-500);
+  }
+
   @include small-break {
     &__upload {
       flex-wrap: wrap;
@@ -113,4 +146,10 @@
       display: none;
     }
   }
+
+  @include small-break {
+    &__dropzoneContent {
+      display: none;
+    }
+  }
 }

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

@@ -1,12 +1,13 @@
+import type { DescriptionFunction, MappedComponent, StaticDescription } from 'payload';
 import React from 'react';
 import './index.scss';
-export type DescriptionFunction = () => string;
-export type DescriptionComponent = React.ComponentType<any>;
-type Description = DescriptionComponent | DescriptionFunction | Record<string, string> | string;
+export type ViewDescriptionComponent = React.ComponentType<any>;
+type Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent;
 export type ViewDescriptionProps = {
-    description?: Description;
+    readonly Description?: MappedComponent;
+    readonly description?: StaticDescription;
 };
-export declare function isComponent(description: Description): description is DescriptionComponent;
+export declare function isComponent(description: Description): description is ViewDescriptionComponent;
 export declare const ViewDescription: React.FC<ViewDescriptionProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ViewDescription/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,mBAAmB,GAAG,MAAM,MAAM,CAAA;AAE9C,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE3D,KAAK,WAAW,GAAG,oBAAoB,GAAG,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;AAE/F,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,IAAI,oBAAoB,CAEzF;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkB1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ViewDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGtF,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE/D,KAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,MAAM,GAAG,wBAAwB,CAAA;AAE9F,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,eAAe,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;CACzC,CAAA;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,IAAI,wBAAwB,CAE7F;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAa1D,CAAA"}

package/dist/elements/ViewDescription/index.js

@@ -1,26 +1,72 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 export function isComponent(description) {
-    return /*#__PURE__*/ React.isValidElement(description);
+  return /*#__PURE__*/React.isValidElement(description);
 }
-export const ViewDescription = (props)=>{
-    const { i18n } = useTranslation();
-    const { description } = props;
-    if (isComponent(description)) {
-        const Description = description;
-        return /*#__PURE__*/ _jsx(Description, {});
+export const ViewDescription = props => {
+  const $ = _c(11);
+  const {
+    i18n
+  } = useTranslation();
+  let Description;
+  let description;
+  let rest;
+  if ($[0] !== props) {
+    ({
+      Description,
+      description,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = Description;
+    $[2] = description;
+    $[3] = rest;
+  } else {
+    Description = $[1];
+    description = $[2];
+    rest = $[3];
+  }
+  if (Description) {
+    let t0;
+    if ($[4] !== description || $[5] !== rest || $[6] !== Description) {
+      t0 = _jsx(RenderComponent, {
+        clientProps: {
+          description,
+          ...rest
+        },
+        mappedComponent: Description
+      });
+      $[4] = description;
+      $[5] = rest;
+      $[6] = Description;
+      $[7] = t0;
+    } else {
+      t0 = $[7];
     }
-    if (description) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: "view-description",
-            children: typeof description === 'function' ? description() : getTranslation(description, i18n)
-        });
+    return t0;
+  }
+  if (description) {
+    let t0;
+    if ($[8] !== description || $[9] !== i18n) {
+      t0 = _jsx("div", {
+        className: "view-description",
+        children: getTranslation(description, i18n)
+      });
+      $[8] = description;
+      $[9] = i18n;
+      $[10] = t0;
+    } else {
+      t0 = $[10];
     }
-    return null;
+    return t0;
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type DescriptionFunction = () => string\n\nexport type DescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionComponent | DescriptionFunction | Record<string, string> | string\n\nexport type ViewDescriptionProps = {\n  description?: Description\n}\n\nexport function isComponent(description: Description): description is DescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (isComponent(description)) {\n    const Description = description\n    return <Description />\n  }\n\n  if (description) {\n    return (\n      <div className=\"view-description\">\n        {typeof description === 'function' ? description() : getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","i18n","Description","div","className"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAYrB,OAAO,SAASC,YAAYC,WAAwB;IAClD,qBAAOH,MAAMI,cAAc,CAACD;AAC9B;AAEA,OAAO,MAAME,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEE,WAAW,EAAE,GAAGG;IAExB,IAAIJ,YAAYC,cAAc;QAC5B,MAAMK,cAAcL;QACpB,qBAAO,KAACK;IACV;IAEA,IAAIL,aAAa;QACf,qBACE,KAACM;YAAIC,WAAU;sBACZ,OAAOP,gBAAgB,aAAaA,gBAAgBJ,eAAeI,aAAaI;;IAGvF;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","RenderComponent","useTranslation","isComponent","description","isValidElement","ViewDescription","props","$","i18n","Description","rest","t0","_jsx","clientProps","mappedComponent","className","children"],"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { DescriptionFunction, MappedComponent, StaticDescription } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type ViewDescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent\n\nexport type ViewDescriptionProps = {\n  readonly Description?: MappedComponent\n  readonly description?: StaticDescription\n}\n\nexport function isComponent(description: Description): description is ViewDescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { Description, description, ...rest } = props\n\n  if (Description) {\n    return <RenderComponent clientProps={{ description, ...rest }} mappedComponent={Description} />\n  }\n\n  if (description) {\n    return <div className=\"view-description\">{getTranslation(description, i18n)}</div>\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAWP,OAAO,SAASC,YAAYC,WAAwB;EAClD,oBAAOJ,KAAA,CAAMK,cAAc,CAACD,WAAA;AAC9B;AAEA,OAAO,MAAME,eAAA,GAAkDC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAC7D;IAAAW;EAAA,IAAiBP,cAAA;EAAA,IAAAQ,WAAA;EAAA,IAAAN,WAAA;EAAA,IAAAO,IAAA;EAAA,IAAAH,CAAA,QAAAD,KAAA;IACjB;MAAAG,WAAA;MAAAN,WAAA;MAAA,GAAAO;IAAA,IAA8CJ,KAAA;IAAAC,CAAA,MAAAD,KAAA;IAAAC,CAAA,MAAAE,WAAA;IAAAF,CAAA,MAAAJ,WAAA;IAAAI,CAAA,MAAAG,IAAA;EAAA;IAAAD,WAAA,GAAAF,CAAA;IAAAJ,WAAA,GAAAI,CAAA;IAAAG,IAAA,GAAAH,CAAA;EAAA;EAAA,IAE1CE,WAAA;IAAA,IAAAE,EAAA;IAAA,IAAAJ,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAE,WAAA;MACKE,EAAA,GAAAC,IAAA,CAAAZ,eAAA;QAAAa,WAAA;UAAAV,WAAA;UAAA,GAAgDO;QAAI;QAAAI,eAAA,EAAqBL;MAAA,C;;;;;;;;WAAzEE,E;;MAGLR,WAAA;IAAA,IAAAQ,EAAA;IAAA,IAAAJ,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAC,IAAA;MACKG,EAAA,GAAAC,IAAA,CAAC;QAAAG,SAAA,EAAc;QAAAC,QAAA,EAAoBlB,cAAA,CAAeK,WAAA,EAAaK,IAAA;MAAA,C;;;;;;;WAA/DG,E;;;CAIX","ignoreList":[]}

package/dist/elements/ViewDescription/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ViewDescription/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ViewDescription/types.ts"],"sourcesContent":[null],"mappings":"","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Date/index.js

@@ -1,19 +1,26 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { DatePickerField } from '../../../DatePicker/index.js';
 const baseClass = 'condition-value-date';
-export const DateField = ({ admin, disabled, onChange, value })=>{
-    const { date } = admin || {};
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        children: /*#__PURE__*/ _jsx(DatePickerField, {
-            ...date,
-            onChange: onChange,
-            readOnly: disabled,
-            value: value
-        })
-    });
+export const DateField = ({
+  admin,
+  disabled,
+  onChange,
+  value
+}) => {
+  const {
+    date
+  } = admin || {};
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: /*#__PURE__*/_jsx(DatePickerField, {
+      ...date,
+      onChange: onChange,
+      readOnly: disabled,
+      value: value
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/WhereBuilder/Condition/Date/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {\n  const { date } = admin || {}\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />\n    </div>\n  )\n}\n"],"names":["React","DatePickerField","baseClass","DateField","admin","disabled","onChange","value","date","div","className","readOnly"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,+BAA8B;AAE9D,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAA6B,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IAC7E,MAAM,EAAEC,IAAI,EAAE,GAAGJ,SAAS,CAAC;IAE3B,qBACE,KAACK;QAAIC,WAAWR;kBACd,cAAA,KAACD;YAAiB,GAAGO,IAAI;YAAEF,UAAUA;YAAUK,UAAUN;YAAUE,OAAOA;;;AAGhF,EAAC"}
+{"version":3,"file":"index.js","names":["React","DatePickerField","baseClass","DateField","admin","disabled","onChange","value","date","_jsx","className","readOnly"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {\n  const { date } = admin || {}\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAIlB,SAASC,eAAe,QAAQ;AAEhC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAA6BA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAK,CAAE;EAC7E,MAAM;IAAEC;EAAI,CAAE,GAAGJ,KAAA,IAAS,CAAC;EAE3B,oBACEK,IAAA,CAAC;IAAIC,SAAA,EAAWR,SAAA;cACd,aAAAO,IAAA,CAACR,eAAA;MAAiB,GAAGO,IAAI;MAAEF,QAAA,EAAUA,QAAA;MAAUK,QAAA,EAAUN,QAAA;MAAUE,KAAA,EAAOA;;;AAGhF","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Date/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/WhereBuilder/Condition/Date/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/types.ts"],"sourcesContent":["import type { Props as DateType } from '../../../../elements/DatePicker/types.js'\n\nexport type Props = {\n  admin?: {\n    date?: DateType\n  }\n  disabled?: boolean\n  onChange: () => void\n  value: Date\n}\n"],"names":[],"mappings":"AAEA,WAOC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/types.ts"],"sourcesContent":["import type { Props as DateType } from '../../../../elements/DatePicker/types.js'\n\nexport type Props = {\n  admin?: {\n    date?: DateType\n  }\n  disabled?: boolean\n  onChange: () => void\n  value: Date\n}\n"],"mappings":"AAEA","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Number/index.js

@@ -1,19 +1,47 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'condition-value-number';
-export const NumberField = ({ disabled, onChange, value })=>{
-    const { t } = useTranslation();
-    return /*#__PURE__*/ _jsx("input", {
-        className: baseClass,
-        disabled: disabled,
-        onChange: (e)=>onChange(e.target.value),
-        placeholder: t('general:enterAValue'),
-        type: "number",
-        value: value
+export const NumberField = t0 => {
+  const $ = _c(7);
+  const {
+    disabled,
+    onChange,
+    value
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== onChange) {
+    t1 = e => onChange(e.target.value);
+    $[0] = onChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t || $[3] !== disabled || $[4] !== t1 || $[5] !== value) {
+    t2 = _jsx("input", {
+      className: baseClass,
+      disabled,
+      onChange: t1,
+      placeholder: t("general:enterAValue"),
+      type: "number",
+      value
     });
+    $[2] = t;
+    $[3] = disabled;
+    $[4] = t1;
+    $[5] = value;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/WhereBuilder/Condition/Number/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {\n  const { t } = useTranslation()\n  return (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"number\"\n      value={value}\n    />\n  )\n}\n"],"names":["React","useTranslation","baseClass","NumberField","disabled","onChange","value","t","input","className","e","target","placeholder","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAA+B,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IACxE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IACd,qBACE,KAACO;QACCC,WAAWP;QACXE,UAAUA;QACVC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QACxCM,aAAaL,EAAE;QACfM,MAAK;QACLP,OAAOA;;AAGb,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","baseClass","NumberField","t0","$","disabled","onChange","value","t","t1","e","target","t2","_jsx","className","placeholder","type"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {\n  const { t } = useTranslation()\n  return (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"number\"\n      value={value}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAA+BC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAA6B;EACxE;IAAAK;EAAA,IAAcR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAL,CAAA,QAAAE,QAAA;IAKAG,EAAA,GAAAC,CAAA,IAAOJ,QAAA,CAASI,CAAA,CAAAC,MAAA,CAAAJ,KAAc;IAAAH,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAG,KAAA;IAH1CK,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAb,SAAA;MAAAI,QAAA;MAAAC,QAAA,EAGWG,EAA8B;MAAAM,WAAA,EAC3BP,CAAA,CAAE;MAAAQ,IAAA,EACV;MAAAT;IAAA,C;;;;;;;;;SALPK,E;CASJ","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Number/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/WhereBuilder/Condition/Number/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/types.ts"],"sourcesContent":["export type Props = {\n  disabled?: boolean\n  onChange: (e: string) => void\n  value: string\n}\n"],"names":[],"mappings":"AAAA,WAIC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/types.ts"],"sourcesContent":["export type Props = {\n  disabled?: boolean\n  onChange: (e: string) => void\n  value: string\n}\n"],"mappings":"AAAA","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,YAAY,CAAA;AAM1D,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwU7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,YAAY,CAAA;AAM1D,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgV7C,CAAA"}