@ultraviolet/form 2.13.3 → 2.13.5

package/dist/components/CheckboxField/index.cjs

@@ -0,0 +1,53 @@
+"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 index = require("../../providers/ErrorContext/index.cjs");
+const CheckboxField = ({
+  id,
+  name,
+  label,
+  size,
+  progress,
+  disabled,
+  required,
+  className,
+  children,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  helper,
+  tooltip,
+  "data-testid": dataTestId,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    disabled,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, name: field.name, onChange: (event) => {
+    field.onChange(event.target.checked);
+    onChange?.(event.target.checked);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus, size, progress, disabled: field.disabled, checked: !!field.value, error: getError({
+    label: label ?? ""
+  }, error), ref: field.ref, className, required, "data-testid": dataTestId, helper, tooltip, children });
+};
+exports.CheckboxField = CheckboxField;

package/dist/components/CheckboxField/index.js

@@ -21,10 +21,14 @@ const CheckboxField = ({
   "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     disabled,
@@ -34,36 +38,15 @@ const CheckboxField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      id,
-      name: field.name,
-      onChange: (event) => {
-        field.onChange(event.target.checked);
-        onChange?.(
-          event.target.checked
-        );
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        onBlur?.(event);
-      },
-      onFocus,
-      size,
-      progress,
-      disabled: field.disabled,
-      checked: !!field.value,
-      error: getError({ label: label ?? "" }, error),
-      ref: field.ref,
-      className,
-      required,
-      "data-testid": dataTestId,
-      helper,
-      tooltip,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(Checkbox, { id, name: field.name, onChange: (event) => {
+    field.onChange(event.target.checked);
+    onChange?.(event.target.checked);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus, size, progress, disabled: field.disabled, checked: !!field.value, error: getError({
+    label: label ?? ""
+  }, error), ref: field.ref, className, required, "data-testid": dataTestId, helper, tooltip, children });
 };
 export {
   CheckboxField

package/dist/components/CheckboxGroupField/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ui = require("@ultraviolet/ui");
+const React = require("react");
+const reactHookForm = require("react-hook-form");
+const index = require("../../providers/ErrorContext/index.cjs");
+const arraysContainSameValues = (array1, array2) => {
+  if (array1.length === 0) {
+    return false;
+  }
+  return array2.every((value) => array1.includes(value));
+};
+const CheckboxGroupField = ({
+  legend,
+  className,
+  helper,
+  direction,
+  children,
+  onChange,
+  label = "",
+  error: customError,
+  name,
+  required = false,
+  shouldUnregister = false,
+  rules
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const validate = React.useCallback((value) => {
+    const requiredChildren = React.Children.map(children, (child) => {
+      if (React.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 >= React.Children.count(children)) {
+      return true;
+    }
+    return false;
+  }, [children, required]);
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      validate,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {
+    const fieldValue = field.value;
+    if (fieldValue?.includes(event.currentTarget.value)) {
+      field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
+    } else {
+      field.onChange([...field.value, event.currentTarget.value]);
+    }
+    onChange?.(event.currentTarget.value);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, direction, helper, required, children });
+};
+CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;
+exports.CheckboxGroupField = CheckboxGroupField;

package/dist/components/CheckboxGroupField/index.js

@@ -23,31 +23,32 @@ const CheckboxGroupField = ({
   shouldUnregister = false,
   rules
 }) => {
-  const { getError } = useErrors();
-  const validate = useCallback(
-    (value) => {
-      const requiredChildren = Children.map(children, (child) => {
-        if (isValidElement(child)) {
-          if (child.props.required) {
-            return child.props.name;
-          }
-          return null;
+  const {
+    getError
+  } = useErrors();
+  const validate = useCallback((value) => {
+    const requiredChildren = Children.map(children, (child) => {
+      if (isValidElement(child)) {
+        if (child.props.required) {
+          return child.props.name;
         }
         return null;
-      })?.filter(Boolean) ?? [];
-      if (!required && arraysContainSameValues(value, requiredChildren)) {
-        return true;
-      }
-      if (value.length >= Children.count(children)) {
-        return true;
       }
-      return false;
-    },
-    [children, required]
-  );
+      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: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -56,35 +57,17 @@ const CheckboxGroupField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    CheckboxGroup,
-    {
-      legend,
-      name,
-      value: field.value,
-      onChange: (event) => {
-        const fieldValue = field.value;
-        if (fieldValue?.includes(event.currentTarget.value)) {
-          field.onChange(
-            fieldValue?.filter(
-              (currentValue) => currentValue !== event.currentTarget.value
-            )
-          );
-        } else {
-          field.onChange([...field.value, event.currentTarget.value]);
-        }
-        onChange?.(
-          event.currentTarget.value
-        );
-      },
-      error: getError({ label }, error) ?? customError,
-      className,
-      direction,
-      helper,
-      required,
-      children
+  return /* @__PURE__ */ jsx(CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {
+    const fieldValue = field.value;
+    if (fieldValue?.includes(event.currentTarget.value)) {
+      field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
+    } else {
+      field.onChange([...field.value, event.currentTarget.value]);
     }
-  );
+    onChange?.(event.currentTarget.value);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, direction, helper, required, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
 export {

package/dist/components/DateField/index.cjs

@@ -0,0 +1,74 @@
+"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 maxDate = require("../../validators/maxDate.cjs");
+const minDate = require("../../validators/minDate.cjs");
+const index = require("../../providers/ErrorContext/index.cjs");
+const parseDate = (value) => typeof value === "string" ? new Date(value) : value;
+const isEmpty = (value) => typeof value === "string" ? value === "" : value === void 0;
+const DateField = ({
+  required,
+  name,
+  label = "",
+  format,
+  locale,
+  maxDate: maxDate$1,
+  minDate: minDate$1,
+  disabled,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  autoFocus = false,
+  excludeDates,
+  selectsRange,
+  "data-testid": dataTestId,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      ...rules,
+      validate: {
+        ...rules?.validate,
+        minDate: minDate.minDateValidator(minDate$1),
+        maxDate: maxDate.maxDateValidator(maxDate$1)
+      },
+      required
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { name: field.name, label, value: field.value, format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""), locale, required, onChange: (val) => {
+    if (val && val instanceof Date) {
+      onChange?.(val);
+      const newDate = parseDate(val);
+      if (isEmpty(field.value)) {
+        field.onChange(newDate);
+        return;
+      }
+      const currentDate = parseDate(field.value);
+      newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+      field.onChange(newDate);
+    } else if (Array.isArray(val)) {
+      field.onChange(val);
+    }
+  }, onBlur: (e) => {
+    field.onBlur();
+    onBlur?.(e);
+  }, onFocus, maxDate: maxDate$1, minDate: minDate$1, error: getError({
+    minDate: minDate$1,
+    maxDate: maxDate$1,
+    label
+  }, error), disabled, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
+};
+exports.DateField = DateField;

package/dist/components/DateField/index.js

@@ -25,10 +25,14 @@ const DateField = ({
   "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -42,47 +46,28 @@ const DateField = ({
       required
     }
   });
-  return /* @__PURE__ */ jsx(
-    DateInput,
-    {
-      name: field.name,
-      label,
-      value: field.value,
-      format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""),
-      locale,
-      required,
-      onChange: (val) => {
-        if (val && val instanceof Date) {
-          onChange?.(val);
-          const newDate = parseDate(val);
-          if (isEmpty(field.value)) {
-            field.onChange(newDate);
-            return;
-          }
-          const currentDate = parseDate(field.value);
-          newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-          field.onChange(newDate);
-        } else if (Array.isArray(val)) {
-          field.onChange(val);
-        }
-      },
-      onBlur: (e) => {
-        field.onBlur();
-        onBlur?.(e);
-      },
-      onFocus,
-      maxDate,
-      minDate,
-      error: getError({ minDate, maxDate, label }, error),
-      disabled,
-      autoFocus,
-      excludeDates,
-      selectsRange,
-      "data-testid": dataTestId,
-      startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0,
-      endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0
+  return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, value: field.value, format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""), locale, required, onChange: (val) => {
+    if (val && val instanceof Date) {
+      onChange?.(val);
+      const newDate = parseDate(val);
+      if (isEmpty(field.value)) {
+        field.onChange(newDate);
+        return;
+      }
+      const currentDate = parseDate(field.value);
+      newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+      field.onChange(newDate);
+    } else if (Array.isArray(val)) {
+      field.onChange(val);
     }
-  );
+  }, onBlur: (e) => {
+    field.onBlur();
+    onBlur?.(e);
+  }, onFocus, maxDate, minDate, error: getError({
+    minDate,
+    maxDate,
+    label
+  }, error), disabled, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 export {
   DateField

package/dist/components/Form/defaultErrors.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultErrors = {
+  maxDate: () => "",
+  maxLength: () => "",
+  minLength: () => "",
+  max: () => "",
+  min: () => "",
+  required: () => "",
+  pattern: () => "",
+  deps: () => "",
+  value: () => "",
+  onBlur: () => "",
+  disabled: () => "",
+  onChange: () => "",
+  validate: () => "",
+  setValueAs: () => "",
+  valueAsDate: () => "",
+  valueAsNumber: () => "",
+  shouldUnregister: () => ""
+};
+exports.defaultErrors = defaultErrors;

package/dist/components/Form/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const reactHookForm = require("react-hook-form");
+const constants = require("../../constants.cjs");
+const defaultErrors = require("./defaultErrors.cjs");
+const index = require("../../providers/ErrorContext/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefaultCompat(React);
+const FormSubmitContext = React__default.default.createContext({});
+const Form = ({
+  children,
+  methods: methodsProp,
+  initialValues,
+  errors,
+  onRawSubmit,
+  name
+}) => {
+  const methodsHook = reactHookForm.useForm({
+    defaultValues: initialValues,
+    mode: "onChange"
+  });
+  const methods = !methodsProp ? methodsHook : methodsProp;
+  const handleSubmit = methods.handleSubmit(async (values) => {
+    const result = await onRawSubmit(values, {
+      reset: methods.reset,
+      resetFieldState: methods.resetField,
+      restart: () => methods.reset(initialValues),
+      change: methods.setValue
+    });
+    if (result === null) {
+      methods.setError("root.submit", {
+        type: "custom"
+      });
+      return;
+    }
+    if (result && typeof result !== "boolean" && typeof result !== "number") {
+      methods.setError("root.submit", {
+        type: "custom",
+        message: typeof result === "object" ? result[constants.FORM_ERROR] : result
+      });
+    }
+  });
+  const formSubmitContextValue = React.useMemo(() => ({
+    handleSubmit
+  }), [handleSubmit]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
+    ...defaultErrors.defaultErrors,
+    ...errors
+  }, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await handleSubmit(e);
+  }, name, noValidate: true, children: typeof children === "function" ? children({
+    values: methods.watch(),
+    hasValidationErrors: !methods.formState.isValid,
+    errors: methods.formState.errors,
+    submitting: methods.formState.isSubmitting,
+    pristine: !methods.formState.isDirty,
+    handleSubmit,
+    submitError: !!methods.formState.errors?.root?.["submit"],
+    valid: methods.formState.isValid,
+    form: {
+      change: methods.setValue,
+      reset: methods.reset,
+      submit: handleSubmit
+    }
+  }) : children }) }) }) });
+};
+exports.Form = Form;
+exports.FormSubmitContext = FormSubmitContext;

package/dist/components/Form/index.js

@@ -4,9 +4,7 @@ import { useForm, FormProvider } from "react-hook-form";
 import { FORM_ERROR } from "../../constants.js";
 import { defaultErrors } from "./defaultErrors.js";
 import { ErrorProvider } from "../../providers/ErrorContext/index.js";
-const FormSubmitContext = React.createContext(
-  {}
-);
+const FormSubmitContext = React.createContext({});
 const Form = ({
   children,
   methods: methodsProp,
@@ -40,37 +38,31 @@ const Form = ({
       });
     }
   });
-  const formSubmitContextValue = useMemo(
-    () => ({ handleSubmit }),
-    [handleSubmit]
-  );
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: { ...defaultErrors, ...errors }, children: /* @__PURE__ */ jsx(
-    "form",
-    {
-      onSubmit: async (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        await handleSubmit(e);
-      },
-      name,
-      noValidate: true,
-      children: typeof children === "function" ? children({
-        values: methods.watch(),
-        hasValidationErrors: !methods.formState.isValid,
-        errors: methods.formState.errors,
-        submitting: methods.formState.isSubmitting,
-        pristine: !methods.formState.isDirty,
-        handleSubmit,
-        submitError: !!methods.formState.errors?.root?.["submit"],
-        valid: methods.formState.isValid,
-        form: {
-          change: methods.setValue,
-          reset: methods.reset,
-          submit: handleSubmit
-        }
-      }) : children
+  const formSubmitContextValue = useMemo(() => ({
+    handleSubmit
+  }), [handleSubmit]);
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
+    ...defaultErrors,
+    ...errors
+  }, children: /* @__PURE__ */ jsx("form", { onSubmit: async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await handleSubmit(e);
+  }, name, noValidate: true, children: typeof children === "function" ? children({
+    values: methods.watch(),
+    hasValidationErrors: !methods.formState.isValid,
+    errors: methods.formState.errors,
+    submitting: methods.formState.isSubmitting,
+    pristine: !methods.formState.isDirty,
+    handleSubmit,
+    submitError: !!methods.formState.errors?.root?.["submit"],
+    valid: methods.formState.isValid,
+    form: {
+      change: methods.setValue,
+      reset: methods.reset,
+      submit: handleSubmit
     }
-  ) }) }) });
+  }) : children }) }) }) });
 };
 export {
   Form,

package/dist/components/KeyValueField/index.cjs

@@ -0,0 +1,51 @@
+"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 index = require("../TextInputFieldV2/index.cjs");
+const KeyValueField = ({
+  name,
+  inputKey,
+  inputValue,
+  addButton,
+  maxSize = 100,
+  readonly = false,
+  control
+}) => {
+  const {
+    fields,
+    append,
+    remove
+  } = reactHookForm.useFieldArray({
+    name,
+    control
+  });
+  const canAdd = fields.length !== void 0 && fields.length < maxSize;
+  const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 3, children: [
+    fields.length ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readonly, "data-testid": `remove-button-${index$1}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1) })
+    ] }, field.id)) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        "data-testid": "add-button",
+        icon: "plus",
+        variant: "filled",
+        sentiment: "neutral",
+        fullWidth: addButton.fullWidth,
+        disabled: !canAdd || readonly,
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        onClick: () => append({
+          key: "",
+          value: ""
+        }),
+        children: addButton.name
+      }
+    ) })
+  ] });
+};
+exports.KeyValueField = KeyValueField;