@ultraviolet/form 1.3.5 → 1.4.0

package/dist/components/CheckboxField/index.js

@@ -19,6 +19,7 @@ const CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     onBlur,
     onFocus,
     value,
+    helper,
     'data-testid': dataTestId
   } = _ref;
   const {
@@ -59,6 +60,7 @@ const CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled,
     checked: input.checked,
     error: error,
+    helper: helper,
     ref: ref,
     className: className,
     value: input.value,

package/dist/components/RadioGroupField/index.js

@@ -0,0 +1,55 @@
+import { RadioGroup } from '@ultraviolet/ui';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const RadioGroupField = _ref => {
+  let {
+    className,
+    legend = '',
+    name,
+    onChange,
+    required,
+    validate,
+    value,
+    children,
+    error: customError,
+    helper,
+    direction
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    required,
+    validate,
+    value
+  });
+  const error = getError({
+    label: legend,
+    meta: meta,
+    name,
+    value: input.value
+  });
+  return jsx(RadioGroup, {
+    className: className,
+    name: input.name,
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
+    },
+    required: required,
+    value: input.value,
+    legend: legend,
+    error: error ?? customError,
+    helper: helper,
+    direction: direction,
+    children: children
+  });
+};
+RadioGroupField.Radio = RadioGroup.Radio;
+
+export { RadioGroupField };

package/dist/components/Submit/index.js

@@ -14,7 +14,8 @@ const Submit = _ref => {
     variant = 'filled',
     sentiment = 'primary',
     tooltip,
-    fullWidth
+    fullWidth,
+    onClick
   } = _ref;
   const {
     invalid,
@@ -44,6 +45,7 @@ const Submit = _ref => {
     sentiment: sentiment,
     tooltip: tooltip,
     fullWidth: fullWidth,
+    onClick: onClick,
     children: children
   });
 };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Field, FormSpy, useField, useForm, useFormState } from 'react-final-for
 import * as react from 'react';
 import { ReactNode, ComponentProps, FocusEvent, JSX, ForwardedRef, FocusEventHandler } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button } from '@ultraviolet/ui';
+import { DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
 import { CSSObject, Theme, css } from '@emotion/react';
 import Select, { GroupBase, OptionProps, Props, CommonProps } from 'react-select';
 
@@ -78,6 +78,7 @@ declare const CheckboxField: react.ForwardRefExoticComponent<BaseFieldProps<stri
     error?: ReactNode;
     size?: number | undefined;
     progress?: boolean | undefined;
+    helper?: ReactNode;
     disabled?: boolean | undefined;
     checked?: boolean | "indeterminate" | undefined;
     className?: string | undefined;
@@ -92,7 +93,7 @@ declare const CheckboxField: react.ForwardRefExoticComponent<BaseFieldProps<stri
     children?: undefined;
 } & {
     'aria-label': string;
-}))) & react.RefAttributes<HTMLInputElement>, "value" | "disabled" | "progress" | "onFocus" | "onBlur" | "onChange" | "size" | "data-testid">> & {
+}))) & react.RefAttributes<HTMLInputElement>, "value" | "disabled" | "progress" | "onFocus" | "onBlur" | "onChange" | "size" | "data-testid" | "helper">> & {
     name: string;
     label?: string | undefined;
     className?: string | undefined;
@@ -135,8 +136,8 @@ type FormProps<FormValues = unknown> = {
 };
 declare const Form: <FormValues>({ children, onRawSubmit, errors, initialValues, validateOnBlur, validate, name, render, mutators, keepDirtyOnReinitialize, className, }: FormProps<FormValues>) => JSX.Element;
 
-type RadioValue = NonNullable<ComponentProps<typeof Radio>['value']>;
-type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label'>> & {
+type RadioValue$1 = NonNullable<ComponentProps<typeof Radio>['value']>;
+type RadioFieldProps<T = RadioValue$1, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label'>> & {
     className?: string;
     name: string;
     required?: boolean;
@@ -635,8 +636,37 @@ type SubmitProps = {
     sentiment?: ComponentProps<typeof Button>['sentiment'];
     tooltip?: ComponentProps<typeof Button>['tooltip'];
     fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    onClick?: ComponentProps<typeof Button>['onClick'];
+};
+declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => JSX.Element;
+
+type RadioValue = NonNullable<ComponentProps<typeof RadioGroup>['value']>;
+type RadioGroupFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'onChange' | 'value' | 'legend' | 'children' | 'required' | 'name' | 'error' | 'helper' | 'direction'>> & {
+    className?: string;
+    name: string;
+    required?: boolean;
+};
+declare const RadioGroupField: {
+    ({ className, legend, name, onChange, required, validate, value, children, error: customError, helper, direction, }: RadioGroupFieldProps): JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: {
+        error?: react.ReactNode;
+        name?: string | undefined;
+        value: string | number;
+        key?: react.Key | null | undefined;
+        disabled?: boolean | undefined;
+        label?: react.ReactNode;
+        className?: string | undefined;
+        ref?: react.Ref<HTMLInputElement> | undefined;
+        onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        autoFocus?: boolean | undefined;
+        id?: string | undefined;
+        'aria-label'?: string | undefined;
+        'data-testid'?: string | undefined;
+        helper?: react.ReactNode;
+        onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
 };
-declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, }: SubmitProps) => JSX.Element;
 
 type UseValidationParams<FieldValue = unknown> = {
     validators: ValidatorObject<FieldValue>[];
@@ -665,4 +695,4 @@ type ErrorProviderProps = {
 declare const ErrorProvider: ({ children, errors, }: ErrorProviderProps) => JSX.Element;
 declare const useErrors: () => ErrorContextValue;
 
-export { BaseFieldProps, CheckboxField, DateField, ErrorProvider, Form, FormErrors, NumberInputField, RadioField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };
+export { BaseFieldProps, CheckboxField, DateField, ErrorProvider, Form, FormErrors, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };

package/dist/index.js

@@ -15,6 +15,7 @@ export { TagInputField } from './components/TagInputField/index.js';
 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 { useValidation } from './hooks/useValidation.js';
 export { useOnFieldChange } from './hooks/useOnFieldChange.js';
 export { pickValidators } from './helpers/pickValidators.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -55,6 +55,6 @@
     "react-final-form": "6.5.9",
     "react-final-form-arrays": "3.1.4",
     "react-select": "5.7.4",
-    "@ultraviolet/ui": "1.8.4"
+    "@ultraviolet/ui": "1.9.0"
   }
 }