@ultraviolet/form 2.13.3 → 2.13.5

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.cjs

@@ -0,0 +1,70 @@
+"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 SelectInputFieldV2 = ({
+  autofocus,
+  className,
+  id,
+  label = "",
+  onFocus,
+  onBlur,
+  placeholder,
+  readOnly,
+  required,
+  size,
+  "data-testid": dataTestId,
+  disabled,
+  placeholderSearch,
+  helper,
+  options,
+  emptyState,
+  onChange,
+  searchable,
+  clearable,
+  multiselect,
+  descriptionDirection,
+  footer,
+  labelDescription,
+  success,
+  loadMore,
+  isLoading,
+  selectAll,
+  selectAllGroup,
+  name,
+  "aria-label": ariaLabel,
+  optionalInfoPlacement,
+  rules,
+  shouldUnregister = false
+}) => {
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  const {
+    getError
+  } = index.useErrors();
+  const handleChange = React.useCallback((value) => {
+    onChange?.(value);
+    field.onChange(value);
+  }, [onChange, field]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
+};
+exports.SelectInputFieldV2 = SelectInputFieldV2;

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.cjs

@@ -0,0 +1,58 @@
+"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 SelectableCardField = ({
+  name,
+  value,
+  onChange,
+  showTick,
+  type,
+  disabled,
+  children,
+  className,
+  onFocus,
+  onBlur,
+  required,
+  tooltip,
+  id,
+  label,
+  rules,
+  shouldUnregister = false,
+  "data-testid": dataTestId
+}) => {
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
+};
+exports.SelectableCardField = SelectableCardField;

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.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 SelectableCardGroupField = ({
+  className,
+  legend,
+  name,
+  onChange,
+  required = false,
+  rules,
+  children,
+  label = "",
+  error: customError,
+  helper,
+  columns = 1,
+  showTick,
+  type = "radio",
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 = ui.SelectableCardGroup.Card;
+exports.SelectableCardGroupField = SelectableCardGroupField;

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.cjs

@@ -0,0 +1,26 @@
+"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 Submit = ({
+  children,
+  className,
+  disabled = false,
+  icon,
+  iconPosition,
+  size,
+  variant = "filled",
+  sentiment = "primary",
+  tooltip,
+  fullWidth,
+  onClick
+}) => {
+  const {
+    isSubmitting,
+    isValid
+  } = reactHookForm.useFormState();
+  const isDisabled = disabled || isSubmitting || !isValid;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled, icon, iconPosition, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
+};
+exports.Submit = Submit;

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.cjs

@@ -0,0 +1,14 @@
+"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 SubmitErrorAlert = ({
+  className
+}) => {
+  const {
+    errors
+  } = reactHookForm.useFormState();
+  return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
+};
+exports.SubmitErrorAlert = SubmitErrorAlert;

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.cjs

@@ -0,0 +1,50 @@
+"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 TagInputField = ({
+  className,
+  disabled,
+  id,
+  name,
+  onChange,
+  placeholder,
+  required,
+  rules,
+  variant,
+  shouldUnregister = false,
+  "data-testid": dataTestId,
+  clearable,
+  label,
+  labelDescription,
+  size,
+  success,
+  readOnly,
+  tooltip
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    rules: {
+      required,
+      shouldUnregister,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
+};
+exports.TagInputField = TagInputField;