@payloadcms/ui 3.0.0-beta.7 → 3.0.0-canary.03427d3

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/types'\n\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { isImage } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.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\nexport const UploadActions = ({ canEdit, showSizePreviews }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={`${baseClass}__file-mutation`}>\n      {showSizePreviews && (\n        <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n          {t('upload:previewSizes')}\n        </DrawerToggler>\n      )}\n      {canEdit && (\n        <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n          {t('upload:editImage')}\n        </DrawerToggler>\n      )}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  updatedAt?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props\n\n  const submitted = useFormSubmitted()\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\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\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\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      setValue(newFile) // Updating the state with the new File object\n    }\n  }\n\n  const handleFileSelection = React.useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      setValue(fileToUpload)\n    },\n    [setValue],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    setValue(null)\n    setFileSrc('')\n  }, [setValue])\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (value 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(value)\n    }\n\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n  }, [value, onChange, updatedAt])\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\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions)\n\n  const lastSubmittedTime = submitted ? new Date().toISOString() : null\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          canEdit={showCrop || showFocalPoint}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={lastSubmittedTime}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n            />\n          )}\n\n          {value && (\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                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n\n                {isImage(value.type) && value.type !== 'image/svg+xml' && (\n                  <UploadActions\n                    canEdit={showCrop || showFocalPoint}\n                    showSizePreviews={hasImageSizes && doc.filename && !replacingFile}\n                  />\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            doc={doc || undefined}\n            fileName={value?.name || doc?.filename}\n            fileSrc={fileSrc || doc?.url}\n            imageCacheTag={lastSubmittedTime}\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} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["FieldError","isImage","React","useCallback","useEffect","useState","fieldBaseClass","useFormSubmitted","useField","useDocumentInfo","useTranslation","reduceFieldsToValues","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","canEdit","showSizePreviews","t","div","className","slug","Upload","props","collectionSlug","initialState","onChange","updatedAt","uploadConfig","submitted","replacingFile","setReplacingFile","fileSrc","setFileSrc","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","crop","showCrop","focalPoint","showFocalPoint","lastSubmittedTime","Date","toISOString","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload'\n\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\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 { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.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\nexport const UploadActions = ({ canEdit, showSizePreviews }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={`${baseClass}__file-mutation`}>\n      {showSizePreviews && (\n        <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n          {t('upload:previewSizes')}\n        </DrawerToggler>\n      )}\n      {canEdit && (\n        <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n          {t('upload:editImage')}\n        </DrawerToggler>\n      )}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  updatedAt?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, initialState, onChange, updatedAt, 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 handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\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      setValue(newFile) // Updating the state with the new File object\n    }\n  }\n\n  const handleFileSelection = React.useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      setValue(fileToUpload)\n    },\n    [setValue],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    setValue(null)\n    setFileSrc('')\n  }, [setValue])\n\n  const onEditsSave = React.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  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (value 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(value)\n    }\n\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n  }, [value, onChange, updatedAt])\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          canEdit={showCrop || showFocalPoint}\n          collectionSlug={collectionSlug}\n          doc={doc}\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 && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n            />\n          )}\n\n          {value && (\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                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n\n                {isImage(value.type) && value.type !== 'image/svg+xml' && (\n                  <UploadActions\n                    canEdit={showCrop || showFocalPoint}\n                    showSizePreviews={hasImageSizes && doc.filename && !replacingFile}\n                  />\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={fileSrc || doc?.url}\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","React","useCallback","useEffect","useState","FieldError","fieldBaseClass","useForm","useField","useDocumentInfo","useFormQueryParams","useTranslation","reduceFieldsToValues","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","canEdit","showSizePreviews","t","div","className","slug","Upload","props","collectionSlug","initialState","onChange","updatedAt","uploadConfig","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","dispatchFormQueryParams","formQueryParams","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","_crop","setCrop","x","y","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","crop","focalPosition","params","uploadEdits","focalPoint","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","showCrop","showFocalPoint","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","initialCrop","initialFocalPoint","focalX","focalY","onSave","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/Upload/index.scss

@@ -23,7 +23,7 @@
     width: 150px;
 
     .thumbnail {
-      position: absolute;
+      position: relative;
       width: 100%;
       height: 100%;
       object-fit: contain;

package/dist/elements/ViewDescription/index.js

@@ -1,7 +1,9 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 export function isComponent(description) {
     return /*#__PURE__*/ React.isValidElement(description);
 }
@@ -10,12 +12,13 @@ export const ViewDescription = (props)=>{
     const { description } = props;
     if (isComponent(description)) {
         const Description = description;
-        return /*#__PURE__*/ React.createElement(Description, null);
+        return /*#__PURE__*/ _jsx(Description, {});
     }
     if (description) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "view-description"
-        }, typeof description === 'function' ? description() : getTranslation(description, i18n));
+        return /*#__PURE__*/ _jsx("div", {
+            className: "view-description",
+            children: typeof description === 'function' ? description() : getTranslation(description, i18n)
+        });
     }
     return null;
 };

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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,uCAAsC;AAarE,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,oBAACK;IACV;IAEA,IAAIL,aAAa;QACf,qBACE,oBAACM;YAAIC,WAAU;WACZ,OAAOP,gBAAgB,aAAaA,gBAAgBJ,eAAeI,aAAaI;IAGvF;IAEA,OAAO;AACT,EAAC"}
+{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQrC,CAAA"}

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

@@ -1,16 +1,19 @@
+'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__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement(DatePickerField, {
-        ...date,
-        onChange: onChange,
-        readOnly: disabled,
-        value: value
-    }));
+    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":["import 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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,oBAACK;QAAIC,WAAWR;qBACd,oBAACD;QAAiB,GAAGO,IAAI;QAAEF,UAAUA;QAAUK,UAAUN;QAAUE,OAAOA;;AAGhF,EAAC"}
+{"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"],"rangeMappings":";;;;;;;;;;;;;;;;","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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYvC,CAAA"}

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

@@ -1,9 +1,12 @@
+'use client';
+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__*/ React.createElement("input", {
+    return /*#__PURE__*/ _jsx("input", {
         className: baseClass,
         disabled: disabled,
         onChange: (e)=>onChange(e.target.value),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["import 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,6CAA4C;AAG3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAA+B,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IACxE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IACd,qBACE,oBAACO;QACCC,WAAWP;QACXE,UAAUA;QACVC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QACxCM,aAAaL,EAAE;QACfM,MAAK;QACLP,OAAOA;;AAGb,EAAC"}
+{"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"],"rangeMappings":";;;;;;;;;;;;;;;;","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"}

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":"AAGA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAc,KAAK,EAAqB,MAAM,YAAY,CAAA;AAMtE,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoS7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAMA,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"}

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

@@ -1,8 +1,12 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */ import React, { useCallback, useEffect, useReducer, useState } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import QueryString from 'qs';
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDebounce } from '../../../../hooks/useDebounce.js';
 import { useConfig } from '../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
+import './index.scss';
 import optionsReducer from './optionsReducer.js';
 const baseClass = 'condition-value-relationship';
 const maxResultsPerRequest = 10;
@@ -11,13 +15,23 @@ export const RelationshipField = (props)=>{
     const { collections, routes: { api }, serverURL } = useConfig();
     const hasMultipleRelations = Array.isArray(relationTo);
     const [options, dispatchOptions] = useReducer(optionsReducer, []);
-    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
-    const [lastLoadedPage, setLastLoadedPage] = useState(1);
     const [search, setSearch] = useState('');
     const [errorLoading, setErrorLoading] = useState('');
     const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
     const debouncedSearch = useDebounce(search, 300);
     const { i18n, t } = useTranslation();
+    const relationSlugs = hasMultipleRelations ? relationTo : [
+        relationTo
+    ];
+    const initialRelationMap = ()=>{
+        const map = new Map();
+        relationSlugs.forEach((relation)=>{
+            map.set(relation, 1);
+        });
+        return map;
+    };
+    const nextPageByRelationshipRef = React.useRef(initialRelationMap());
+    const partiallyLoadedRelationshipSlugs = React.useRef(relationSlugs);
     const addOptions = useCallback((data, relation)=>{
         const collection = collections.find((coll)=>coll.slug === relation);
         dispatchOptions({
@@ -33,58 +47,78 @@ export const RelationshipField = (props)=>{
         hasMultipleRelations,
         i18n
     ]);
-    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg })=>{
-        let lastLoadedPageToUse = typeof lastLoadedPageArg !== 'undefined' ? lastLoadedPageArg : 1;
-        const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
-        const relations = Array.isArray(relationTo) ? relationTo : [
-            relationTo
-        ];
-        const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
-        let resultsFetched = 0;
-        if (!errorLoading) {
-            relationsToFetch.reduce(async (priorRelation, relation)=>{
-                await priorRelation;
-                if (resultsFetched < 10) {
-                    const collection = collections.find((coll)=>coll.slug === relation);
-                    const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-                    const searchParam = searchArg ? `&where[${fieldToSearch}][like]=${searchArg}` : '';
-                    const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`, {
-                        credentials: 'include',
-                        headers: {
-                            'Accept-Language': i18n.language
-                        }
-                    });
-                    if (response.ok) {
-                        const data = await response.json();
-                        if (data.docs.length > 0) {
-                            resultsFetched += data.docs.length;
-                            addOptions(data, relation);
-                            setLastLoadedPage(data.page);
-                            if (!data.nextPage) {
-                                setLastFullyLoadedRelation(relations.indexOf(relation));
-                                // If there are more relations to search, need to reset lastLoadedPage to 1
-                                // both locally within function and state
-                                if (relations.indexOf(relation) + 1 < relations.length) {
-                                    lastLoadedPageToUse = 1;
-                                }
+    const loadRelationOptions = React.useCallback(async ({ abortController, relationSlug })=>{
+        const collection = collections.find((coll)=>coll.slug === relationSlug);
+        const fieldToSearch = collection?.admin?.useAsTitle || 'id';
+        const pageIndex = nextPageByRelationshipRef.current.get(relationSlug);
+        if (partiallyLoadedRelationshipSlugs.current.includes(relationSlug)) {
+            const query = {
+                depth: 0,
+                limit: maxResultsPerRequest,
+                page: pageIndex,
+                where: {
+                    and: []
+                }
+            };
+            if (debouncedSearch) {
+                query.where.and.push({
+                    [fieldToSearch]: {
+                        like: debouncedSearch
+                    }
+                });
+            }
+            try {
+                const response = await fetch(`${serverURL}${api}/${relationSlug}${QueryString.stringify(query, {
+                    addQueryPrefix: true
+                })}`, {
+                    credentials: 'include',
+                    headers: {
+                        'Accept-Language': i18n.language
+                    },
+                    signal: abortController.signal
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.docs.length > 0) {
+                        addOptions(data, relationSlug);
+                        if (!debouncedSearch) {
+                            if (data.nextPage) {
+                                nextPageByRelationshipRef.current.set(relationSlug, data.nextPage);
+                            } else {
+                                partiallyLoadedRelationshipSlugs.current = partiallyLoadedRelationshipSlugs.current.filter((partiallyLoadedRelation)=>partiallyLoadedRelation !== relationSlug);
                             }
                         }
-                    } else {
-                        setErrorLoading(t('error:unspecific'));
                     }
+                } else {
+                    setErrorLoading(t('error:unspecific'));
                 }
-            }, Promise.resolve());
+            } catch (e) {
+                if (!abortController.signal.aborted) {
+                    console.error(e);
+                }
+            }
         }
+        setHasLoadedFirstOptions(true);
     }, [
-        i18n,
-        relationTo,
-        errorLoading,
+        addOptions,
+        api,
         collections,
+        debouncedSearch,
+        i18n.language,
         serverURL,
-        api,
-        addOptions,
         t
     ]);
+    const loadMoreOptions = React.useCallback(()=>{
+        if (partiallyLoadedRelationshipSlugs.current.length > 0) {
+            const abortController = new AbortController();
+            loadRelationOptions({
+                abortController,
+                relationSlug: partiallyLoadedRelationshipSlugs.current[0]
+            });
+        }
+    }, [
+        loadRelationOptions
+    ]);
     const findOptionsByValue = useCallback(()=>{
         if (value) {
             if (hasMany) {
@@ -172,31 +206,37 @@ export const RelationshipField = (props)=>{
         serverURL,
         t
     ]);
-    // ///////////////////////////
-    // Get results when search input changes
-    // ///////////////////////////
-    useEffect(()=>{
-        dispatchOptions({
-            type: 'CLEAR',
-            i18n,
-            required: true
-        });
-        setHasLoadedFirstOptions(true);
-        setLastLoadedPage(1);
-        setLastFullyLoadedRelation(-1);
-        getResults({
-            search: debouncedSearch
+    /**
+   * 1. Trigger initial relationship options fetch
+   * 2. When search changes, loadRelationOptions will
+   *    fire off again
+   */ useEffect(()=>{
+        const relations = Array.isArray(relationTo) ? relationTo : [
+            relationTo
+        ];
+        const abortControllers = [];
+        relations.forEach((relation)=>{
+            const abortController = new AbortController();
+            loadRelationOptions({
+                abortController,
+                relationSlug: relation
+            });
+            abortControllers.push(abortController);
         });
+        return ()=>{
+            abortControllers.forEach((controller)=>{
+                if (controller.signal) controller.abort();
+            });
+        };
     }, [
-        getResults,
-        debouncedSearch,
-        relationTo,
-        i18n
+        i18n,
+        loadRelationOptions,
+        relationTo
     ]);
-    // ///////////////////////////
-    // Format options once first options have been retrieved
-    // ///////////////////////////
-    useEffect(()=>{
+    /**
+   * Load any options that were not returned
+   * in the first 10 of each relation fetch
+   */ useEffect(()=>{
         if (value && hasLoadedFirstOptions) {
             if (hasMany) {
                 const matchedOptions = findOptionsByValue();
@@ -236,49 +276,49 @@ export const RelationshipField = (props)=>{
         errorLoading && 'error-loading'
     ].filter(Boolean).join(' ');
     const valueToRender = findOptionsByValue() || value;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, !errorLoading && /*#__PURE__*/ React.createElement(ReactSelect, {
-        disabled: disabled,
-        isMulti: hasMany,
-        isSortable: isSortable,
-        onChange: (selected)=>{
-            if (!selected) {
-                onChange(null);
-                return;
-            }
-            if (hasMany) {
-                onChange(selected ? selected.map((option)=>{
-                    if (hasMultipleRelations) {
-                        return {
-                            relationTo: option?.relationTo,
-                            value: option?.value
-                        };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            !errorLoading && /*#__PURE__*/ _jsx(ReactSelect, {
+                disabled: disabled,
+                isMulti: hasMany,
+                isSortable: isSortable,
+                onChange: (selected)=>{
+                    if (!selected) {
+                        onChange(null);
+                        return;
                     }
-                    return option?.value;
-                }) : null);
-            } else if (hasMultipleRelations) {
-                onChange({
-                    relationTo: selected?.relationTo,
-                    value: selected?.value
-                });
-            } else {
-                onChange(selected?.value);
-            }
-        },
-        onInputChange: handleInputChange,
-        onMenuScrollToBottom: ()=>{
-            getResults({
-                lastFullyLoadedRelation,
-                lastLoadedPage: lastLoadedPage + 1
-            });
-        },
-        options: options,
-        placeholder: t('general:selectValue'),
-        value: valueToRender
-    }), errorLoading && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__error-loading`
-    }, errorLoading));
+                    if (hasMany && Array.isArray(selected)) {
+                        onChange(selected ? selected.map((option)=>{
+                            if (hasMultipleRelations) {
+                                return {
+                                    relationTo: option?.relationTo,
+                                    value: option?.value
+                                };
+                            }
+                            return option?.value;
+                        }) : null);
+                    } else if (hasMultipleRelations && !Array.isArray(selected)) {
+                        onChange({
+                            relationTo: selected?.relationTo,
+                            value: selected?.value
+                        });
+                    } else if (!Array.isArray(selected)) {
+                        onChange(selected?.value);
+                    }
+                },
+                onInputChange: handleInputChange,
+                onMenuScrollToBottom: loadMoreOptions,
+                options: options,
+                placeholder: t('general:selectValue'),
+                value: valueToRender
+            }),
+            errorLoading && /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__error-loading`,
+                children: errorLoading
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map