@ultraviolet/form 2.8.9 → 2.9.0

package/dist/components/CheckboxGroupField/index.js

@@ -1,8 +1,15 @@
 import { CheckboxGroup } from '@ultraviolet/ui';
+import { useCallback, Children, isValidElement } from 'react';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
+const arraysContainSameValues = (array1, array2) => {
+  if (array1.length === 0) {
+    return false;
+  }
+  return array2.every(value => array1.includes(value));
+};
 const CheckboxGroupField = ({
   legend,
   className,
@@ -14,11 +21,30 @@ const CheckboxGroupField = ({
   error: customError,
   name,
   required = false,
-  shouldUnregister = false
+  shouldUnregister = false,
+  rules
 }) => {
   const {
     getError
   } = useErrors();
+  const validate = useCallback(value => {
+    const requiredChildren = Children.map(children, child => {
+      if ( /*#__PURE__*/isValidElement(child)) {
+        if (child.props.required) {
+          return child.props.name;
+        }
+        return null;
+      }
+      return null;
+    })?.filter(Boolean) ?? [];
+    if (!required && arraysContainSameValues(value, requiredChildren)) {
+      return true;
+    }
+    if (value.length >= Children.count(children)) {
+      return true;
+    }
+    return false;
+  }, [children, required]);
   const {
     field,
     fieldState: {
@@ -26,7 +52,11 @@ const CheckboxGroupField = ({
     }
   } = useController({
     name,
-    shouldUnregister
+    shouldUnregister,
+    rules: {
+      validate,
+      ...rules
+    }
   });
   return jsx(CheckboxGroup, {
     legend: legend,

package/dist/components/Form/index.js

@@ -58,6 +58,7 @@ const Form = ({
             await handleSubmit(e);
           },
           name: name,
+          noValidate: true,
           children: typeof children === 'function' ? children({
             values: methods.watch(),
             hasValidationErrors: !methods.formState.isValid,

package/dist/index.d.ts

@@ -50,8 +50,8 @@ declare const CheckboxField: <TFieldValues extends FieldValues, TName extends Fi
 
 type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
 declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: CheckboxGroupFieldProps<TFieldValues, TName>): _emotion_react_jsx_runtime.JSX.Element;
-    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: Omit<({
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, rules, }: CheckboxGroupFieldProps<TFieldValues, TName>): _emotion_react_jsx_runtime.JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
         error?: react.ReactNode;
         size?: number | undefined;
         progress?: boolean | undefined;
@@ -71,7 +71,7 @@ declare const CheckboxGroupField: {
         children?: undefined;
     } & {
         'aria-label': string;
-    }))) & react.RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+    }))) & react.RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
         value: string;
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.8.9",
+  "version": "2.9.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -36,13 +36,13 @@
     "@emotion/styled": "11.11.0",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-hook-form": "7.51.1"
+    "react-hook-form": "7.51.2"
   },
   "devDependencies": {
-    "@babel/core": "7.24.1",
+    "@babel/core": "7.24.3",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.2.61",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -52,8 +52,8 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
-    "react-hook-form": "7.51.1",
-    "@ultraviolet/ui": "1.44.0"
+    "react-hook-form": "7.51.2",
+    "@ultraviolet/ui": "1.45.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",