@ultraviolet/form 2.13.4 → 2.13.6

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/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/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/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/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/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;

package/dist/components/TextAreaField/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 reactHookForm = require("react-hook-form");
+const index = require("../../providers/ErrorContext/index.cjs");
+const TextAreaField = ({
+  autoFocus,
+  clearable,
+  className,
+  tabIndex,
+  "data-testid": dataTestId,
+  disabled,
+  helper,
+  label,
+  labelDescription,
+  onChange,
+  minLength,
+  maxLength,
+  name,
+  onFocus,
+  onBlur,
+  placeholder,
+  readOnly,
+  required,
+  rows,
+  success,
+  tooltip,
+  validate,
+  regex: regexes
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.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)))
+        } : {},
+        ...validate
+      },
+      minLength,
+      maxLength
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
+};
+exports.TextAreaField = TextAreaField;

package/dist/components/TextInputField/index.cjs

@@ -0,0 +1,114 @@
+"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 TextInputField = ({
+  autoCapitalize,
+  autoComplete,
+  autoCorrect,
+  autoFocus,
+  autoSave,
+  className,
+  cols,
+  disabled,
+  fillAvailable,
+  generated,
+  id,
+  label = "",
+  multiline,
+  name,
+  noTopLabel,
+  notice,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
+  onBlur,
+  placeholder,
+  random,
+  readOnly,
+  required,
+  resizable,
+  rows,
+  type,
+  unit,
+  size,
+  rules,
+  valid,
+  parse,
+  format,
+  formatOnBlur = false,
+  regex: regexes,
+  min,
+  max,
+  minLength,
+  maxLength,
+  validate,
+  defaultValue,
+  customError,
+  innerRef,
+  shouldUnregister = false,
+  "data-testid": dataTestId
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    defaultValue,
+    shouldUnregister,
+    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)))
+        } : {},
+        ...validate
+      },
+      minLength,
+      maxLength,
+      max,
+      min,
+      ...rules
+    }
+  });
+  const transformedValue = () => {
+    if (format && !formatOnBlur) {
+      return format(field.value);
+    }
+    return field.value;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
+};
+exports.TextInputField = TextInputField;

package/dist/components/TextInputFieldV2/index.cjs

@@ -0,0 +1,79 @@
+"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 TextInputField = ({
+  validate,
+  regex: regexes,
+  id,
+  className,
+  tabIndex,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  success,
+  helper,
+  tooltip,
+  label,
+  autoFocus,
+  required = false,
+  "data-testid": dataTestId,
+  name,
+  onFocus,
+  onBlur,
+  clearable = false,
+  labelDescription,
+  type = "text",
+  prefix,
+  suffix,
+  size = "large",
+  loading,
+  onRandomize,
+  minLength,
+  maxLength,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
+  autoComplete
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.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)))
+        } : {},
+        ...validate
+      },
+      minLength,
+      maxLength
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TextInputV2, { autoFocus, className, clearable, "data-testid": dataTestId, disabled, error: getError({
+    regex: regexes,
+    // minLength,
+    // maxLength,
+    label: label ?? "",
+    value: field.value
+  }, error), helper, label, loading, labelDescription, minLength, maxLength, name, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete });
+};
+exports.TextInputField = TextInputField;

package/dist/components/TimeField/index.cjs

@@ -0,0 +1,66 @@
+"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 parseTime = (date) => {
+  const timeStr = date && typeof date !== "string" ? date.toLocaleTimeString().slice(0, -3) : "";
+  return {
+    label: timeStr,
+    value: timeStr
+  };
+};
+const TimeField = ({
+  required,
+  name,
+  schedule,
+  placeholder,
+  disabled,
+  readOnly,
+  onBlur,
+  onFocus,
+  onChange,
+  isLoading,
+  isClearable,
+  inputId,
+  id,
+  animation,
+  animationDuration,
+  animationOnChange,
+  className,
+  isSearchable,
+  rules,
+  options,
+  "data-testid": dataTestId,
+  shouldUnregister = false,
+  noTopLabel
+}) => {
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TimeInput, { name: field.name, placeholder, schedule, required, value: parseTime(field.value), onChange: (val) => {
+    if (!val)
+      return;
+    onChange?.(val);
+    const [hours, minutes] = val.value.split(":");
+    const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();
+    date.setHours(Number(hours), Number(minutes), 0);
+    field.onChange(date);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, error: error?.message, disabled, readOnly, animation, animationDuration, animationOnChange, className, isLoading, isClearable, isSearchable, inputId, id, options, "data-testid": dataTestId, noTopLabel });
+};
+exports.TimeField = TimeField;

package/dist/components/ToggleField/index.cjs

@@ -0,0 +1,47 @@
+"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 ToggleField = ({
+  className,
+  disabled,
+  label,
+  name,
+  onChange,
+  required,
+  size,
+  tooltip,
+  rules,
+  labelPosition,
+  parse,
+  format,
+  "data-testid": dataTestId,
+  shouldUnregister = false
+}) => {
+  const {
+    field
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  const transformedValue = () => {
+    if (format) {
+      return format(field.value);
+    }
+    return field.value;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Toggle, { name: field.name, ref: field.ref, checked: transformedValue(), tooltip, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event.target.checked));
+    } else {
+      field.onChange(event);
+    }
+    onChange?.(event);
+  }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId });
+};
+exports.ToggleField = ToggleField;

package/dist/constants.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FORM_ERROR = "FINAL_FORM/form-error";
+exports.FORM_ERROR = FORM_ERROR;

package/dist/hooks/useField.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactHookForm = require("react-hook-form");
+const useFieldDeprecated = (name, options) => {
+  const {
+    getValues
+  } = reactHookForm.useFormContext();
+  const {
+    field,
+    fieldState
+  } = reactHookForm.useController({
+    name,
+    rules: {
+      validate: options?.validate
+    }
+  });
+  return {
+    input: {
+      value: getValues(name),
+      onChange: field.onChange
+    },
+    meta: {
+      error: fieldState.error?.message,
+      touched: fieldState.isTouched,
+      invalid: fieldState.invalid,
+      dirty: fieldState.isDirty
+    }
+  };
+};
+exports.useFieldDeprecated = useFieldDeprecated;