@ultraviolet/form 2.13.3 → 2.13.4

package/dist/components/SelectInputField/index.js

@@ -40,50 +40,40 @@ const SelectInputField = ({
   shouldUnregister = false,
   "data-testid": dataTestId
 }) => {
-  const options = useMemo(
-    () => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({ props: { children: labelChild, ...option } }) => ({
-      ...option,
-      label: labelChild
-    })),
-    [optionsProp, children]
-  );
-  const parse = useMemo(
-    () => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name),
-    [multiple, parseProp, name]
-  );
-  const format = 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 = "";
-          }
+  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
+    props: {
+      children: labelChild,
+      ...option
+    }
+  }) => ({
+    ...option,
+    label: labelChild
+  })), [optionsProp, children]);
+  const parse = useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
+  const format = 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 } = useErrors();
+    }
+    return formatProp(selected, name);
+  }, [formatProp, multiple, name, options]);
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -94,44 +84,17 @@ const SelectInputField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
+  return /* @__PURE__ */ jsx(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 = SelectInput.Option;
 export {

package/dist/components/SelectInputFieldV2/index.js

@@ -40,7 +40,9 @@ const SelectInputFieldV2 = ({
 }) => {
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -49,55 +51,19 @@ const SelectInputFieldV2 = ({
       ...rules
     }
   });
-  const { getError } = useErrors();
-  const handleChange = useCallback(
-    (value) => {
-      onChange?.(value);
-      field.onChange(value);
-    },
-    [onChange, field]
-  );
-  return /* @__PURE__ */ jsx(
-    SelectInputV2,
-    {
-      name: field.name,
-      options,
-      required,
-      size,
-      "data-testid": dataTestId,
-      className,
-      disabled,
-      id,
-      label,
-      onFocus,
-      onBlur: (event) => {
-        field.onBlur();
-        onBlur?.(event);
-      },
-      placeholder,
-      readOnly,
-      multiselect,
-      value: field.value,
-      placeholderSearch,
-      helper,
-      emptyState,
-      searchable,
-      clearable,
-      descriptionDirection,
-      footer,
-      labelDescription,
-      error: getError({ label }, error),
-      success,
-      loadMore,
-      isLoading,
-      selectAll,
-      selectAllGroup,
-      autofocus,
-      optionalInfoPlacement,
-      "aria-label": ariaLabel,
-      onChange: handleChange
-    }
-  );
+  const {
+    getError
+  } = useErrors();
+  const handleChange = useCallback((value) => {
+    onChange?.(value);
+    field.onChange(value);
+  }, [onChange, field]);
+  return /* @__PURE__ */ jsx(SelectInputV2, { name: field.name, options, required, size, "data-testid": dataTestId, className, disabled, id, label, onFocus, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, placeholder, readOnly, multiselect, value: field.value, placeholderSearch, helper, emptyState, searchable, clearable, descriptionDirection, footer, labelDescription, error: getError({
+    label
+  }, error), success, loadMore, isLoading, selectAll, selectAllGroup, autofocus, optionalInfoPlacement, "aria-label": ariaLabel, onChange: handleChange });
 };
 export {
   SelectInputFieldV2

package/dist/components/SelectableCardField/index.js

@@ -22,7 +22,9 @@ const SelectableCardField = ({
 }) => {
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -32,48 +34,24 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsx(
-    SelectableCard,
-    {
-      isError: !!error,
-      showTick,
-      checked: isChecked,
-      className,
-      disabled,
-      onChange: (event) => {
-        if (type === "checkbox") {
-          const fieldValue = field.value ?? [];
-          if (fieldValue?.includes(event.currentTarget.value)) {
-            field.onChange(
-              fieldValue?.filter(
-                (currentValue) => currentValue !== event.currentTarget.value
-              )
-            );
-          } else {
-            field.onChange([...fieldValue, event.currentTarget.value]);
-          }
-        } else {
-          field.onChange(event);
-        }
-        onChange?.(event);
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        onBlur?.(event);
-      },
-      onFocus: (event) => {
-        onFocus?.(event);
-      },
-      type,
-      id,
-      tooltip,
-      label,
-      value: value ?? "",
-      name: field.name,
-      "data-testid": dataTestId,
-      children
+  return /* @__PURE__ */ jsx(SelectableCard, { isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+    if (type === "checkbox") {
+      const fieldValue = field.value ?? [];
+      if (fieldValue?.includes(event.currentTarget.value)) {
+        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
+      } else {
+        field.onChange([...fieldValue, event.currentTarget.value]);
+      }
+    } else {
+      field.onChange(event);
     }
-  );
+    onChange?.(event);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, type, id, tooltip, label, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
 };
 export {
   SelectableCardField

package/dist/components/SelectableCardGroupField/index.js

@@ -18,10 +18,14 @@ const SelectableCardGroupField = ({
   type = "radio",
   shouldUnregister = false
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     shouldUnregister,
@@ -30,39 +34,21 @@ const SelectableCardGroupField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    SelectableCardGroup,
-    {
-      legend,
-      name,
-      type,
-      showTick,
-      value: field.value,
-      onChange: (event) => {
-        if (type === "checkbox") {
-          const fieldValue = field.value ?? [];
-          if (fieldValue?.includes(event.currentTarget.value)) {
-            field.onChange(
-              fieldValue?.filter(
-                (currentValue) => currentValue !== event.currentTarget.value
-              )
-            );
-          } else {
-            field.onChange([...fieldValue, event.currentTarget.value]);
-          }
-        } else {
-          field.onChange(event);
-        }
-        onChange?.(event);
-      },
-      error: getError({ label }, error) ?? customError,
-      className,
-      columns,
-      helper,
-      required,
-      children
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+    if (type === "checkbox") {
+      const fieldValue = field.value ?? [];
+      if (fieldValue?.includes(event.currentTarget.value)) {
+        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
+      } else {
+        field.onChange([...fieldValue, event.currentTarget.value]);
+      }
+    } else {
+      field.onChange(event);
     }
-  );
+    onChange?.(event);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, columns, helper, required, children });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
 export {

package/dist/components/Submit/index.js

@@ -14,26 +14,12 @@ const Submit = ({
   fullWidth,
   onClick
 }) => {
-  const { isSubmitting, isValid } = useFormState();
+  const {
+    isSubmitting,
+    isValid
+  } = useFormState();
   const isDisabled = disabled || isSubmitting || !isValid;
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      className,
-      disabled: isDisabled,
-      icon,
-      iconPosition,
-      isLoading: isSubmitting,
-      size,
-      type: "submit",
-      variant,
-      sentiment,
-      tooltip,
-      fullWidth,
-      onClick,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled, icon, iconPosition, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
 };
 export {
   Submit

package/dist/components/SubmitErrorAlert/index.js

@@ -1,8 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Alert } from "@ultraviolet/ui";
 import { useFormState } from "react-hook-form";
-const SubmitErrorAlert = ({ className }) => {
-  const { errors } = useFormState();
+const SubmitErrorAlert = ({
+  className
+}) => {
+  const {
+    errors
+  } = useFormState();
   return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsx(Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
 };
 export {

package/dist/components/TagInputField/index.js

@@ -22,10 +22,14 @@ const TagInputField = ({
   readOnly,
   tooltip
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     rules: {
@@ -34,31 +38,12 @@ const TagInputField = ({
       ...rules
     }
   });
-  return /* @__PURE__ */ jsx(
-    TagInput,
-    {
-      name: field.name,
-      className,
-      disabled,
-      id,
-      onChange: (newTags) => {
-        field.onChange(newTags);
-        onChange?.(newTags);
-      },
-      placeholder,
-      variant,
-      value: field.value,
-      "data-testid": dataTestId,
-      clearable,
-      label,
-      labelDescription,
-      size,
-      success,
-      error: getError({ label: label ?? "" }, error),
-      readOnly,
-      tooltip
-    }
-  );
+  return /* @__PURE__ */ jsx(TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
+    field.onChange(newTags);
+    onChange?.(newTags);
+  }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
+    label: label ?? ""
+  }, error), readOnly, tooltip });
 };
 export {
   TagInputField

package/dist/components/TextAreaField/index.js

@@ -27,19 +27,21 @@ const TextAreaField = ({
   validate,
   regex: regexes
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     rules: {
       required,
       validate: {
         ...regexes ? {
-          pattern: (value) => regexes.every(
-            (regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value))
-          )
+          pattern: (value) => regexes.every((regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value)))
         } : {},
         ...validate
       },
@@ -47,51 +49,21 @@ const TextAreaField = ({
       maxLength
     }
   });
-  return /* @__PURE__ */ jsx(
-    TextArea,
-    {
-      autoFocus,
-      className,
-      clearable,
-      "data-testid": dataTestId,
-      disabled,
-      error: getError(
-        {
-          regex: regexes,
-          minLength,
-          maxLength,
-          label,
-          value: field.value
-        },
-        error
-      ),
-      helper,
-      label,
-      labelDescription,
-      minLength,
-      maxLength,
-      name,
-      onBlur: (event) => {
-        onBlur?.(event);
-        field.onBlur();
-      },
-      onChange: (event) => {
-        field.onChange(event);
-        onChange?.(event);
-      },
-      onFocus: (event) => {
-        onFocus?.(event);
-      },
-      placeholder,
-      readOnly,
-      required,
-      rows,
-      success,
-      tabIndex,
-      tooltip,
-      value: field.value
-    }
-  );
+  return /* @__PURE__ */ jsx(TextArea, { autoFocus, className, clearable, "data-testid": dataTestId, disabled, error: getError({
+    regex: regexes,
+    minLength,
+    maxLength,
+    label,
+    value: field.value
+  }, error), helper, label, labelDescription, minLength, maxLength, name, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, rows, success, tabIndex, tooltip, value: field.value });
 };
 export {
   TextAreaField

package/dist/components/TextInputField/index.js

@@ -50,10 +50,14 @@ const TextInputField = ({
   shouldUnregister = false,
   "data-testid": dataTestId
 }) => {
-  const { getError } = useErrors();
+  const {
+    getError
+  } = useErrors();
   const {
     field,
-    fieldState: { error }
+    fieldState: {
+      error
+    }
   } = useController({
     name,
     defaultValue,
@@ -62,9 +66,7 @@ const TextInputField = ({
       required,
       validate: {
         ...regexes ? {
-          pattern: (value) => regexes.every(
-            (regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value))
-          )
+          pattern: (value) => regexes.every((regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value)))
         } : {},
         ...validate
       },
@@ -81,73 +83,31 @@ const TextInputField = ({
     }
     return field.value;
   };
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      name: field.name,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      autoFocus,
-      autoSave,
-      className,
-      cols,
-      disabled,
-      error: customError ?? getError(
-        {
-          regex: regexes,
-          minLength,
-          maxLength,
-          label,
-          min,
-          max,
-          value: field.value
-        },
-        error
-      ),
-      fillAvailable,
-      generated,
-      id,
-      label,
-      multiline,
-      notice,
-      required,
-      onBlur: (event) => {
-        field.onBlur();
-        onBlur?.(event);
-        if (formatOnBlur && format) {
-          field.onChange(format(field.value));
-        }
-      },
-      onChange: (event) => {
-        if (parse) {
-          field.onChange(parse(event));
-          onChange?.(parse(event));
-        } else {
-          field.onChange(event);
-          onChange?.(event);
-        }
-      },
-      onFocus: (event) => {
-        onFocus?.(event);
-      },
-      onKeyUp,
-      onKeyDown,
-      placeholder,
-      random,
-      readOnly,
-      resizable,
-      rows,
-      type,
-      noTopLabel,
-      unit,
-      valid,
-      size,
-      value: transformedValue(),
-      ref: innerRef,
-      "data-testid": dataTestId
+  return /* @__PURE__ */ jsx(TextInput, { name: field.name, autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, error: customError ?? getError({
+    regex: regexes,
+    minLength,
+    maxLength,
+    label,
+    min,
+    max,
+    value: field.value
+  }, error), fillAvailable, generated, id, label, multiline, notice, required, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+    if (formatOnBlur && format) {
+      field.onChange(format(field.value));
+    }
+  }, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event));
+      onChange?.(parse(event));
+    } else {
+      field.onChange(event);
+      onChange?.(event);
     }
-  );
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, onKeyUp, onKeyDown, placeholder, random, readOnly, resizable, rows, type, noTopLabel, unit, valid, size, value: transformedValue(), ref: innerRef, "data-testid": dataTestId });
 };
 export {
   TextInputField