@povio/ui 2.3.0-rc.20 → 2.3.0-rc.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.
- 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 +125 -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
|
@@ -12,7 +12,7 @@ import { clsx } from "clsx";
|
|
|
12
12
|
import { useRef, useState } from "react";
|
|
13
13
|
import { useLocale } from "react-aria-components";
|
|
14
14
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
15
|
-
import { Controller
|
|
15
|
+
import { Controller } from "react-hook-form";
|
|
16
16
|
//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
|
|
17
17
|
var EMPTY_RANGE = {
|
|
18
18
|
min: null,
|
|
@@ -358,24 +358,27 @@ var NumberRangeInputBase = (props) => {
|
|
|
358
358
|
} else t17 = $[113];
|
|
359
359
|
return t17;
|
|
360
360
|
};
|
|
361
|
-
var
|
|
361
|
+
var NumberRangeInputInner = (t0) => {
|
|
362
|
+
const $ = c(5);
|
|
363
|
+
const { renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
362
364
|
const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
|
|
363
365
|
const ui = UIConfig.useConfig();
|
|
364
366
|
const { locale } = useLocale();
|
|
365
367
|
const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
|
|
366
|
-
const
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
368
|
+
const inputRef = useRef(null);
|
|
369
|
+
let t1;
|
|
370
|
+
if ($[0] !== renderInput) {
|
|
371
|
+
t1 = {
|
|
372
|
+
inputRef,
|
|
373
|
+
renderInput,
|
|
374
|
+
setRenderInput
|
|
375
|
+
};
|
|
376
|
+
$[0] = renderInput;
|
|
377
|
+
$[1] = t1;
|
|
378
|
+
} else t1 = $[1];
|
|
379
|
+
const { shouldFocus, renderRealInput } = useStaticInputHandoff(t1);
|
|
377
380
|
if (!renderInput) {
|
|
378
|
-
const staticValue = normalizeRangeValue(
|
|
381
|
+
const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
|
|
379
382
|
const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
|
|
380
383
|
const formatter = new Intl.NumberFormat(locale, formatOptions);
|
|
381
384
|
const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
|
|
@@ -415,65 +418,135 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
|
|
|
415
418
|
onStaticInteract: renderRealInput,
|
|
416
419
|
isClearable: false,
|
|
417
420
|
labelPlacement: "content-wrapper",
|
|
418
|
-
children: (
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
421
|
+
children: (t2) => {
|
|
422
|
+
const { id, ...dataAttributeProps } = t2;
|
|
423
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
424
|
+
/* @__PURE__ */ jsx("input", {
|
|
425
|
+
id,
|
|
426
|
+
readOnly: true,
|
|
427
|
+
disabled: isDisabled,
|
|
428
|
+
tabIndex: -1,
|
|
429
|
+
value: minDisplay ?? "",
|
|
430
|
+
placeholder: props.minPlaceholder ?? "Min",
|
|
431
|
+
className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.minInputClassName),
|
|
432
|
+
...dataAttributeProps,
|
|
433
|
+
"data-rac": true
|
|
434
|
+
}),
|
|
435
|
+
isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
436
|
+
onClear: _temp,
|
|
437
|
+
renderStatic: true
|
|
438
|
+
}),
|
|
439
|
+
/* @__PURE__ */ jsx("span", {
|
|
440
|
+
className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
|
|
441
|
+
children: "-"
|
|
442
|
+
}),
|
|
443
|
+
/* @__PURE__ */ jsx("input", {
|
|
444
|
+
id: `${id}-max`,
|
|
445
|
+
readOnly: true,
|
|
446
|
+
disabled: isDisabled,
|
|
447
|
+
tabIndex: -1,
|
|
448
|
+
value: maxDisplay ?? "",
|
|
449
|
+
placeholder: props.maxPlaceholder ?? "Max",
|
|
450
|
+
className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.maxInputClassName),
|
|
451
|
+
...dataAttributeProps,
|
|
452
|
+
"data-rac": true
|
|
453
|
+
}),
|
|
454
|
+
isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
455
|
+
onClear: _temp2,
|
|
456
|
+
renderStatic: true
|
|
457
|
+
})
|
|
458
|
+
] });
|
|
459
|
+
}
|
|
454
460
|
});
|
|
455
461
|
}
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberRangeInputBase, {
|
|
462
|
-
...innerProps,
|
|
463
|
-
ref,
|
|
464
|
-
value: field.value ?? EMPTY_RANGE,
|
|
465
|
-
onChange: field.onChange,
|
|
466
|
-
onBlur: field.onBlur,
|
|
467
|
-
isDisabled: field.disabled || props.isDisabled,
|
|
468
|
-
error: props.error ?? error?.message,
|
|
469
|
-
autoFocusOnMount: shouldFocus
|
|
470
|
-
})
|
|
462
|
+
let t2;
|
|
463
|
+
if ($[2] !== props || $[3] !== shouldFocus) {
|
|
464
|
+
t2 = /* @__PURE__ */ jsx(NumberRangeInputBase, {
|
|
465
|
+
...props,
|
|
466
|
+
autoFocusOnMount: shouldFocus
|
|
471
467
|
});
|
|
468
|
+
$[2] = props;
|
|
469
|
+
$[3] = shouldFocus;
|
|
470
|
+
$[4] = t2;
|
|
471
|
+
} else t2 = $[4];
|
|
472
|
+
return t2;
|
|
473
|
+
};
|
|
474
|
+
var NumberRangeInput = (t0) => {
|
|
475
|
+
const $ = c(19);
|
|
476
|
+
let props;
|
|
477
|
+
let renderStaticInput;
|
|
478
|
+
if ($[0] !== t0) {
|
|
479
|
+
({renderStaticInput, ...props} = t0);
|
|
480
|
+
$[0] = t0;
|
|
481
|
+
$[1] = props;
|
|
482
|
+
$[2] = renderStaticInput;
|
|
483
|
+
} else {
|
|
484
|
+
props = $[1];
|
|
485
|
+
renderStaticInput = $[2];
|
|
472
486
|
}
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
487
|
+
if ("formControl" in props && props.formControl) {
|
|
488
|
+
let formControl;
|
|
489
|
+
let innerProps;
|
|
490
|
+
if ($[3] !== props) {
|
|
491
|
+
({formControl, ...innerProps} = props);
|
|
492
|
+
$[3] = props;
|
|
493
|
+
$[4] = formControl;
|
|
494
|
+
$[5] = innerProps;
|
|
495
|
+
} else {
|
|
496
|
+
formControl = $[4];
|
|
497
|
+
innerProps = $[5];
|
|
498
|
+
}
|
|
499
|
+
const controlWithOptions = formControl.control;
|
|
500
|
+
let t1;
|
|
501
|
+
if ($[6] !== controlWithOptions._options?.disabled || $[7] !== innerProps || $[8] !== props.error || $[9] !== props.isDisabled || $[10] !== renderStaticInput) {
|
|
502
|
+
t1 = (t2) => {
|
|
503
|
+
const { field, fieldState: t3 } = t2;
|
|
504
|
+
const { error } = t3;
|
|
505
|
+
return /* @__PURE__ */ jsx(NumberRangeInputInner, {
|
|
506
|
+
...innerProps,
|
|
507
|
+
value: field.value ?? EMPTY_RANGE,
|
|
508
|
+
onChange: field.onChange,
|
|
509
|
+
onBlur: field.onBlur,
|
|
510
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
511
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
512
|
+
error: props.error ?? error?.message,
|
|
513
|
+
renderStaticInput
|
|
514
|
+
});
|
|
515
|
+
};
|
|
516
|
+
$[6] = controlWithOptions._options?.disabled;
|
|
517
|
+
$[7] = innerProps;
|
|
518
|
+
$[8] = props.error;
|
|
519
|
+
$[9] = props.isDisabled;
|
|
520
|
+
$[10] = renderStaticInput;
|
|
521
|
+
$[11] = t1;
|
|
522
|
+
} else t1 = $[11];
|
|
523
|
+
let t2;
|
|
524
|
+
if ($[12] !== formControl.control || $[13] !== formControl.name || $[14] !== t1) {
|
|
525
|
+
t2 = /* @__PURE__ */ jsx(Controller, {
|
|
526
|
+
control: formControl.control,
|
|
527
|
+
name: formControl.name,
|
|
528
|
+
render: t1
|
|
529
|
+
});
|
|
530
|
+
$[12] = formControl.control;
|
|
531
|
+
$[13] = formControl.name;
|
|
532
|
+
$[14] = t1;
|
|
533
|
+
$[15] = t2;
|
|
534
|
+
} else t2 = $[15];
|
|
535
|
+
return t2;
|
|
536
|
+
}
|
|
537
|
+
let t1;
|
|
538
|
+
if ($[16] !== props || $[17] !== renderStaticInput) {
|
|
539
|
+
t1 = /* @__PURE__ */ jsx(NumberRangeInputInner, {
|
|
540
|
+
...props,
|
|
541
|
+
renderStaticInput
|
|
542
|
+
});
|
|
543
|
+
$[16] = props;
|
|
544
|
+
$[17] = renderStaticInput;
|
|
545
|
+
$[18] = t1;
|
|
546
|
+
} else t1 = $[18];
|
|
547
|
+
return t1;
|
|
477
548
|
};
|
|
549
|
+
function _temp() {}
|
|
550
|
+
function _temp2() {}
|
|
478
551
|
//#endregion
|
|
479
552
|
export { NumberRangeInput };
|
|
@@ -13,7 +13,7 @@ import { useEffect, useRef, useState } from "react";
|
|
|
13
13
|
import { Input } from "react-aria-components";
|
|
14
14
|
import { useFocusVisible, useTextField } from "react-aria";
|
|
15
15
|
import { mergeRefs } from "@react-aria/utils";
|
|
16
|
-
import { Controller
|
|
16
|
+
import { Controller } from "react-hook-form";
|
|
17
17
|
//#region src/components/inputs/Input/TextInput/TextInput.tsx
|
|
18
18
|
var TextInputBase = (props) => {
|
|
19
19
|
const $ = c(84);
|
|
@@ -285,22 +285,24 @@ var TextInputBase = (props) => {
|
|
|
285
285
|
} else t28 = $[83];
|
|
286
286
|
return t28;
|
|
287
287
|
};
|
|
288
|
-
var
|
|
288
|
+
var TextInputInner = (t0) => {
|
|
289
|
+
const $ = c(9);
|
|
290
|
+
const { renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
289
291
|
const ui = UIConfig.useConfig();
|
|
290
292
|
const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
|
|
291
293
|
const inputRef = useRef(null);
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
const staticValue =
|
|
294
|
+
let t1;
|
|
295
|
+
if ($[0] !== renderInput) {
|
|
296
|
+
t1 = {
|
|
297
|
+
inputRef,
|
|
298
|
+
renderInput,
|
|
299
|
+
setRenderInput
|
|
300
|
+
};
|
|
301
|
+
$[0] = renderInput;
|
|
302
|
+
$[1] = t1;
|
|
303
|
+
} else t1 = $[1];
|
|
304
|
+
const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff(t1);
|
|
305
|
+
const staticValue = props.value ?? props.defaultValue ?? "";
|
|
304
306
|
const inputType = props.type;
|
|
305
307
|
if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
|
|
306
308
|
if (!renderInput) {
|
|
@@ -320,15 +322,25 @@ var TextInput = ({ renderStaticInput, ...props }) => {
|
|
|
320
322
|
dataInvalid: !!props.error,
|
|
321
323
|
dataHasSelection: hasValue
|
|
322
324
|
};
|
|
325
|
+
const t2 = isDisabled;
|
|
326
|
+
const t3 = clsx("group w-full", as === "inline" && "h-full", props.className);
|
|
327
|
+
const t4 = props.inputClassName;
|
|
328
|
+
const t5 = as === "inline" && "h-full";
|
|
329
|
+
let t6;
|
|
330
|
+
if ($[2] !== t5) {
|
|
331
|
+
t6 = clsx(t5, "pr-0!");
|
|
332
|
+
$[2] = t5;
|
|
333
|
+
$[3] = t6;
|
|
334
|
+
} else t6 = $[3];
|
|
323
335
|
return /* @__PURE__ */ jsx(InputFrame, {
|
|
324
336
|
...props,
|
|
325
|
-
isDisabled,
|
|
326
|
-
className:
|
|
337
|
+
isDisabled: t2,
|
|
338
|
+
className: t3,
|
|
327
339
|
dataAttributes,
|
|
328
340
|
renderStatic: true,
|
|
329
341
|
onStaticInteract: renderRealInput,
|
|
330
|
-
inputClassName:
|
|
331
|
-
contentClassName:
|
|
342
|
+
inputClassName: t4,
|
|
343
|
+
contentClassName: t6,
|
|
332
344
|
trailingClassName: "py-0! pl-0!",
|
|
333
345
|
wrapContentAndTrailing: true,
|
|
334
346
|
children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
|
|
@@ -345,29 +357,103 @@ var TextInput = ({ renderStaticInput, ...props }) => {
|
|
|
345
357
|
})
|
|
346
358
|
});
|
|
347
359
|
}
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
value: field.value,
|
|
357
|
-
onChange: field.onChange,
|
|
358
|
-
onBlur: field.onBlur,
|
|
359
|
-
isDirty,
|
|
360
|
-
isDisabled: field.disabled || props.isDisabled,
|
|
361
|
-
error: props.error ?? error?.message,
|
|
362
|
-
autoFocusOnMount: shouldFocus
|
|
363
|
-
})
|
|
360
|
+
const T0 = TextInputBase;
|
|
361
|
+
const t2 = mergeRefs(props.ref, inputRef);
|
|
362
|
+
let t3;
|
|
363
|
+
if ($[4] !== T0 || $[5] !== props || $[6] !== shouldFocus || $[7] !== t2) {
|
|
364
|
+
t3 = /* @__PURE__ */ jsx(T0, {
|
|
365
|
+
...props,
|
|
366
|
+
ref: t2,
|
|
367
|
+
autoFocusOnMount: shouldFocus
|
|
364
368
|
});
|
|
369
|
+
$[4] = T0;
|
|
370
|
+
$[5] = props;
|
|
371
|
+
$[6] = shouldFocus;
|
|
372
|
+
$[7] = t2;
|
|
373
|
+
$[8] = t3;
|
|
374
|
+
} else t3 = $[8];
|
|
375
|
+
return t3;
|
|
376
|
+
};
|
|
377
|
+
var TextInput = (t0) => {
|
|
378
|
+
const $ = c(21);
|
|
379
|
+
let props;
|
|
380
|
+
let renderStaticInput;
|
|
381
|
+
if ($[0] !== t0) {
|
|
382
|
+
({renderStaticInput, ...props} = t0);
|
|
383
|
+
$[0] = t0;
|
|
384
|
+
$[1] = props;
|
|
385
|
+
$[2] = renderStaticInput;
|
|
386
|
+
} else {
|
|
387
|
+
props = $[1];
|
|
388
|
+
renderStaticInput = $[2];
|
|
389
|
+
}
|
|
390
|
+
if ("formControl" in props && props.formControl) {
|
|
391
|
+
let formControl;
|
|
392
|
+
let innerProps;
|
|
393
|
+
let ref;
|
|
394
|
+
if ($[3] !== props) {
|
|
395
|
+
({formControl, ref, ...innerProps} = props);
|
|
396
|
+
$[3] = props;
|
|
397
|
+
$[4] = formControl;
|
|
398
|
+
$[5] = innerProps;
|
|
399
|
+
$[6] = ref;
|
|
400
|
+
} else {
|
|
401
|
+
formControl = $[4];
|
|
402
|
+
innerProps = $[5];
|
|
403
|
+
ref = $[6];
|
|
404
|
+
}
|
|
405
|
+
const controlWithOptions = formControl.control;
|
|
406
|
+
let t1;
|
|
407
|
+
if ($[7] !== controlWithOptions._options?.disabled || $[8] !== innerProps || $[9] !== props.error || $[10] !== props.isDisabled || $[11] !== ref || $[12] !== renderStaticInput) {
|
|
408
|
+
t1 = (t2) => {
|
|
409
|
+
const { field, fieldState: t3 } = t2;
|
|
410
|
+
const { error, isDirty } = t3;
|
|
411
|
+
return /* @__PURE__ */ jsx(TextInputInner, {
|
|
412
|
+
...innerProps,
|
|
413
|
+
ref: mergeRefs(ref, field.ref),
|
|
414
|
+
value: field.value,
|
|
415
|
+
onChange: field.onChange,
|
|
416
|
+
onBlur: field.onBlur,
|
|
417
|
+
isDirty,
|
|
418
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
419
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
420
|
+
error: props.error ?? error?.message,
|
|
421
|
+
renderStaticInput
|
|
422
|
+
});
|
|
423
|
+
};
|
|
424
|
+
$[7] = controlWithOptions._options?.disabled;
|
|
425
|
+
$[8] = innerProps;
|
|
426
|
+
$[9] = props.error;
|
|
427
|
+
$[10] = props.isDisabled;
|
|
428
|
+
$[11] = ref;
|
|
429
|
+
$[12] = renderStaticInput;
|
|
430
|
+
$[13] = t1;
|
|
431
|
+
} else t1 = $[13];
|
|
432
|
+
let t2;
|
|
433
|
+
if ($[14] !== formControl.control || $[15] !== formControl.name || $[16] !== t1) {
|
|
434
|
+
t2 = /* @__PURE__ */ jsx(Controller, {
|
|
435
|
+
control: formControl.control,
|
|
436
|
+
name: formControl.name,
|
|
437
|
+
render: t1
|
|
438
|
+
});
|
|
439
|
+
$[14] = formControl.control;
|
|
440
|
+
$[15] = formControl.name;
|
|
441
|
+
$[16] = t1;
|
|
442
|
+
$[17] = t2;
|
|
443
|
+
} else t2 = $[17];
|
|
444
|
+
return t2;
|
|
365
445
|
}
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
446
|
+
let t1;
|
|
447
|
+
if ($[18] !== props || $[19] !== renderStaticInput) {
|
|
448
|
+
t1 = /* @__PURE__ */ jsx(TextInputInner, {
|
|
449
|
+
...props,
|
|
450
|
+
renderStaticInput
|
|
451
|
+
});
|
|
452
|
+
$[18] = props;
|
|
453
|
+
$[19] = renderStaticInput;
|
|
454
|
+
$[20] = t1;
|
|
455
|
+
} else t1 = $[20];
|
|
456
|
+
return t1;
|
|
371
457
|
};
|
|
372
458
|
//#endregion
|
|
373
459
|
export { TextInput };
|
|
@@ -19,7 +19,7 @@ declare const componentRegistry: {
|
|
|
19
19
|
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso
|
|
22
|
+
readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
24
24
|
readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
25
25
|
readonly unknown: null;
|
|
@@ -5,53 +5,32 @@ import { selectInputTagsContentWrapperCva } from "../shared/selectInput.cva.js";
|
|
|
5
5
|
import { SelectBase } from "../shared/SelectBase.js";
|
|
6
6
|
import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
|
|
7
7
|
import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
|
|
8
|
+
import { c } from "react/compiler-runtime";
|
|
8
9
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
10
|
import { clsx } from "clsx";
|
|
10
11
|
import { useRef, useState } from "react";
|
|
11
12
|
import { mergeRefs } from "@react-aria/utils";
|
|
12
|
-
import { Controller
|
|
13
|
+
import { Controller } from "react-hook-form";
|
|
13
14
|
//#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return /* @__PURE__ */ jsx(Controller, {
|
|
18
|
-
control: formControl.control,
|
|
19
|
-
name: formControl.name,
|
|
20
|
-
render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
|
|
21
|
-
...innerProps,
|
|
22
|
-
ref: mergeRefs(ref, field.ref),
|
|
23
|
-
value: field.value,
|
|
24
|
-
onChange: field.onChange,
|
|
25
|
-
onBlur: field.onBlur,
|
|
26
|
-
isDirty,
|
|
27
|
-
isDisabled: field.disabled || props.isDisabled,
|
|
28
|
-
error: props.error ?? error?.message,
|
|
29
|
-
isSearchable: true,
|
|
30
|
-
ignoreInputValueFiltering
|
|
31
|
-
})
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
return /* @__PURE__ */ jsx(SelectBase, {
|
|
35
|
-
...props,
|
|
36
|
-
isSearchable: true
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
function Autocomplete({ renderStaticInput, ...props }) {
|
|
15
|
+
function AutocompleteInner(t0) {
|
|
16
|
+
const $ = c(7);
|
|
17
|
+
const { renderStaticInput, isFormControlDisabled, ...props } = t0;
|
|
40
18
|
const ui = UIConfig.useConfig();
|
|
41
19
|
const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
|
|
42
20
|
const rootRef = useRef(null);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
21
|
+
let t1;
|
|
22
|
+
if ($[0] !== renderInput) {
|
|
23
|
+
t1 = {
|
|
24
|
+
inputRef: rootRef,
|
|
25
|
+
renderInput,
|
|
26
|
+
setRenderInput,
|
|
27
|
+
getFocusTarget: _temp
|
|
28
|
+
};
|
|
29
|
+
$[0] = renderInput;
|
|
30
|
+
$[1] = t1;
|
|
31
|
+
} else t1 = $[1];
|
|
32
|
+
const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff(t1);
|
|
33
|
+
const currentValue = props.value;
|
|
55
34
|
if (!renderInput && !!props.customTrigger) setRenderInput(true);
|
|
56
35
|
if (!renderInput) {
|
|
57
36
|
const as = props.as ?? ui.input.as;
|
|
@@ -91,12 +70,20 @@ function Autocomplete({ renderStaticInput, ...props }) {
|
|
|
91
70
|
dataHasSelection: !isEmpty,
|
|
92
71
|
dataHasSearch: false
|
|
93
72
|
};
|
|
73
|
+
const t2 = isDisabled;
|
|
74
|
+
const t3 = clsx("w-full", props.containerClassName);
|
|
75
|
+
const t4 = clsx(props.className, props.inputClassName);
|
|
76
|
+
let t5;
|
|
77
|
+
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
|
78
|
+
t5 = selectInputTagsContentWrapperCva({ isSearchable: true });
|
|
79
|
+
$[2] = t5;
|
|
80
|
+
} else t5 = $[2];
|
|
94
81
|
return /* @__PURE__ */ jsx(InputFrame, {
|
|
95
82
|
...props,
|
|
96
|
-
isDisabled,
|
|
97
|
-
className:
|
|
98
|
-
inputClassName:
|
|
99
|
-
contentWrapperClassName:
|
|
83
|
+
isDisabled: t2,
|
|
84
|
+
className: t3,
|
|
85
|
+
inputClassName: t4,
|
|
86
|
+
contentWrapperClassName: t5,
|
|
100
87
|
labelPlacement: "content-row",
|
|
101
88
|
dataAttributes,
|
|
102
89
|
renderStatic: true,
|
|
@@ -123,10 +110,111 @@ function Autocomplete({ renderStaticInput, ...props }) {
|
|
|
123
110
|
})] })
|
|
124
111
|
});
|
|
125
112
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
113
|
+
const T0 = SelectBase;
|
|
114
|
+
const t2 = mergeRefs(props.ref, rootRef);
|
|
115
|
+
let t3;
|
|
116
|
+
if ($[3] !== T0 || $[4] !== props || $[5] !== t2) {
|
|
117
|
+
t3 = /* @__PURE__ */ jsx(T0, {
|
|
118
|
+
...props,
|
|
119
|
+
ref: t2,
|
|
120
|
+
isSearchable: true
|
|
121
|
+
});
|
|
122
|
+
$[3] = T0;
|
|
123
|
+
$[4] = props;
|
|
124
|
+
$[5] = t2;
|
|
125
|
+
$[6] = t3;
|
|
126
|
+
} else t3 = $[6];
|
|
127
|
+
return t3;
|
|
128
|
+
}
|
|
129
|
+
function _temp(root) {
|
|
130
|
+
return root.querySelector("input, [data-type='select-trigger'], button, [tabindex]");
|
|
131
|
+
}
|
|
132
|
+
function Autocomplete(t0) {
|
|
133
|
+
const $ = c(23);
|
|
134
|
+
let props;
|
|
135
|
+
let renderStaticInput;
|
|
136
|
+
if ($[0] !== t0) {
|
|
137
|
+
({renderStaticInput, ...props} = t0);
|
|
138
|
+
$[0] = t0;
|
|
139
|
+
$[1] = props;
|
|
140
|
+
$[2] = renderStaticInput;
|
|
141
|
+
} else {
|
|
142
|
+
props = $[1];
|
|
143
|
+
renderStaticInput = $[2];
|
|
144
|
+
}
|
|
145
|
+
if ("formControl" in props && props.formControl) {
|
|
146
|
+
let formControl;
|
|
147
|
+
let innerProps;
|
|
148
|
+
let ref;
|
|
149
|
+
let t1;
|
|
150
|
+
if ($[3] !== props) {
|
|
151
|
+
({ignoreInputValueFiltering: t1, formControl, ref, ...innerProps} = props);
|
|
152
|
+
$[3] = props;
|
|
153
|
+
$[4] = formControl;
|
|
154
|
+
$[5] = innerProps;
|
|
155
|
+
$[6] = ref;
|
|
156
|
+
$[7] = t1;
|
|
157
|
+
} else {
|
|
158
|
+
formControl = $[4];
|
|
159
|
+
innerProps = $[5];
|
|
160
|
+
ref = $[6];
|
|
161
|
+
t1 = $[7];
|
|
162
|
+
}
|
|
163
|
+
const ignoreInputValueFiltering = t1 === void 0 ? true : t1;
|
|
164
|
+
const controlWithOptions = formControl.control;
|
|
165
|
+
let t2;
|
|
166
|
+
if ($[8] !== controlWithOptions._options?.disabled || $[9] !== ignoreInputValueFiltering || $[10] !== innerProps || $[11] !== props.error || $[12] !== props.isDisabled || $[13] !== ref || $[14] !== renderStaticInput) {
|
|
167
|
+
t2 = (t3) => {
|
|
168
|
+
const { field, fieldState: t4 } = t3;
|
|
169
|
+
const { error, isDirty } = t4;
|
|
170
|
+
return /* @__PURE__ */ jsx(AutocompleteInner, {
|
|
171
|
+
...innerProps,
|
|
172
|
+
ref: mergeRefs(ref, field.ref),
|
|
173
|
+
value: field.value,
|
|
174
|
+
onChange: field.onChange,
|
|
175
|
+
onBlur: field.onBlur,
|
|
176
|
+
isDirty,
|
|
177
|
+
isDisabled: field.disabled || props.isDisabled,
|
|
178
|
+
isFormControlDisabled: !!controlWithOptions._options?.disabled,
|
|
179
|
+
error: props.error ?? error?.message,
|
|
180
|
+
ignoreInputValueFiltering,
|
|
181
|
+
renderStaticInput
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
$[8] = controlWithOptions._options?.disabled;
|
|
185
|
+
$[9] = ignoreInputValueFiltering;
|
|
186
|
+
$[10] = innerProps;
|
|
187
|
+
$[11] = props.error;
|
|
188
|
+
$[12] = props.isDisabled;
|
|
189
|
+
$[13] = ref;
|
|
190
|
+
$[14] = renderStaticInput;
|
|
191
|
+
$[15] = t2;
|
|
192
|
+
} else t2 = $[15];
|
|
193
|
+
let t3;
|
|
194
|
+
if ($[16] !== formControl.control || $[17] !== formControl.name || $[18] !== t2) {
|
|
195
|
+
t3 = /* @__PURE__ */ jsx(Controller, {
|
|
196
|
+
control: formControl.control,
|
|
197
|
+
name: formControl.name,
|
|
198
|
+
render: t2
|
|
199
|
+
});
|
|
200
|
+
$[16] = formControl.control;
|
|
201
|
+
$[17] = formControl.name;
|
|
202
|
+
$[18] = t2;
|
|
203
|
+
$[19] = t3;
|
|
204
|
+
} else t3 = $[19];
|
|
205
|
+
return t3;
|
|
206
|
+
}
|
|
207
|
+
let t1;
|
|
208
|
+
if ($[20] !== props || $[21] !== renderStaticInput) {
|
|
209
|
+
t1 = /* @__PURE__ */ jsx(AutocompleteInner, {
|
|
210
|
+
...props,
|
|
211
|
+
renderStaticInput
|
|
212
|
+
});
|
|
213
|
+
$[20] = props;
|
|
214
|
+
$[21] = renderStaticInput;
|
|
215
|
+
$[22] = t1;
|
|
216
|
+
} else t1 = $[22];
|
|
217
|
+
return t1;
|
|
130
218
|
}
|
|
131
219
|
//#endregion
|
|
132
220
|
export { Autocomplete };
|