@ultraviolet/form 2.13.4 → 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/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/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/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/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;

package/dist/components/NumberInputField/index.cjs

@@ -0,0 +1,56 @@
+"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 NumberInputField = ({
+  disabled,
+  maxValue,
+  minValue,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  onMaxCrossed,
+  onMinCrossed,
+  required,
+  size,
+  step,
+  text,
+  rules,
+  className,
+  label,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      max: maxValue,
+      min: minValue,
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event) => {
+    field.onChange(event ?? null);
+    onChange?.(event);
+  }, onFocus, maxValue, minValue, onMinCrossed, onMaxCrossed, size, step, text, className, label, error: getError({
+    label: label ?? "",
+    max: maxValue,
+    min: minValue
+  }, error) });
+};
+exports.NumberInputField = NumberInputField;

package/dist/components/NumberInputFieldV2/index.cjs

@@ -0,0 +1,63 @@
+"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 NumberInputFieldV2 = ({
+  disabled,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
+  name,
+  onChange,
+  onBlur,
+  size,
+  step,
+  unit,
+  tooltip,
+  className,
+  label,
+  labelDescription,
+  id,
+  placeholder,
+  success,
+  helper,
+  rules,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
+  required,
+  autoFocus,
+  readOnly,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required });
+};
+exports.NumberInputFieldV2 = NumberInputFieldV2;

package/dist/components/RadioField/index.cjs

@@ -0,0 +1,49 @@
+"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 RadioField = ({
+  className,
+  "data-testid": dataTestId,
+  disabled,
+  id,
+  name,
+  onBlur,
+  label = "",
+  onChange,
+  onFocus,
+  required,
+  value,
+  rules,
+  tooltip,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({
+    label: typeof label === "string" ? label : ""
+  }, error), id, onChange: () => {
+    field.onChange(value);
+    onChange?.(value);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus, required, value: value ?? "", label, tooltip });
+};
+exports.RadioField = RadioField;

package/dist/components/RadioGroupField/index.cjs

@@ -0,0 +1,45 @@
+"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 RadioGroupField = ({
+  className,
+  legend = "",
+  name,
+  onChange,
+  required,
+  rules,
+  children,
+  label = "",
+  error: customError,
+  helper,
+  direction,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { className, name: field.name, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event.target.value);
+  }, required, value: field.value, legend, error: getError({
+    label
+  }, error) ?? customError, helper, direction, children });
+};
+RadioGroupField.Radio = ui.RadioGroup.Radio;
+exports.RadioGroupField = RadioGroupField;

package/dist/components/SelectInputField/index.cjs

@@ -0,0 +1,102 @@
+"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 identity = (x) => x;
+const SelectInputField = ({
+  animation,
+  animationDuration,
+  animationOnChange,
+  children,
+  className,
+  disabled,
+  // error: errorProp,
+  format: formatProp = identity,
+  // formatOnBlur,
+  id,
+  inputId,
+  isClearable,
+  isLoading,
+  isSearchable,
+  label = "",
+  maxLength,
+  menuPortalTarget,
+  minLength,
+  multiple,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  options: optionsProp,
+  parse: parseProp = identity,
+  placeholder,
+  readOnly,
+  required,
+  rules,
+  noTopLabel,
+  emptyState,
+  customStyle,
+  shouldUnregister = false,
+  "data-testid": dataTestId
+}) => {
+  const options = React.useMemo(() => optionsProp || React.Children.toArray(children).flat().filter(Boolean).map(({
+    props: {
+      children: labelChild,
+      ...option
+    }
+  }) => ({
+    ...option,
+    label: labelChild
+  })), [optionsProp, children]);
+  const parse = React.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
+  const format = React.useCallback((val) => {
+    if (multiple)
+      return formatProp(val, name);
+    const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
+    let selected = "";
+    if (val && options) {
+      selected = find(options, val);
+      if (!selected) {
+        selected = options.map((curr) => find(curr.options, val)).filter(identity);
+        if (Array.isArray(selected) && selected.length === 0) {
+          selected = "";
+        }
+      }
+    }
+    return formatProp(selected, name);
+  }, [formatProp, multiple, name, options]);
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      minLength: minLength || required ? 1 : void 0,
+      maxLength,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({
+    label,
+    minLength,
+    maxLength
+  }, error), id, inputId, isClearable, isLoading, isMulti: multiple, customStyle, isSearchable, menuPortalTarget, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event, action) => {
+    field.onChange(parse(event));
+    onChange?.(event, action);
+  }, onFocus, options, placeholder, readOnly, noTopLabel, required, value: format(field.value), emptyState, "data-testid": dataTestId, children });
+};
+SelectInputField.Option = ui.SelectInput.Option;
+exports.SelectInputField = SelectInputField;