@povio/ui 2.3.0-rc.18 → 2.3.0-rc.19

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.
@@ -22,7 +22,7 @@ import { DateTime } from "luxon";
22
22
  import { useTimeFieldState } from "react-stately";
23
23
  //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
24
24
  var TimePickerBase = (props) => {
25
- const $ = c(129);
25
+ const $ = c(133);
26
26
  const ui = UIConfig.useConfig();
27
27
  let asProp;
28
28
  let className;
@@ -30,6 +30,7 @@ var TimePickerBase = (props) => {
30
30
  let disableManualEntryProp;
31
31
  let error;
32
32
  let errorClassName;
33
+ let fireBlurOnChangeProp;
33
34
  let headerClassName;
34
35
  let helperText;
35
36
  let hideLabelProp;
@@ -51,7 +52,7 @@ var TimePickerBase = (props) => {
51
52
  let value;
52
53
  let variantProp;
53
54
  if ($[0] !== props) {
54
- ({ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, disableManualEntry: disableManualEntryProp, ...rest} = props);
55
+ ({ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, disableManualEntry: disableManualEntryProp, fireBlurOnChange: fireBlurOnChangeProp, ...rest} = props);
55
56
  $[0] = props;
56
57
  $[1] = asProp;
57
58
  $[2] = className;
@@ -59,26 +60,27 @@ var TimePickerBase = (props) => {
59
60
  $[4] = disableManualEntryProp;
60
61
  $[5] = error;
61
62
  $[6] = errorClassName;
62
- $[7] = headerClassName;
63
- $[8] = helperText;
64
- $[9] = hideLabelProp;
65
- $[10] = inputClassName;
66
- $[11] = isClearableProp;
67
- $[12] = isDirty;
68
- $[13] = isDisabled;
69
- $[14] = isHeaderHidden;
70
- $[15] = isRequired;
71
- $[16] = label;
72
- $[17] = onBlur;
73
- $[18] = onChange;
74
- $[19] = placeholder;
75
- $[20] = ref;
76
- $[21] = rest;
77
- $[22] = rightContent;
78
- $[23] = sizeProp;
79
- $[24] = tooltipText;
80
- $[25] = value;
81
- $[26] = variantProp;
63
+ $[7] = fireBlurOnChangeProp;
64
+ $[8] = headerClassName;
65
+ $[9] = helperText;
66
+ $[10] = hideLabelProp;
67
+ $[11] = inputClassName;
68
+ $[12] = isClearableProp;
69
+ $[13] = isDirty;
70
+ $[14] = isDisabled;
71
+ $[15] = isHeaderHidden;
72
+ $[16] = isRequired;
73
+ $[17] = label;
74
+ $[18] = onBlur;
75
+ $[19] = onChange;
76
+ $[20] = placeholder;
77
+ $[21] = ref;
78
+ $[22] = rest;
79
+ $[23] = rightContent;
80
+ $[24] = sizeProp;
81
+ $[25] = tooltipText;
82
+ $[26] = value;
83
+ $[27] = variantProp;
82
84
  } else {
83
85
  asProp = $[1];
84
86
  className = $[2];
@@ -86,26 +88,27 @@ var TimePickerBase = (props) => {
86
88
  disableManualEntryProp = $[4];
87
89
  error = $[5];
88
90
  errorClassName = $[6];
89
- headerClassName = $[7];
90
- helperText = $[8];
91
- hideLabelProp = $[9];
92
- inputClassName = $[10];
93
- isClearableProp = $[11];
94
- isDirty = $[12];
95
- isDisabled = $[13];
96
- isHeaderHidden = $[14];
97
- isRequired = $[15];
98
- label = $[16];
99
- onBlur = $[17];
100
- onChange = $[18];
101
- placeholder = $[19];
102
- ref = $[20];
103
- rest = $[21];
104
- rightContent = $[22];
105
- sizeProp = $[23];
106
- tooltipText = $[24];
107
- value = $[25];
108
- variantProp = $[26];
91
+ fireBlurOnChangeProp = $[7];
92
+ headerClassName = $[8];
93
+ helperText = $[9];
94
+ hideLabelProp = $[10];
95
+ inputClassName = $[11];
96
+ isClearableProp = $[12];
97
+ isDirty = $[13];
98
+ isDisabled = $[14];
99
+ isHeaderHidden = $[15];
100
+ isRequired = $[16];
101
+ label = $[17];
102
+ onBlur = $[18];
103
+ onChange = $[19];
104
+ placeholder = $[20];
105
+ ref = $[21];
106
+ rest = $[22];
107
+ rightContent = $[23];
108
+ sizeProp = $[24];
109
+ tooltipText = $[25];
110
+ value = $[26];
111
+ variantProp = $[27];
109
112
  }
110
113
  const variant = variantProp ?? ui.input.variant;
111
114
  const as = asProp ?? ui.input.as;
@@ -113,9 +116,10 @@ var TimePickerBase = (props) => {
113
116
  const hideLabel = hideLabelProp ?? ui.input.hideLabel;
114
117
  const isClearable = isClearableProp ?? ui.input.isClearable;
115
118
  const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
119
+ const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
116
120
  const t0 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
117
121
  let t1;
118
- if ($[27] !== error || $[28] !== errorClassName || $[29] !== headerClassName || $[30] !== helperText || $[31] !== hideLabel || $[32] !== isDisabled || $[33] !== isRequired || $[34] !== label || $[35] !== rightContent || $[36] !== t0 || $[37] !== tooltipText) {
122
+ if ($[28] !== error || $[29] !== errorClassName || $[30] !== headerClassName || $[31] !== helperText || $[32] !== hideLabel || $[33] !== isDisabled || $[34] !== isRequired || $[35] !== label || $[36] !== rightContent || $[37] !== t0 || $[38] !== tooltipText) {
119
123
  t1 = {
120
124
  error,
121
125
  label,
@@ -129,64 +133,65 @@ var TimePickerBase = (props) => {
129
133
  headerClassName,
130
134
  errorClassName
131
135
  };
132
- $[27] = error;
133
- $[28] = errorClassName;
134
- $[29] = headerClassName;
135
- $[30] = helperText;
136
- $[31] = hideLabel;
137
- $[32] = isDisabled;
138
- $[33] = isRequired;
139
- $[34] = label;
140
- $[35] = rightContent;
141
- $[36] = t0;
142
- $[37] = tooltipText;
143
- $[38] = t1;
144
- } else t1 = $[38];
136
+ $[28] = error;
137
+ $[29] = errorClassName;
138
+ $[30] = headerClassName;
139
+ $[31] = helperText;
140
+ $[32] = hideLabel;
141
+ $[33] = isDisabled;
142
+ $[34] = isRequired;
143
+ $[35] = label;
144
+ $[36] = rightContent;
145
+ $[37] = t0;
146
+ $[38] = tooltipText;
147
+ $[39] = t1;
148
+ } else t1 = $[39];
145
149
  const formFieldProps = t1;
146
150
  const [isOpen, setIsOpen] = useState(false);
147
151
  const initialDateEmitRef = useRef(true);
148
152
  const { locale } = useLocale();
149
153
  const t2 = value || rest.defaultValue;
150
154
  let t3;
151
- if ($[39] !== locale || $[40] !== rest || $[41] !== t2) {
155
+ if ($[40] !== locale || $[41] !== rest || $[42] !== t2) {
152
156
  t3 = {
153
157
  ...rest,
154
158
  defaultValue: t2,
155
159
  locale
156
160
  };
157
- $[39] = locale;
158
- $[40] = rest;
159
- $[41] = t2;
160
- $[42] = t3;
161
- } else t3 = $[42];
161
+ $[40] = locale;
162
+ $[41] = rest;
163
+ $[42] = t2;
164
+ $[43] = t3;
165
+ } else t3 = $[43];
162
166
  const dialogState = useTimeFieldState(t3);
163
167
  let t4;
164
- if ($[43] !== onBlur) {
168
+ if ($[44] !== onBlur) {
165
169
  t4 = (val) => {
166
170
  onBlur?.({ target: { value: val } });
167
171
  };
168
- $[43] = onBlur;
169
- $[44] = t4;
170
- } else t4 = $[44];
172
+ $[44] = onBlur;
173
+ $[45] = t4;
174
+ } else t4 = $[45];
171
175
  const handleBlur = t4;
172
176
  let t5;
173
- if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
177
+ if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
174
178
  t5 = { delay: 500 };
175
- $[45] = t5;
176
- } else t5 = $[45];
179
+ $[46] = t5;
180
+ } else t5 = $[46];
177
181
  const { callback: debouncedBlur } = useDebounceCallback(handleBlur, t5);
178
182
  let t6;
179
- if ($[46] !== debouncedBlur || $[47] !== onChange) {
183
+ if ($[47] !== debouncedBlur || $[48] !== fireBlurOnChange || $[49] !== onChange) {
180
184
  t6 = (val_0) => {
181
185
  onChange?.(val_0);
182
- debouncedBlur(val_0);
186
+ if (fireBlurOnChange) debouncedBlur(val_0);
183
187
  };
184
- $[46] = debouncedBlur;
185
- $[47] = onChange;
186
- $[48] = t6;
187
- } else t6 = $[48];
188
+ $[47] = debouncedBlur;
189
+ $[48] = fireBlurOnChange;
190
+ $[49] = onChange;
191
+ $[50] = t6;
192
+ } else t6 = $[50];
188
193
  let t7;
189
- if ($[49] !== isDisabled || $[50] !== locale || $[51] !== rest || $[52] !== t6 || $[53] !== value) {
194
+ if ($[51] !== isDisabled || $[52] !== locale || $[53] !== rest || $[54] !== t6 || $[55] !== value) {
190
195
  t7 = {
191
196
  ...rest,
192
197
  isDisabled,
@@ -194,16 +199,16 @@ var TimePickerBase = (props) => {
194
199
  onChange: t6,
195
200
  locale
196
201
  };
197
- $[49] = isDisabled;
198
- $[50] = locale;
199
- $[51] = rest;
200
- $[52] = t6;
201
- $[53] = value;
202
- $[54] = t7;
203
- } else t7 = $[54];
202
+ $[51] = isDisabled;
203
+ $[52] = locale;
204
+ $[53] = rest;
205
+ $[54] = t6;
206
+ $[55] = value;
207
+ $[56] = t7;
208
+ } else t7 = $[56];
204
209
  const state = useTimeFieldState(t7);
205
210
  let t8;
206
- if ($[55] !== onChange || $[56] !== state.timeValue) {
211
+ if ($[57] !== onChange || $[58] !== state.timeValue) {
207
212
  t8 = () => {
208
213
  if (initialDateEmitRef.current) {
209
214
  initialDateEmitRef.current = false;
@@ -211,34 +216,34 @@ var TimePickerBase = (props) => {
211
216
  }
212
217
  if (state.timeValue) onChange?.(state.timeValue);
213
218
  };
214
- $[55] = onChange;
215
- $[56] = state.timeValue;
216
- $[57] = t8;
217
- } else t8 = $[57];
219
+ $[57] = onChange;
220
+ $[58] = state.timeValue;
221
+ $[59] = t8;
222
+ } else t8 = $[59];
218
223
  let t9;
219
- if ($[58] !== rest.date) {
224
+ if ($[60] !== rest.date) {
220
225
  t9 = [rest.date];
221
- $[58] = rest.date;
222
- $[59] = t9;
223
- } else t9 = $[59];
226
+ $[60] = rest.date;
227
+ $[61] = t9;
228
+ } else t9 = $[61];
224
229
  useEffect(t8, t9);
225
230
  const timeFieldRef = useRef(null);
226
231
  let t10;
227
- if ($[60] !== disableManualEntry || $[61] !== label || $[62] !== rest) {
232
+ if ($[62] !== disableManualEntry || $[63] !== label || $[64] !== rest) {
228
233
  t10 = {
229
234
  ...rest,
230
235
  label,
231
236
  isReadOnly: disableManualEntry
232
237
  };
233
- $[60] = disableManualEntry;
234
- $[61] = label;
235
- $[62] = rest;
236
- $[63] = t10;
237
- } else t10 = $[63];
238
+ $[62] = disableManualEntry;
239
+ $[63] = label;
240
+ $[64] = rest;
241
+ $[65] = t10;
242
+ } else t10 = $[65];
238
243
  const { labelProps, fieldProps } = useTimeField(t10, state, timeFieldRef);
239
244
  const t11 = hideLabel || isHeaderHidden;
240
245
  let t12;
241
- if ($[64] !== headerClassName || $[65] !== helperText || $[66] !== isDisabled || $[67] !== isRequired || $[68] !== label || $[69] !== labelProps || $[70] !== rightContent || $[71] !== t11 || $[72] !== tooltipText) {
246
+ if ($[66] !== headerClassName || $[67] !== helperText || $[68] !== isDisabled || $[69] !== isRequired || $[70] !== label || $[71] !== labelProps || $[72] !== rightContent || $[73] !== t11 || $[74] !== tooltipText) {
242
247
  t12 = {
243
248
  label,
244
249
  tooltipText,
@@ -250,72 +255,73 @@ var TimePickerBase = (props) => {
250
255
  className: headerClassName,
251
256
  labelProps
252
257
  };
253
- $[64] = headerClassName;
254
- $[65] = helperText;
255
- $[66] = isDisabled;
256
- $[67] = isRequired;
257
- $[68] = label;
258
- $[69] = labelProps;
259
- $[70] = rightContent;
260
- $[71] = t11;
261
- $[72] = tooltipText;
262
- $[73] = t12;
263
- } else t12 = $[73];
258
+ $[66] = headerClassName;
259
+ $[67] = helperText;
260
+ $[68] = isDisabled;
261
+ $[69] = isRequired;
262
+ $[70] = label;
263
+ $[71] = labelProps;
264
+ $[72] = rightContent;
265
+ $[73] = t11;
266
+ $[74] = tooltipText;
267
+ $[75] = t12;
268
+ } else t12 = $[75];
264
269
  const headerProps = t12;
265
270
  let t13;
266
- if ($[74] !== dialogState.value || $[75] !== handleBlur || $[76] !== state) {
271
+ if ($[76] !== dialogState.value || $[77] !== fireBlurOnChange || $[78] !== handleBlur || $[79] !== state) {
267
272
  t13 = () => {
268
273
  const newValue = dialogState.value;
269
274
  state.setValue(newValue);
270
275
  setIsOpen(false);
271
- handleBlur(newValue);
276
+ if (fireBlurOnChange) handleBlur(newValue);
272
277
  };
273
- $[74] = dialogState.value;
274
- $[75] = handleBlur;
275
- $[76] = state;
276
- $[77] = t13;
277
- } else t13 = $[77];
278
+ $[76] = dialogState.value;
279
+ $[77] = fireBlurOnChange;
280
+ $[78] = handleBlur;
281
+ $[79] = state;
282
+ $[80] = t13;
283
+ } else t13 = $[80];
278
284
  const onApply = t13;
279
285
  let t14;
280
- if ($[78] !== dialogState || $[79] !== isOpen || $[80] !== state.value) {
286
+ if ($[81] !== dialogState || $[82] !== isOpen || $[83] !== state.value) {
281
287
  t14 = (open) => {
282
288
  setIsOpen(open);
283
289
  if (!isOpen) dialogState.setValue(state.value);
284
290
  };
285
- $[78] = dialogState;
286
- $[79] = isOpen;
287
- $[80] = state.value;
288
- $[81] = t14;
289
- } else t14 = $[81];
291
+ $[81] = dialogState;
292
+ $[82] = isOpen;
293
+ $[83] = state.value;
294
+ $[84] = t14;
295
+ } else t14 = $[84];
290
296
  const onOpenChange = t14;
291
297
  let t15;
292
- if ($[82] !== dialogState || $[83] !== state.value) {
298
+ if ($[85] !== dialogState || $[86] !== state.value) {
293
299
  t15 = () => {
294
300
  dialogState.setValue(state.value);
295
301
  setIsOpen(true);
296
302
  };
297
- $[82] = dialogState;
298
- $[83] = state.value;
299
- $[84] = t15;
300
- } else t15 = $[84];
303
+ $[85] = dialogState;
304
+ $[86] = state.value;
305
+ $[87] = t15;
306
+ } else t15 = $[87];
301
307
  const onOpen = t15;
302
308
  const t16 = as === "inline" ? -1 : void 0;
303
309
  let t17;
304
- if ($[85] !== className) {
310
+ if ($[88] !== className) {
305
311
  t17 = clsx("relative inline-flex w-full flex-col text-left", className);
306
- $[85] = className;
307
- $[86] = t17;
308
- } else t17 = $[86];
312
+ $[88] = className;
313
+ $[89] = t17;
314
+ } else t17 = $[89];
309
315
  const t18 = as === "inline" ? -1 : void 0;
310
316
  let t19;
311
- if ($[87] !== ref) {
317
+ if ($[90] !== ref) {
312
318
  t19 = mergeRefs(ref, timeFieldRef);
313
- $[87] = ref;
314
- $[88] = t19;
315
- } else t19 = $[88];
319
+ $[90] = ref;
320
+ $[91] = t19;
321
+ } else t19 = $[91];
316
322
  const t20 = !!error;
317
323
  let t21;
318
- if ($[89] !== as || $[90] !== disableDropdown || $[91] !== disableManualEntry || $[92] !== fieldProps || $[93] !== headerProps || $[94] !== inputClassName || $[95] !== isClearable || $[96] !== isDirty || $[97] !== isDisabled || $[98] !== isRequired || $[99] !== onOpen || $[100] !== placeholder || $[101] !== size || $[102] !== state || $[103] !== t19 || $[104] !== t20 || $[105] !== variant) {
324
+ if ($[92] !== as || $[93] !== disableDropdown || $[94] !== disableManualEntry || $[95] !== fieldProps || $[96] !== fireBlurOnChange || $[97] !== headerProps || $[98] !== inputClassName || $[99] !== isClearable || $[100] !== isDirty || $[101] !== isDisabled || $[102] !== isRequired || $[103] !== onOpen || $[104] !== placeholder || $[105] !== size || $[106] !== state || $[107] !== t19 || $[108] !== t20 || $[109] !== variant) {
319
325
  t21 = /* @__PURE__ */ jsx(TimePickerInput, {
320
326
  ref: t19,
321
327
  as,
@@ -333,29 +339,31 @@ var TimePickerBase = (props) => {
333
339
  headerProps,
334
340
  disableManualEntry,
335
341
  placeholder,
336
- className: inputClassName
342
+ className: inputClassName,
343
+ fireBlurOnChange
337
344
  });
338
- $[89] = as;
339
- $[90] = disableDropdown;
340
- $[91] = disableManualEntry;
341
- $[92] = fieldProps;
342
- $[93] = headerProps;
343
- $[94] = inputClassName;
344
- $[95] = isClearable;
345
- $[96] = isDirty;
346
- $[97] = isDisabled;
347
- $[98] = isRequired;
348
- $[99] = onOpen;
349
- $[100] = placeholder;
350
- $[101] = size;
351
- $[102] = state;
352
- $[103] = t19;
353
- $[104] = t20;
354
- $[105] = variant;
355
- $[106] = t21;
356
- } else t21 = $[106];
345
+ $[92] = as;
346
+ $[93] = disableDropdown;
347
+ $[94] = disableManualEntry;
348
+ $[95] = fieldProps;
349
+ $[96] = fireBlurOnChange;
350
+ $[97] = headerProps;
351
+ $[98] = inputClassName;
352
+ $[99] = isClearable;
353
+ $[100] = isDirty;
354
+ $[101] = isDisabled;
355
+ $[102] = isRequired;
356
+ $[103] = onOpen;
357
+ $[104] = placeholder;
358
+ $[105] = size;
359
+ $[106] = state;
360
+ $[107] = t19;
361
+ $[108] = t20;
362
+ $[109] = variant;
363
+ $[110] = t21;
364
+ } else t21 = $[110];
357
365
  let t22;
358
- if ($[107] !== dialogState || $[108] !== disableDropdown || $[109] !== disableManualEntry || $[110] !== isDisabled || $[111] !== isOpen || $[112] !== label || $[113] !== onApply || $[114] !== onOpenChange) {
366
+ if ($[111] !== dialogState || $[112] !== disableDropdown || $[113] !== disableManualEntry || $[114] !== isDisabled || $[115] !== isOpen || $[116] !== label || $[117] !== onApply || $[118] !== onOpenChange) {
359
367
  t22 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
360
368
  footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
361
369
  isDisabled,
@@ -368,18 +376,18 @@ var TimePickerBase = (props) => {
368
376
  onOpenChange,
369
377
  children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
370
378
  });
371
- $[107] = dialogState;
372
- $[108] = disableDropdown;
373
- $[109] = disableManualEntry;
374
- $[110] = isDisabled;
375
- $[111] = isOpen;
376
- $[112] = label;
377
- $[113] = onApply;
378
- $[114] = onOpenChange;
379
- $[115] = t22;
380
- } else t22 = $[115];
379
+ $[111] = dialogState;
380
+ $[112] = disableDropdown;
381
+ $[113] = disableManualEntry;
382
+ $[114] = isDisabled;
383
+ $[115] = isOpen;
384
+ $[116] = label;
385
+ $[117] = onApply;
386
+ $[118] = onOpenChange;
387
+ $[119] = t22;
388
+ } else t22 = $[119];
381
389
  let t23;
382
- if ($[116] !== as || $[117] !== formFieldProps || $[118] !== labelProps || $[119] !== t17 || $[120] !== t18 || $[121] !== t21 || $[122] !== t22) {
390
+ if ($[120] !== as || $[121] !== formFieldProps || $[122] !== labelProps || $[123] !== t17 || $[124] !== t18 || $[125] !== t21 || $[126] !== t22) {
383
391
  t23 = /* @__PURE__ */ jsxs(FormField, {
384
392
  ...formFieldProps,
385
393
  as,
@@ -388,29 +396,29 @@ var TimePickerBase = (props) => {
388
396
  tabIndex: t18,
389
397
  children: [t21, t22]
390
398
  });
391
- $[116] = as;
392
- $[117] = formFieldProps;
393
- $[118] = labelProps;
394
- $[119] = t17;
395
- $[120] = t18;
396
- $[121] = t21;
397
- $[122] = t22;
398
- $[123] = t23;
399
- } else t23 = $[123];
399
+ $[120] = as;
400
+ $[121] = formFieldProps;
401
+ $[122] = labelProps;
402
+ $[123] = t17;
403
+ $[124] = t18;
404
+ $[125] = t21;
405
+ $[126] = t22;
406
+ $[127] = t23;
407
+ } else t23 = $[127];
400
408
  let t24;
401
- if ($[124] !== as || $[125] !== error || $[126] !== t16 || $[127] !== t23) {
409
+ if ($[128] !== as || $[129] !== error || $[130] !== t16 || $[131] !== t23) {
402
410
  t24 = /* @__PURE__ */ jsx(TooltipWrapper, {
403
411
  as,
404
412
  error,
405
413
  triggerTabIndex: t16,
406
414
  children: t23
407
415
  });
408
- $[124] = as;
409
- $[125] = error;
410
- $[126] = t16;
411
- $[127] = t23;
412
- $[128] = t24;
413
- } else t24 = $[128];
416
+ $[128] = as;
417
+ $[129] = error;
418
+ $[130] = t16;
419
+ $[131] = t23;
420
+ $[132] = t24;
421
+ } else t24 = $[132];
414
422
  return t24;
415
423
  };
416
424
  var TimePicker = ({ renderStaticInput, ...props }) => {