@ultraviolet/form 2.0.0-next.2 → 2.0.0-next.3

package/dist/hooks/useFormState.js

@@ -1,17 +1,16 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 /**
  * @deprecated
  */
 const useFormStateDeprecated = _params => {
   const {
-    formState,
-    watch
+    formState
   } = useFormContext();
   return {
     dirtySinceLastSubmit: formState.isDirty,
     submitErrors: formState.errors.root,
-    values: watch(),
+    values: useWatch(),
     hasValidationErrors: !formState.isValid,
     pristine: !formState.isDirty,
     errors: formState.errors,

package/dist/index.d.ts

@@ -1,13 +1,12 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { Checkbox, CheckboxGroup, DateInput, Radio, SelectableCard, NumberInput, TagInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
 import * as react from 'react';
-import { ComponentProps, ReactNode, FocusEvent, JSX, ForwardedRef, FocusEventHandler } from 'react';
+import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, Validate, PathValue, Path, UseControllerProps, FieldError, UseFormReturn, DefaultValues, FieldErrors, DeepPartial, FieldPathValue, ArrayPath, FieldArray } from 'react-hook-form';
-export * from 'react-hook-form';
-import * as Select from 'react-select';
-import Select__default, { Props, CommonProps, GroupBase } from 'react-select';
+import { FieldValues, FieldPath, Validate, PathValue, Path, UseControllerProps, FieldError, UseFormReturn, DefaultValues, FieldErrors, FieldPathValue, DeepPartial, ArrayPath, FieldArray } from 'react-hook-form';
+export { ControllerRenderProps, DeepPartial, FieldErrors, FieldPath, FieldValues, Path, PathValue, UseFieldArrayMove, UseFieldArrayRemove, UseFormReturn, UseFormSetValue, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { CSSObject, Theme, css } from '@emotion/react';
+import Select, { OptionProps, GroupBase, Props, CommonProps } from 'react-select';
 
 declare const FORM_ERROR = "FINAL_FORM/form-error";
 
@@ -39,14 +38,12 @@ type BaseFieldProps<TFieldValues extends FieldValues = FieldValues> = {
 };
 
 type CheckboxFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof Checkbox>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
-    label?: string;
     className?: string;
     children?: ReactNode;
-    required?: boolean;
 };
 declare const CheckboxField: <TFieldValues extends FieldValues>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, }: CheckboxFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'onChange' | 'required' | 'direction' | 'children' | 'value' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend' | 'name'>>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'onChange' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
 declare const CheckboxGroupField: {
     <TFieldValues extends FieldValues>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, }: CheckboxGroupFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: Omit<({
@@ -75,7 +72,6 @@ declare const CheckboxGroupField: {
 };
 
 type DateFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
-    name: string;
     maxDate?: Date;
     minDate?: Date;
     disabled?: boolean;
@@ -122,10 +118,10 @@ type FormProps<TFormValues extends FieldValues = FieldValues> = {
         change: UseFormReturn<TFormValues>['setValue'];
     }) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn;
 } & XOR<[
-    /**
-     * @deprecated
-     */
     {
+        /**
+         * @deprecated
+         */
         initialValues?: DefaultValues<TFormValues>;
     },
     {
@@ -134,12 +130,10 @@ type FormProps<TFormValues extends FieldValues = FieldValues> = {
 ]>;
 declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip'>> & {
+type RadioFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
     className?: string;
-    name: string;
-    required?: boolean;
 };
-declare const RadioField: <TFieldValues extends FieldValues>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, }: RadioFieldProps<TFieldValues>) => JSX.Element;
+declare const RadioField: <TFieldValues extends FieldValues>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, }: RadioFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -180,7 +174,7 @@ type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & C
     required?: boolean;
     time?: boolean;
 };
-type StateManagedSelect = typeof Select__default;
+type StateManagedSelect = typeof Select;
 type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
     /**
      * Name of the animation
@@ -198,26 +192,24 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
      */
     customComponents?: SelectProps['components'];
     children: ReactNode;
-    emptyState?: ComponentProps<Select__default>['noOptionsMessage'];
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
 }>;
 type SelectInputFieldProps<TFieldValues extends FieldValues = FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle'>> & {
-    label?: string;
     multiple?: boolean;
     parse?: (value: unknown, name?: string) => unknown;
     format?: (value: unknown, name: string) => unknown;
     maxLength?: number;
     minLength?: number;
-    name: string;
 };
 declare const SelectInputField: {
     <TFieldValues extends FieldValues>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, noOptionsMessage, customStyle, }: SelectInputFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
-    Option: (props: Partial<Select.OptionProps<{
+    Option: (props: Partial<OptionProps<{
         value: string;
         label: ReactNode;
         disabled?: boolean | undefined;
         description?: string | undefined;
         inlineDescription?: string | undefined;
-    }, boolean, Select.GroupBase<{
+    }, boolean, GroupBase<{
         value: string;
         label: ReactNode;
         disabled?: boolean | undefined;
@@ -232,12 +224,12 @@ declare const SelectInputField: {
     }>) => react.JSX.Element;
 };
 
-type SelectableCardFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'showTick' | 'type' | 'id' | 'children' | 'name' | 'tooltip' | 'label'>> & {
+type SelectableCardFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label'>> & {
     className?: string;
 };
 declare const SelectableCardField: <TFieldValues extends FieldValues>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, }: SelectableCardFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type NumberInputValueFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'value' | 'onChange' | 'className'>> & {
+type NumberInputValueFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'onChange' | 'className'>> & {
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
 };
@@ -321,7 +313,7 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
@@ -597,7 +589,7 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
     } | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "type" | "required" | "min" | "max" | "maxLength" | "minLength" | "onChange" | "onBlur" | "disabled" | "label" | "onFocus" | "autoFocus" | "id" | "size" | "autoComplete" | "placeholder" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "readOnly" | "noTopLabel" | "cols" | "rows" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit" | "valid">> & {
+} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "type" | "min" | "max" | "maxLength" | "minLength" | "onChange" | "onBlur" | "disabled" | "onFocus" | "autoFocus" | "id" | "size" | "autoComplete" | "placeholder" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "readOnly" | "noTopLabel" | "cols" | "rows" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit" | "valid">> & {
     className?: string | undefined;
     /**
      * @deprecated Use rules instead
@@ -614,8 +606,6 @@ type TimeFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldVal
 declare const TimeField: <TFieldValues extends FieldValues>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, }: TimeFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ToggleFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
-    name: string;
-    required?: boolean;
     parse?: (value: boolean) => any;
     format?: (value: any) => boolean;
 };
@@ -636,10 +626,8 @@ type SubmitProps = {
 };
 declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'onChange' | 'value' | 'legend' | 'children' | 'required' | 'name' | 'error' | 'helper' | 'direction'>> & {
+type RadioGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'onChange' | 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
     className?: string;
-    name: string;
-    required?: boolean;
 };
 declare const RadioGroupField: {
     <TFieldValues extends FieldValues>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, }: RadioGroupFieldProps<TFieldValues>): JSX.Element;
@@ -664,16 +652,6 @@ declare const RadioGroupField: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-type FormSpyProps<TFieldValues extends FieldValues> = {
-    onChange?: (values: {
-        values: DeepPartial<TFieldValues>;
-    }) => void;
-};
-/**
- * @deprecated
- */
-declare const FormSpy: <TFieldValues extends FieldValues>({ onChange, }: FormSpyProps<TFieldValues>) => null;
-
 type ErrorContextValue = {
     errors: RequiredErrors;
     getError: (meta: MetaField, error?: FieldError) => string | undefined;
@@ -685,11 +663,11 @@ type ErrorProviderProps = {
 declare const ErrorProvider: ({ children, errors }: ErrorProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const useErrors: () => ErrorContextValue;
 
-type CallbackFn<TFieldValues extends FieldValues, T> = (value: T, values: DeepPartial<TFieldValues>) => void | Promise<void>;
+type CallbackFn<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = (value: FieldPathValue<TFieldValues, TFieldName>, values: DeepPartial<TFieldValues>) => void | Promise<void>;
 /**
  * @deprecated
  */
-declare const useOnFieldChange: <T, TFieldValues extends FieldValues = FieldValues>(fieldName: FieldPath<TFieldValues>, callback: CallbackFn<TFieldValues, T>, enabled?: boolean) => void;
+declare const useOnFieldChange: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>>(fieldName: TFieldName, callback: CallbackFn<TFieldValues, TFieldName>, enabled?: boolean) => void;
 
 type UseFormStateParams = {
     subscription?: Record<string, boolean>;
@@ -769,4 +747,4 @@ declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = Fi
     };
 };
 
-export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, FormSpy, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };
+export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -1,6 +1,6 @@
 export { FORM_ERROR } from './constants.js';
 export { ErrorProvider, useErrors } from './providers/ErrorContext/index.js';
-export * from 'react-hook-form';
+export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 export { CheckboxField } from './components/CheckboxField/index.js';
 export { CheckboxGroupField } from './components/CheckboxGroupField/index.js';
 export { DateField } from './components/DateField/index.js';
@@ -16,7 +16,6 @@ export { TextInputField } from './components/TextInputField/index.js';
 export { TimeField } from './components/TimeField/index.js';
 export { ToggleField } from './components/ToggleField/index.js';
 export { RadioGroupField } from './components/RadioGroupField/index.js';
-export { FormSpy } from './components/FormSpy/index.js';
 export { useFormStateDeprecated } from './hooks/useFormState.js';
 export { useFieldDeprecated } from './hooks/useField.js';
 export { useFormDeprecated } from './hooks/useForm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.3",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -35,24 +35,25 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "react": "18.x",
-    "react-dom": "18.x"
+    "react-dom": "18.x",
+    "react-hook-form": "7.47.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@types/final-form-focus": "1.1.6",
-    "@types/react": "18.2.34",
-    "@types/react-dom": "18.2.14",
+    "@babel/core": "7.23.3",
+    "@types/final-form-focus": "1.1.7",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.2",
+    "@babel/runtime": "7.23.4",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "react-select": "5.8.0",
     "react-hook-form": "^7.47.0",
-    "react-select": "5.7.5",
-    "@ultraviolet/ui": "1.24.0"
+    "@ultraviolet/ui": "1.26.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"