diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.mdx b/packages/grafana-ui/src/components/Forms/FieldArray.mdx index 04060391c1d..8f428a46141 100644 --- a/packages/grafana-ui/src/components/Forms/FieldArray.mdx +++ b/packages/grafana-ui/src/components/Forms/FieldArray.mdx @@ -7,6 +7,8 @@ import { FieldArray } from './FieldArray'; `FieldArray` provides a way to render a list of dynamic inputs. It exposes the functionality of `useFieldArray` in [react-hook-form](https://react-hook-form.com/advanced-usage/#FieldArrays). `FieldArray` must be wrapped at some level by a `
` element. +**Note: This component is deprecated and will be removed in the future versions of grafana/ui. Use the `useFieldArray` hook from react-hook-form instead.** + ### Usage ```jsx diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.tsx b/packages/grafana-ui/src/components/Forms/FieldArray.tsx index bab7d3ebae1..69ebbbca657 100644 --- a/packages/grafana-ui/src/components/Forms/FieldArray.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldArray.tsx @@ -7,6 +7,9 @@ export interface FieldArrayProps extends UseFieldArrayProps { children: (api: FieldArrayApi) => JSX.Element; } +/** + * @deprecated use the `useFieldArray` hook from react-hook-form instead + */ export const FieldArray: FC = ({ name, control, children, ...rest }) => { const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({ control, diff --git a/packages/grafana-ui/src/components/Forms/Form.mdx b/packages/grafana-ui/src/components/Forms/Form.mdx index 35757b43ddd..3c85eb86636 100644 --- a/packages/grafana-ui/src/components/Forms/Form.mdx +++ b/packages/grafana-ui/src/components/Forms/Form.mdx @@ -7,6 +7,8 @@ import { Form } from './Form'; Form component provides a way to build simple forms at Grafana. It is built on top of [react-hook-form](https://react-hook-form.com/) library and incorporates the same concepts while adjusting the API slightly. +**Note: This component is deprecated and will be removed in the future versions of grafana/ui. Use the `useForm` hook from react-hook-form instead.** + ## Usage ```tsx diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx index 468ad8266e8..065dab5c794 100644 --- a/packages/grafana-ui/src/components/Forms/Form.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.tsx @@ -15,6 +15,9 @@ interface FormProps extends Omit({ defaultValues, onSubmit, diff --git a/packages/grafana-ui/src/components/InputControl.tsx b/packages/grafana-ui/src/components/InputControl.tsx index ab9d7a4771f..3eec30ac53b 100644 --- a/packages/grafana-ui/src/components/InputControl.tsx +++ b/packages/grafana-ui/src/components/InputControl.tsx @@ -2,4 +2,8 @@ * Rollup does not support renamed exports so do not change this to export { Controller as InputControl } ... */ import { Controller } from 'react-hook-form'; + +/** + * @deprecated use the `Controller` component from react-hook-form instead + */ export const InputControl = Controller; diff --git a/packages/grafana-ui/src/types/forms.ts b/packages/grafana-ui/src/types/forms.ts index 86e5869c861..f7e654f27c1 100644 --- a/packages/grafana-ui/src/types/forms.ts +++ b/packages/grafana-ui/src/types/forms.ts @@ -1,12 +1,18 @@ import { UseFormReturn, FieldValues, FieldErrors, FieldArrayMethodProps } from 'react-hook-form'; export type { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form'; +/** + * @deprecated use the types from react-hook-form instead + */ export type FormAPI = Omit, 'handleSubmit'> & { errors: FieldErrors; }; type FieldArrayValue = Partial | Array>; +/** + * @deprecated use the types from react-hook-form instead + */ export interface FieldArrayApi { fields: Array>; append: (value: FieldArrayValue, options?: FieldArrayMethodProps) => void;