@ultraviolet/form 2.4.0 → 2.4.2

package/dist/components/SelectInputField/index.js

@@ -38,7 +38,7 @@ const SelectInputField = ({
   required,
   rules,
   noTopLabel,
-  noOptionsMessage,
+  emptyState,
   customStyle,
   shouldUnregister = false,
   'data-testid': dataTestId
@@ -122,7 +122,7 @@ const SelectInputField = ({
     noTopLabel: noTopLabel,
     required: required,
     value: format(field.value),
-    noOptionsMessage: noOptionsMessage,
+    emptyState: emptyState,
     "data-testid": dataTestId,
     children: children
   });

package/dist/components/TextAreaField/index.js

@@ -0,0 +1,97 @@
+import { TextArea } 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 TextArea component
+ */
+const TextAreaField = ({
+  autoFocus,
+  clearable,
+  className,
+  tabIndex,
+  'data-testid': dataTestId,
+  disabled,
+  helper,
+  label,
+  labelDescription,
+  onChange,
+  minLength,
+  maxLength,
+  name,
+  onFocus,
+  onBlur,
+  placeholder,
+  readOnly,
+  required,
+  rows,
+  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(TextArea, {
+    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,
+    rows: rows,
+    success: success,
+    tabIndex: tabIndex,
+    tooltip: tooltip,
+    value: field.value
+  });
+};
+
+export { TextAreaField };

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, NumberInputV2, TagInput, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
+import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, NumberInputV2, TagInput, TextArea, 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';
@@ -212,7 +212,7 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentP
     children: ReactNode;
     emptyState?: ComponentProps<Select>['noOptionsMessage'];
 }>;
-type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & 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' | 'data-testid'>> & {
+type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & 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' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
     multiple?: boolean;
     parse?: (value: unknown, name?: string) => unknown;
     format?: (value: unknown, name: string) => unknown;
@@ -220,7 +220,7 @@ type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends Field
     minLength?: number;
 };
 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, noOptionsMessage, customStyle, shouldUnregister, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): _emotion_react_jsx_runtime.JSX.Element;
+    <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>): _emotion_react_jsx_runtime.JSX.Element;
     Option: (props: Partial<OptionProps<{
         value: string;
         label: ReactNode;
@@ -267,6 +267,14 @@ 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 TextAreaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextArea>, 'value' | 'error' | 'name' | 'onChange'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * This component offers a form field based on Ultraviolet UI TextArea component
+ */
+declare const TextAreaField: <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, rows, success, tooltip, validate, regex: regexes, }: TextAreaFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+
 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[])[];
@@ -493,4 +501,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, NumberInputFieldV2, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, 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, TextAreaField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -1,26 +1,27 @@
 export { FORM_ERROR } from './constants.js';
 export { ErrorProvider, useErrors } from './providers/ErrorContext/index.js';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+export { useFormStateDeprecated } from './hooks/useFormState.js';
+export { useFieldDeprecated } from './hooks/useField.js';
+export { useFormDeprecated } from './hooks/useForm.js';
+export { useFieldArrayDeprecated } from './hooks/useFieldArray.js';
+export { useOnFieldChange } from './hooks/useOnFieldChange.js';
 export { CheckboxField } from './components/CheckboxField/index.js';
 export { CheckboxGroupField } from './components/CheckboxGroupField/index.js';
 export { DateField } from './components/DateField/index.js';
 export { Form } from './components/Form/index.js';
-export { KeyValueField } from './components/KeyValueField/index.js';
 export { RadioField } from './components/RadioField/index.js';
-export { SelectableCardField } from './components/SelectableCardField/index.js';
 export { SelectInputField } from './components/SelectInputField/index.js';
+export { SelectableCardField } from './components/SelectableCardField/index.js';
 export { NumberInputField } from './components/NumberInputField/index.js';
-export { Submit } from './components/Submit/index.js';
+export { NumberInputFieldV2 } from './components/NumberInputFieldV2/index.js';
 export { SubmitErrorAlert } from './components/SubmitErrorAlert/index.js';
 export { TagInputField } from './components/TagInputField/index.js';
+export { TextAreaField } from './components/TextAreaField/index.js';
 export { TextInputField } from './components/TextInputField/index.js';
+export { TextInputField as TextInputFieldV2 } from './components/TextInputFieldV2/index.js';
 export { TimeField } from './components/TimeField/index.js';
 export { ToggleField } from './components/ToggleField/index.js';
+export { Submit } from './components/Submit/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';
-export { useFieldArrayDeprecated } from './hooks/useFieldArray.js';
-export { useOnFieldChange } from './hooks/useOnFieldChange.js';
+export { KeyValueField } from './components/KeyValueField/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "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.49.3",
-    "@ultraviolet/ui": "1.32.0"
+    "@ultraviolet/ui": "1.32.2"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",