@ultraviolet/form 2.10.8 → 2.11.0

package/dist/components/SelectInputFieldV2/index.js

@@ -0,0 +1,115 @@
+import { SelectInputV2 } from '@ultraviolet/ui';
+import { useCallback } from 'react';
+import { useController } from 'react-hook-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+
+const SelectInputFieldV2 = ({
+  autofocus,
+  className,
+  id,
+  label = '',
+  onFocus,
+  onBlur,
+  placeholder,
+  readOnly,
+  required,
+  size,
+  'data-testid': dataTestId,
+  disabled,
+  placeholderSearch,
+  helper,
+  options,
+  emptyState,
+  onChange,
+  searchable,
+  clearable,
+  multiselect,
+  descriptionDirection,
+  footer,
+  labelDescription,
+  success,
+  loadMore,
+  isLoading,
+  selectAll,
+  selectAllGroup,
+  name,
+  'aria-label': ariaLabel,
+  optionalInfoPlacement,
+  rules,
+  shouldUnregister = false
+}) => {
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  const {
+    getError
+  } = useErrors();
+  const format = useCallback(val => {
+    if (!Array.isArray(options)) {
+      let formattedValue;
+      Object.keys(options).forEach(group => options[group].forEach(option => {
+        if (option.value === val) {
+          formattedValue = option;
+        }
+      }));
+      return formattedValue;
+    }
+    return options.find(option => option.value === val);
+  }, [options]);
+  return jsx(SelectInputV2, {
+    name: field.name,
+    options: options,
+    required: required,
+    size: size,
+    "data-testid": dataTestId,
+    className: className,
+    disabled: disabled,
+    id: id,
+    label: label,
+    onFocus: onFocus,
+    onBlur: event => {
+      field.onBlur();
+      onBlur?.(event);
+    },
+    placeholder: placeholder,
+    readOnly: readOnly,
+    value: format(field.value),
+    placeholderSearch: placeholderSearch,
+    helper: helper,
+    emptyState: emptyState,
+    searchable: searchable,
+    clearable: clearable,
+    multiselect: multiselect,
+    descriptionDirection: descriptionDirection,
+    footer: footer,
+    labelDescription: labelDescription,
+    error: getError({
+      label
+    }, error),
+    success: success,
+    loadMore: loadMore,
+    isLoading: isLoading,
+    selectAll: selectAll,
+    selectAllGroup: selectAllGroup,
+    autofocus: autofocus,
+    optionalInfoPlacement: optionalInfoPlacement,
+    "aria-label": ariaLabel,
+    onChange: value => {
+      field.onChange(value);
+      onChange?.(value);
+    }
+  });
+};
+
+export { SelectInputFieldV2 };

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, TextArea, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup, SelectableCardGroup } from '@ultraviolet/ui';
+import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, NumberInputV2, TagInput, TextArea, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup, SelectableCardGroup, SelectInputV2 } 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';
@@ -215,6 +215,9 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentP
     children: ReactNode;
     emptyState?: ComponentProps<Select>['noOptionsMessage'];
 }>;
+/**
+ * @deprecated This component is deprecated, please use `SelectInputFieldV2` instead
+ */
 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;
@@ -420,6 +423,9 @@ declare const SelectableCardGroupField: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+type SelectInputFieldV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Pick<ComponentProps<typeof SelectInputV2>, 'placeholder' | 'placeholderSearch' | 'label' | 'helper' | 'options' | 'emptyState' | 'searchable' | 'readOnly' | 'clearable' | 'size' | 'multiselect' | 'required' | 'descriptionDirection' | 'footer' | 'labelDescription' | 'success' | 'loadMore' | 'isLoading' | 'selectAll' | 'selectAllGroup' | 'autofocus' | 'data-testid' | 'onChange' | 'id' | 'onBlur' | 'aria-label' | 'className' | 'onFocus' | 'optionalInfoPlacement' | 'disabled'>;
+declare const SelectInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autofocus, className, id, label, onFocus, onBlur, placeholder, readOnly, required, size, "data-testid": dataTestId, disabled, placeholderSearch, helper, options, emptyState, onChange, searchable, clearable, multiselect, descriptionDirection, footer, labelDescription, success, loadMore, isLoading, selectAll, selectAllGroup, name, "aria-label": ariaLabel, optionalInfoPlacement, rules, shouldUnregister, }: SelectInputFieldV2Props<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+
 type ErrorContextValue = {
     errors: RequiredErrors;
     getError: (meta: MetaField, error?: FieldError) => string | undefined;
@@ -546,4 +552,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, SelectableCardGroupField, Submit, SubmitErrorAlert, TagInputField, TextAreaField, 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, SelectInputFieldV2, SelectableCardField, SelectableCardGroupField, Submit, SubmitErrorAlert, TagInputField, TextAreaField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -26,3 +26,4 @@ export { Submit } from './components/Submit/index.js';
 export { RadioGroupField } from './components/RadioGroupField/index.js';
 export { KeyValueField } from './components/KeyValueField/index.js';
 export { SelectableCardGroupField } from './components/SelectableCardGroupField/index.js';
+export { SelectInputFieldV2 } from './components/SelectInputFieldV2/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.10.8",
+  "version": "2.11.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -53,7 +53,7 @@
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.51.3",
-    "@ultraviolet/ui": "1.48.0"
+    "@ultraviolet/ui": "1.48.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",