@ultraviolet/form 6.0.0-beta.9 → 6.0.0
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/README.md +5 -6
- package/dist/components/CheckboxField/index.d.ts +1 -1
- package/dist/components/CheckboxField/index.js +25 -21
- package/dist/components/CheckboxGroupField/index.d.ts +4 -4
- package/dist/components/CheckboxGroupField/index.js +50 -35
- package/dist/components/DateInputField/index.d.ts +1 -1
- package/dist/components/DateInputField/index.js +52 -41
- package/dist/components/Form/index.d.ts +1 -1
- package/dist/components/Form/index.js +15 -11
- package/dist/components/KeyValueField/index.d.ts +1 -1
- package/dist/components/KeyValueField/index.js +75 -27
- package/dist/components/NumberInputField/index.d.ts +1 -1
- package/dist/components/NumberInputField/index.js +29 -19
- package/dist/components/RadioField/index.d.ts +1 -1
- package/dist/components/RadioField/index.js +25 -20
- package/dist/components/RadioGroupField/index.d.ts +4 -3
- package/dist/components/RadioGroupField/index.js +21 -13
- package/dist/components/SelectInputField/index.d.ts +1 -1
- package/dist/components/SelectInputField/index.js +28 -17
- package/dist/components/SelectableCardField/index.d.ts +1 -1
- package/dist/components/SelectableCardField/index.js +40 -29
- package/dist/components/SelectableCardGroupField/index.d.ts +1 -1
- package/dist/components/SelectableCardGroupField/index.js +34 -21
- package/dist/components/SelectableCardOptionGroupField/index.d.ts +2 -2
- package/dist/components/SelectableCardOptionGroupField/index.js +26 -22
- package/dist/components/SliderField/index.d.ts +1 -1
- package/dist/components/SliderField/index.js +38 -24
- package/dist/components/Submit/index.d.ts +1 -1
- package/dist/components/Submit/index.js +18 -6
- package/dist/components/SubmitErrorAlert/index.d.ts +1 -1
- package/dist/components/SubmitErrorAlert/index.js +3 -7
- package/dist/components/SwitchButtonField/index.d.ts +4 -3
- package/dist/components/SwitchButtonField/index.js +24 -11
- package/dist/components/TagInputField/index.d.ts +1 -1
- package/dist/components/TagInputField/index.js +21 -14
- package/dist/components/TextAreaField/index.d.ts +1 -1
- package/dist/components/TextAreaField/index.js +35 -27
- package/dist/components/TextInputField/index.d.ts +1 -1
- package/dist/components/TextInputField/index.js +36 -20
- package/dist/components/TimeInputField/index.d.ts +1 -1
- package/dist/components/TimeInputField/index.js +27 -17
- package/dist/components/ToggleField/index.d.ts +1 -1
- package/dist/components/ToggleField/index.js +27 -16
- package/dist/components/ToggleGroupField/index.d.ts +4 -4
- package/dist/components/ToggleGroupField/index.js +61 -0
- package/dist/components/UnitInputField/index.d.ts +1 -1
- package/dist/components/UnitInputField/index.js +27 -23
- package/dist/components/VerificationCodeField/index.d.ts +1 -1
- package/dist/components/VerificationCodeField/index.js +18 -13
- package/dist/components/index.d.ts +1 -0
- package/dist/hooks/useOnFieldChange.js +4 -5
- package/dist/index.js +2 -0
- package/dist/providers/ErrorContext/index.d.ts +1 -1
- package/dist/providers/ErrorContext/index.js +21 -18
- package/dist/utils/validateRegex.js +3 -1
- package/package.json +10 -14
- package/dist/components/CheckboxField/index.cjs +0 -55
- package/dist/components/CheckboxGroupField/index.cjs +0 -80
- package/dist/components/DateInputField/index.cjs +0 -85
- package/dist/components/Form/defaultErrors.cjs +0 -22
- package/dist/components/Form/index.cjs +0 -35
- package/dist/components/KeyValueField/index.cjs +0 -60
- package/dist/components/NumberInputField/index.cjs +0 -59
- package/dist/components/RadioField/index.cjs +0 -64
- package/dist/components/RadioGroupField/index.cjs +0 -45
- package/dist/components/SelectInputField/index.cjs +0 -50
- package/dist/components/SelectableCardField/index.cjs +0 -66
- package/dist/components/SelectableCardGroupField/index.cjs +0 -55
- package/dist/components/SelectableCardOptionGroupField/index.cjs +0 -59
- package/dist/components/SliderField/index.cjs +0 -76
- package/dist/components/Submit/index.cjs +0 -25
- package/dist/components/SubmitErrorAlert/index.cjs +0 -15
- package/dist/components/SwitchButtonField/index.cjs +0 -35
- package/dist/components/TagInputField/index.cjs +0 -51
- package/dist/components/TextAreaField/index.cjs +0 -84
- package/dist/components/TextInputField/index.cjs +0 -62
- package/dist/components/TimeInputField/index.cjs +0 -46
- package/dist/components/ToggleField/index.cjs +0 -55
- package/dist/components/UnitInputField/index.cjs +0 -58
- package/dist/components/VerificationCodeField/index.cjs +0 -48
- package/dist/hooks/useOnFieldChange.cjs +0 -21
- package/dist/index.cjs +0 -78
- package/dist/providers/ErrorContext/index.cjs +0 -34
- package/dist/utils/validateRegex.cjs +0 -4
- package/dist/validators/isInteger.cjs +0 -12
- package/dist/validators/maxDate.cjs +0 -4
- package/dist/validators/minDate.cjs +0 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Radio } from "@ultraviolet/ui";
|
|
4
4
|
import { useMemo } from "react";
|
|
5
5
|
import { useController } from "react-hook-form";
|
|
@@ -19,14 +19,10 @@ const RadioField = ({
|
|
|
19
19
|
"aria-label": ariaLabel,
|
|
20
20
|
...props
|
|
21
21
|
}) => {
|
|
22
|
-
const {
|
|
23
|
-
getError
|
|
24
|
-
} = useErrors();
|
|
22
|
+
const { getError } = useErrors();
|
|
25
23
|
const {
|
|
26
24
|
field,
|
|
27
|
-
fieldState: {
|
|
28
|
-
error
|
|
29
|
-
}
|
|
25
|
+
fieldState: { error }
|
|
30
26
|
} = useController({
|
|
31
27
|
control,
|
|
32
28
|
name,
|
|
@@ -45,19 +41,28 @@ const RadioField = ({
|
|
|
45
41
|
}
|
|
46
42
|
return name;
|
|
47
43
|
}, [label, name, ariaLabel]);
|
|
48
|
-
return /* @__PURE__ */ jsx(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
Radio,
|
|
46
|
+
{
|
|
47
|
+
...props,
|
|
48
|
+
checked: field.value === value,
|
|
49
|
+
disabled,
|
|
50
|
+
error: getError({ label: errorLabel }, error),
|
|
51
|
+
name: field.name,
|
|
52
|
+
onBlur: (event) => {
|
|
53
|
+
field.onBlur();
|
|
54
|
+
onBlur?.(event);
|
|
55
|
+
},
|
|
56
|
+
onChange: () => {
|
|
57
|
+
field.onChange(value);
|
|
58
|
+
onChange?.(value);
|
|
59
|
+
},
|
|
60
|
+
onFocus,
|
|
61
|
+
required,
|
|
62
|
+
value: value ?? "",
|
|
63
|
+
...label ? { label } : { "aria-label": ariaLabel }
|
|
64
|
+
}
|
|
65
|
+
);
|
|
61
66
|
};
|
|
62
67
|
export {
|
|
63
68
|
RadioField
|
|
@@ -5,11 +5,10 @@ import type { BaseFieldProps } from '../../types';
|
|
|
5
5
|
type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
|
|
6
6
|
export declare const RadioGroupField: {
|
|
7
7
|
<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
|
|
8
|
-
Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, }: {
|
|
8
|
+
Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, style, }: {
|
|
9
9
|
value: string | number;
|
|
10
10
|
onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
|
|
11
11
|
disabled?: boolean | undefined | undefined;
|
|
12
|
-
className?: string | undefined;
|
|
13
12
|
ref?: import("react").Ref<HTMLInputElement> | undefined;
|
|
14
13
|
label?: import("react").ReactNode;
|
|
15
14
|
autoFocus?: boolean | undefined | undefined;
|
|
@@ -17,13 +16,15 @@ export declare const RadioGroupField: {
|
|
|
17
16
|
onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
|
|
18
17
|
onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
|
|
19
18
|
tabIndex?: number | undefined | undefined;
|
|
19
|
+
style?: import("react").CSSProperties | undefined;
|
|
20
20
|
error?: import("react").ReactNode;
|
|
21
21
|
helper?: import("react").ReactNode;
|
|
22
|
+
className?: string | undefined;
|
|
22
23
|
'data-testid'?: string | undefined;
|
|
23
24
|
tooltip?: string | undefined;
|
|
24
25
|
'aria-label'?: string | undefined;
|
|
25
26
|
key?: import("react").Key | null | undefined;
|
|
26
27
|
onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
|
|
27
|
-
}) => import("
|
|
28
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
28
29
|
};
|
|
29
30
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { RadioGroup } from "@ultraviolet/ui";
|
|
4
4
|
import { useController } from "react-hook-form";
|
|
5
5
|
import { useErrors } from "../../providers/ErrorContext/index.js";
|
|
@@ -15,14 +15,10 @@ const RadioGroupField = ({
|
|
|
15
15
|
legend = "",
|
|
16
16
|
...props
|
|
17
17
|
}) => {
|
|
18
|
-
const {
|
|
19
|
-
getError
|
|
20
|
-
} = useErrors();
|
|
18
|
+
const { getError } = useErrors();
|
|
21
19
|
const {
|
|
22
20
|
field,
|
|
23
|
-
fieldState: {
|
|
24
|
-
error
|
|
25
|
-
}
|
|
21
|
+
fieldState: { error }
|
|
26
22
|
} = useController({
|
|
27
23
|
control,
|
|
28
24
|
name,
|
|
@@ -32,12 +28,24 @@ const RadioGroupField = ({
|
|
|
32
28
|
},
|
|
33
29
|
shouldUnregister
|
|
34
30
|
});
|
|
35
|
-
return /* @__PURE__ */ jsx(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
RadioGroup,
|
|
33
|
+
{
|
|
34
|
+
...props,
|
|
35
|
+
error: getError({ label: legend }, error) ?? customError,
|
|
36
|
+
legend,
|
|
37
|
+
name: field.name,
|
|
38
|
+
onChange: (event) => {
|
|
39
|
+
field.onChange(event);
|
|
40
|
+
onChange?.(
|
|
41
|
+
event.target.value
|
|
42
|
+
);
|
|
43
|
+
},
|
|
44
|
+
required,
|
|
45
|
+
value: field.value,
|
|
46
|
+
children
|
|
47
|
+
}
|
|
48
|
+
);
|
|
41
49
|
};
|
|
42
50
|
RadioGroupField.Radio = RadioGroup.Radio;
|
|
43
51
|
export {
|
|
@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { FieldPath, FieldValues } from 'react-hook-form';
|
|
4
4
|
import type { BaseFieldProps } from '../../types';
|
|
5
5
|
type SelectInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectInput>, 'value' | 'onChange'>;
|
|
6
|
-
export declare const SelectInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, onBlur, required, name, "aria-label": ariaLabel, shouldUnregister, control, validate, onChange, multiselect, ...props }: SelectInputFieldProps<TFieldValues, TFieldName>) => import("
|
|
6
|
+
export declare const SelectInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, onBlur, required, name, "aria-label": ariaLabel, shouldUnregister, control, validate, onChange, multiselect, ...props }: SelectInputFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { SelectInput } from "@ultraviolet/ui";
|
|
4
4
|
import { useCallback } from "react";
|
|
5
5
|
import { useController } from "react-hook-form";
|
|
@@ -19,9 +19,7 @@ const SelectInputField = ({
|
|
|
19
19
|
}) => {
|
|
20
20
|
const {
|
|
21
21
|
field,
|
|
22
|
-
fieldState: {
|
|
23
|
-
error
|
|
24
|
-
}
|
|
22
|
+
fieldState: { error }
|
|
25
23
|
} = useController({
|
|
26
24
|
control,
|
|
27
25
|
name,
|
|
@@ -31,19 +29,32 @@ const SelectInputField = ({
|
|
|
31
29
|
},
|
|
32
30
|
shouldUnregister
|
|
33
31
|
});
|
|
34
|
-
const {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
const { getError } = useErrors();
|
|
33
|
+
const handleChange = useCallback(
|
|
34
|
+
(value) => {
|
|
35
|
+
onChange?.(value);
|
|
36
|
+
field.onChange(value);
|
|
37
|
+
},
|
|
38
|
+
[onChange, field]
|
|
39
|
+
);
|
|
40
|
+
return /* @__PURE__ */ jsx(
|
|
41
|
+
SelectInput,
|
|
42
|
+
{
|
|
43
|
+
"aria-label": ariaLabel,
|
|
44
|
+
error: getError({ label: label ?? ariaLabel ?? name }, error),
|
|
45
|
+
label,
|
|
46
|
+
multiselect,
|
|
47
|
+
name: field.name,
|
|
48
|
+
onBlur: (event) => {
|
|
49
|
+
field.onBlur();
|
|
50
|
+
onBlur?.(event);
|
|
51
|
+
},
|
|
52
|
+
onChange: handleChange,
|
|
53
|
+
required,
|
|
54
|
+
value: field.value,
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
);
|
|
47
58
|
};
|
|
48
59
|
export {
|
|
49
60
|
SelectInputField
|
|
@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { FieldPath, FieldValues } from 'react-hook-form';
|
|
4
4
|
import type { BaseFieldProps } from '../../types';
|
|
5
5
|
type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof SelectableCard>, 'name' | 'onChange' | 'value'>;
|
|
6
|
-
export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, type, onFocus, onBlur, required, label, shouldUnregister, validate, productIcon, illustration, "aria-label": ariaLabel, ...props }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("
|
|
6
|
+
export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, type, onFocus, onBlur, required, label, shouldUnregister, validate, productIcon, illustration, "aria-label": ariaLabel, ...props }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { SelectableCard } from "@ultraviolet/ui";
|
|
4
4
|
import { useController } from "react-hook-form";
|
|
5
5
|
const SelectableCardField = ({
|
|
@@ -21,9 +21,7 @@ const SelectableCardField = ({
|
|
|
21
21
|
}) => {
|
|
22
22
|
const {
|
|
23
23
|
field,
|
|
24
|
-
fieldState: {
|
|
25
|
-
error
|
|
26
|
-
}
|
|
24
|
+
fieldState: { error }
|
|
27
25
|
} = useController({
|
|
28
26
|
control,
|
|
29
27
|
name,
|
|
@@ -34,32 +32,45 @@ const SelectableCardField = ({
|
|
|
34
32
|
shouldUnregister
|
|
35
33
|
});
|
|
36
34
|
const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
|
+
SelectableCard,
|
|
37
|
+
{
|
|
38
|
+
...props,
|
|
39
|
+
...productIcon ? { productIcon } : { illustration },
|
|
40
|
+
...label ? { label } : { "aria-label": ariaLabel },
|
|
41
|
+
checked: isChecked,
|
|
42
|
+
isError: !!error,
|
|
43
|
+
name: field.name,
|
|
44
|
+
onBlur: (event) => {
|
|
45
|
+
field.onBlur();
|
|
46
|
+
onBlur?.(event);
|
|
47
|
+
},
|
|
48
|
+
onChange: (event) => {
|
|
49
|
+
if (type === "checkbox") {
|
|
50
|
+
const fieldValue = field.value ?? [];
|
|
51
|
+
if (fieldValue?.includes(event.currentTarget.value)) {
|
|
52
|
+
field.onChange(
|
|
53
|
+
fieldValue?.filter(
|
|
54
|
+
(currentValue) => currentValue !== event.currentTarget.value
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
} else {
|
|
58
|
+
field.onChange([...fieldValue, event.currentTarget.value]);
|
|
59
|
+
}
|
|
60
|
+
} else {
|
|
61
|
+
field.onChange(event);
|
|
62
|
+
}
|
|
63
|
+
onChange?.(
|
|
64
|
+
event.currentTarget.value
|
|
65
|
+
);
|
|
66
|
+
},
|
|
67
|
+
onFocus: (event) => {
|
|
68
|
+
onFocus?.(event);
|
|
69
|
+
},
|
|
70
|
+
type,
|
|
71
|
+
value: value ?? ""
|
|
58
72
|
}
|
|
59
|
-
|
|
60
|
-
}, onFocus: (event) => {
|
|
61
|
-
onFocus?.(event);
|
|
62
|
-
}, type, value: value ?? "" });
|
|
73
|
+
);
|
|
63
74
|
};
|
|
64
75
|
export {
|
|
65
76
|
SelectableCardField
|
|
@@ -5,6 +5,6 @@ import type { BaseFieldProps } from '../../types';
|
|
|
5
5
|
type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectableCardGroup>, 'name' | 'onChange' | 'value'>;
|
|
6
6
|
export declare const SelectableCardGroupField: {
|
|
7
7
|
<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, onChange, required, error: customError, columns, type, shouldUnregister, validate, ...props }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
|
|
8
|
-
Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("
|
|
8
|
+
Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
};
|
|
10
10
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { SelectableCardGroup } from "@ultraviolet/ui";
|
|
4
4
|
import { useController } from "react-hook-form";
|
|
5
5
|
import { useErrors } from "../../providers/ErrorContext/index.js";
|
|
@@ -16,14 +16,10 @@ const SelectableCardGroupField = ({
|
|
|
16
16
|
validate,
|
|
17
17
|
...props
|
|
18
18
|
}) => {
|
|
19
|
-
const {
|
|
20
|
-
getError
|
|
21
|
-
} = useErrors();
|
|
19
|
+
const { getError } = useErrors();
|
|
22
20
|
const {
|
|
23
21
|
field,
|
|
24
|
-
fieldState: {
|
|
25
|
-
error
|
|
26
|
-
}
|
|
22
|
+
fieldState: { error }
|
|
27
23
|
} = useController({
|
|
28
24
|
control,
|
|
29
25
|
name,
|
|
@@ -33,21 +29,38 @@ const SelectableCardGroupField = ({
|
|
|
33
29
|
},
|
|
34
30
|
shouldUnregister
|
|
35
31
|
});
|
|
36
|
-
return /* @__PURE__ */ jsx(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
SelectableCardGroup,
|
|
34
|
+
{
|
|
35
|
+
...props,
|
|
36
|
+
columns,
|
|
37
|
+
error: getError({ label: legend }, error) ?? customError,
|
|
38
|
+
legend,
|
|
39
|
+
name,
|
|
40
|
+
onChange: (event) => {
|
|
41
|
+
if (type === "checkbox") {
|
|
42
|
+
const fieldValue = field.value ?? [];
|
|
43
|
+
if (fieldValue?.includes(event.currentTarget.value)) {
|
|
44
|
+
field.onChange(
|
|
45
|
+
fieldValue?.filter(
|
|
46
|
+
(currentValue) => currentValue !== event.currentTarget.value
|
|
47
|
+
)
|
|
48
|
+
);
|
|
49
|
+
} else {
|
|
50
|
+
field.onChange([...fieldValue, event.currentTarget.value]);
|
|
51
|
+
}
|
|
52
|
+
} else {
|
|
53
|
+
field.onChange(event);
|
|
54
|
+
}
|
|
55
|
+
onChange?.(
|
|
56
|
+
event.currentTarget.value
|
|
57
|
+
);
|
|
58
|
+
},
|
|
59
|
+
required,
|
|
60
|
+
type,
|
|
61
|
+
value: field.value
|
|
48
62
|
}
|
|
49
|
-
|
|
50
|
-
}, required, type, value: field.value });
|
|
63
|
+
);
|
|
51
64
|
};
|
|
52
65
|
SelectableCardGroupField.Card = SelectableCardGroup.Card;
|
|
53
66
|
export {
|
|
@@ -7,7 +7,7 @@ type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFiel
|
|
|
7
7
|
};
|
|
8
8
|
export declare const SelectableCardOptionGroupField: {
|
|
9
9
|
<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, optionName, onChange, onChangeOption, required, children, error: customError, shouldUnregister, validate, ...props }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
|
|
10
|
-
Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, }: Omit<import("node_modules/@ultraviolet/ui/dist/components/SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
|
|
10
|
+
Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: Omit<import("node_modules/@ultraviolet/ui/dist/components/SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
|
|
11
11
|
value: string;
|
|
12
12
|
className?: string;
|
|
13
13
|
children?: import("react").ReactNode;
|
|
@@ -19,6 +19,6 @@ export declare const SelectableCardOptionGroupField: {
|
|
|
19
19
|
id?: string;
|
|
20
20
|
"data-testid"?: string;
|
|
21
21
|
tooltip?: string;
|
|
22
|
-
}) => import("
|
|
22
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
};
|
|
24
24
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { SelectableCardOptionGroup } from "@ultraviolet/ui";
|
|
4
4
|
import { useController } from "react-hook-form";
|
|
5
5
|
import { useErrors } from "../../providers/ErrorContext/index.js";
|
|
@@ -17,14 +17,10 @@ const SelectableCardOptionGroupField = ({
|
|
|
17
17
|
validate,
|
|
18
18
|
...props
|
|
19
19
|
}) => {
|
|
20
|
-
const {
|
|
21
|
-
getError
|
|
22
|
-
} = useErrors();
|
|
20
|
+
const { getError } = useErrors();
|
|
23
21
|
const {
|
|
24
22
|
field,
|
|
25
|
-
fieldState: {
|
|
26
|
-
error
|
|
27
|
-
}
|
|
23
|
+
fieldState: { error }
|
|
28
24
|
} = useController({
|
|
29
25
|
control,
|
|
30
26
|
name,
|
|
@@ -34,24 +30,32 @@ const SelectableCardOptionGroupField = ({
|
|
|
34
30
|
},
|
|
35
31
|
shouldUnregister
|
|
36
32
|
});
|
|
37
|
-
const {
|
|
38
|
-
field: optionField
|
|
39
|
-
} = useController({
|
|
33
|
+
const { field: optionField } = useController({
|
|
40
34
|
name: optionName ?? `${name}Option`,
|
|
41
|
-
rules: {
|
|
42
|
-
required
|
|
43
|
-
},
|
|
35
|
+
rules: { required },
|
|
44
36
|
shouldUnregister
|
|
45
37
|
});
|
|
46
|
-
return /* @__PURE__ */ jsx(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
38
|
+
return /* @__PURE__ */ jsx(
|
|
39
|
+
SelectableCardOptionGroup,
|
|
40
|
+
{
|
|
41
|
+
error: getError({ label: legend }, error) ?? customError,
|
|
42
|
+
legend,
|
|
43
|
+
name,
|
|
44
|
+
onChange: (event) => {
|
|
45
|
+
field.onChange(event);
|
|
46
|
+
onChange?.(event);
|
|
47
|
+
},
|
|
48
|
+
onChangeOption: (value) => {
|
|
49
|
+
optionField.onChange(value);
|
|
50
|
+
onChangeOption?.(value);
|
|
51
|
+
},
|
|
52
|
+
optionValue: String(optionField.value),
|
|
53
|
+
required,
|
|
54
|
+
value: field.value,
|
|
55
|
+
...props,
|
|
56
|
+
children
|
|
57
|
+
}
|
|
58
|
+
);
|
|
55
59
|
};
|
|
56
60
|
SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option;
|
|
57
61
|
export {
|
|
@@ -5,5 +5,5 @@ import type { BaseFieldProps } from '../../types';
|
|
|
5
5
|
type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {
|
|
6
6
|
suffix?: string | ReactNode[];
|
|
7
7
|
};
|
|
8
|
-
export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, "aria-label": ariaLabel, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("
|
|
8
|
+
export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, "aria-label": ariaLabel, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Slider } from "@ultraviolet/ui";
|
|
4
4
|
import { useMemo } from "react";
|
|
5
5
|
import { useController } from "react-hook-form";
|
|
@@ -21,14 +21,10 @@ const SliderField = ({
|
|
|
21
21
|
"aria-label": ariaLabel,
|
|
22
22
|
...props
|
|
23
23
|
}) => {
|
|
24
|
-
const {
|
|
25
|
-
getError
|
|
26
|
-
} = useErrors();
|
|
24
|
+
const { getError } = useErrors();
|
|
27
25
|
const {
|
|
28
26
|
field,
|
|
29
|
-
fieldState: {
|
|
30
|
-
error
|
|
31
|
-
}
|
|
27
|
+
fieldState: { error }
|
|
32
28
|
} = useController({
|
|
33
29
|
control,
|
|
34
30
|
name,
|
|
@@ -47,29 +43,47 @@ const SliderField = ({
|
|
|
47
43
|
return processedValue;
|
|
48
44
|
}
|
|
49
45
|
if (Array.isArray(field.value)) {
|
|
50
|
-
const processedValue = field.value.map(
|
|
46
|
+
const processedValue = field.value.map(
|
|
47
|
+
(val) => options.map((option) => option.value).indexOf(val)
|
|
48
|
+
);
|
|
51
49
|
return processedValue;
|
|
52
50
|
}
|
|
53
51
|
}
|
|
54
52
|
return field.value;
|
|
55
53
|
}, [field.value, options]);
|
|
56
|
-
return /* @__PURE__ */ jsx(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
Slider,
|
|
56
|
+
{
|
|
57
|
+
"aria-label": ariaLabel,
|
|
58
|
+
error: getError({ label: label ?? ariaLabel ?? name, max, min }, error),
|
|
59
|
+
label,
|
|
60
|
+
max,
|
|
61
|
+
min,
|
|
62
|
+
name: field.name,
|
|
63
|
+
onBlur: (event) => {
|
|
64
|
+
field.onBlur();
|
|
65
|
+
onBlur?.(event);
|
|
66
|
+
},
|
|
67
|
+
onChange: (newValue) => {
|
|
68
|
+
if (options) {
|
|
69
|
+
const processedValue = !Array.isArray(newValue) ? options[newValue]?.value : newValue.map(
|
|
70
|
+
(val) => val ? options[val]?.value : options[0]?.value
|
|
71
|
+
);
|
|
72
|
+
field.onChange(processedValue);
|
|
73
|
+
onChange?.(
|
|
74
|
+
processedValue
|
|
75
|
+
);
|
|
76
|
+
} else {
|
|
77
|
+
field.onChange(newValue);
|
|
78
|
+
onChange?.(newValue);
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
options,
|
|
82
|
+
required,
|
|
83
|
+
value: finalValue,
|
|
84
|
+
...props
|
|
71
85
|
}
|
|
72
|
-
|
|
86
|
+
);
|
|
73
87
|
};
|
|
74
88
|
export {
|
|
75
89
|
SliderField
|
|
@@ -11,5 +11,5 @@ type SubmitProps = {
|
|
|
11
11
|
fullWidth?: ComponentProps<typeof Button>['fullWidth'];
|
|
12
12
|
onClick?: ComponentProps<typeof Button>['onClick'];
|
|
13
13
|
};
|
|
14
|
-
export declare const Submit: ({ children, className, disabled, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => import("
|
|
14
|
+
export declare const Submit: ({ children, className, disabled, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Button } from "@ultraviolet/ui";
|
|
4
4
|
import { useFormState } from "react-hook-form";
|
|
5
5
|
const Submit = ({
|
|
@@ -13,12 +13,24 @@ const Submit = ({
|
|
|
13
13
|
fullWidth,
|
|
14
14
|
onClick
|
|
15
15
|
}) => {
|
|
16
|
-
const {
|
|
17
|
-
isSubmitting,
|
|
18
|
-
isValid
|
|
19
|
-
} = useFormState();
|
|
16
|
+
const { isSubmitting, isValid } = useFormState();
|
|
20
17
|
const isDisabled = disabled || isSubmitting || !isValid;
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
Button,
|
|
20
|
+
{
|
|
21
|
+
className,
|
|
22
|
+
disabled: isDisabled,
|
|
23
|
+
fullWidth,
|
|
24
|
+
isLoading: isSubmitting,
|
|
25
|
+
onClick,
|
|
26
|
+
sentiment,
|
|
27
|
+
size,
|
|
28
|
+
tooltip,
|
|
29
|
+
type: "submit",
|
|
30
|
+
variant,
|
|
31
|
+
children
|
|
32
|
+
}
|
|
33
|
+
);
|
|
22
34
|
};
|
|
23
35
|
export {
|
|
24
36
|
Submit
|