@payloadcms/ui 3.24.0-canary.d22403c → 3.24.0

package/dist/fields/DateTime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA4B,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe5E,OAAO,cAAc,CAAA;AA0KrB,eAAO,MAAM,aAAa;;;;;+EAAwC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA4B,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe5E,OAAO,cAAc,CAAA;AA4LrB,eAAO,MAAM,aAAa;;;;;+EAAwC,CAAA"}

package/dist/fields/DateTime/index.js

@@ -39,6 +39,7 @@ const DateTimeFieldComponent = props => {
     readOnly,
     validate
   } = props;
+  const pickerAppearance = datePickerProps?.pickerAppearance || 'default';
   // Get the user timezone so we can adjust the displayed value against it
   const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const {
@@ -77,6 +78,11 @@ const DateTimeFieldComponent = props => {
   const timezonePath = path + '_tz';
   const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath]);
   const supportedTimezones = config.admin.timezones.supportedTimezones;
+  /**
+  * Date appearance doesn't include timestamps,
+  * which means we need to pin the time to always 12:00 for the selected date
+  */
+  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance);
   const selectedTimezone = timezoneField?.value;
   // The displayed value should be the original value, adjusted to the user's timezone
   const displayedValue = useMemo(() => {
@@ -99,12 +105,24 @@ const DateTimeFieldComponent = props => {
     if (!readOnly) {
       if (timezone && selectedTimezone && incomingDate) {
         // Create TZDate instances for the selected timezone
-        const tzDateWithUTC = TZDate.tz(selectedTimezone);
-        // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
-        const dateToUserTz = new TZDate(incomingDate);
-        // Transpose the date to the selected timezone
-        const dateWithTimezone_0 = transpose(dateToUserTz, tzDateWithUTC);
-        setValue(dateWithTimezone_0.toISOString() || null);
+        const TZDateWithSelectedTz = TZDate.tz(selectedTimezone);
+        if (isDateOnly) {
+          // We need to offset this hardcoded hour offset from the DatePicker elemenent
+          // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change
+          // const tzOffset = incomingDate.getTimezoneOffset() / 60
+          const incomingOffset = incomingDate.getTimezoneOffset() / 60;
+          const originalHour = incomingDate.getHours() + incomingOffset;
+          incomingDate.setHours(originalHour);
+          // Convert the original date as picked into the desired timezone.
+          const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz);
+          setValue(dateToSelectedTz.toISOString() || null);
+        } else {
+          // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
+          const dateToUserTz = new TZDate(incomingDate);
+          // Transpose the date to the selected timezone
+          const dateWithTimezone_0 = transpose(dateToUserTz, TZDateWithSelectedTz);
+          setValue(dateWithTimezone_0.toISOString() || null);
+        }
       } else {
         setValue(incomingDate?.toISOString() || null);
       }

package/dist/fields/DateTime/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","readOnly","validate","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","setValue","showError","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","selectedTimezone","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","tzDateWithUTC","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientComponent, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.scss'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: DateFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path,\n    readOnly,\n    validate,\n  } = props\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    setValue,\n    showError,\n    value,\n  } = useField<Date>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n  const supportedTimezones = config.admin.timezones.supportedTimezones\n\n  const selectedTimezone = timezoneField?.value as string\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!readOnly) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const tzDateWithUTC = TZDate.tz(selectedTimezone)\n\n          // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n          const dateToUserTz = new TZDate(incomingDate)\n\n          // Transpose the date to the selected timezone\n          const dateWithTimezone = transpose(dateToUserTz, tzDateWithUTC)\n\n          setValue(dateWithTimezone.toISOString() || null)\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, setValue, timezone, selectedTimezone],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={<FieldLabel label={label} localized={localized} required={required} />}\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            required={required}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","setValue","showError","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientComponent, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.scss'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: DateFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n  const supportedTimezones = config.admin.timezones.supportedTimezones\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!readOnly) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, setValue, timezone, selectedTimezone],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={<FieldLabel label={label} localized={localized} required={required} />}\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            required={required}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Join/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAuNtC,eAAO,MAAM,SAAS;;;;+EAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAoOtC,eAAO,MAAM,SAAS;;;;+EAAoC,CAAA"}

package/dist/fields/Join/index.js

@@ -136,7 +136,7 @@ const JoinFieldComponent = props => {
         value: value_0
       };
     }
-    const where = {
+    const where = Array.isArray(collection) ? {} : {
       [on]: {
         equals: value_0
       }
@@ -147,10 +147,10 @@ const JoinFieldComponent = props => {
       };
     }
     return where;
-  }, [docID, field.targetField.relationTo, field.where, on, docConfig?.slug]);
+  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug]);
   const initialDrawerData = useMemo(() => {
     const relatedCollection = getEntityConfig({
-      collectionSlug: field.collection
+      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection
     });
     return getInitialDrawerData({
       collectionSlug: docConfig?.slug,
@@ -194,6 +194,11 @@ const JoinFieldComponent = props => {
           required: required
         })
       }),
+      parent: Array.isArray(collection) ? {
+        id: docID,
+        collectionSlug: docConfig.slug,
+        joinPath: path
+      } : undefined,
       relationTo: collection
     }), /*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Description,

package/dist/fields/Join/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ObjectIdImport","flattenTopLevelFields","React","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","_jsxs","className","filter","Boolean","join","replace","_jsx","CustomComponent","Fallback","disableTable","docs","style","margin","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = (ObjectIdImport.default ||\n  ObjectIdImport) as unknown as typeof ObjectIdImport.default\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields)\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || field.type === 'group') {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { allowCreate, description },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    path,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = {\n      [on]: {\n        equals: value,\n      },\n    }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({ collectionSlug: field.collection })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["ObjectIdImport","flattenTopLevelFields","React","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","_jsxs","className","filter","Boolean","join","replace","_jsx","CustomComponent","Fallback","disableTable","docs","style","margin","parent","joinPath","undefined","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = (ObjectIdImport.default ||\n  ObjectIdImport) as unknown as typeof ObjectIdImport.default\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields)\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || field.type === 'group') {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { allowCreate, description },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    path,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        parent={\n          Array.isArray(collection)\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Select/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AASlF,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6FlD,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AASlF,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgGlD,CAAA"}

package/dist/fields/Select/Input.js

@@ -91,6 +91,8 @@ export const SelectInput = props => {
           label: t4,
           value: matchingOption_0?.value ?? value
         };
+      } else {
+        valueToRender = null;
       }
     }
     const t4 = showError && "error";

package/dist/fields/Select/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useTranslation","fieldBaseClass","SelectInput","props","$","AfterInput","BeforeInput","className","Description","description","Error","hasMany","t0","isClearable","t1","isSortable","t2","label","Label","localized","onChange","onInputChange","options","path","readOnly","required","showError","style","value","undefined","i18n","t3","valueToRender","Array","isArray","t4","val","matchingOption","find","option","map","matchingOption_0","t5","option_0","t6","filter","Boolean","t7","option_1","_jsxs","join","id","replace","children","_jsx","CustomComponent","Fallback","disabled","isMulti"],"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, StaticDescription, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly hasMany?: boolean\n  readonly isClearable?: boolean\n  readonly isSortable?: boolean\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name: string\n  readonly onChange?: ReactSelectAdapterProps['onChange']\n  readonly onInputChange?: ReactSelectAdapterProps['onInputChange']\n  readonly options?: OptionObject[]\n  readonly path: string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly showError?: boolean\n  readonly style?: React.CSSProperties\n  readonly value?: string | string[]\n}\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    Label,\n    localized,\n    onChange,\n    onInputChange,\n    options,\n    path,\n    readOnly,\n    required,\n    showError,\n    style,\n    value,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={style}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          onInputChange={onInputChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useTranslation","fieldBaseClass","SelectInput","props","$","AfterInput","BeforeInput","className","Description","description","Error","hasMany","t0","isClearable","t1","isSortable","t2","label","Label","localized","onChange","onInputChange","options","path","readOnly","required","showError","style","value","undefined","i18n","t3","valueToRender","Array","isArray","t4","val","matchingOption","find","option","map","matchingOption_0","t5","option_0","t6","filter","Boolean","t7","option_1","_jsxs","join","id","replace","children","_jsx","CustomComponent","Fallback","disabled","isMulti"],"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, StaticDescription, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly hasMany?: boolean\n  readonly isClearable?: boolean\n  readonly isSortable?: boolean\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name: string\n  readonly onChange?: ReactSelectAdapterProps['onChange']\n  readonly onInputChange?: ReactSelectAdapterProps['onInputChange']\n  readonly options?: OptionObject[]\n  readonly path: string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly showError?: boolean\n  readonly style?: React.CSSProperties\n  readonly value?: string | string[]\n}\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    Label,\n    localized,\n    onChange,\n    onInputChange,\n    options,\n    path,\n    readOnly,\n    required,\n    showError,\n    style,\n    value,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  } else {\n    // If value is not present then render nothing, allowing select fields to reset to their initial 'Select an option' state\n    valueToRender = null\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={style}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          onInputChange={onInputChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Tabs/Tab/index.scss

@@ -6,7 +6,8 @@
     @extend %h4;
     display: flex;
     padding-bottom: base(1);
-    margin: 0 $baseline 0 0;
+    margin: 0;
+    margin-inline-end: $baseline;
     cursor: pointer;
     opacity: 0.5;
     position: relative;

package/dist/forms/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAGV,SAAS,EAGV,MAAM,YAAY,CAAA;AAiCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8sBpC,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAGV,SAAS,EAGV,MAAM,YAAY,CAAA;AAiCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6tBpC,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/forms/Form/index.js

@@ -82,6 +82,11 @@ export const Form = props => {
   const [disabled, setDisabled] = useState(disabledFromProps || false);
   const [isMounted, setIsMounted] = useState(false);
   const [modified, setModified] = useState(false);
+  /**
+  * Tracks wether the form state passes validation.
+  * For example the state could be submitted but invalid as field errors have been returned.
+  */
+  const [isValid, setIsValid] = useState(true);
   const [initializing, setInitializing] = useState(initializingFromProps);
   const [processing, setProcessing] = useState(false);
   const [submitted, setSubmitted] = useState(false);
@@ -97,7 +102,7 @@ export const Form = props => {
   contextRef.current.fields = fields;
   const validateForm = useCallback(async () => {
     const validatedFieldState = {};
-    let isValid = true;
+    let isValid_0 = true;
     const data = contextRef.current.getData();
     const validationPromises = Object.entries(contextRef.current.fields).map(async ([path, field]) => {
       const validatedField = field;
@@ -136,7 +141,7 @@ export const Form = props => {
           }
         }
         if (validatedField.valid === false) {
-          isValid = false;
+          isValid_0 = false;
         }
       }
       validatedFieldState[path] = validatedField;
@@ -148,7 +153,8 @@ export const Form = props => {
         state: validatedFieldState
       });
     }
-    return isValid;
+    setIsValid(isValid_0);
+    return isValid_0;
   }, [collectionSlug, config, dispatchFields, id, operation, t, user, documentForm]);
   const submit = useCallback(async (options = {}, e) => {
     const {
@@ -206,8 +212,9 @@ export const Form = props => {
         });
         revalidatedFormState = result;
       }, Promise.resolve());
-      const isValid_0 = Object.entries(revalidatedFormState).every(([, field_0]) => field_0.valid !== false);
-      if (!isValid_0) {
+      const isValid_1 = Object.entries(revalidatedFormState).every(([, field_0]) => field_0.valid !== false);
+      setIsValid(isValid_1);
+      if (!isValid_1) {
         setProcessing(false);
         setSubmitted(true);
         setDisabled(false);
@@ -217,9 +224,10 @@ export const Form = props => {
         });
       }
     }
-    const isValid_1 = skipValidation || disableValidationOnSubmit ? true : await contextRef.current.validateForm();
+    const isValid_2 = skipValidation || disableValidationOnSubmit ? true : await contextRef.current.validateForm();
+    setIsValid(isValid_2);
     // If not valid, prevent submission
-    if (!isValid_1) {
+    if (!isValid_2) {
       errorToast(t('error:correctInvalidFields'));
       setProcessing(false);
       setSubmitted(true);
@@ -331,6 +339,7 @@ export const Form = props => {
             }
             return [[...fieldErrs, ...newFieldErrs], [...nonFieldErrs, ...newNonFieldErrs]];
           }, [[], []]);
+          setIsValid(false);
           dispatchFields({
             type: 'ADD_SERVER_ERRORS',
             errors: fieldErrors
@@ -351,7 +360,7 @@ export const Form = props => {
       setDisabled(false);
       errorToast(err.message);
     }
-  }, [beforeSubmit, action, disableSuccessStatus, disableValidationOnSubmit, disabled, dispatchFields, handleResponse, method, onSubmit, onSuccess, redirect, router, t, i18n, waitForAutocomplete]);
+  }, [beforeSubmit, startRouteTransition, action, disableSuccessStatus, disableValidationOnSubmit, disabled, dispatchFields, handleResponse, method, onSubmit, onSuccess, redirect, router, t, i18n, waitForAutocomplete]);
   const getFields = useCallback(() => contextRef.current.fields, []);
   const getField = useCallback(path_0 => contextRef.current.fields[path_0], []);
   const getData = useCallback(() => reduceFieldsToValues(contextRef.current.fields, true), []);
@@ -491,6 +500,7 @@ export const Form = props => {
   contextRef.current.setModified = setModified;
   contextRef.current.setProcessing = setProcessing;
   contextRef.current.setSubmitted = setSubmitted;
+  contextRef.current.setIsValid = setIsValid;
   contextRef.current.disabled = disabled;
   contextRef.current.setDisabled = setDisabled;
   contextRef.current.formRef = formRef;
@@ -502,6 +512,7 @@ export const Form = props => {
   contextRef.current.replaceFieldRow = replaceFieldRow;
   contextRef.current.uuid = uuid;
   contextRef.current.initializing = initializing;
+  contextRef.current.isValid = isValid;
   useEffect(() => {
     setIsMounted(true);
   }, []);