@ultraviolet/form 2.13.3 → 2.13.5

package/dist/components/TimeField/index.js

@@ -35,7 +35,9 @@ const TimeField = ({
 }) => {
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -44,47 +46,20 @@ const TimeField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    TimeInput,
-    {
-      name: field.name,
-      placeholder,
-      schedule,
-      required,
-      value: parseTime(field.value),
-      onChange: (val) => {
-        if (!val)
-          return;
-        onChange?.(val);
-        const [hours, minutes] = val.value.split(":");
-        const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();
-        date.setHours(Number(hours), Number(minutes), 0);
-        field.onChange(date);
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        onBlur?.(event);
-      },
-      onFocus: (event) => {
-        onFocus?.(event);
-      },
-      error: error?.message,
-      disabled,
-      readOnly,
-      animation,
-      animationDuration,
-      animationOnChange,
-      className,
-      isLoading,
-      isClearable,
-      isSearchable,
-      inputId,
-      id,
-      options,
-      "data-testid": dataTestId,
-      noTopLabel
-    }
-  );
+  return /* @__PURE__ */ jsx(TimeInput, { name: field.name, placeholder, schedule, required, value: parseTime(field.value), onChange: (val) => {
+    if (!val)
+      return;
+    onChange?.(val);
+    const [hours, minutes] = val.value.split(":");
+    const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();
+    date.setHours(Number(hours), Number(minutes), 0);
+    field.onChange(date);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, error: error?.message, disabled, readOnly, animation, animationDuration, animationOnChange, className, isLoading, isClearable, isSearchable, inputId, id, options, "data-testid": dataTestId, noTopLabel });
 };
 export {
   TimeField

package/dist/components/ToggleField/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ui = require("@ultraviolet/ui");
+const reactHookForm = require("react-hook-form");
+const ToggleField = ({
+  className,
+  disabled,
+  label,
+  name,
+  onChange,
+  required,
+  size,
+  tooltip,
+  rules,
+  labelPosition,
+  parse,
+  format,
+  "data-testid": dataTestId,
+  shouldUnregister = false
+}) => {
+  const {
+    field
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  const transformedValue = () => {
+    if (format) {
+      return format(field.value);
+    }
+    return field.value;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Toggle, { name: field.name, ref: field.ref, checked: transformedValue(), tooltip, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event.target.checked));
+    } else {
+      field.onChange(event);
+    }
+    onChange?.(event);
+  }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId });
+};
+exports.ToggleField = ToggleField;

package/dist/components/ToggleField/index.js

@@ -17,7 +17,9 @@ const ToggleField = ({
   "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const { field } = useController({
+  const {
+    field
+  } = useController({
     name,
     shouldUnregister,
     rules: {
@@ -31,30 +33,14 @@ const ToggleField = ({
     }
     return field.value;
   };
-  return /* @__PURE__ */ jsx(
-    Toggle,
-    {
-      name: field.name,
-      ref: field.ref,
-      checked: transformedValue(),
-      tooltip,
-      onChange: (event) => {
-        if (parse) {
-          field.onChange(parse(event.target.checked));
-        } else {
-          field.onChange(event);
-        }
-        onChange?.(event);
-      },
-      label,
-      size,
-      disabled,
-      labelPosition,
-      className,
-      required,
-      "data-testid": dataTestId
+  return /* @__PURE__ */ jsx(Toggle, { name: field.name, ref: field.ref, checked: transformedValue(), tooltip, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event.target.checked));
+    } else {
+      field.onChange(event);
     }
-  );
+    onChange?.(event);
+  }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId });
 };
 export {
   ToggleField

package/dist/constants.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FORM_ERROR = "FINAL_FORM/form-error";
+exports.FORM_ERROR = FORM_ERROR;

package/dist/hooks/useField.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactHookForm = require("react-hook-form");
+const useFieldDeprecated = (name, options) => {
+  const {
+    getValues
+  } = reactHookForm.useFormContext();
+  const {
+    field,
+    fieldState
+  } = reactHookForm.useController({
+    name,
+    rules: {
+      validate: options?.validate
+    }
+  });
+  return {
+    input: {
+      value: getValues(name),
+      onChange: field.onChange
+    },
+    meta: {
+      error: fieldState.error?.message,
+      touched: fieldState.isTouched,
+      invalid: fieldState.invalid,
+      dirty: fieldState.isDirty
+    }
+  };
+};
+exports.useFieldDeprecated = useFieldDeprecated;

package/dist/hooks/useField.js

@@ -1,9 +1,16 @@
 import { useFormContext, useController } from "react-hook-form";
 const useFieldDeprecated = (name, options) => {
-  const { getValues } = useFormContext();
-  const { field, fieldState } = useController({
+  const {
+    getValues
+  } = useFormContext();
+  const {
+    field,
+    fieldState
+  } = useController({
     name,
-    rules: { validate: options?.validate }
+    rules: {
+      validate: options?.validate
+    }
   });
   return {
     input: {

package/dist/hooks/useFieldArray.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactHookForm = require("react-hook-form");
+const useFieldArrayDeprecated = (name, options) => {
+  const {
+    fields,
+    append,
+    remove,
+    update,
+    move
+  } = reactHookForm.useFieldArray({
+    name,
+    rules: {
+      validate: options?.validate
+    }
+  });
+  const value = reactHookForm.useWatch({
+    name
+  });
+  return {
+    fields: {
+      push: append,
+      value,
+      remove,
+      update,
+      map: (callback) => fields.map((_, index) => callback(`${name}.${index}`, index)),
+      move,
+      length: fields.length
+    }
+  };
+};
+exports.useFieldArrayDeprecated = useFieldArrayDeprecated;

package/dist/hooks/useFieldArray.js

@@ -1,10 +1,20 @@
 import { useFieldArray, useWatch } from "react-hook-form";
 const useFieldArrayDeprecated = (name, options) => {
-  const { fields, append, remove, update, move } = useFieldArray({
+  const {
+    fields,
+    append,
+    remove,
+    update,
+    move
+  } = useFieldArray({
     name,
-    rules: { validate: options?.validate }
+    rules: {
+      validate: options?.validate
+    }
+  });
+  const value = useWatch({
+    name
   });
-  const value = useWatch({ name });
   return {
     fields: {
       push: append,

package/dist/hooks/useForm.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const reactHookForm = require("react-hook-form");
+const index = require("../components/Form/index.cjs");
+const useFormDeprecated = () => {
+  const {
+    setValue,
+    resetField,
+    getFieldState,
+    reset
+  } = reactHookForm.useFormContext();
+  const formSubmitContext = React.useContext(index.FormSubmitContext);
+  return {
+    change: setValue,
+    resetFieldState: resetField,
+    getFieldState,
+    batch: (callback) => callback(),
+    restart: reset,
+    reset,
+    submit: formSubmitContext.handleSubmit
+  };
+};
+exports.useFormDeprecated = useFormDeprecated;

package/dist/hooks/useForm.js

@@ -2,7 +2,12 @@ import { useContext } from "react";
 import { useFormContext } from "react-hook-form";
 import { FormSubmitContext } from "../components/Form/index.js";
 const useFormDeprecated = () => {
-  const { setValue, resetField, getFieldState, reset } = useFormContext();
+  const {
+    setValue,
+    resetField,
+    getFieldState,
+    reset
+  } = useFormContext();
   const formSubmitContext = useContext(FormSubmitContext);
   return {
     change: setValue,

package/dist/hooks/useFormState.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactHookForm = require("react-hook-form");
+const useFormStateDeprecated = (_params) => {
+  const {
+    formState
+  } = reactHookForm.useFormContext();
+  return {
+    dirtySinceLastSubmit: formState.isDirty,
+    submitErrors: formState.errors.root,
+    values: reactHookForm.useWatch(),
+    hasValidationErrors: !formState.isValid,
+    pristine: !formState.isDirty,
+    errors: formState.errors,
+    initialValues: formState.defaultValues,
+    touched: formState.touchedFields,
+    submitting: formState.isSubmitting,
+    invalid: !formState.isValid,
+    valid: formState.isValid
+  };
+};
+exports.useFormStateDeprecated = useFormStateDeprecated;

package/dist/hooks/useFormState.js

@@ -1,6 +1,8 @@
 import { useFormContext, useWatch } from "react-hook-form";
 const useFormStateDeprecated = (_params) => {
-  const { formState } = useFormContext();
+  const {
+    formState
+  } = useFormContext();
   return {
     dirtySinceLastSubmit: formState.isDirty,
     submitErrors: formState.errors.root,

package/dist/hooks/useOnFieldChange.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const reactHookForm = require("react-hook-form");
+const useOnFieldChange = (fieldName, callback, enabled = true) => {
+  const {
+    watch,
+    getValues
+  } = reactHookForm.useFormContext();
+  const previousValues = React.useRef(getValues(fieldName));
+  React.useEffect(() => {
+    const subscription = watch((value) => {
+      if (previousValues.current !== value[fieldName] && enabled) {
+        previousValues.current = value[fieldName];
+        callback(value[fieldName], value)?.catch(() => null);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [callback, enabled, watch, getValues, fieldName]);
+};
+exports.useOnFieldChange = useOnFieldChange;

package/dist/hooks/useOnFieldChange.js

@@ -1,10 +1,11 @@
 import { useRef, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 const useOnFieldChange = (fieldName, callback, enabled = true) => {
-  const { watch, getValues } = useFormContext();
-  const previousValues = useRef(
-    getValues(fieldName)
-  );
+  const {
+    watch,
+    getValues
+  } = useFormContext();
+  const previousValues = useRef(getValues(fieldName));
   useEffect(() => {
     const subscription = watch((value) => {
       if (previousValues.current !== value[fieldName] && enabled) {

package/dist/index.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const constants = require("./constants.cjs");
+const index = require("./providers/ErrorContext/index.cjs");
+const reactHookForm = require("react-hook-form");
+const useFormState = require("./hooks/useFormState.cjs");
+const useField = require("./hooks/useField.cjs");
+const useForm = require("./hooks/useForm.cjs");
+const useFieldArray = require("./hooks/useFieldArray.cjs");
+const useOnFieldChange = require("./hooks/useOnFieldChange.cjs");
+const index$1 = require("./components/CheckboxField/index.cjs");
+const index$2 = require("./components/CheckboxGroupField/index.cjs");
+const index$3 = require("./components/DateField/index.cjs");
+const index$4 = require("./components/Form/index.cjs");
+const index$5 = require("./components/RadioField/index.cjs");
+const index$6 = require("./components/SelectInputField/index.cjs");
+const index$7 = require("./components/SelectableCardField/index.cjs");
+const index$8 = require("./components/NumberInputField/index.cjs");
+const index$9 = require("./components/NumberInputFieldV2/index.cjs");
+const index$a = require("./components/SubmitErrorAlert/index.cjs");
+const index$b = require("./components/TagInputField/index.cjs");
+const index$c = require("./components/TextAreaField/index.cjs");
+const index$d = require("./components/TextInputField/index.cjs");
+const index$e = require("./components/TextInputFieldV2/index.cjs");
+const index$f = require("./components/TimeField/index.cjs");
+const index$g = require("./components/ToggleField/index.cjs");
+const index$h = require("./components/Submit/index.cjs");
+const index$i = require("./components/RadioGroupField/index.cjs");
+const index$j = require("./components/KeyValueField/index.cjs");
+const index$k = require("./components/SelectableCardGroupField/index.cjs");
+const index$l = require("./components/SelectInputFieldV2/index.cjs");
+exports.FORM_ERROR = constants.FORM_ERROR;
+exports.ErrorProvider = index.ErrorProvider;
+exports.useErrors = index.useErrors;
+Object.defineProperty(exports, "useController", {
+  enumerable: true,
+  get: () => reactHookForm.useController
+});
+Object.defineProperty(exports, "useFieldArray", {
+  enumerable: true,
+  get: () => reactHookForm.useFieldArray
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: () => reactHookForm.useForm
+});
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: () => reactHookForm.useFormContext
+});
+Object.defineProperty(exports, "useFormState", {
+  enumerable: true,
+  get: () => reactHookForm.useFormState
+});
+Object.defineProperty(exports, "useWatch", {
+  enumerable: true,
+  get: () => reactHookForm.useWatch
+});
+exports.useFormStateDeprecated = useFormState.useFormStateDeprecated;
+exports.useFieldDeprecated = useField.useFieldDeprecated;
+exports.useFormDeprecated = useForm.useFormDeprecated;
+exports.useFieldArrayDeprecated = useFieldArray.useFieldArrayDeprecated;
+exports.useOnFieldChange = useOnFieldChange.useOnFieldChange;
+exports.CheckboxField = index$1.CheckboxField;
+exports.CheckboxGroupField = index$2.CheckboxGroupField;
+exports.DateField = index$3.DateField;
+exports.Form = index$4.Form;
+exports.RadioField = index$5.RadioField;
+exports.SelectInputField = index$6.SelectInputField;
+exports.SelectableCardField = index$7.SelectableCardField;
+exports.NumberInputField = index$8.NumberInputField;
+exports.NumberInputFieldV2 = index$9.NumberInputFieldV2;
+exports.SubmitErrorAlert = index$a.SubmitErrorAlert;
+exports.TagInputField = index$b.TagInputField;
+exports.TextAreaField = index$c.TextAreaField;
+exports.TextInputField = index$d.TextInputField;
+exports.TextInputFieldV2 = index$e.TextInputField;
+exports.TimeField = index$f.TimeField;
+exports.ToggleField = index$g.ToggleField;
+exports.Submit = index$h.Submit;
+exports.RadioGroupField = index$i.RadioGroupField;
+exports.KeyValueField = index$j.KeyValueField;
+exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
+exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;

package/dist/providers/ErrorContext/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const ErrorContext = React.createContext(void 0);
+const ErrorProvider = ({
+  children,
+  errors
+}) => {
+  const getError = React.useCallback((meta, error) => {
+    if (!error) {
+      return void 0;
+    }
+    if (error.message) {
+      return error.message;
+    }
+    return errors?.[error.type]?.(meta);
+  }, [errors]);
+  const value = React.useMemo(() => ({
+    errors,
+    getError
+  }), [errors, getError]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorContext.Provider, { value, children });
+};
+const useErrors = () => {
+  const context = React.useContext(ErrorContext);
+  if (context === void 0) {
+    throw new Error("useErrors must be used within an ErrorProvider ");
+  }
+  return context;
+};
+exports.ErrorProvider = ErrorProvider;
+exports.useErrors = useErrors;

package/dist/providers/ErrorContext/index.js

@@ -1,26 +1,23 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useCallback, useMemo, useContext } from "react";
 const ErrorContext = createContext(void 0);
-const ErrorProvider = ({ children, errors }) => {
-  const getError = useCallback(
-    (meta, error) => {
-      if (!error) {
-        return void 0;
-      }
-      if (error.message) {
-        return error.message;
-      }
-      return errors?.[error.type]?.(meta);
-    },
-    [errors]
-  );
-  const value = useMemo(
-    () => ({
-      errors,
-      getError
-    }),
-    [errors, getError]
-  );
+const ErrorProvider = ({
+  children,
+  errors
+}) => {
+  const getError = useCallback((meta, error) => {
+    if (!error) {
+      return void 0;
+    }
+    if (error.message) {
+      return error.message;
+    }
+    return errors?.[error.type]?.(meta);
+  }, [errors]);
+  const value = useMemo(() => ({
+    errors,
+    getError
+  }), [errors, getError]);
   return /* @__PURE__ */ jsx(ErrorContext.Provider, { value, children });
 };
 const useErrors = () => {

package/dist/validators/maxDate.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const maxDateValidator = (maxDate) => (value) => value === void 0 || maxDate === void 0 || value <= maxDate;
+exports.maxDateValidator = maxDateValidator;

package/dist/validators/minDate.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const minDateValidator = (minDate) => (value) => value === void 0 || minDate === void 0 || value >= minDate;
+exports.minDateValidator = minDateValidator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.13.3",
+  "version": "2.13.5",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -29,12 +29,27 @@
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     }
   },
+  "size-limit": [
+    {
+      "path": [
+        "dist/**/*.js",
+        "!*.d.ts",
+        "!*.cjs"
+      ],
+      "limit": "50 kB",
+      "webpack": false,
+      "brotli": true,
+      "running": false
+    }
+  ],
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
@@ -52,17 +67,18 @@
   },
   "dependencies": {
     "@babel/runtime": "7.24.5",
-    "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.51.3",
-    "@ultraviolet/ui": "1.51.2"
+    "@ultraviolet/ui": "1.51.4"
   },
   "scripts": {
+    "prebuild": "shx rm -rf dist",
     "type:generate": "tsc --declaration -p tsconfig.build.json",
     "build": "vite build --config vite.config.ts && pnpm run type:generate",
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "size": "pnpm run build && size-limit"
   }
 }