@ultraviolet/form 2.6.2 → 2.7.1

package/dist/components/CheckboxField/index.js

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
 const CheckboxField = ({
+  id,
   name,
   label,
   size,
@@ -19,7 +20,6 @@ const CheckboxField = ({
   helper,
   tooltip,
   'data-testid': dataTestId,
-  value,
   shouldUnregister = false
 }) => {
   const {
@@ -40,9 +40,10 @@ const CheckboxField = ({
     }
   });
   return jsx(Checkbox, {
+    id: id,
     name: field.name,
     onChange: event => {
-      field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
+      field.onChange(event.target.checked);
       onChange?.(event.target.checked);
     },
     onBlur: event => {
@@ -53,7 +54,7 @@ const CheckboxField = ({
     size: size,
     progress: progress,
     disabled: field.disabled,
-    checked: Array.isArray(field.value) ? field.value.includes(value) : !!field.value,
+    checked: !!field.value,
     error: getError({
       label: label ?? ''
     }, error),
@@ -63,7 +64,6 @@ const CheckboxField = ({
     "data-testid": dataTestId,
     helper: helper,
     tooltip: tooltip,
-    value: value,
     children: children
   });
 };

package/dist/components/NumberInputField/index.js

@@ -3,6 +3,9 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
+/**
+ * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
+ */
 const NumberInputField = ({
   disabled,
   maxValue,

package/dist/components/RadioField/index.js

@@ -3,6 +3,9 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
+/**
+ * @deprecated This component is deprecated, use `RadioGroupField` instead.
+ */
 const RadioField = ({
   className,
   'data-testid': dataTestId,

package/dist/components/TextInputField/index.js

@@ -3,6 +3,9 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
+/**
+ * @deprecated This component is deprecated, please use `TextInputFieldV2` instead
+ */
 const TextInputField = ({
   autoCapitalize,
   autoComplete,

package/dist/components/TextInputFieldV2/index.js

@@ -16,6 +16,7 @@ const TextInputField = ({
   helper,
   label,
   labelDescription,
+  loading,
   onChange,
   minLength,
   maxLength,
@@ -68,6 +69,7 @@ const TextInputField = ({
     }, error),
     helper: helper,
     label: label,
+    loading: loading,
     labelDescription: labelDescription,
     minLength: minLength,
     maxLength: maxLength,

package/dist/index.d.ts

@@ -42,11 +42,11 @@ type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TF
     shouldUnregister?: UseControllerProps<TFieldValues, TName>['shouldUnregister'];
 };
 
-type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof Checkbox>, 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
+type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
     className?: string;
     children?: ReactNode;
 };
-declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
 declare const CheckboxGroupField: {
@@ -63,7 +63,7 @@ declare const CheckboxGroupField: {
         required?: boolean | undefined;
         'data-testid'?: string | undefined;
         tooltip?: string | undefined;
-    } & Pick<react.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "onFocus" | "name" | "autoFocus" | "id"> & (({
+    } & Pick<react.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id"> & (({
         "aria-label"?: undefined;
     } & {
         children: react.ReactNode;
@@ -151,6 +151,9 @@ declare const Form: <TFormValues extends FieldValues>({ children, methods: metho
 type RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
     className?: string;
 };
+/**
+ * @deprecated This component is deprecated, use `RadioGroupField` instead.
+ */
 declare const RadioField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
@@ -251,6 +254,9 @@ type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
 };
+/**
+ * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
+ */
 declare const NumberInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NumberInputV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'aria-label' | 'autoFocus' | 'readOnly' | 'min' | 'max'>> & {
@@ -284,6 +290,9 @@ type TextInputFieldProps$1<TFieldValues extends FieldValues, TName extends Field
     formatOnBlur?: boolean;
     innerRef?: Ref<HTMLInputElement>;
 };
+/**
+ * @deprecated This component is deprecated, please use `TextInputFieldV2` instead
+ */
 declare const TextInputField$1: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, fillAvailable, generated, id, label, multiline, name, noTopLabel, notice, onChange, onFocus, onKeyDown, onKeyUp, onBlur, placeholder, random, readOnly, required, resizable, rows, type, unit, size, rules, valid, parse, format, formatOnBlur, regex: regexes, min, max, minLength, maxLength, validate, defaultValue, customError, innerRef, shouldUnregister, "data-testid": dataTestId, }: TextInputFieldProps$1<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name' | 'onChange'> & {
@@ -292,7 +301,7 @@ type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPa
 /**
  * This component offers a form field based on Ultraviolet UI TextInputV2 component
  */
-declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoFocus, clearable, className, tabIndex, "data-testid": dataTestId, disabled, helper, label, labelDescription, onChange, minLength, maxLength, name, onFocus, onBlur, placeholder, readOnly, required, success, tooltip, type, validate, regex: regexes, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoFocus, clearable, className, tabIndex, "data-testid": dataTestId, disabled, helper, label, labelDescription, loading, onChange, minLength, maxLength, name, onFocus, onBlur, placeholder, readOnly, required, success, tooltip, type, validate, regex: regexes, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TimeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
     name: string;
@@ -325,24 +334,22 @@ type RadioGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldP
 };
 declare const RadioGroupField: {
     <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues, TName>): JSX.Element;
-    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: {
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: Omit<({
+        error?: react.ReactNode;
+        checked?: boolean | undefined;
         value: string | number;
-        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
-        disabled?: boolean | undefined;
+        helper?: react.ReactNode;
         className?: string | undefined;
-        ref?: react.Ref<HTMLInputElement> | undefined;
-        onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
-        name?: string | undefined;
-        autoFocus?: boolean | undefined;
-        id?: string | undefined;
-        'aria-label'?: string | undefined;
-        label?: react.ReactNode;
         'data-testid'?: string | undefined;
-        helper?: react.ReactNode;
         tooltip?: string | undefined;
-        error?: react.ReactNode;
-        key?: react.Key | null | undefined;
-        onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+    } & Required<Pick<react.InputHTMLAttributes<HTMLInputElement>, "onChange">> & Pick<react.InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "onFocus" | "autoFocus" | "id" | "onKeyDown"> & ({
+        'aria-label': string;
+        label?: undefined;
+    } | {
+        'aria-label'?: undefined;
+        label: react.ReactNode;
+    })) & react.RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+        name?: string | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.6.2",
+  "version": "2.7.1",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -53,7 +53,7 @@
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
     "react-hook-form": "7.50.1",
-    "@ultraviolet/ui": "1.36.0"
+    "@ultraviolet/ui": "1.37.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",