@ultraviolet/form 2.13.2 → 2.13.3

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.
Files changed (73) hide show
  1. package/dist/components/CheckboxField/index.d.ts +10 -0
  2. package/dist/components/CheckboxField/index.js +40 -41
  3. package/dist/components/CheckboxGroupField/index.d.ts +32 -0
  4. package/dist/components/CheckboxGroupField/index.js +59 -53
  5. package/dist/components/DateField/index.d.ts +16 -0
  6. package/dist/components/DateField/index.js +53 -58
  7. package/dist/components/Form/defaultErrors.d.ts +2 -0
  8. package/dist/components/Form/defaultErrors.js +20 -19
  9. package/dist/components/Form/index.d.ts +69 -0
  10. package/dist/components/Form/index.js +52 -57
  11. package/dist/components/KeyValueField/index.d.ts +33 -0
  12. package/dist/components/KeyValueField/index.js +61 -60
  13. package/dist/components/NumberInputField/index.d.ts +13 -0
  14. package/dist/components/NumberInputField/index.js +39 -45
  15. package/dist/components/NumberInputFieldV2/index.d.ts +11 -0
  16. package/dist/components/NumberInputFieldV2/index.js +45 -51
  17. package/dist/components/RadioField/index.d.ts +12 -0
  18. package/dist/components/RadioField/index.js +36 -42
  19. package/dist/components/RadioGroupField/index.d.ts +28 -0
  20. package/dist/components/RadioGroupField/index.js +31 -32
  21. package/dist/components/SelectInputField/index.d.ts +82 -0
  22. package/dist/components/SelectInputField/index.js +90 -83
  23. package/dist/components/SelectInputFieldV2/index.d.ts +7 -0
  24. package/dist/components/SelectInputFieldV2/index.js +60 -60
  25. package/dist/components/SelectableCardField/index.d.ts +9 -0
  26. package/dist/components/SelectableCardField/index.js +49 -44
  27. package/dist/components/SelectableCardGroupField/index.d.ts +42 -0
  28. package/dist/components/SelectableCardGroupField/index.js +42 -41
  29. package/dist/components/Submit/index.d.ts +17 -0
  30. package/dist/components/Submit/index.js +27 -27
  31. package/dist/components/SubmitErrorAlert/index.d.ts +3 -0
  32. package/dist/components/SubmitErrorAlert/index.js +9 -17
  33. package/dist/components/TagInputField/index.d.ts +6 -0
  34. package/dist/components/TagInputField/index.js +35 -38
  35. package/dist/components/TextAreaField/index.d.ts +11 -0
  36. package/dist/components/TextAreaField/index.js +57 -56
  37. package/dist/components/TextInputField/index.d.ts +18 -0
  38. package/dist/components/TextInputField/index.js +82 -81
  39. package/dist/components/TextInputFieldV2/index.d.ts +12 -0
  40. package/dist/components/TextInputFieldV2/index.js +73 -72
  41. package/dist/components/TimeField/index.d.ts +9 -0
  42. package/dist/components/TimeField/index.js +51 -49
  43. package/dist/components/ToggleField/index.d.ts +10 -0
  44. package/dist/components/ToggleField/index.js +32 -31
  45. package/dist/components/ToggleGroupField/index.d.ts +26 -0
  46. package/dist/components/index.d.ts +22 -0
  47. package/dist/constants.d.ts +1 -0
  48. package/dist/constants.js +4 -3
  49. package/dist/hooks/index.d.ts +5 -0
  50. package/dist/hooks/useField.d.ts +34 -0
  51. package/dist/hooks/useField.js +7 -30
  52. package/dist/hooks/useFieldArray.d.ts +21 -0
  53. package/dist/hooks/useFieldArray.js +9 -22
  54. package/dist/hooks/useForm.d.ts +23 -0
  55. package/dist/hooks/useForm.js +8 -25
  56. package/dist/hooks/useFormState.d.ts +39 -0
  57. package/dist/hooks/useFormState.js +6 -23
  58. package/dist/hooks/useOnFieldChange.d.ts +3 -0
  59. package/dist/hooks/useOnFieldChange.js +10 -11
  60. package/dist/index.d.ts +7 -555
  61. package/dist/index.js +66 -29
  62. package/dist/mocks/index.d.ts +1 -0
  63. package/dist/mocks/mockErrors.d.ts +3 -0
  64. package/dist/providers/ErrorContext/index.d.ts +14 -0
  65. package/dist/providers/ErrorContext/index.js +30 -29
  66. package/dist/providers/index.d.ts +1 -0
  67. package/dist/types.d.ts +32 -0
  68. package/dist/validators/index.d.ts +5 -0
  69. package/dist/validators/maxDate.d.ts +1 -0
  70. package/dist/validators/maxDate.js +4 -3
  71. package/dist/validators/minDate.d.ts +1 -0
  72. package/dist/validators/minDate.js +4 -3
  73. package/package.json +11 -5
@@ -0,0 +1,22 @@
1
+ export { CheckboxField } from './CheckboxField';
2
+ export { CheckboxGroupField } from './CheckboxGroupField';
3
+ export { DateField } from './DateField';
4
+ export type { FormProps } from './Form';
5
+ export { Form } from './Form';
6
+ export { RadioField } from './RadioField';
7
+ export { SelectInputField } from './SelectInputField';
8
+ export { SelectableCardField } from './SelectableCardField';
9
+ export { NumberInputField } from './NumberInputField';
10
+ export { NumberInputFieldV2 } from './NumberInputFieldV2';
11
+ export { SubmitErrorAlert } from './SubmitErrorAlert';
12
+ export { TagInputField } from './TagInputField';
13
+ export { TextAreaField } from './TextAreaField';
14
+ export { TextInputField } from './TextInputField';
15
+ export { TextInputField as TextInputFieldV2 } from './TextInputFieldV2';
16
+ export { TimeField } from './TimeField';
17
+ export { ToggleField } from './ToggleField';
18
+ export { Submit } from './Submit';
19
+ export { RadioGroupField } from './RadioGroupField';
20
+ export { KeyValueField } from './KeyValueField';
21
+ export { SelectableCardGroupField } from './SelectableCardGroupField';
22
+ export { SelectInputFieldV2 } from './SelectInputFieldV2';
@@ -0,0 +1 @@
1
+ export declare const FORM_ERROR = "FINAL_FORM/form-error";
package/dist/constants.js CHANGED
@@ -1,3 +1,4 @@
1
- const FORM_ERROR = 'FINAL_FORM/form-error';
2
-
3
- export { FORM_ERROR };
1
+ const FORM_ERROR = "FINAL_FORM/form-error";
2
+ export {
3
+ FORM_ERROR
4
+ };
@@ -0,0 +1,5 @@
1
+ export { useOnFieldChange } from './useOnFieldChange';
2
+ export { useFormStateDeprecated } from './useFormState';
3
+ export { useFieldDeprecated } from './useField';
4
+ export { useFormDeprecated } from './useForm';
5
+ export { useFieldArrayDeprecated } from './useFieldArray';
@@ -0,0 +1,34 @@
1
+ import type { FieldPath, FieldPathValue, FieldValues, Path, Validate } from 'react-hook-form';
2
+ type Options<TFieldValues extends FieldValues> = {
3
+ subscription?: Record<string, boolean>;
4
+ validate?: Validate<FieldPathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>;
5
+ };
6
+ /**
7
+ * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get fields states.
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * const Input = () {
12
+ * const username = useWatch({
13
+ * name: 'username'
14
+ * })
15
+ *
16
+ * const { errors } = useFormState()
17
+ *
18
+ * console.log(errors.username)
19
+ * }
20
+ * ```
21
+ */
22
+ export declare const useFieldDeprecated: <T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Options<TFieldValues>) => {
23
+ input: {
24
+ value: T;
25
+ onChange: (...event: any[]) => void;
26
+ };
27
+ meta: {
28
+ error: string | undefined;
29
+ touched: boolean;
30
+ invalid: boolean;
31
+ dirty: boolean;
32
+ };
33
+ };
34
+ export {};
@@ -1,33 +1,9 @@
1
- import { useFormContext, useController } from 'react-hook-form';
2
-
3
- /**
4
- * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get fields states.
5
- *
6
- * @example
7
- * ```tsx
8
- * const Input = () {
9
- * const username = useWatch({
10
- * name: 'username'
11
- * })
12
- *
13
- * const { errors } = useFormState()
14
- *
15
- * console.log(errors.username)
16
- * }
17
- * ```
18
- */
1
+ import { useFormContext, useController } from "react-hook-form";
19
2
  const useFieldDeprecated = (name, options) => {
20
- const {
21
- getValues
22
- } = useFormContext();
23
- const {
24
- field,
25
- fieldState
26
- } = useController({
3
+ const { getValues } = useFormContext();
4
+ const { field, fieldState } = useController({
27
5
  name,
28
- rules: {
29
- validate: options?.validate
30
- }
6
+ rules: { validate: options?.validate }
31
7
  });
32
8
  return {
33
9
  input: {
@@ -42,5 +18,6 @@ const useFieldDeprecated = (name, options) => {
42
18
  }
43
19
  };
44
20
  };
45
-
46
- export { useFieldDeprecated };
21
+ export {
22
+ useFieldDeprecated
23
+ };
@@ -0,0 +1,21 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { ArrayPath, FieldArray, FieldValues, Validate } from 'react-hook-form';
3
+ type Options<TFieldValues extends FieldValues> = {
4
+ validate?: Validate<FieldArray<TFieldValues>[], TFieldValues>;
5
+ subscription?: Record<string, boolean>;
6
+ };
7
+ /**
8
+ * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
9
+ */
10
+ export declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = FieldValues>(name: ArrayPath<TFieldValues>, options?: Options<TFieldValues>) => {
11
+ fields: {
12
+ push: import("react-hook-form").UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>;
13
+ value: T[];
14
+ remove: import("react-hook-form").UseFieldArrayRemove;
15
+ update: import("react-hook-form").UseFieldArrayUpdate<TFieldValues, ArrayPath<TFieldValues>>;
16
+ map: (callback: (name: string, index: number) => ReactNode) => ReactNode[];
17
+ move: import("react-hook-form").UseFieldArrayMove;
18
+ length: number;
19
+ };
20
+ };
21
+ export {};
@@ -1,35 +1,22 @@
1
- import { useFieldArray, useWatch } from 'react-hook-form';
2
-
3
- /**
4
- * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
5
- */
1
+ import { useFieldArray, useWatch } from "react-hook-form";
6
2
  const useFieldArrayDeprecated = (name, options) => {
7
- const {
8
- fields,
9
- append,
10
- remove,
11
- update,
12
- move
13
- } = useFieldArray({
3
+ const { fields, append, remove, update, move } = useFieldArray({
14
4
  name,
15
- rules: {
16
- validate: options?.validate
17
- }
18
- });
19
- const value = useWatch({
20
- name
5
+ rules: { validate: options?.validate }
21
6
  });
7
+ const value = useWatch({ name });
22
8
  return {
23
9
  fields: {
24
10
  push: append,
25
- value: value,
11
+ value,
26
12
  remove,
27
13
  update,
28
- map: callback => fields.map((_, index) => callback(`${name}.${index}`, index)),
14
+ map: (callback) => fields.map((_, index) => callback(`${name}.${index}`, index)),
29
15
  move,
30
16
  length: fields.length
31
17
  }
32
18
  };
33
19
  };
34
-
35
- export { useFieldArrayDeprecated };
20
+ export {
21
+ useFieldArrayDeprecated
22
+ };
@@ -0,0 +1,23 @@
1
+ /// <reference types="react" />
2
+ import type { FieldValues } from 'react-hook-form';
3
+ /**
4
+ * @deprecated Use [useFormContext](https://www.react-hook-form.com/api/useformcontext/)
5
+ *
6
+ * @example
7
+ * ```tsx
8
+ * const Input = () {
9
+ * const { setValue } = useFormContext()
10
+ *
11
+ * setValue('username', 'John Wick')
12
+ * }
13
+ * ```
14
+ */
15
+ export declare const useFormDeprecated: <TFieldValues extends FieldValues>() => {
16
+ change: import("react-hook-form").UseFormSetValue<TFieldValues>;
17
+ resetFieldState: import("react-hook-form").UseFormResetField<TFieldValues>;
18
+ getFieldState: import("react-hook-form").UseFormGetFieldState<TFieldValues>;
19
+ batch: (callback: () => void) => void;
20
+ restart: import("react-hook-form").UseFormReset<TFieldValues>;
21
+ reset: import("react-hook-form").UseFormReset<TFieldValues>;
22
+ submit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
23
+ };
@@ -1,36 +1,19 @@
1
- import { useContext } from 'react';
2
- import { useFormContext } from 'react-hook-form';
3
- import { FormSubmitContext } from '../components/Form/index.js';
4
-
5
- /**
6
- * @deprecated Use [useFormContext](https://www.react-hook-form.com/api/useformcontext/)
7
- *
8
- * @example
9
- * ```tsx
10
- * const Input = () {
11
- * const { setValue } = useFormContext()
12
- *
13
- * setValue('username', 'John Wick')
14
- * }
15
- * ```
16
- */
1
+ import { useContext } from "react";
2
+ import { useFormContext } from "react-hook-form";
3
+ import { FormSubmitContext } from "../components/Form/index.js";
17
4
  const useFormDeprecated = () => {
18
- const {
19
- setValue,
20
- resetField,
21
- getFieldState,
22
- reset
23
- } = useFormContext();
5
+ const { setValue, resetField, getFieldState, reset } = useFormContext();
24
6
  const formSubmitContext = useContext(FormSubmitContext);
25
7
  return {
26
8
  change: setValue,
27
9
  resetFieldState: resetField,
28
10
  getFieldState,
29
- batch: callback => callback(),
11
+ batch: (callback) => callback(),
30
12
  restart: reset,
31
13
  reset,
32
14
  submit: formSubmitContext.handleSubmit
33
15
  };
34
16
  };
35
-
36
- export { useFormDeprecated };
17
+ export {
18
+ useFormDeprecated
19
+ };
@@ -0,0 +1,39 @@
1
+ import type { FieldValues } from 'react-hook-form';
2
+ type UseFormStateParams = {
3
+ subscription?: Record<string, boolean>;
4
+ };
5
+ /**
6
+ * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get form states.
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * const Input = () {
11
+ * const username = useWatch({
12
+ * name: 'username'
13
+ * })
14
+ *
15
+ * const { isValid } = useFormState()
16
+ * }
17
+ * ```
18
+
19
+ */
20
+ export declare const useFormStateDeprecated: <TFieldValues extends FieldValues>(_params?: UseFormStateParams) => {
21
+ dirtySinceLastSubmit: boolean;
22
+ submitErrors: (Record<string, Partial<{
23
+ type: string | number;
24
+ message: string;
25
+ }>> & Partial<{
26
+ type: string | number;
27
+ message: string;
28
+ }>) | undefined;
29
+ values: TFieldValues;
30
+ hasValidationErrors: boolean;
31
+ pristine: boolean;
32
+ errors: import("react-hook-form").FieldErrors<TFieldValues>;
33
+ initialValues: Readonly<import("react-hook-form").DeepPartial<TFieldValues>> | undefined;
34
+ touched: Partial<Readonly<import("react-hook-form").DeepMap<import("react-hook-form").DeepPartial<TFieldValues>, boolean>>>;
35
+ submitting: boolean;
36
+ invalid: boolean;
37
+ valid: boolean;
38
+ };
39
+ export {};
@@ -1,24 +1,6 @@
1
- import { useFormContext, useWatch } from 'react-hook-form';
2
-
3
- /**
4
- * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get form states.
5
- *
6
- * @example
7
- * ```tsx
8
- * const Input = () {
9
- * const username = useWatch({
10
- * name: 'username'
11
- * })
12
- *
13
- * const { isValid } = useFormState()
14
- * }
15
- * ```
16
-
17
- */
18
- const useFormStateDeprecated = _params => {
19
- const {
20
- formState
21
- } = useFormContext();
1
+ import { useFormContext, useWatch } from "react-hook-form";
2
+ const useFormStateDeprecated = (_params) => {
3
+ const { formState } = useFormContext();
22
4
  return {
23
5
  dirtySinceLastSubmit: formState.isDirty,
24
6
  submitErrors: formState.errors.root,
@@ -33,5 +15,6 @@ const useFormStateDeprecated = _params => {
33
15
  valid: formState.isValid
34
16
  };
35
17
  };
36
-
37
- export { useFormStateDeprecated };
18
+ export {
19
+ useFormStateDeprecated
20
+ };
@@ -0,0 +1,3 @@
1
+ import type { DeepPartial, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
2
+ export type CallbackFn<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = (value: FieldPathValue<TFieldValues, TFieldName>, values: DeepPartial<TFieldValues>) => void | Promise<void>;
3
+ export declare const useOnFieldChange: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>>(fieldName: TFieldName, callback: CallbackFn<TFieldValues, TFieldName>, enabled?: boolean) => void;
@@ -1,14 +1,12 @@
1
- import { useRef, useEffect } from 'react';
2
- import { useFormContext } from 'react-hook-form';
3
-
1
+ import { useRef, useEffect } from "react";
2
+ import { useFormContext } from "react-hook-form";
4
3
  const useOnFieldChange = (fieldName, callback, enabled = true) => {
5
- const {
6
- watch,
7
- getValues
8
- } = useFormContext();
9
- const previousValues = useRef(getValues(fieldName));
4
+ const { watch, getValues } = useFormContext();
5
+ const previousValues = useRef(
6
+ getValues(fieldName)
7
+ );
10
8
  useEffect(() => {
11
- const subscription = watch(value => {
9
+ const subscription = watch((value) => {
12
10
  if (previousValues.current !== value[fieldName] && enabled) {
13
11
  previousValues.current = value[fieldName];
14
12
  callback(value[fieldName], value)?.catch(() => null);
@@ -17,5 +15,6 @@ const useOnFieldChange = (fieldName, callback, enabled = true) => {
17
15
  return () => subscription.unsubscribe();
18
16
  }, [callback, enabled, watch, getValues, fieldName]);
19
17
  };
20
-
21
- export { useOnFieldChange };
18
+ export {
19
+ useOnFieldChange
20
+ };