@ultraviolet/form 2.13.3 → 2.13.5

package/dist/components/KeyValueField/index.js

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

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/NumberInputField/index.js

@@ -21,10 +21,14 @@ const NumberInputField = ({
   label,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -35,36 +39,17 @@ const NumberInputField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx(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) });
 };
 export {
   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/NumberInputFieldV2/index.js

@@ -28,10 +28,14 @@ const NumberInputFieldV2 = ({
   readOnly,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -42,41 +46,17 @@ const NumberInputFieldV2 = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
+  return /* @__PURE__ */ jsx(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 });
 };
 export {
   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/RadioField/index.js

@@ -18,10 +18,14 @@ const RadioField = ({
   tooltip,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -30,31 +34,15 @@ const RadioField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
+  return /* @__PURE__ */ jsx(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 });
 };
 export {
   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/RadioGroupField/index.js

@@ -16,10 +16,14 @@ const RadioGroupField = ({
   direction,
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -28,26 +32,12 @@ const RadioGroupField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
+  return /* @__PURE__ */ jsx(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 = RadioGroup.Radio;
 export {

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;