@ultraviolet/form 2.14.4 → 2.14.6

package/README.md

@@ -5,7 +5,7 @@
 Ultraviolet Form is an extension of Ultraviolet UI including everything to build forms using React.
 It is using [React Hook Form](https://react-hook-form.com/) under the hood.
 
-## Installation
+## Get Started
 
 ```sh
 $ pnpm add @ultraviolet/form @emotion/react @emotion/styled

package/dist/components/CheckboxGroupField/index.d.ts

@@ -6,17 +6,17 @@ type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends Fie
 export declare const CheckboxGroupField: {
     <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, rules, }: CheckboxGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
-        error?: import("react").ReactNode;
-        size?: number | undefined;
-        progress?: boolean | undefined;
+        error?: string | import("react").ReactNode;
+        size?: number;
+        progress?: boolean;
         helper?: import("react").ReactNode;
-        disabled?: boolean | undefined;
-        checked?: boolean | "indeterminate" | undefined;
-        className?: string | undefined;
-        "data-visibility"?: string | undefined;
-        required?: boolean | undefined;
-        'data-testid'?: string | undefined;
-        tooltip?: string | undefined;
+        disabled?: boolean;
+        checked?: boolean | "indeterminate";
+        className?: string;
+        "data-visibility"?: string;
+        required?: boolean;
+        'data-testid'?: string;
+        tooltip?: string;
     } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex"> & (({
         "aria-label"?: undefined;
     } & {

package/dist/components/NumberInputFieldV2/index.cjs

@@ -23,6 +23,7 @@ const NumberInputFieldV2 = ({
   success,
   helper,
   rules,
+  controls = true,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   required,
@@ -58,6 +59,6 @@ const NumberInputFieldV2 = ({
     label: label ?? "",
     max,
     min
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required });
+  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
 };
 exports.NumberInputFieldV2 = NumberInputFieldV2;

package/dist/components/NumberInputFieldV2/index.d.ts

@@ -2,10 +2,10 @@ import { NumberInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-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'>> & {
+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' | 'controls'>> & {
     className?: string;
     name: string;
     required?: boolean;
 };
-export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, rules, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, }: NumberInputV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, rules, controls, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, }: NumberInputV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputFieldV2/index.js

@@ -21,6 +21,7 @@ const NumberInputFieldV2 = ({
   success,
   helper,
   rules,
+  controls = true,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   required,
@@ -56,7 +57,7 @@ const NumberInputFieldV2 = ({
     label: label ?? "",
     max,
     min
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required });
+  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
 };
 export {
   NumberInputFieldV2

package/dist/components/RadioGroupField/index.d.ts

@@ -9,20 +9,20 @@ export 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, }: Omit<({
         error?: import("react").ReactNode;
-        checked?: boolean | undefined;
+        checked?: boolean;
         value: string | number;
         helper?: import("react").ReactNode;
-        className?: string | undefined;
-        'data-testid'?: string | undefined;
-        tooltip?: string | undefined;
+        className?: string;
+        'data-testid'?: string;
+        tooltip?: string;
     } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "onFocus" | "autoFocus" | "id" | "onKeyDown"> & ({
         'aria-label': string;
-        label?: undefined;
+        label?: never;
     } | {
-        'aria-label'?: undefined;
+        'aria-label'?: never;
         label: import("react").ReactNode;
     }))) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
-        name?: string | undefined;
+        name?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SelectInputField/index.cjs

@@ -53,8 +53,7 @@ const SelectInputField = ({
   })), [optionsProp, children]);
   const parse = React.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
   const format = React.useCallback((val) => {
-    if (multiple)
-      return formatProp(val, name);
+    if (multiple) return formatProp(val, name);
     const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
     let selected = "";
     if (val && options) {

package/dist/components/SelectInputField/index.d.ts

@@ -77,6 +77,6 @@ export type SelectInputFieldProps<TFieldValues extends FieldValues, TName extend
 };
 export declare const SelectInputField: {
     <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ 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, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
-    Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption, boolean, GroupBase<import("@ultraviolet/ui").SelectOption>> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
+    Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
 };
 export {};

package/dist/components/SelectInputField/index.js

@@ -51,8 +51,7 @@ const SelectInputField = ({
   })), [optionsProp, children]);
   const parse = useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
   const format = useCallback((val) => {
-    if (multiple)
-      return formatProp(val, name);
+    if (multiple) return formatProp(val, name);
     const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
     let selected = "";
     if (val && options) {

package/dist/components/SelectableCardGroupField/index.d.ts

@@ -5,38 +5,6 @@ import type { BaseFieldProps } from '../../types';
 type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
 export declare const SelectableCardGroupField: {
     <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, }: SelectableCardGroupFieldProps<TFieldValues, TName>): JSX.Element;
-    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: {
-        value: string | number;
-        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-        disabled?: boolean | undefined;
-        children?: import("react").ReactNode | (({ disabled, checked, }: Pick<{
-            name?: string | undefined;
-            children?: import("react").ReactNode | any;
-            value: string | number;
-            onChange: import("react").ChangeEventHandler<HTMLInputElement>;
-            showTick?: boolean | undefined;
-            type?: "checkbox" | "radio" | undefined;
-            disabled?: boolean | undefined;
-            checked?: boolean | undefined;
-            className?: string | undefined;
-            isError?: boolean | undefined;
-            onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-            onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-            id?: string | undefined;
-            tooltip?: string | undefined;
-            label?: import("react").ReactNode;
-            'data-testid'?: string | undefined;
-        }, "disabled" | "checked">) => import("react").ReactNode);
-        className?: string | undefined;
-        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
-        name?: string | undefined;
-        label?: import("react").ReactNode;
-        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-        id?: string | undefined;
-        'data-testid'?: string | undefined;
-        tooltip?: string | undefined;
-        key?: import("react").Key | null | undefined;
-        isError?: boolean | undefined;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/TimeField/index.cjs

@@ -49,8 +49,7 @@ const TimeField = ({
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.TimeInput, { name: field.name, placeholder, schedule, required, value: parseTime(field.value), onChange: (val) => {
-    if (!val)
-      return;
+    if (!val) return;
     onChange?.(val);
     const [hours, minutes] = val.value.split(":");
     const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();

package/dist/components/TimeField/index.js

@@ -47,8 +47,7 @@ const TimeField = ({
     }
   });
   return /* @__PURE__ */ jsx(TimeInput, { name: field.name, placeholder, schedule, required, value: parseTime(field.value), onChange: (val) => {
-    if (!val)
-      return;
+    if (!val) return;
     onChange?.(val);
     const [hours, minutes] = val.value.split(":");
     const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();

package/dist/components/ToggleGroupField/index.d.ts

@@ -6,20 +6,20 @@ type ToggleGroupFieldProps<TFieldValues extends FieldValues, TName extends Field
 export declare const ToggleGroupField: {
     <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: ToggleGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: Omit<{
-        id?: string | undefined;
-        checked?: boolean | undefined;
+        id?: string;
+        checked?: boolean;
         name: string;
-        tooltip?: string | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
-        size?: "small" | "large" | undefined;
-        labelPosition?: "left" | "right" | undefined;
+        tooltip?: string;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement>;
+        size?: "large" | "small";
+        labelPosition?: "left" | "right";
         label?: import("react").ReactNode;
         helper?: import("react").ReactNode;
-        disabled?: boolean | undefined;
-        className?: string | undefined;
-        required?: boolean | undefined;
-        error?: string | boolean | undefined;
-        'data-testid'?: string | undefined;
+        disabled?: boolean;
+        className?: string;
+        required?: boolean;
+        error?: boolean | string;
+        'data-testid'?: string;
     } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
         value: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/hooks/useForm.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FieldValues } from 'react-hook-form';
 /**
  * @deprecated Use [useFormContext](https://www.react-hook-form.com/api/useformcontext/)
@@ -19,5 +18,5 @@ export declare const useFormDeprecated: <TFieldValues extends FieldValues>() =>
     batch: (callback: () => void) => void;
     restart: import("react-hook-form").UseFormReset<TFieldValues>;
     reset: import("react-hook-form").UseFormReset<TFieldValues>;
-    submit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+    submit: (e?: import("react").BaseSyntheticEvent) => Promise<void>;
 };

package/dist/hooks/useFormState.d.ts

@@ -21,10 +21,10 @@ export declare const useFormStateDeprecated: <TFieldValues extends FieldValues>(
     dirtySinceLastSubmit: boolean;
     submitErrors: (Record<string, Partial<{
         type: string | number;
-        message: string;
+        message: import("react-hook-form").Message;
     }>> & Partial<{
         type: string | number;
-        message: string;
+        message: import("react-hook-form").Message;
     }>) | undefined;
     values: TFieldValues;
     hasValidationErrors: boolean;

package/dist/validators/index.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    minDate: (minDate?: Date | undefined) => (value: Date) => boolean;
-    maxDate: (maxDate?: Date | undefined) => (value: Date) => boolean;
+    minDate: (minDate?: Date) => (value: Date) => boolean;
+    maxDate: (maxDate?: Date) => (value: Date) => boolean;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.14.4",
+  "version": "2.14.6",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -55,12 +55,12 @@
     "@emotion/styled": "11.11.5",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-hook-form": "7.51.5"
+    "react-hook-form": "7.52.0"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -71,8 +71,8 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
-    "react-hook-form": "7.51.5",
-    "@ultraviolet/ui": "1.55.3",
+    "react-hook-form": "7.52.0",
+    "@ultraviolet/ui": "1.56.1",
     "@ultraviolet/themes": "1.12.0"
   },
   "scripts": {