create-nextjs-cms 0.9.20 → 0.9.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +3 -3
  2. package/templates/default/components/GalleryPhoto.tsx +109 -93
  3. package/templates/default/components/PhotoGallery.tsx +47 -35
  4. package/templates/default/components/form/Form.tsx +385 -370
  5. package/templates/default/components/form/FormInputs.tsx +138 -136
  6. package/templates/default/components/form/helpers/_section-hot-reload.js +1 -1
  7. package/templates/default/components/form/inputs/DateFormInput.tsx +11 -10
  8. package/templates/default/components/form/inputs/DocumentFormInput.tsx +270 -222
  9. package/templates/default/components/form/inputs/PhotoFormInput.tsx +7 -9
  10. package/templates/default/components/form/inputs/SelectFormInput.tsx +16 -16
  11. package/templates/default/components/form/inputs/VideoFormInput.tsx +270 -118
  12. package/templates/default/dynamic-schemas/schema.ts +202 -31
  13. package/templates/default/package.json +1 -1
package/templates/default/components/form/inputs/DocumentFormInput.tsx CHANGED
@@ -1,222 +1,270 @@
1
- import React, { useRef, useState } from 'react'
2
- import { useI18n } from 'nextjs-cms/translations/client'
3
- import FormInputElement from '@/components/form/FormInputElement'
4
- import ProtectedDocument from '@/components/ProtectedDocument'
5
- import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
6
- import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
7
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
8
- import { Badge } from '@/components/ui/badge'
9
- import useModal from '@/hooks/useModal'
10
- import { useController, useFormContext } from 'react-hook-form'
11
-
12
- export default function DocumentFormInput({
13
- input,
14
- sectionName,
15
- }: {
16
- input: DocumentFieldClientConfig
17
- sectionName: string
18
- }) {
19
- const t = useI18n()
20
- const { control } = useFormContext()
21
- const {
22
- field,
23
- fieldState: { invalid, isTouched, isDirty, error },
24
- } = useController({
25
- name: input.name,
26
- control,
27
- defaultValue: undefined,
28
- })
29
-
30
- const [fileName, setFileName] = useState(t('noFileSelected'))
31
- const fileInputContainerRef = useRef<HTMLDivElement>(null)
32
- const [image, setImage] = useState<string | null>(null)
33
- const { setModal } = useModal()
34
-
35
- const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
36
- if (event.target.files && event.target.files[0]) {
37
- const file = event.target.files[0]
38
- const fileExtension = file.name.split('.').pop()?.toLowerCase()
39
-
40
- // Check if file extension is allowed
41
- if (input.extensions && !input.extensions.includes(fileExtension || '')) {
42
- // File extension not allowed - reset and don't display
43
- setFileName(t('noFileSelected'))
44
- setImage(null)
45
- // Clear the input value
46
- if (fileInputContainerRef.current?.firstChild) {
47
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
48
- }
49
- return
50
- }
51
-
52
- setFileName(file.name || t('noFileSelected'))
53
- setImage(URL.createObjectURL(file))
54
- } else {
55
- setFileName(t('noFileSelected'))
56
- setImage(null)
57
- }
58
- }
59
-
60
- const document = (
61
- <ProtectedDocument
62
- section={sectionName}
63
- fieldName={input.name}
64
- file={input.value}
65
- width={450}
66
- height={620}
67
- className='mb-4 rounded p-1 ring-3 ring-gray-400'
68
- />
69
- )
70
-
71
- const handleDocumentDelete = () => {}
72
-
73
- return (
74
- <FormInputElement
75
- validationError={error}
76
- value={document}
77
- readonly={input.readonly}
78
- label={input.label}
79
- required={input.required}
80
- >
81
- <Card className='flex max-w-full flex-col'>
82
- <CardHeader>
83
- <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
84
- <span>{input.label} </span>
85
- {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
86
- </CardTitle>
87
- </CardHeader>
88
- <CardContent className='flex flex-col gap-1'>
89
- <div className='mb-2 flex flex-col text-sm'>
90
- {input.maxFileSize ? (
91
- <div className='flex flex-wrap items-center gap-2'>
92
- <InfoIcon size={14} />
93
- <span>{t('maxFileSize')}:</span>
94
- <Badge
95
- variant={'secondary'}
96
- >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
97
- </div>
98
- ) : null}
99
- {input.extensions ? (
100
- <div className='flex flex-wrap items-center gap-2'>
101
- <InfoIcon size={14} />
102
- <span>{t('allowedExtensions')}:</span>
103
- <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
104
- </div>
105
- ) : null}
106
- </div>
107
- <div className='flex flex-col gap-4'>
108
- {input.value ? document : null}
109
- {image ? (
110
- <div className='relative flex items-center'>
111
- <ChevronRight fontSize='large' />
112
- <div className='relative'>
113
- <X
114
- className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
115
- onClick={() => {
116
- setImage(null)
117
- setFileName(t('noFileSelected'))
118
- field.onChange(undefined)
119
- if (fileInputContainerRef.current) {
120
- /**
121
- * Clear the child input value
122
- */
123
- if (fileInputContainerRef.current?.firstChild) {
124
- ;(
125
- fileInputContainerRef.current.firstChild as HTMLInputElement
126
- ).value = ''
127
- }
128
- }
129
- }}
130
- />
131
- <embed
132
- src={image}
133
- className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
134
- width={350}
135
- height={520}
136
- />
137
- </div>
138
- </div>
139
- ) : null}
140
- </div>
141
- <div ref={fileInputContainerRef}>
142
- <input
143
- type='file'
144
- className='hidden'
145
- name={field.name}
146
- ref={field.ref}
147
- accept={input.extensions ? input.extensions.map((ext) => `.${ext}`).join(',') : undefined}
148
- onChange={(e) => {
149
- onImageChange(e)
150
- if (!input.value) {
151
- field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
152
- }
153
- }}
154
- />
155
- </div>
156
- <div className='flex flex-col items-center gap-2 md:flex-row'>
157
- <div className='flex w-full flex-col'>
158
- {[false, 'false', 0].includes(input.required) &&
159
- !['', null, undefined].includes(input.value) ? (
160
- <div className='w-[400px] max-w-full'>
161
- <button
162
- type='button'
163
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
164
- onClick={() => {
165
- setModal({
166
- title: t('deletePhoto'),
167
- body: (
168
- <div className='p-4'>
169
- <div className='flex flex-col gap-4'>
170
- <div>{t('deletePhotoText')}</div>
171
- <div className='flex gap-2'>
172
- <button
173
- className='rounded bg-green-600 px-2 py-1 text-white'
174
- onClick={handleDocumentDelete}
175
- >
176
- {t('yes')}
177
- </button>
178
- <button
179
- className='rounded bg-red-800 px-2 py-1 text-white'
180
- onClick={() => {
181
- setModal(null)
182
- }}
183
- >
184
- {t('no')}
185
- </button>
186
- </div>
187
- </div>
188
- </div>
189
- ),
190
- headerColor: 'bg-red-700',
191
- titleColor: 'text-white',
192
- lang: 'en',
193
- })
194
- }}
195
- >
196
- <Trash2Icon size={20} /> {t('delete')}
197
- </button>
198
- </div>
199
- ) : null}
200
- <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
201
- <button
202
- type='button'
203
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
204
- onClick={() => {
205
- if (fileInputContainerRef.current?.firstChild) {
206
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
207
- }
208
- }}
209
- >
210
- <UploadIcon size={20} /> {t('selectFile')}
211
- </button>
212
- <div className='flex w-full ps-2'>
213
- <div className='break-all'>{fileName}</div>
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- </CardContent>
219
- </Card>
220
- </FormInputElement>
221
- )
222
- }
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react'
2
+ import FormInputElement from '@/components/form/FormInputElement'
3
+ import ProtectedDocument from '@/components/ProtectedDocument'
4
+ import { Badge } from '@/components/ui/badge'
5
+ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
6
+ import useModal from '@/hooks/useModal'
7
+ import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
8
+ import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
9
+ import { useI18n } from 'nextjs-cms/translations/client'
10
+ import { useController, useFormContext } from 'react-hook-form'
11
+
12
+ export default function DocumentFormInput({
13
+ input,
14
+ sectionName,
15
+ submitSuccessCount = 0,
16
+ }: {
17
+ input: DocumentFieldClientConfig
18
+ sectionName: string
19
+ submitSuccessCount?: number
20
+ }) {
21
+ const t = useI18n()
22
+ const { control } = useFormContext()
23
+ const {
24
+ field,
25
+ fieldState: { invalid, isTouched, isDirty, error },
26
+ } = useController({
27
+ name: input.name,
28
+ control,
29
+ defaultValue: input.value,
30
+ })
31
+
32
+ const [fileName, setFileName] = useState(t('noFileSelected'))
33
+ const fileInputContainerRef = useRef<HTMLDivElement>(null)
34
+ const [image, setImage] = useState<string | null>(null)
35
+ const [markedForDeletion, setMarkedForDeletion] = useState(false)
36
+ const handledSubmitSuccessCountRef = useRef(0)
37
+ const { setModal } = useModal()
38
+
39
+ const clearSelectedFile = useCallback(() => {
40
+ setFileName(t('noFileSelected'))
41
+ setImage(null)
42
+ field.onChange(undefined)
43
+ if (fileInputContainerRef.current?.firstChild) {
44
+ ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
45
+ }
46
+ }, [field.onChange, t])
47
+
48
+ useEffect(() => {
49
+ return () => {
50
+ if (image?.startsWith('blob:')) {
51
+ URL.revokeObjectURL(image)
52
+ }
53
+ }
54
+ }, [image])
55
+
56
+ useEffect(() => {
57
+ if (!submitSuccessCount || handledSubmitSuccessCountRef.current === submitSuccessCount) return
58
+
59
+ handledSubmitSuccessCountRef.current = submitSuccessCount
60
+ setMarkedForDeletion(false)
61
+ clearSelectedFile()
62
+ }, [clearSelectedFile, submitSuccessCount])
63
+
64
+ const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
65
+ if (event.target.files && event.target.files[0]) {
66
+ const file = event.target.files[0]
67
+ const fileExtension = file.name.split('.').pop()?.toLowerCase()
68
+
69
+ if (input.extensions && !input.extensions.includes(fileExtension || '')) {
70
+ clearSelectedFile()
71
+ return undefined
72
+ }
73
+
74
+ setFileName(file.name || t('noFileSelected'))
75
+ setImage(URL.createObjectURL(file))
76
+ return file
77
+ } else {
78
+ setFileName(t('noFileSelected'))
79
+ setImage(null)
80
+ return undefined
81
+ }
82
+ }
83
+
84
+ const document = (
85
+ <ProtectedDocument
86
+ section={sectionName}
87
+ fieldName={input.name}
88
+ file={input.value}
89
+ width={450}
90
+ height={620}
91
+ className='ring-3 mb-4 rounded p-1 ring-gray-400'
92
+ />
93
+ )
94
+
95
+ const handleDocumentDelete = () => {
96
+ setMarkedForDeletion(true)
97
+ clearSelectedFile()
98
+ setModal(null)
99
+ }
100
+
101
+ const handleUndoDeletion = () => {
102
+ setMarkedForDeletion(false)
103
+ }
104
+
105
+ return (
106
+ <FormInputElement
107
+ validationError={error}
108
+ value={document}
109
+ readonly={input.readonly}
110
+ label={input.label}
111
+ required={input.required}
112
+ >
113
+ {markedForDeletion && input.value ? (
114
+ <input
115
+ type='hidden'
116
+ name='__removedFile'
117
+ value={JSON.stringify({ fieldName: input.name, fileName: input.value })}
118
+ />
119
+ ) : null}
120
+ <Card className='flex max-w-full flex-col'>
121
+ <CardHeader>
122
+ <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
123
+ <span>{input.label} </span>
124
+ {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
125
+ </CardTitle>
126
+ </CardHeader>
127
+ <CardContent className='flex flex-col gap-1'>
128
+ <div className='mb-2 flex flex-col text-sm'>
129
+ {input.maxFileSize ? (
130
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
131
+ <InfoIcon size={14} />
132
+ <span>{t('maxFileSize')}:</span>
133
+ <Badge
134
+ variant={'secondary'}
135
+ >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
136
+ </div>
137
+ ) : null}
138
+ {input.extensions ? (
139
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
140
+ <InfoIcon size={14} />
141
+ <span>{t('allowedExtensions')}:</span>
142
+ <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
143
+ </div>
144
+ ) : null}
145
+ </div>
146
+ {markedForDeletion ? (
147
+ <div className='flex items-center gap-3 rounded border border-amber-400 bg-amber-50 p-3 dark:border-amber-600 dark:bg-amber-950'>
148
+ <span className='text-sm text-amber-800 dark:text-amber-200'>
149
+ {t('documentMarkedForDeletion')}
150
+ </span>
151
+ <button
152
+ type='button'
153
+ className='flex items-center gap-1 text-sm font-medium text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
154
+ onClick={handleUndoDeletion}
155
+ >
156
+ <Undo2Icon size={14} /> {t('undo')}
157
+ </button>
158
+ </div>
159
+ ) : (
160
+ <>
161
+ <div className='flex flex-col gap-4'>
162
+ {input.value ? document : null}
163
+ {image ? (
164
+ <div className='relative flex items-center'>
165
+ <ChevronRight fontSize='large' />
166
+ <div className='relative'>
167
+ <X
168
+ className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
169
+ onClick={clearSelectedFile}
170
+ />
171
+ <embed
172
+ src={image}
173
+ className='ring-3 mb-4 max-w-full rounded p-1 ring-green-600'
174
+ width={350}
175
+ height={520}
176
+ />
177
+ </div>
178
+ </div>
179
+ ) : null}
180
+ </div>
181
+ <div ref={fileInputContainerRef}>
182
+ <input
183
+ type='file'
184
+ className='hidden'
185
+ name={field.name}
186
+ ref={field.ref}
187
+ accept={
188
+ input.extensions
189
+ ? input.extensions.map((ext) => `.${ext}`).join(',')
190
+ : undefined
191
+ }
192
+ onChange={(e) => {
193
+ const selectedFile = onImageChange(e)
194
+ if (!input.value) {
195
+ field.onChange(selectedFile)
196
+ }
197
+ }}
198
+ />
199
+ </div>
200
+ <div className='flex flex-col items-center gap-2 md:flex-row'>
201
+ <div className='flex w-full flex-col'>
202
+ {[false, 'false', 0].includes(input.required) &&
203
+ !['', null, undefined].includes(input.value) ? (
204
+ <div className='w-[400px] max-w-full'>
205
+ <button
206
+ type='button'
207
+ className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
208
+ onClick={() => {
209
+ setModal({
210
+ title: t('deleteDocument'),
211
+ body: (
212
+ <div className='p-4'>
213
+ <div className='flex flex-col gap-4'>
214
+ <div>{t('deleteDocumentText')}</div>
215
+ <div className='flex gap-2'>
216
+ <button
217
+ className='rounded bg-green-600 px-2 py-1 text-white'
218
+ onClick={handleDocumentDelete}
219
+ >
220
+ {t('yes')}
221
+ </button>
222
+ <button
223
+ className='rounded bg-red-800 px-2 py-1 text-white'
224
+ onClick={() => {
225
+ setModal(null)
226
+ }}
227
+ >
228
+ {t('no')}
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ ),
234
+ headerColor: 'bg-red-700',
235
+ titleColor: 'text-white',
236
+ lang: 'en',
237
+ })
238
+ }}
239
+ >
240
+ <Trash2Icon size={20} /> {t('delete')}
241
+ </button>
242
+ </div>
243
+ ) : null}
244
+ <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
245
+ <button
246
+ type='button'
247
+ className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
248
+ onClick={() => {
249
+ if (fileInputContainerRef.current?.firstChild) {
250
+ ;(
251
+ fileInputContainerRef.current.firstChild as HTMLInputElement
252
+ ).click()
253
+ }
254
+ }}
255
+ >
256
+ <UploadIcon size={20} /> {t('selectFile')}
257
+ </button>
258
+ <div className='flex w-full ps-2'>
259
+ <div className='break-all'>{fileName}</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </>
265
+ )}
266
+ </CardContent>
267
+ </Card>
268
+ </FormInputElement>
269
+ )
270
+ }
package/templates/default/components/form/inputs/PhotoFormInput.tsx CHANGED
@@ -122,19 +122,17 @@ export default function PhotoFormInput({
122
122
  <CardContent className='flex flex-col gap-1'>
123
123
  <div className='mb-2 flex flex-col text-sm'>
124
124
  {input.size ? (
125
- <div className='flex flex-wrap items-center gap-2'>
125
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
126
126
  <InfoIcon size={14} />
127
127
  <span>
128
- {t(
129
- 'strict' in input.size ? 'imageDimensionsMustBe' : 'imageRecommendedDimensions',
130
- )}
128
+ {t('strict' in input.size ? 'imageDimensionsMustBe' : 'imageRecommendedDimensions')}
131
129
  :
132
130
  </span>
133
131
  <Badge variant={'secondary'}>{`${input.size.width} x ${input.size.height}`}</Badge>
134
132
  </div>
135
133
  ) : null}
136
134
  {input.maxFileSize ? (
137
- <div className='flex flex-wrap items-center gap-2'>
135
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
138
136
  <InfoIcon size={14} />
139
137
  <span>{t('maxFileSize')}:</span>
140
138
  <Badge
@@ -143,7 +141,7 @@ export default function PhotoFormInput({
143
141
  </div>
144
142
  ) : null}
145
143
  {input.extensions ? (
146
- <div className='flex flex-wrap items-center gap-2'>
144
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
147
145
  <InfoIcon size={14} />
148
146
  <span>{t('allowedExtensions')}:</span>
149
147
  <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
@@ -172,7 +170,7 @@ export default function PhotoFormInput({
172
170
  <ChevronRight fontSize='large' />
173
171
  <div className='relative h-[150px] w-[150px]'>
174
172
  <X
175
- className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
173
+ className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
176
174
  onClick={clearSelectedFile}
177
175
  />
178
176
  <Image
@@ -209,7 +207,7 @@ export default function PhotoFormInput({
209
207
  <div className='w-[400px] max-w-full'>
210
208
  <button
211
209
  type='button'
212
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
210
+ className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
213
211
  onClick={() => {
214
212
  setModal({
215
213
  title: t('deletePhoto'),
@@ -249,7 +247,7 @@ export default function PhotoFormInput({
249
247
  <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
250
248
  <button
251
249
  type='button'
252
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
250
+ className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
253
251
  onClick={() => {
254
252
  if (fileInputContainerRef.current?.firstChild) {
255
253
  ;(
package/templates/default/components/form/inputs/SelectFormInput.tsx CHANGED
@@ -125,24 +125,24 @@ export default function SelectFormInput({
125
125
  return (
126
126
  <>
127
127
  <FormInputElement validationError={error} label={input.label} required={input.required}>
128
- <input
129
- type='hidden'
130
- disabled={field.disabled}
131
- name={field.name}
132
- onBlur={field.onBlur}
133
- ref={field.ref}
134
- value={field.value}
135
- />
128
+ <input
129
+ type='hidden'
130
+ disabled={field.disabled}
131
+ name={field.name}
132
+ onBlur={field.onBlur}
133
+ ref={field.ref}
134
+ value={field.value ?? ''}
135
+ />
136
136
  <SelectBox
137
137
  defaultValue={value?.value ? value?.value.toString() : undefined}
138
- // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
139
- items={optionsWithPlaceholder}
140
- onChange={(value: SelectOption) => {
141
- field.onChange(value.value)
142
- if (value) setValue(value)
143
- }}
144
- classname='w-full shadow-xs'
145
- />
138
+ // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
139
+ items={optionsWithPlaceholder}
140
+ onChange={(value: SelectOption) => {
141
+ field.onChange(value.value ?? '')
142
+ if (value) setValue(value)
143
+ }}
144
+ classname='w-full shadow-xs'
145
+ />
146
146
  </FormInputElement>
147
147
  <div ref={parent}>
148
148
  {isLoading && <LoadingSpinners />}