@ultraviolet/form 2.13.3 → 2.13.5

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

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

@@ -36,19 +36,21 @@ const TextInputField = ({
   "aria-label": ariaLabel,
   autoComplete
 }) => {
-  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
       },
@@ -56,60 +58,21 @@ const TextInputField = ({
       maxLength
     }
   });
-  return /* @__PURE__ */ jsx(
-    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
-    }
-  );
+  return /* @__PURE__ */ jsx(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 });
 };
 export {
   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;