@ultraviolet/form 1.4.2 → 1.5.0

package/dist/components/CheckboxGroupField/index.js

@@ -0,0 +1,58 @@
+import { CheckboxGroup } from '@ultraviolet/ui';
+import { useFieldArray } from 'react-final-form-arrays';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+
+const CheckboxGroupField = _ref => {
+  let {
+    legend,
+    value,
+    className,
+    helper,
+    direction,
+    children,
+    onChange,
+    error: customError,
+    name,
+    required = false
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  const {
+    fields,
+    meta
+  } = useFieldArray(name, {
+    type: 'checkbox',
+    value,
+    validate: localValue => required && localValue?.length === 0 ? 'Required' : undefined
+  });
+  const error = getError({
+    label: legend,
+    meta,
+    value: fields.value,
+    name
+  });
+  return jsx(CheckboxGroup, {
+    legend: legend,
+    name: fields.name,
+    value: fields.value,
+    onChange: event => {
+      if (fields.value?.includes(event.currentTarget.value)) {
+        fields.remove(fields.value.indexOf(event.currentTarget?.value));
+      } else {
+        fields.push(event.currentTarget.value);
+      }
+      onChange?.(event);
+    },
+    error: error ?? customError,
+    className: className,
+    direction: direction,
+    helper: helper,
+    required: required,
+    children: children
+  });
+};
+CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
+
+export { CheckboxGroupField };

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, RadioGroup } from '@ultraviolet/ui';
+import { CheckboxGroup, 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';
 
@@ -101,6 +101,34 @@ declare const CheckboxField: react.ForwardRefExoticComponent<BaseFieldProps<stri
     required?: boolean | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
+type CheckboxGroupValue = string[];
+type CheckboxGroupFieldProps<T = CheckboxGroupValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'onChange' | 'required' | 'direction' | 'children' | 'value' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend' | 'name'>>;
+declare const CheckboxGroupField: {
+    ({ legend, value, className, helper, direction, children, onChange, error: customError, name, required, }: CheckboxGroupFieldProps): _emotion_react_jsx_runtime.JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: Omit<({
+        error?: react.ReactNode;
+        size?: number | undefined;
+        progress?: boolean | undefined;
+        helper?: react.ReactNode;
+        disabled?: boolean | undefined;
+        checked?: boolean | "indeterminate" | undefined;
+        className?: string | undefined;
+        "data-visibility"?: string | undefined;
+        required?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & Pick<react.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange"> & (({
+        "aria-label"?: undefined;
+    } & {
+        children: react.ReactNode;
+    }) | ({
+        children?: undefined;
+    } & {
+        'aria-label': string;
+    }))) & react.RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+        value: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 type DateFieldProps = BaseFieldProps<Date> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus'> & {
     name: string;
     maxDate?: Date;
@@ -700,4 +728,4 @@ type ErrorProviderProps = {
 declare const ErrorProvider: ({ children, errors, }: ErrorProviderProps) => JSX.Element;
 declare const useErrors: () => ErrorContextValue;
 
-export { BaseFieldProps, CheckboxField, DateField, ErrorProvider, Form, FormErrors, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };
+export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, Form, type FormErrors, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };

package/dist/index.js

@@ -3,6 +3,7 @@ export { FORM_ERROR } from 'final-form';
 export { Field, FormSpy, useField, useForm, useFormState } from 'react-final-form';
 export { ErrorProvider, useErrors } from './providers/ErrorContext/index.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 { RadioField } from './components/RadioField/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "1.4.2",
+  "version": "1.5.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.10.1"
+    "@ultraviolet/ui": "1.11.0"
   }
 }