@ultraviolet/form 2.13.2 → 2.13.3

package/dist/components/Form/index.js

@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
-import { FORM_ERROR } from '../../constants.js';
-import { defaultErrors } from './defaultErrors.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { ErrorProvider } from '../../providers/ErrorContext/index.js';
-
-const FormSubmitContext = /*#__PURE__*/React.createContext({});
+import { jsx } from "@emotion/react/jsx-runtime";
+import React, { useMemo } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { FORM_ERROR } from "../../constants.js";
+import { defaultErrors } from "./defaultErrors.js";
+import { ErrorProvider } from "../../providers/ErrorContext/index.js";
+const FormSubmitContext = React.createContext(
+  {}
+);
 const Form = ({
   children,
   methods: methodsProp,
@@ -16,10 +17,10 @@ const Form = ({
 }) => {
   const methodsHook = useForm({
     defaultValues: initialValues,
-    mode: 'onChange'
+    mode: "onChange"
   });
   const methods = !methodsProp ? methodsHook : methodsProp;
-  const handleSubmit = methods.handleSubmit(async values => {
+  const handleSubmit = methods.handleSubmit(async (values) => {
     const result = await onRawSubmit(values, {
       reset: methods.reset,
       resetFieldState: methods.resetField,
@@ -27,57 +28,51 @@ const Form = ({
       change: methods.setValue
     });
     if (result === null) {
-      methods.setError('root.submit', {
-        type: 'custom'
+      methods.setError("root.submit", {
+        type: "custom"
       });
       return;
     }
-    if (result && typeof result !== 'boolean' && typeof result !== 'number') {
-      methods.setError('root.submit', {
-        type: 'custom',
-        message: typeof result === 'object' ? result[FORM_ERROR] : result
+    if (result && typeof result !== "boolean" && typeof result !== "number") {
+      methods.setError("root.submit", {
+        type: "custom",
+        message: typeof result === "object" ? result[FORM_ERROR] : result
       });
     }
   });
-  const formSubmitContextValue = useMemo(() => ({
-    handleSubmit
-  }), [handleSubmit]);
-  return jsx(FormProvider, {
-    ...methods,
-    children: jsx(FormSubmitContext.Provider, {
-      value: formSubmitContextValue,
-      children: jsx(ErrorProvider, {
-        errors: {
-          ...defaultErrors,
-          ...errors
-        },
-        children: jsx("form", {
-          onSubmit: async e => {
-            e.preventDefault();
-            e.stopPropagation();
-            await handleSubmit(e);
-          },
-          name: name,
-          noValidate: true,
-          children: typeof children === 'function' ? children({
-            values: methods.watch(),
-            hasValidationErrors: !methods.formState.isValid,
-            errors: methods.formState.errors,
-            submitting: methods.formState.isSubmitting,
-            pristine: !methods.formState.isDirty,
-            handleSubmit,
-            submitError: !!methods.formState.errors?.root?.['submit'],
-            valid: methods.formState.isValid,
-            form: {
-              change: methods.setValue,
-              reset: methods.reset,
-              submit: handleSubmit
-            }
-          }) : children
-        })
-      })
-    })
-  });
+  const formSubmitContextValue = useMemo(
+    () => ({ handleSubmit }),
+    [handleSubmit]
+  );
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: { ...defaultErrors, ...errors }, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        await handleSubmit(e);
+      },
+      name,
+      noValidate: true,
+      children: typeof children === "function" ? children({
+        values: methods.watch(),
+        hasValidationErrors: !methods.formState.isValid,
+        errors: methods.formState.errors,
+        submitting: methods.formState.isSubmitting,
+        pristine: !methods.formState.isDirty,
+        handleSubmit,
+        submitError: !!methods.formState.errors?.root?.["submit"],
+        valid: methods.formState.isValid,
+        form: {
+          change: methods.setValue,
+          reset: methods.reset,
+          submit: handleSubmit
+        }
+      }) : children
+    }
+  ) }) }) });
+};
+export {
+  Form,
+  FormSubmitContext
 };
-
-export { Form, FormSubmitContext };

package/dist/components/KeyValueField/index.d.ts

@@ -0,0 +1,33 @@
+import { Button } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form';
+import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2';
+type InputKeyProps = {
+    label: ComponentProps<typeof TextInputFieldV2>['label'];
+    required?: ComponentProps<typeof TextInputFieldV2>['required'];
+    regex?: ComponentProps<typeof TextInputFieldV2>['regex'];
+};
+type InputValueProps = {
+    type?: ComponentProps<typeof TextInputFieldV2>['type'];
+    placeholder?: ComponentProps<typeof TextInputFieldV2>['placeholder'];
+} & InputKeyProps;
+type AddButtonProps = {
+    name: ComponentProps<typeof Button>['children'];
+    fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    tooltip?: string;
+    maxSizeReachedTooltip?: string;
+};
+type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues>> = {
+    name: TFieldArrayName;
+    inputKey: InputKeyProps;
+    inputValue: InputValueProps;
+    addButton: AddButtonProps;
+    maxSize?: number;
+    readonly?: boolean;
+    control?: Control<TFieldValues>;
+};
+/**
+ * A React component that allows users to manage key-value pairs
+ */
+export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readonly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KeyValueField/index.js

@@ -1,11 +1,7 @@
-import { Stack, Row, Button } from '@ultraviolet/ui';
-import { useFieldArray } from 'react-hook-form';
-import { TextInputField } from '../TextInputFieldV2/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-/**
- * A React component that allows users to manage key-value pairs
- */
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Stack, Row, Button } from "@ultraviolet/ui";
+import { useFieldArray } from "react-hook-form";
+import { TextInputField } from "../TextInputFieldV2/index.js";
 const KeyValueField = ({
   name,
   inputKey,
@@ -15,70 +11,75 @@ const KeyValueField = ({
   readonly = false,
   control
 }) => {
-  const {
-    fields,
-    append,
-    remove
-  } = useFieldArray({
+  const { fields, append, remove } = useFieldArray({
     name,
     control
   });
-  const canAdd = fields.length !== undefined && fields.length < maxSize;
+  const canAdd = fields.length !== void 0 && fields.length < maxSize;
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
-  return jsxs(Stack, {
-    gap: 3,
-    children: [fields.length ? jsx(Stack, {
-      gap: 3,
-      children: fields.map((field, index) => jsxs(Row, {
+  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: [jsx(TextInputField, {
-          readOnly: readonly,
-          required: inputKey.required,
-          name: `${name}.${index}.key`,
-          label: inputKey.label,
-          regex: inputKey.regex
-        }), 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
-        }), jsx(Button, {
-          disabled: readonly,
-          "data-testid": `remove-button-${index}`,
-          icon: "delete",
-          variant: "outlined",
-          sentiment: "danger",
-          size: "large",
-          onClick: () => remove(index)
-        })]
-      }, field.id))
-    }) : null, jsx(Stack, {
-      direction: "row",
-      justifyContent: "flex-start",
-      children: jsx(Button, {
+        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,
+      {
         "data-testid": "add-button",
         icon: "plus",
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
         disabled: !canAdd || readonly,
-        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip
-        // @ts-expect-error can't infer properly
-        ,
-        onClick: () => append({
-          key: '',
-          value: ''
-        }),
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        onClick: () => append({ key: "", value: "" }),
         children: addButton.name
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
+};
+export {
+  KeyValueField
 };
-
-export { KeyValueField };

package/dist/components/NumberInputField/index.d.ts

@@ -0,0 +1,13 @@
+import { NumberInput } from '@ultraviolet/ui';
+import type { ComponentProps, FocusEventHandler } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+};
+/**
+ * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
+ */
+export declare const NumberInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NumberInputField/index.js

@@ -1,11 +1,7 @@
-import { NumberInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NumberInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputField = ({
   disabled,
   maxValue,
@@ -25,14 +21,10 @@ const NumberInputField = ({
   label,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -43,35 +35,37 @@ const NumberInputField = ({
       ...rules
     }
   });
-  return jsx(NumberInput, {
-    name: field.name,
-    value: field.value,
-    disabled: disabled,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: event => {
-      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
-      field.onChange(event ?? null);
-      onChange?.(event);
-    },
-    onFocus: onFocus,
-    maxValue: maxValue,
-    minValue: minValue,
-    onMinCrossed: onMinCrossed,
-    onMaxCrossed: onMaxCrossed,
-    size: size,
-    step: step,
-    text: text,
-    className: className,
-    label: 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
 };
-
-export { NumberInputField };

package/dist/components/NumberInputFieldV2/index.d.ts

@@ -0,0 +1,11 @@
+import { NumberInputV2 } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type NumberInputV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'aria-label' | 'autoFocus' | 'readOnly' | 'min' | 'max'>> & {
+    className?: string;
+    name: string;
+    required?: boolean;
+};
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, max, min, 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, }: NumberInputV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NumberInputFieldV2/index.js

@@ -1,8 +1,7 @@
-import { NumberInputV2 } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NumberInputV2 } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputFieldV2 = ({
   disabled,
   max = Number.MAX_SAFE_INTEGER,
@@ -22,21 +21,17 @@ const NumberInputFieldV2 = ({
   success,
   helper,
   rules,
-  'aria-label': ariaLabel,
-  'data-testid': dataTestId,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
   required,
   autoFocus,
   readOnly,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -47,43 +42,42 @@ const NumberInputFieldV2 = ({
       ...rules
     }
   });
-  return jsx(NumberInputV2, {
-    name: field.name,
-    value: field.value,
-    disabled: disabled,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: newValue => {
-      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
-      field.onChange(newValue);
-      onChange?.(newValue);
-    },
-    max: max,
-    min: min,
-    size: size,
-    step: step,
-    className: className,
-    "data-testid": dataTestId,
-    id: id,
-    label: label,
-    labelDescription: labelDescription,
-    placeholder: placeholder,
-    error: getError({
-      label: label ?? '',
+  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
-    }, error),
-    success: success,
-    helper: helper,
-    tooltip: tooltip,
-    unit: unit,
-    "aria-label": ariaLabel,
-    autoFocus: autoFocus,
-    readOnly: readOnly,
-    required: required
-  });
+      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
 };
-
-export { NumberInputFieldV2 };

package/dist/components/RadioField/index.d.ts

@@ -0,0 +1,12 @@
+import { Radio } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
+    className?: string;
+};
+/**
+ * @deprecated This component is deprecated, use `RadioGroupField` instead.
+ */
+export declare const RadioField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};