@povio/ui 2.3.0-rc.20 → 2.3.0-rc.21
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.
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +218 -62
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +214 -70
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +1 -1
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +134 -43
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +123 -40
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +127 -39
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +142 -69
- package/dist/components/inputs/Input/TextInput/TextInput.js +125 -39
- package/dist/components/inputs/Inputs/InputItem.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +135 -47
- package/dist/components/inputs/Selection/Select/Select.js +116 -38
- package/package.json +1 -1
|
@@ -13,12 +13,13 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
|
|
|
13
13
|
import { InputFrame } from "../../Skeleton/InputFrame.js";
|
|
14
14
|
import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
|
|
15
15
|
import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
|
|
16
|
+
import { c } from "react/compiler-runtime";
|
|
16
17
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
18
|
import { clsx } from "clsx";
|
|
18
19
|
import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
19
20
|
import { useDatePicker, useLocale } from "react-aria";
|
|
20
21
|
import { mergeRefs } from "@react-aria/utils";
|
|
21
|
-
import { Controller
|
|
22
|
+
import { Controller } from "react-hook-form";
|
|
22
23
|
import { Time, createCalendar, toCalendarDate, toCalendarDateTime, today } from "@internationalized/date";
|
|
23
24
|
import { useCalendarState, useDatePickerState } from "react-stately";
|
|
24
25
|
//#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
|
|
@@ -236,7 +237,9 @@ var DateTimePickerBase = (props) => {
|
|
|
236
237
|
})
|
|
237
238
|
});
|
|
238
239
|
};
|
|
239
|
-
var
|
|
240
|
+
var DateTimePickerInner = (t0) => {
|
|
241
|
+
const $ = c(9);
|
|
242
|
+
const { fullIso: t1, renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
240
243
|
const ui = UIConfig.useConfig();
|
|
241
244
|
const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
|
|
242
245
|
const { locale } = useLocale();
|
|
@@ -247,27 +250,11 @@ var DateTimePicker = ({ fullIso: _fullIso = true, renderStaticInput, ...props })
|
|
|
247
250
|
inputRef,
|
|
248
251
|
renderInput,
|
|
249
252
|
setRenderInput,
|
|
250
|
-
getFocusTarget:
|
|
251
|
-
const container = input.getContainer?.() ?? input;
|
|
252
|
-
return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
|
|
253
|
-
}
|
|
253
|
+
getFocusTarget: _temp
|
|
254
254
|
});
|
|
255
|
-
const
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}) : props.value;
|
|
259
|
-
let isFormControlDisabled = false;
|
|
260
|
-
if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
|
|
261
|
-
const rawValue = watchedValue ?? props.value ?? null;
|
|
262
|
-
const effectiveTimeZone = "UTC";
|
|
263
|
-
const formatDateValue = (dateValue) => {
|
|
264
|
-
if (dateValue === null) return null;
|
|
265
|
-
return DateTimeUtils.fromDateValueFieldsToUTCISO(dateValue);
|
|
266
|
-
};
|
|
267
|
-
const parseDateValue = (isoString) => {
|
|
268
|
-
if (isoString == null) return isoString;
|
|
269
|
-
return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
|
|
270
|
-
};
|
|
255
|
+
const rawValue = props.value ?? null;
|
|
256
|
+
const formatDateValue = _temp2;
|
|
257
|
+
const parseDateValue = _temp3;
|
|
271
258
|
if (!renderInput) {
|
|
272
259
|
const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
|
|
273
260
|
const as = props.as ?? ui.input.as;
|
|
@@ -315,29 +302,133 @@ var DateTimePicker = ({ fullIso: _fullIso = true, renderStaticInput, ...props })
|
|
|
315
302
|
children: staticSegments
|
|
316
303
|
});
|
|
317
304
|
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
305
|
+
const T0 = DateTimePickerBase;
|
|
306
|
+
const t2 = mergeRefs(props.ref, inputRef);
|
|
307
|
+
const t3 = parseDateValue(props.value);
|
|
308
|
+
let t4;
|
|
309
|
+
if ($[0] !== formatDateValue || $[1] !== props) {
|
|
310
|
+
t4 = (value) => props.onChange?.(formatDateValue(value));
|
|
311
|
+
$[0] = formatDateValue;
|
|
312
|
+
$[1] = props;
|
|
313
|
+
$[2] = t4;
|
|
314
|
+
} else t4 = $[2];
|
|
315
|
+
let t5;
|
|
316
|
+
if ($[3] !== T0 || $[4] !== props || $[5] !== t2 || $[6] !== t3 || $[7] !== t4) {
|
|
317
|
+
t5 = /* @__PURE__ */ jsx(T0, {
|
|
318
|
+
...props,
|
|
319
|
+
ref: t2,
|
|
320
|
+
value: t3,
|
|
321
|
+
onChange: t4
|
|
333
322
|
});
|
|
323
|
+
$[3] = T0;
|
|
324
|
+
$[4] = props;
|
|
325
|
+
$[5] = t2;
|
|
326
|
+
$[6] = t3;
|
|
327
|
+
$[7] = t4;
|
|
328
|
+
$[8] = t5;
|
|
329
|
+
} else t5 = $[8];
|
|
330
|
+
return t5;
|
|
331
|
+
};
|
|
332
|
+
var DateTimePicker = (t0) => {
|
|
333
|
+
const $ = c(24);
|
|
334
|
+
let props;
|
|
335
|
+
let renderStaticInput;
|
|
336
|
+
let t1;
|
|
337
|
+
if ($[0] !== t0) {
|
|
338
|
+
({fullIso: t1, renderStaticInput, ...props} = t0);
|
|
339
|
+
$[0] = t0;
|
|
340
|
+
$[1] = props;
|
|
341
|
+
$[2] = renderStaticInput;
|
|
342
|
+
$[3] = t1;
|
|
343
|
+
} else {
|
|
344
|
+
props = $[1];
|
|
345
|
+
renderStaticInput = $[2];
|
|
346
|
+
t1 = $[3];
|
|
334
347
|
}
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
348
|
+
const fullIso = t1 === void 0 ? true : t1;
|
|
349
|
+
if ("formControl" in props && props.formControl) {
|
|
350
|
+
let formControl;
|
|
351
|
+
let innerProps;
|
|
352
|
+
let ref;
|
|
353
|
+
if ($[4] !== props) {
|
|
354
|
+
({formControl, ref, ...innerProps} = props);
|
|
355
|
+
$[4] = props;
|
|
356
|
+
$[5] = formControl;
|
|
357
|
+
$[6] = innerProps;
|
|
358
|
+
$[7] = ref;
|
|
359
|
+
} else {
|
|
360
|
+
formControl = $[5];
|
|
361
|
+
innerProps = $[6];
|
|
362
|
+
ref = $[7];
|
|
363
|
+
}
|
|
364
|
+
const controlWithOptions = formControl.control;
|
|
365
|
+
let t2;
|
|
366
|
+
if ($[8] !== controlWithOptions._options?.disabled || $[9] !== fullIso || $[10] !== innerProps || $[11] !== props.error || $[12] !== props.isDisabled || $[13] !== ref || $[14] !== renderStaticInput) {
|
|
367
|
+
t2 = (t3) => {
|
|
368
|
+
const { field, fieldState: t4 } = t3;
|
|
369
|
+
const { error, isDirty } = t4;
|
|
370
|
+
return /* @__PURE__ */ jsx(DateTimePickerInner, {
|
|
371
|
+
...innerProps,
|
|
372
|
+
ref: mergeRefs(ref, field.ref),
|
|
373
|
+
value: field.value,
|
|
374
|
+
onChange: field.onChange,
|
|
375
|
+
onBlur: field.onBlur,
|
|
376
|
+
isDirty,
|
|
377
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
378
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
379
|
+
error: props.error ?? error?.message,
|
|
380
|
+
fullIso,
|
|
381
|
+
renderStaticInput
|
|
382
|
+
});
|
|
383
|
+
};
|
|
384
|
+
$[8] = controlWithOptions._options?.disabled;
|
|
385
|
+
$[9] = fullIso;
|
|
386
|
+
$[10] = innerProps;
|
|
387
|
+
$[11] = props.error;
|
|
388
|
+
$[12] = props.isDisabled;
|
|
389
|
+
$[13] = ref;
|
|
390
|
+
$[14] = renderStaticInput;
|
|
391
|
+
$[15] = t2;
|
|
392
|
+
} else t2 = $[15];
|
|
393
|
+
let t3;
|
|
394
|
+
if ($[16] !== formControl.control || $[17] !== formControl.name || $[18] !== t2) {
|
|
395
|
+
t3 = /* @__PURE__ */ jsx(Controller, {
|
|
396
|
+
control: formControl.control,
|
|
397
|
+
name: formControl.name,
|
|
398
|
+
render: t2
|
|
399
|
+
});
|
|
400
|
+
$[16] = formControl.control;
|
|
401
|
+
$[17] = formControl.name;
|
|
402
|
+
$[18] = t2;
|
|
403
|
+
$[19] = t3;
|
|
404
|
+
} else t3 = $[19];
|
|
405
|
+
return t3;
|
|
406
|
+
}
|
|
407
|
+
let t2;
|
|
408
|
+
if ($[20] !== fullIso || $[21] !== props || $[22] !== renderStaticInput) {
|
|
409
|
+
t2 = /* @__PURE__ */ jsx(DateTimePickerInner, {
|
|
410
|
+
...props,
|
|
411
|
+
fullIso,
|
|
412
|
+
renderStaticInput
|
|
413
|
+
});
|
|
414
|
+
$[20] = fullIso;
|
|
415
|
+
$[21] = props;
|
|
416
|
+
$[22] = renderStaticInput;
|
|
417
|
+
$[23] = t2;
|
|
418
|
+
} else t2 = $[23];
|
|
419
|
+
return t2;
|
|
341
420
|
};
|
|
421
|
+
function _temp(input) {
|
|
422
|
+
const container = input.getContainer?.() ?? input;
|
|
423
|
+
return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
|
|
424
|
+
}
|
|
425
|
+
function _temp2(dateValue) {
|
|
426
|
+
if (dateValue === null) return null;
|
|
427
|
+
return DateTimeUtils.fromDateValueFieldsToUTCISO(dateValue);
|
|
428
|
+
}
|
|
429
|
+
function _temp3(isoString) {
|
|
430
|
+
if (isoString == null) return isoString;
|
|
431
|
+
return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, "UTC");
|
|
432
|
+
}
|
|
342
433
|
//#endregion
|
|
343
434
|
export { DateTimePicker };
|
|
@@ -16,7 +16,7 @@ import { clsx } from "clsx";
|
|
|
16
16
|
import { useEffect, useRef, useState } from "react";
|
|
17
17
|
import { useLocale, useTimeField } from "react-aria";
|
|
18
18
|
import { mergeRefs } from "@react-aria/utils";
|
|
19
|
-
import { Controller
|
|
19
|
+
import { Controller } from "react-hook-form";
|
|
20
20
|
import { now, toTime } from "@internationalized/date";
|
|
21
21
|
import { DateTime } from "luxon";
|
|
22
22
|
import { useTimeFieldState } from "react-stately";
|
|
@@ -421,9 +421,10 @@ var TimePickerBase = (props) => {
|
|
|
421
421
|
} else t24 = $[132];
|
|
422
422
|
return t24;
|
|
423
423
|
};
|
|
424
|
-
var
|
|
424
|
+
var TimePickerInner = (t0) => {
|
|
425
|
+
const $ = c(9);
|
|
426
|
+
const { renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
425
427
|
const ui = UIConfig.useConfig();
|
|
426
|
-
const effectiveTimeZone = "UTC";
|
|
427
428
|
const { locale } = useLocale();
|
|
428
429
|
const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
|
|
429
430
|
const inputRef = useRef(null);
|
|
@@ -431,28 +432,19 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
|
|
|
431
432
|
inputRef,
|
|
432
433
|
renderInput,
|
|
433
434
|
setRenderInput,
|
|
434
|
-
getFocusTarget:
|
|
435
|
+
getFocusTarget: _temp
|
|
435
436
|
});
|
|
436
|
-
const
|
|
437
|
-
control: props.formControl.control,
|
|
438
|
-
name: props.formControl.name
|
|
439
|
-
}) : props.value;
|
|
440
|
-
let isFormControlDisabled = false;
|
|
441
|
-
if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
|
|
442
|
-
const rawValue = watchedValue ?? props.value ?? null;
|
|
437
|
+
const rawValue = props.value ?? null;
|
|
443
438
|
const formatTimeValue = (timeValue) => {
|
|
444
439
|
if (timeValue === null) return null;
|
|
445
440
|
let parsedDate;
|
|
446
|
-
if (props.date) parsedDate = DateTime.fromISO(props.date, { zone:
|
|
447
|
-
let dateValue = now(
|
|
448
|
-
if (parsedDate) dateValue = DateTimeUtils.fromLocalToZonedDateTime(parsedDate,
|
|
441
|
+
if (props.date) parsedDate = DateTime.fromISO(props.date, { zone: "UTC" }).toJSDate();
|
|
442
|
+
let dateValue = now("UTC");
|
|
443
|
+
if (parsedDate) dateValue = DateTimeUtils.fromLocalToZonedDateTime(parsedDate, "UTC");
|
|
449
444
|
const dateTimeValue = dateValue.set(timeValue);
|
|
450
|
-
return DateTimeUtils.fromDateValueToISO(dateTimeValue,
|
|
451
|
-
};
|
|
452
|
-
const parseTimeValue = (isoString) => {
|
|
453
|
-
if (isoString == null) return isoString;
|
|
454
|
-
return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, effectiveTimeZone));
|
|
445
|
+
return DateTimeUtils.fromDateValueToISO(dateTimeValue, "UTC");
|
|
455
446
|
};
|
|
447
|
+
const parseTimeValue = _temp2;
|
|
456
448
|
if (!renderInput) {
|
|
457
449
|
const timeValue_0 = rawValue ? parseTimeValue(rawValue) : null;
|
|
458
450
|
const as = props.as ?? ui.input.as;
|
|
@@ -490,29 +482,120 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
|
|
|
490
482
|
children: staticSegments
|
|
491
483
|
});
|
|
492
484
|
}
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
485
|
+
const T0 = TimePickerBase;
|
|
486
|
+
const t1 = mergeRefs(props.ref, inputRef);
|
|
487
|
+
const t2 = parseTimeValue(props.value);
|
|
488
|
+
let t3;
|
|
489
|
+
if ($[0] !== formatTimeValue || $[1] !== props) {
|
|
490
|
+
t3 = (value) => props.onChange?.(formatTimeValue(value));
|
|
491
|
+
$[0] = formatTimeValue;
|
|
492
|
+
$[1] = props;
|
|
493
|
+
$[2] = t3;
|
|
494
|
+
} else t3 = $[2];
|
|
495
|
+
let t4;
|
|
496
|
+
if ($[3] !== T0 || $[4] !== props || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
|
|
497
|
+
t4 = /* @__PURE__ */ jsx(T0, {
|
|
498
|
+
...props,
|
|
499
|
+
ref: t1,
|
|
500
|
+
value: t2,
|
|
501
|
+
onChange: t3
|
|
508
502
|
});
|
|
503
|
+
$[3] = T0;
|
|
504
|
+
$[4] = props;
|
|
505
|
+
$[5] = t1;
|
|
506
|
+
$[6] = t2;
|
|
507
|
+
$[7] = t3;
|
|
508
|
+
$[8] = t4;
|
|
509
|
+
} else t4 = $[8];
|
|
510
|
+
return t4;
|
|
511
|
+
};
|
|
512
|
+
var TimePicker = (t0) => {
|
|
513
|
+
const $ = c(21);
|
|
514
|
+
let props;
|
|
515
|
+
let renderStaticInput;
|
|
516
|
+
if ($[0] !== t0) {
|
|
517
|
+
({renderStaticInput, ...props} = t0);
|
|
518
|
+
$[0] = t0;
|
|
519
|
+
$[1] = props;
|
|
520
|
+
$[2] = renderStaticInput;
|
|
521
|
+
} else {
|
|
522
|
+
props = $[1];
|
|
523
|
+
renderStaticInput = $[2];
|
|
509
524
|
}
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
525
|
+
if ("formControl" in props && props.formControl) {
|
|
526
|
+
let formControl;
|
|
527
|
+
let innerProps;
|
|
528
|
+
let ref;
|
|
529
|
+
if ($[3] !== props) {
|
|
530
|
+
({formControl, ref, ...innerProps} = props);
|
|
531
|
+
$[3] = props;
|
|
532
|
+
$[4] = formControl;
|
|
533
|
+
$[5] = innerProps;
|
|
534
|
+
$[6] = ref;
|
|
535
|
+
} else {
|
|
536
|
+
formControl = $[4];
|
|
537
|
+
innerProps = $[5];
|
|
538
|
+
ref = $[6];
|
|
539
|
+
}
|
|
540
|
+
const controlWithOptions = formControl.control;
|
|
541
|
+
let t1;
|
|
542
|
+
if ($[7] !== controlWithOptions._options?.disabled || $[8] !== innerProps || $[9] !== props.error || $[10] !== props.isDisabled || $[11] !== ref || $[12] !== renderStaticInput) {
|
|
543
|
+
t1 = (t2) => {
|
|
544
|
+
const { field, fieldState: t3 } = t2;
|
|
545
|
+
const { error, isDirty } = t3;
|
|
546
|
+
return /* @__PURE__ */ jsx(TimePickerInner, {
|
|
547
|
+
...innerProps,
|
|
548
|
+
ref: mergeRefs(ref, field.ref),
|
|
549
|
+
value: field.value,
|
|
550
|
+
onChange: field.onChange,
|
|
551
|
+
onBlur: field.onBlur,
|
|
552
|
+
isDirty,
|
|
553
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
554
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
555
|
+
error: props.error ?? error?.message,
|
|
556
|
+
renderStaticInput
|
|
557
|
+
});
|
|
558
|
+
};
|
|
559
|
+
$[7] = controlWithOptions._options?.disabled;
|
|
560
|
+
$[8] = innerProps;
|
|
561
|
+
$[9] = props.error;
|
|
562
|
+
$[10] = props.isDisabled;
|
|
563
|
+
$[11] = ref;
|
|
564
|
+
$[12] = renderStaticInput;
|
|
565
|
+
$[13] = t1;
|
|
566
|
+
} else t1 = $[13];
|
|
567
|
+
let t2;
|
|
568
|
+
if ($[14] !== formControl.control || $[15] !== formControl.name || $[16] !== t1) {
|
|
569
|
+
t2 = /* @__PURE__ */ jsx(Controller, {
|
|
570
|
+
control: formControl.control,
|
|
571
|
+
name: formControl.name,
|
|
572
|
+
render: t1
|
|
573
|
+
});
|
|
574
|
+
$[14] = formControl.control;
|
|
575
|
+
$[15] = formControl.name;
|
|
576
|
+
$[16] = t1;
|
|
577
|
+
$[17] = t2;
|
|
578
|
+
} else t2 = $[17];
|
|
579
|
+
return t2;
|
|
580
|
+
}
|
|
581
|
+
let t1;
|
|
582
|
+
if ($[18] !== props || $[19] !== renderStaticInput) {
|
|
583
|
+
t1 = /* @__PURE__ */ jsx(TimePickerInner, {
|
|
584
|
+
...props,
|
|
585
|
+
renderStaticInput
|
|
586
|
+
});
|
|
587
|
+
$[18] = props;
|
|
588
|
+
$[19] = renderStaticInput;
|
|
589
|
+
$[20] = t1;
|
|
590
|
+
} else t1 = $[20];
|
|
591
|
+
return t1;
|
|
516
592
|
};
|
|
593
|
+
function _temp(input) {
|
|
594
|
+
return input.querySelector("input, button, [tabindex]:not([tabindex='-1'])");
|
|
595
|
+
}
|
|
596
|
+
function _temp2(isoString) {
|
|
597
|
+
if (isoString == null) return isoString;
|
|
598
|
+
return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, "UTC"));
|
|
599
|
+
}
|
|
517
600
|
//#endregion
|
|
518
601
|
export { TimePicker };
|
|
@@ -14,7 +14,7 @@ import { useEffect, useRef, useState } from "react";
|
|
|
14
14
|
import { Input, useLocale } from "react-aria-components";
|
|
15
15
|
import { useFocusVisible, useNumberField } from "react-aria";
|
|
16
16
|
import { mergeRefs } from "@react-aria/utils";
|
|
17
|
-
import { Controller
|
|
17
|
+
import { Controller } from "react-hook-form";
|
|
18
18
|
import { useNumberFieldState } from "react-stately";
|
|
19
19
|
//#region src/components/inputs/Input/NumberInput/NumberInput.tsx
|
|
20
20
|
var NumberInputBase = (props) => {
|
|
@@ -305,24 +305,26 @@ var NumberInputBase = (props) => {
|
|
|
305
305
|
} else t28 = $[86];
|
|
306
306
|
return t28;
|
|
307
307
|
};
|
|
308
|
-
var
|
|
308
|
+
var NumberInputInner = (t0) => {
|
|
309
|
+
const $ = c(10);
|
|
310
|
+
const { renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
309
311
|
const ui = UIConfig.useConfig();
|
|
310
312
|
const { locale } = useLocale();
|
|
311
313
|
const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
|
|
312
314
|
const inputRef = useRef(null);
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
315
|
+
let t1;
|
|
316
|
+
if ($[0] !== renderInput) {
|
|
317
|
+
t1 = {
|
|
318
|
+
inputRef,
|
|
319
|
+
renderInput,
|
|
320
|
+
setRenderInput
|
|
321
|
+
};
|
|
322
|
+
$[0] = renderInput;
|
|
323
|
+
$[1] = t1;
|
|
324
|
+
} else t1 = $[1];
|
|
325
|
+
const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff(t1);
|
|
324
326
|
if (!renderInput) {
|
|
325
|
-
const staticValue =
|
|
327
|
+
const staticValue = props.value ?? props.defaultValue;
|
|
326
328
|
const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
|
|
327
329
|
const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
|
|
328
330
|
const hasValue = displayValue !== "";
|
|
@@ -339,15 +341,25 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
|
|
|
339
341
|
dataInvalid: !!props.error,
|
|
340
342
|
dataHasSelection: hasValue
|
|
341
343
|
};
|
|
344
|
+
const t2 = isDisabled;
|
|
345
|
+
const t3 = clsx("group w-full", as === "inline" && "h-full", props.className);
|
|
346
|
+
const t4 = props.inputClassName;
|
|
347
|
+
const t5 = as === "inline" && "h-full";
|
|
348
|
+
let t6;
|
|
349
|
+
if ($[2] !== t5) {
|
|
350
|
+
t6 = clsx(t5, "pr-0!");
|
|
351
|
+
$[2] = t5;
|
|
352
|
+
$[3] = t6;
|
|
353
|
+
} else t6 = $[3];
|
|
342
354
|
return /* @__PURE__ */ jsx(InputFrame, {
|
|
343
355
|
...props,
|
|
344
|
-
isDisabled,
|
|
345
|
-
className:
|
|
356
|
+
isDisabled: t2,
|
|
357
|
+
className: t3,
|
|
346
358
|
dataAttributes,
|
|
347
359
|
renderStatic: true,
|
|
348
360
|
onStaticInteract: renderRealInput,
|
|
349
|
-
inputClassName:
|
|
350
|
-
contentClassName:
|
|
361
|
+
inputClassName: t4,
|
|
362
|
+
contentClassName: t6,
|
|
351
363
|
trailingClassName: "py-0! pl-0!",
|
|
352
364
|
wrapContentAndTrailing: true,
|
|
353
365
|
children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
|
|
@@ -365,29 +377,105 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
|
|
|
365
377
|
})
|
|
366
378
|
});
|
|
367
379
|
}
|
|
380
|
+
const T0 = NumberInputBase;
|
|
381
|
+
const t2 = props.value === null || props.value === void 0 ? "empty" : "filled";
|
|
382
|
+
const t3 = mergeRefs(props.ref, inputRef);
|
|
383
|
+
let t4;
|
|
384
|
+
if ($[4] !== T0 || $[5] !== props || $[6] !== shouldFocus || $[7] !== t2 || $[8] !== t3) {
|
|
385
|
+
t4 = /* @__PURE__ */ jsx(T0, {
|
|
386
|
+
...props,
|
|
387
|
+
ref: t3,
|
|
388
|
+
autoFocusOnMount: shouldFocus
|
|
389
|
+
}, t2);
|
|
390
|
+
$[4] = T0;
|
|
391
|
+
$[5] = props;
|
|
392
|
+
$[6] = shouldFocus;
|
|
393
|
+
$[7] = t2;
|
|
394
|
+
$[8] = t3;
|
|
395
|
+
$[9] = t4;
|
|
396
|
+
} else t4 = $[9];
|
|
397
|
+
return t4;
|
|
398
|
+
};
|
|
399
|
+
var NumberInput = (t0) => {
|
|
400
|
+
const $ = c(21);
|
|
401
|
+
let props;
|
|
402
|
+
let renderStaticInput;
|
|
403
|
+
if ($[0] !== t0) {
|
|
404
|
+
({renderStaticInput, ...props} = t0);
|
|
405
|
+
$[0] = t0;
|
|
406
|
+
$[1] = props;
|
|
407
|
+
$[2] = renderStaticInput;
|
|
408
|
+
} else {
|
|
409
|
+
props = $[1];
|
|
410
|
+
renderStaticInput = $[2];
|
|
411
|
+
}
|
|
368
412
|
if ("formControl" in props && props.formControl) {
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
413
|
+
let formControl;
|
|
414
|
+
let innerProps;
|
|
415
|
+
let ref;
|
|
416
|
+
if ($[3] !== props) {
|
|
417
|
+
({formControl, ref, ...innerProps} = props);
|
|
418
|
+
$[3] = props;
|
|
419
|
+
$[4] = formControl;
|
|
420
|
+
$[5] = innerProps;
|
|
421
|
+
$[6] = ref;
|
|
422
|
+
} else {
|
|
423
|
+
formControl = $[4];
|
|
424
|
+
innerProps = $[5];
|
|
425
|
+
ref = $[6];
|
|
426
|
+
}
|
|
427
|
+
const controlWithOptions = formControl.control;
|
|
428
|
+
let t1;
|
|
429
|
+
if ($[7] !== controlWithOptions._options?.disabled || $[8] !== innerProps || $[9] !== props.error || $[10] !== props.isDisabled || $[11] !== ref || $[12] !== renderStaticInput) {
|
|
430
|
+
t1 = (t2) => {
|
|
431
|
+
const { field, fieldState: t3 } = t2;
|
|
432
|
+
const { error, isDirty } = t3;
|
|
433
|
+
return /* @__PURE__ */ jsx(NumberInputInner, {
|
|
434
|
+
...innerProps,
|
|
435
|
+
ref: mergeRefs(ref, field.ref),
|
|
436
|
+
value: field.value,
|
|
437
|
+
onChange: field.onChange,
|
|
438
|
+
onBlur: field.onBlur,
|
|
439
|
+
isDirty,
|
|
440
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
441
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
442
|
+
error: props.error ?? error?.message,
|
|
443
|
+
renderStaticInput
|
|
444
|
+
});
|
|
445
|
+
};
|
|
446
|
+
$[7] = controlWithOptions._options?.disabled;
|
|
447
|
+
$[8] = innerProps;
|
|
448
|
+
$[9] = props.error;
|
|
449
|
+
$[10] = props.isDisabled;
|
|
450
|
+
$[11] = ref;
|
|
451
|
+
$[12] = renderStaticInput;
|
|
452
|
+
$[13] = t1;
|
|
453
|
+
} else t1 = $[13];
|
|
454
|
+
let t2;
|
|
455
|
+
if ($[14] !== formControl.control || $[15] !== formControl.name || $[16] !== t1) {
|
|
456
|
+
t2 = /* @__PURE__ */ jsx(Controller, {
|
|
457
|
+
control: formControl.control,
|
|
458
|
+
name: formControl.name,
|
|
459
|
+
render: t1
|
|
460
|
+
});
|
|
461
|
+
$[14] = formControl.control;
|
|
462
|
+
$[15] = formControl.name;
|
|
463
|
+
$[16] = t1;
|
|
464
|
+
$[17] = t2;
|
|
465
|
+
} else t2 = $[17];
|
|
466
|
+
return t2;
|
|
385
467
|
}
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
468
|
+
let t1;
|
|
469
|
+
if ($[18] !== props || $[19] !== renderStaticInput) {
|
|
470
|
+
t1 = /* @__PURE__ */ jsx(NumberInputInner, {
|
|
471
|
+
...props,
|
|
472
|
+
renderStaticInput
|
|
473
|
+
});
|
|
474
|
+
$[18] = props;
|
|
475
|
+
$[19] = renderStaticInput;
|
|
476
|
+
$[20] = t1;
|
|
477
|
+
} else t1 = $[20];
|
|
478
|
+
return t1;
|
|
391
479
|
};
|
|
392
480
|
//#endregion
|
|
393
481
|
export { NumberInput };
|