@ultraviolet/form 2.3.1 → 2.3.3

package/dist/components/NumberInputFieldV2/index.js

@@ -0,0 +1,88 @@
+import { NumberInputV2 } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+
+const NumberInputFieldV2 = ({
+  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 = false
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      ...rules
+    }
+  });
+  return jsx(NumberInputV2, {
+    name: field.name,
+    value: field.value,
+    disabled: disabled,
+    onBlur: event => {
+      field.onBlur();
+      onBlur?.(event);
+    },
+    onChange: event => {
+      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
+      field.onChange(event ?? null);
+      onChange?.(event);
+    },
+    max: max,
+    min: min,
+    size: size,
+    step: step,
+    className: className,
+    "data-testid": dataTestId,
+    id: id,
+    label: label,
+    labelDescription: labelDescription,
+    placeholder: placeholder,
+    error: getError({
+      label: label ?? '',
+      max,
+      min
+    }, error),
+    success: success,
+    helper: helper,
+    tooltip: tooltip,
+    unit: unit,
+    "aria-label": ariaLabel,
+    autoFocus: autoFocus,
+    readOnly: readOnly
+  });
+};
+
+export { NumberInputFieldV2 };

package/dist/components/TextInputFieldV2/index.js

@@ -0,0 +1,95 @@
+import { TextInputV2 } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+
+/**
+ * This component offers a form field based on Ultraviolet UI TextInputV2 component
+ */
+const TextInputField = ({
+  autoFocus,
+  clearable,
+  className,
+  tabIndex,
+  'data-testid': dataTestId,
+  disabled,
+  helper,
+  label,
+  labelDescription,
+  onChange,
+  minLength,
+  maxLength,
+  name,
+  onFocus,
+  onBlur,
+  placeholder,
+  readOnly,
+  required,
+  success,
+  tooltip,
+  validate,
+  regex: regexes
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    rules: {
+      required,
+      validate: {
+        ...(regexes ? {
+          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
+        } : {}),
+        ...validate
+      },
+      minLength,
+      maxLength
+    }
+  });
+  return jsx(TextInputV2, {
+    autoFocus: autoFocus,
+    className: className,
+    clearable: clearable,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    error: getError({
+      regex: regexes,
+      // minLength,
+      // maxLength,
+      label,
+      value: field.value
+    }, error),
+    helper: helper,
+    label: label,
+    labelDescription: labelDescription,
+    minLength: minLength,
+    maxLength: maxLength,
+    name: name,
+    onBlur: event => {
+      onBlur?.(event);
+      field.onBlur();
+    },
+    onChange: event => {
+      field.onChange(event);
+      onChange?.(event);
+    },
+    onFocus: event => {
+      onFocus?.(event);
+    },
+    placeholder: placeholder,
+    readOnly: readOnly,
+    required: required,
+    success: success,
+    tabIndex: tabIndex,
+    tooltip: tooltip,
+    value: field.value
+  });
+};
+
+export { TextInputField };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
+import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, NumberInputV2, TagInput, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
 import * as react from 'react';
 import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, Ref, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
@@ -253,6 +253,13 @@ type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends
 };
 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'>> & {
+    className?: string;
+    name: string;
+    required?: boolean;
+};
+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>) => _emotion_react_jsx_runtime.JSX.Element;
+
 declare const SubmitErrorAlert: ({ className }: {
     className?: string | undefined;
 }) => _emotion_react_jsx_runtime.JSX.Element | null;
@@ -260,7 +267,7 @@ declare const SubmitErrorAlert: ({ className }: {
 type TagInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid'>>;
 declare const TagInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, "data-testid": dataTestId, }: TagInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TextInput>, 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'autoFocus' | 'autoSave' | 'cols' | 'disabled' | 'fillAvailable' | 'generated' | 'id' | 'multiline' | 'notice' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'random' | 'readOnly' | 'resizable' | 'rows' | 'type' | 'noTopLabel' | 'unit' | 'valid' | 'size' | 'maxLength' | 'minLength' | 'min' | 'max' | 'data-testid'>> & {
+type TextInputFieldProps$1<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TextInput>, 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'autoFocus' | 'autoSave' | 'cols' | 'disabled' | 'fillAvailable' | 'generated' | 'id' | 'multiline' | 'notice' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'random' | 'readOnly' | 'resizable' | 'rows' | 'type' | 'noTopLabel' | 'unit' | 'valid' | 'size' | 'maxLength' | 'minLength' | 'min' | 'max' | 'data-testid'>> & {
     className?: string;
     regex?: (RegExp | RegExp[])[];
     format?: (value: unknown) => PathValue<TFieldValues, Path<TFieldValues>>;
@@ -269,7 +276,15 @@ type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPa
     formatOnBlur?: boolean;
     innerRef?: Ref<HTMLInputElement>;
 };
-declare const TextInputField: <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<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+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'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * 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, 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;
@@ -324,13 +339,13 @@ declare const RadioGroupField: {
 };
 
 type InputKeyProps = {
-    label: ComponentProps<typeof TextInputField>['label'];
-    required?: ComponentProps<typeof TextInputField>['required'];
-    regex?: ComponentProps<typeof TextInputField>['regex'];
+    label: ComponentProps<typeof TextInputField$1>['label'];
+    required?: ComponentProps<typeof TextInputField$1>['required'];
+    regex?: ComponentProps<typeof TextInputField$1>['regex'];
 };
 type InputValueProps = {
-    type?: ComponentProps<typeof TextInputField>['type'];
-    placeholder?: ComponentProps<typeof TextInputField>['placeholder'];
+    type?: ComponentProps<typeof TextInputField$1>['type'];
+    placeholder?: ComponentProps<typeof TextInputField$1>['placeholder'];
 } & InputKeyProps;
 type AddButtonProps = {
     name: ComponentProps<typeof Button>['children'];
@@ -478,4 +493,4 @@ declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = Fi
     };
 };
 
-export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, KeyValueField, 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, KeyValueField, NumberInputField, NumberInputFieldV2, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -17,6 +17,8 @@ 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 { NumberInputFieldV2 } from './components/NumberInputFieldV2/index.js';
+export { TextInputField as TextInputFieldV2 } from './components/TextInputFieldV2/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.3.1",
+  "version": "2.3.3",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@babel/core": "7.23.7",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.2.45",
+    "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -53,7 +53,7 @@
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
     "react-hook-form": "7.49.3",
-    "@ultraviolet/ui": "1.31.1"
+    "@ultraviolet/ui": "1.31.3"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",