@povio/ui 3.3.0 → 3.4.0-rc.1
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/Checkbox/Checkbox.d.ts +1 -2
- package/dist/components/inputs/Checkbox/Checkbox.js +93 -100
- package/dist/components/inputs/Checkbox/CheckboxGroup.d.ts +1 -2
- package/dist/components/inputs/Checkbox/CheckboxGroup.js +109 -113
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +1 -2
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +14 -21
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -2
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +14 -22
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +1 -2
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +14 -21
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +1 -2
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +275 -294
- package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +1 -2
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +1 -10
- package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts +1 -2
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +43 -46
- package/dist/components/inputs/File/FileUpload.d.ts +1 -1
- package/dist/components/inputs/File/FileUpload.js +17 -17
- package/dist/components/inputs/File/InputUpload.d.ts +1 -1
- package/dist/components/inputs/File/InputUpload.js +17 -17
- package/dist/components/inputs/File/fileUpload.types.d.ts +1 -1
- package/dist/components/inputs/File/inputUpload.types.d.ts +1 -1
- package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts +1 -1
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +19 -19
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts +1 -1
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +18 -18
- package/dist/components/inputs/Input/PasswordInput/PasswordInput.d.ts +1 -1
- package/dist/components/inputs/Input/TextArea/TextArea.d.ts +1 -1
- package/dist/components/inputs/Input/TextArea/TextArea.js +18 -18
- package/dist/components/inputs/Input/TextInput/TextInput.d.ts +2 -2
- package/dist/components/inputs/Input/TextInput/TextInput.js +36 -38
- package/dist/components/inputs/Inputs/Form.d.ts +4 -4
- package/dist/components/inputs/Inputs/InputItem.d.ts +22 -22
- package/dist/components/inputs/Inputs/InputItem.js +35 -36
- package/dist/components/inputs/Inputs/Inputs.d.ts +2 -2
- package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +1 -2
- package/dist/components/inputs/RadioGroup/RadioGroup.js +107 -111
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +13 -13
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +19 -19
- package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +1 -1
- package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +1 -1
- package/dist/components/inputs/Selection/Select/QuerySelect.js +19 -19
- package/dist/components/inputs/Selection/Select/Select.d.ts +1 -1
- package/dist/components/inputs/Selection/Select/Select.js +19 -19
- package/dist/components/inputs/Selection/shared/SelectBase.d.ts +0 -1
- package/dist/components/inputs/Selection/shared/SelectBase.js +34 -37
- package/dist/components/inputs/Selection/shared/select.context.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/select.context.js +4 -8
- package/dist/components/inputs/Selection/shared/select.types.d.ts +1 -1
- package/dist/components/inputs/Slider/Slider.d.ts +1 -1
- package/dist/components/inputs/Slider/Slider.js +18 -18
- package/dist/components/inputs/TextEditor/TextEditor.d.ts +1 -1
- package/dist/components/inputs/TextEditor/TextEditor.js +18 -18
- package/dist/components/inputs/Toggle/Toggle.d.ts +1 -2
- package/dist/components/inputs/Toggle/Toggle.js +59 -63
- package/dist/components/inputs/shared/form.binding.d.ts +27 -0
- package/dist/components/inputs/shared/form.binding.js +57 -0
- package/dist/components/inputs/shared/form.types.d.ts +9 -8
- package/dist/components/inputs/shared/form.types.js +8 -0
- package/dist/components/segment/Segment.d.ts +1 -1
- package/dist/components/segment/Segment.js +17 -17
- package/dist/components/segment/segment.types.d.ts +1 -1
- package/dist/config/uiConfig.context.d.ts +5 -5
- package/dist/config/uiConfig.context.js +3 -12
- package/dist/helpers/dynamicColumns.d.ts +1 -1
- package/dist/helpers/dynamicInputs.d.ts +7 -7
- package/dist/hooks/useAutosave.d.ts +4 -4
- package/dist/hooks/useAutosave.js +64 -49
- package/dist/hooks/useForm.d.ts +39 -15
- package/dist/hooks/useForm.js +96 -43
- package/dist/hooks/useFormAutosave.d.ts +8 -9
- package/dist/hooks/useFormAutosave.js +23 -9
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/package.json +2 -3
- package/dist/hooks/useAutosave.spec.d.ts +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { UIOverrides } from "../../../../config/uiOverrides.context.js";
|
|
2
2
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
3
|
+
import { FieldController } from "../../shared/form.binding.js";
|
|
3
4
|
import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
|
|
4
5
|
import { FormField } from "../../FormField/FormField.js";
|
|
5
6
|
import { inputSideDefinition, inputSizeDefinition, useInputCva } from "../../shared/input.cva.js";
|
|
@@ -13,7 +14,6 @@ import { useRef } from "react";
|
|
|
13
14
|
import { TextArea } from "react-aria-components";
|
|
14
15
|
import { useTextField } from "react-aria";
|
|
15
16
|
import { mergeRefs } from "@react-aria/utils";
|
|
16
|
-
import { Controller } from "react-hook-form";
|
|
17
17
|
//#region src/components/inputs/Input/TextArea/TextArea.tsx
|
|
18
18
|
var TextAreaBase = (props) => {
|
|
19
19
|
const $ = c(83);
|
|
@@ -282,34 +282,34 @@ var TextAreaBase = (props) => {
|
|
|
282
282
|
};
|
|
283
283
|
var TextArea$1 = (props) => {
|
|
284
284
|
const $ = c(15);
|
|
285
|
-
if ("
|
|
286
|
-
let
|
|
285
|
+
if ("field" in props && props.field) {
|
|
286
|
+
let field;
|
|
287
287
|
let innerProps;
|
|
288
288
|
let ref;
|
|
289
289
|
if ($[0] !== props) {
|
|
290
|
-
({
|
|
290
|
+
({field, ref, ...innerProps} = props);
|
|
291
291
|
$[0] = props;
|
|
292
|
-
$[1] =
|
|
292
|
+
$[1] = field;
|
|
293
293
|
$[2] = innerProps;
|
|
294
294
|
$[3] = ref;
|
|
295
295
|
} else {
|
|
296
|
-
|
|
296
|
+
field = $[1];
|
|
297
297
|
innerProps = $[2];
|
|
298
298
|
ref = $[3];
|
|
299
299
|
}
|
|
300
300
|
let t0;
|
|
301
301
|
if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
|
|
302
302
|
t0 = (t1) => {
|
|
303
|
-
const { field, fieldState: t2 } = t1;
|
|
303
|
+
const { field: field_0, fieldState: t2 } = t1;
|
|
304
304
|
const { error, isDirty } = t2;
|
|
305
305
|
return /* @__PURE__ */ jsx(TextAreaBase, {
|
|
306
306
|
...innerProps,
|
|
307
|
-
ref: mergeRefs(ref,
|
|
308
|
-
value:
|
|
309
|
-
onChange:
|
|
310
|
-
onBlur:
|
|
307
|
+
ref: mergeRefs(ref, field_0.ref),
|
|
308
|
+
value: field_0.value ?? "",
|
|
309
|
+
onChange: field_0.onChange,
|
|
310
|
+
onBlur: field_0.onBlur,
|
|
311
311
|
isDirty,
|
|
312
|
-
isDisabled:
|
|
312
|
+
isDisabled: field_0.disabled || props.isDisabled,
|
|
313
313
|
error: props.error ?? error?.message
|
|
314
314
|
});
|
|
315
315
|
};
|
|
@@ -320,14 +320,14 @@ var TextArea$1 = (props) => {
|
|
|
320
320
|
$[8] = t0;
|
|
321
321
|
} else t0 = $[8];
|
|
322
322
|
let t1;
|
|
323
|
-
if ($[9] !==
|
|
324
|
-
t1 = /* @__PURE__ */ jsx(
|
|
325
|
-
control:
|
|
326
|
-
name:
|
|
323
|
+
if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
|
|
324
|
+
t1 = /* @__PURE__ */ jsx(FieldController, {
|
|
325
|
+
control: field.form,
|
|
326
|
+
name: field.name,
|
|
327
327
|
render: t0
|
|
328
328
|
});
|
|
329
|
-
$[9] =
|
|
330
|
-
$[10] =
|
|
329
|
+
$[9] = field.form;
|
|
330
|
+
$[10] = field.name;
|
|
331
331
|
$[11] = t0;
|
|
332
332
|
$[12] = t1;
|
|
333
333
|
} else t1 = $[12];
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Ref } from 'react';
|
|
2
2
|
import { AriaTextFieldProps } from 'react-aria';
|
|
3
3
|
import { InputProps as AriaInputProps } from 'react-aria-components';
|
|
4
|
-
import { FieldValues } from 'react-hook-form';
|
|
5
4
|
import { FormFieldProps } from '../../FormField/FormField';
|
|
6
5
|
import { InputContentProps } from '../shared/InputContent';
|
|
6
|
+
import { FieldValues } from '../../shared/form.binding';
|
|
7
7
|
import { ControlProps } from '../../shared/form.types';
|
|
8
8
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
9
9
|
type AllowedHTMLInputTypeAttribute = "email" | "hidden" | "tel" | "text" | "url";
|
|
@@ -18,6 +18,6 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
|
|
|
18
18
|
export interface TextInputProps extends TextInputBaseProps {
|
|
19
19
|
renderStaticInput?: boolean;
|
|
20
20
|
}
|
|
21
|
-
export type ControlledTextInputProps<TFieldValues extends
|
|
21
|
+
export type ControlledTextInputProps<TFieldValues extends Record<string, unknown>> = ControlProps<TextInputProps, TFieldValues>;
|
|
22
22
|
export declare const TextInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { UIOverrides } from "../../../../config/uiOverrides.context.js";
|
|
2
2
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
3
|
+
import { FieldController } from "../../shared/form.binding.js";
|
|
3
4
|
import { FormField } from "../../FormField/FormField.js";
|
|
4
5
|
import { inputBaseDefinition } from "../../shared/input.cva.js";
|
|
5
6
|
import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
|
|
@@ -13,7 +14,6 @@ import { useEffect, useRef, useState } from "react";
|
|
|
13
14
|
import { Input } from "react-aria-components";
|
|
14
15
|
import { useFocusVisible, useTextField } from "react-aria";
|
|
15
16
|
import { mergeRefs } from "@react-aria/utils";
|
|
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);
|
|
@@ -377,7 +377,7 @@ var TextInputInner = (t0) => {
|
|
|
377
377
|
return t3;
|
|
378
378
|
};
|
|
379
379
|
var TextInput = (t0) => {
|
|
380
|
-
const $ = c(
|
|
380
|
+
const $ = c(20);
|
|
381
381
|
let props;
|
|
382
382
|
let renderStaticInput;
|
|
383
383
|
if ($[0] !== t0) {
|
|
@@ -389,72 +389,70 @@ var TextInput = (t0) => {
|
|
|
389
389
|
props = $[1];
|
|
390
390
|
renderStaticInput = $[2];
|
|
391
391
|
}
|
|
392
|
-
if ("
|
|
393
|
-
let
|
|
392
|
+
if ("field" in props && props.field) {
|
|
393
|
+
let field;
|
|
394
394
|
let innerProps;
|
|
395
395
|
let ref;
|
|
396
396
|
if ($[3] !== props) {
|
|
397
|
-
({
|
|
397
|
+
({field, ref, ...innerProps} = props);
|
|
398
398
|
$[3] = props;
|
|
399
|
-
$[4] =
|
|
399
|
+
$[4] = field;
|
|
400
400
|
$[5] = innerProps;
|
|
401
401
|
$[6] = ref;
|
|
402
402
|
} else {
|
|
403
|
-
|
|
403
|
+
field = $[4];
|
|
404
404
|
innerProps = $[5];
|
|
405
405
|
ref = $[6];
|
|
406
406
|
}
|
|
407
|
-
const controlWithOptions = formControl.control;
|
|
408
407
|
let t1;
|
|
409
|
-
if ($[7] !==
|
|
408
|
+
if ($[7] !== innerProps || $[8] !== props.error || $[9] !== props.isDisabled || $[10] !== ref || $[11] !== renderStaticInput) {
|
|
410
409
|
t1 = (t2) => {
|
|
411
|
-
const { field, fieldState: t3 } = t2;
|
|
410
|
+
const { field: field_0, fieldState: t3 } = t2;
|
|
412
411
|
const { error, isDirty } = t3;
|
|
413
412
|
return /* @__PURE__ */ jsx(TextInputInner, {
|
|
414
413
|
...innerProps,
|
|
415
|
-
ref: mergeRefs(ref,
|
|
416
|
-
value:
|
|
417
|
-
onChange:
|
|
418
|
-
onBlur:
|
|
414
|
+
ref: mergeRefs(ref, field_0.ref),
|
|
415
|
+
value: field_0.value,
|
|
416
|
+
onChange: field_0.onChange,
|
|
417
|
+
onBlur: field_0.onBlur,
|
|
419
418
|
isDirty,
|
|
420
|
-
isDisabled:
|
|
421
|
-
isFormControlDisabled:
|
|
419
|
+
isDisabled: field_0.disabled || props.isDisabled,
|
|
420
|
+
isFormControlDisabled: field_0.disabled,
|
|
422
421
|
error: props.error ?? error?.message,
|
|
423
422
|
renderStaticInput
|
|
424
423
|
});
|
|
425
424
|
};
|
|
426
|
-
$[7] =
|
|
427
|
-
$[8] =
|
|
428
|
-
$[9] = props.
|
|
429
|
-
$[10] =
|
|
430
|
-
$[11] =
|
|
431
|
-
$[12] =
|
|
432
|
-
|
|
433
|
-
} else t1 = $[13];
|
|
425
|
+
$[7] = innerProps;
|
|
426
|
+
$[8] = props.error;
|
|
427
|
+
$[9] = props.isDisabled;
|
|
428
|
+
$[10] = ref;
|
|
429
|
+
$[11] = renderStaticInput;
|
|
430
|
+
$[12] = t1;
|
|
431
|
+
} else t1 = $[12];
|
|
434
432
|
let t2;
|
|
435
|
-
if ($[
|
|
436
|
-
t2 = /* @__PURE__ */ jsx(
|
|
437
|
-
control:
|
|
438
|
-
name:
|
|
433
|
+
if ($[13] !== field.form || $[14] !== field.name || $[15] !== t1) {
|
|
434
|
+
t2 = /* @__PURE__ */ jsx(FieldController, {
|
|
435
|
+
control: field.form,
|
|
436
|
+
name: field.name,
|
|
439
437
|
render: t1
|
|
440
438
|
});
|
|
441
|
-
$[
|
|
442
|
-
$[
|
|
443
|
-
$[
|
|
444
|
-
$[
|
|
445
|
-
} else t2 = $[
|
|
439
|
+
$[13] = field.form;
|
|
440
|
+
$[14] = field.name;
|
|
441
|
+
$[15] = t1;
|
|
442
|
+
$[16] = t2;
|
|
443
|
+
} else t2 = $[16];
|
|
446
444
|
return t2;
|
|
447
445
|
}
|
|
448
446
|
let t1;
|
|
449
|
-
if ($[
|
|
447
|
+
if ($[17] !== props || $[18] !== renderStaticInput) {
|
|
450
448
|
t1 = /* @__PURE__ */ jsx(TextInputInner, {
|
|
451
449
|
...props,
|
|
452
450
|
renderStaticInput
|
|
453
451
|
});
|
|
454
|
-
$[
|
|
455
|
-
$[
|
|
456
|
-
$[
|
|
457
|
-
} else t1 = $[
|
|
452
|
+
$[17] = props;
|
|
453
|
+
$[18] = renderStaticInput;
|
|
454
|
+
$[19] = t1;
|
|
455
|
+
} else t1 = $[19];
|
|
458
456
|
return t1;
|
|
459
457
|
};
|
|
460
458
|
function _temp(input) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
|
3
2
|
import { z } from 'zod';
|
|
4
3
|
import { InputComponentProps, InputDefBaseProps } from './InputItem';
|
|
5
4
|
import { AllowedComponentType, DefaultComponentType } from '../../../helpers/dynamicInputs';
|
|
5
|
+
import { FormSubmitErrorHandler, FormSubmitHandler, UIForm } from '../../../hooks/useForm';
|
|
6
6
|
type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
|
|
7
7
|
type FieldProps<TProps = {}> = {
|
|
8
8
|
label: string;
|
|
@@ -15,10 +15,10 @@ type FieldComponents<TSchema extends z.ZodObject<any>> = {
|
|
|
15
15
|
[K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined>(props: FieldComponentProps<TSchema, K, T>) => ReactNode;
|
|
16
16
|
};
|
|
17
17
|
interface FormProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
|
|
18
|
-
form:
|
|
18
|
+
form: UIForm<TSchemaType>;
|
|
19
19
|
schema: TSchema;
|
|
20
|
-
onSubmit:
|
|
21
|
-
onError?:
|
|
20
|
+
onSubmit: FormSubmitHandler<TSchemaType>;
|
|
21
|
+
onError?: FormSubmitErrorHandler<TSchemaType>;
|
|
22
22
|
className?: string;
|
|
23
23
|
children: (components: FieldComponents<TSchema>) => ReactNode;
|
|
24
24
|
}
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { Control, UseFormReturn } from 'react-hook-form';
|
|
3
2
|
import { z } from 'zod';
|
|
4
3
|
import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
|
|
5
4
|
import { Select } from '../Selection/Select/Select';
|
|
6
5
|
import { HasRequiredProperty } from '../../../types/common';
|
|
6
|
+
import { UIForm } from '../../../hooks/useForm';
|
|
7
7
|
declare const componentRegistry: {
|
|
8
|
-
readonly toggle: <TFieldValues extends import('
|
|
9
|
-
readonly checkbox: <TFieldValues extends import('
|
|
10
|
-
readonly checkboxGroup: <TFieldValues extends import('
|
|
11
|
-
readonly numberInput: <TFieldValues extends import('
|
|
12
|
-
readonly numberRangeInput: <TFieldValues extends import('
|
|
13
|
-
readonly slider: <TFieldValues extends import('
|
|
14
|
-
readonly textInput: <TFieldValues extends import('
|
|
15
|
-
readonly passwordInput: <TFieldValues extends import('
|
|
16
|
-
readonly textArea: <TFieldValues extends import('
|
|
8
|
+
readonly toggle: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
readonly checkbox: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
readonly checkboxGroup: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Checkbox/CheckboxGroup').ControlledCheckboxGroupProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
readonly numberInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
readonly numberRangeInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
readonly slider: <TFieldValues extends import('../shared/form.binding').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
readonly textInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
readonly passwordInput: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
readonly textArea: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
readonly select: typeof Select;
|
|
18
|
-
readonly querySelect: <TFieldValues extends import('
|
|
18
|
+
readonly querySelect: <TFieldValues extends import('../shared/form.binding').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
readonly autocomplete: typeof Autocomplete;
|
|
20
|
-
readonly queryAutocomplete: <TFieldValues extends import('
|
|
21
|
-
readonly segment: <TFieldValues extends import('
|
|
22
|
-
readonly datePicker: <TFieldValues extends import('
|
|
23
|
-
readonly dateTimePicker: <TFieldValues extends import('
|
|
24
|
-
readonly timePicker: <TFieldValues extends import('
|
|
25
|
-
readonly dateRangePicker: <TFieldValues extends import('
|
|
20
|
+
readonly queryAutocomplete: <TFieldValues extends import('../shared/form.binding').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
readonly segment: <TFieldValues extends import('../shared/form.binding').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
readonly datePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
readonly dateTimePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
readonly timePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
readonly dateRangePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
26
26
|
readonly unknown: null;
|
|
27
27
|
};
|
|
28
28
|
export type InputComponentRegistry = typeof componentRegistry;
|
|
29
29
|
export type InputComponentType = keyof InputComponentRegistry;
|
|
30
30
|
interface InputItemProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
|
|
31
|
-
form:
|
|
31
|
+
form: UIForm<TSchemaType>;
|
|
32
32
|
inputDef: InputDef<TSchemaType>;
|
|
33
33
|
}
|
|
34
34
|
export type InputDef<TSchemaType extends Record<string, any>> = {
|
|
@@ -55,13 +55,13 @@ interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends
|
|
|
55
55
|
placeholder?: string;
|
|
56
56
|
props?: never;
|
|
57
57
|
inputWrapper?: never;
|
|
58
|
-
render: (
|
|
59
|
-
|
|
58
|
+
render: (field: {
|
|
59
|
+
form: UIForm<TSchemaType>;
|
|
60
60
|
name: K;
|
|
61
|
-
}, form:
|
|
61
|
+
}, form: UIForm<TSchemaType>) => ReactElement;
|
|
62
62
|
}
|
|
63
63
|
export type InputWrapperType = (children: ReactNode, label: string) => ReactElement;
|
|
64
64
|
export type InputComponentProps<T extends InputComponentType> = InputComponentRegistry[T] extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<any> ? ComponentProps<InputComponentRegistry[T]> : null;
|
|
65
|
-
export type InputDefBaseProps<TProps> = Omit<TProps, "
|
|
65
|
+
export type InputDefBaseProps<TProps> = Omit<TProps, "field" | "label" | "placeholder" | "children">;
|
|
66
66
|
export declare function InputItem<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>>({ form, inputDef }: InputItemProps<TSchema, TSchemaType>): import("react/jsx-runtime").JSX.Element | null;
|
|
67
67
|
export {};
|
|
@@ -44,70 +44,69 @@ function InputItem(t0) {
|
|
|
44
44
|
const $ = c(18);
|
|
45
45
|
const { form, inputDef } = t0;
|
|
46
46
|
const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
|
|
47
|
-
|
|
48
|
-
let
|
|
49
|
-
let t2;
|
|
47
|
+
let field;
|
|
48
|
+
let t1;
|
|
50
49
|
if ($[0] !== form || $[1] !== name || $[2] !== render) {
|
|
51
|
-
|
|
50
|
+
t1 = Symbol.for("react.early_return_sentinel");
|
|
52
51
|
bb0: {
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
field = {
|
|
53
|
+
form,
|
|
55
54
|
name
|
|
56
55
|
};
|
|
57
56
|
if (render) {
|
|
58
|
-
|
|
57
|
+
t1 = render(field, form);
|
|
59
58
|
break bb0;
|
|
60
59
|
}
|
|
61
60
|
}
|
|
62
61
|
$[0] = form;
|
|
63
62
|
$[1] = name;
|
|
64
63
|
$[2] = render;
|
|
65
|
-
$[3] =
|
|
66
|
-
$[4] =
|
|
64
|
+
$[3] = field;
|
|
65
|
+
$[4] = t1;
|
|
67
66
|
} else {
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
field = $[3];
|
|
68
|
+
t1 = $[4];
|
|
70
69
|
}
|
|
71
|
-
if (
|
|
70
|
+
if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
|
|
72
71
|
if (!type) return null;
|
|
73
72
|
const Component = componentRegistry[type];
|
|
74
73
|
const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
|
|
75
|
-
let
|
|
74
|
+
let t2;
|
|
76
75
|
if ($[5] !== props) {
|
|
77
|
-
|
|
76
|
+
t2 = props ?? {};
|
|
78
77
|
$[5] = props;
|
|
79
|
-
$[6] =
|
|
80
|
-
} else
|
|
81
|
-
const inputProps =
|
|
82
|
-
const
|
|
83
|
-
const
|
|
84
|
-
let
|
|
85
|
-
if ($[7] !== Component || $[8] !==
|
|
86
|
-
|
|
78
|
+
$[6] = t2;
|
|
79
|
+
} else t2 = $[6];
|
|
80
|
+
const inputProps = t2;
|
|
81
|
+
const t3 = usesChildrenAsLabel ? void 0 : label;
|
|
82
|
+
const t4 = usesChildrenAsLabel ? label : void 0;
|
|
83
|
+
let t5;
|
|
84
|
+
if ($[7] !== Component || $[8] !== field || $[9] !== inputProps || $[10] !== placeholder || $[11] !== t3 || $[12] !== t4) {
|
|
85
|
+
t5 = /* @__PURE__ */ jsx(Component, {
|
|
87
86
|
...inputProps,
|
|
88
|
-
label:
|
|
87
|
+
label: t3,
|
|
89
88
|
placeholder,
|
|
90
|
-
|
|
91
|
-
children:
|
|
89
|
+
field,
|
|
90
|
+
children: t4
|
|
92
91
|
});
|
|
93
92
|
$[7] = Component;
|
|
94
|
-
$[8] =
|
|
93
|
+
$[8] = field;
|
|
95
94
|
$[9] = inputProps;
|
|
96
95
|
$[10] = placeholder;
|
|
97
|
-
$[11] =
|
|
98
|
-
$[12] =
|
|
99
|
-
$[13] =
|
|
100
|
-
} else
|
|
101
|
-
const inputComponent =
|
|
102
|
-
let
|
|
96
|
+
$[11] = t3;
|
|
97
|
+
$[12] = t4;
|
|
98
|
+
$[13] = t5;
|
|
99
|
+
} else t5 = $[13];
|
|
100
|
+
const inputComponent = t5;
|
|
101
|
+
let t6;
|
|
103
102
|
if ($[14] !== inputComponent || $[15] !== inputWrapper || $[16] !== label) {
|
|
104
|
-
|
|
103
|
+
t6 = inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
|
|
105
104
|
$[14] = inputComponent;
|
|
106
105
|
$[15] = inputWrapper;
|
|
107
106
|
$[16] = label;
|
|
108
|
-
$[17] =
|
|
109
|
-
} else
|
|
110
|
-
return
|
|
107
|
+
$[17] = t6;
|
|
108
|
+
} else t6 = $[17];
|
|
109
|
+
return t6;
|
|
111
110
|
}
|
|
112
111
|
//#endregion
|
|
113
112
|
export { InputItem };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { UseFormReturn } from 'react-hook-form';
|
|
3
2
|
import { z } from 'zod';
|
|
3
|
+
import { UIForm } from '../../../hooks/useForm';
|
|
4
4
|
import { InputDef } from './InputItem';
|
|
5
5
|
export interface InputsProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
|
|
6
|
-
form:
|
|
6
|
+
form: UIForm<TSchemaType>;
|
|
7
7
|
inputDefs: Array<InputDef<TSchemaType>>;
|
|
8
8
|
children?: (inputs: Record<keyof TSchemaType, ReactNode>) => ReactNode;
|
|
9
9
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement, Ref } from 'react';
|
|
2
2
|
import { RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
|
|
3
|
-
import { FieldValues } from '
|
|
3
|
+
import { FieldValues } from '../shared/form.binding';
|
|
4
4
|
import { FormFieldProps } from '../FormField/FormField';
|
|
5
5
|
import { RadioVariantProps } from './radio.cva';
|
|
6
6
|
import { ControlProps } from '../shared/form.types';
|
|
@@ -14,7 +14,6 @@ interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVari
|
|
|
14
14
|
isDirty?: boolean;
|
|
15
15
|
inputClassName?: string;
|
|
16
16
|
labelClassName?: string;
|
|
17
|
-
fireBlurOnChange?: boolean;
|
|
18
17
|
}
|
|
19
18
|
export interface RadioGroupProps extends RadioGroupBaseProps {
|
|
20
19
|
}
|