@ultraviolet/form 2.13.1 → 2.13.3

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

@@ -0,0 +1,10 @@
+import { Checkbox } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CheckboxField/index.js

@@ -1,8 +1,7 @@
-import { Checkbox } 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 { Checkbox } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const CheckboxField = ({
   id,
   name,
@@ -19,17 +18,13 @@ const CheckboxField = ({
   rules,
   helper,
   tooltip,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     disabled,
@@ -39,33 +34,37 @@ const CheckboxField = ({
       ...rules
     }
   });
-  return jsx(Checkbox, {
-    id: id,
-    name: field.name,
-    onChange: event => {
-      field.onChange(event.target.checked);
-      onChange?.(event.target.checked);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: onFocus,
-    size: size,
-    progress: progress,
-    disabled: field.disabled,
-    checked: !!field.value,
-    error: getError({
-      label: label ?? ''
-    }, error),
-    ref: field.ref,
-    className: className,
-    required: required,
-    "data-testid": dataTestId,
-    helper: helper,
-    tooltip: tooltip,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      id,
+      name: field.name,
+      onChange: (event) => {
+        field.onChange(event.target.checked);
+        onChange?.(
+          event.target.checked
+        );
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onFocus,
+      size,
+      progress,
+      disabled: field.disabled,
+      checked: !!field.value,
+      error: getError({ label: label ?? "" }, error),
+      ref: field.ref,
+      className,
+      required,
+      "data-testid": dataTestId,
+      helper,
+      tooltip,
+      children
+    }
+  );
+};
+export {
+  CheckboxField
 };
-
-export { CheckboxField };

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

@@ -0,0 +1,32 @@
+import { CheckboxGroup } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
+export declare const CheckboxGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, rules, }: CheckboxGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
+        error?: import("react").ReactNode;
+        size?: number | undefined;
+        progress?: boolean | undefined;
+        helper?: import("react").ReactNode;
+        disabled?: boolean | undefined;
+        checked?: boolean | "indeterminate" | undefined;
+        className?: string | undefined;
+        "data-visibility"?: string | undefined;
+        required?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex"> & (({
+        "aria-label"?: undefined;
+    } & {
+        children: import("react").ReactNode;
+    }) | ({
+        children?: undefined;
+    } & {
+        'aria-label': string;
+    }))) & import("react").RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
+        value: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/CheckboxGroupField/index.js

@@ -1,14 +1,13 @@
-import { CheckboxGroup } from '@ultraviolet/ui';
-import { useCallback, Children, isValidElement } from 'react';
-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 { CheckboxGroup } from "@ultraviolet/ui";
+import { useCallback, Children, isValidElement } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const arraysContainSameValues = (array1, array2) => {
   if (array1.length === 0) {
     return false;
   }
-  return array2.every(value => array1.includes(value));
+  return array2.every((value) => array1.includes(value));
 };
 const CheckboxGroupField = ({
   legend,
@@ -17,39 +16,38 @@ const CheckboxGroupField = ({
   direction,
   children,
   onChange,
-  label = '',
+  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   rules
 }) => {
-  const {
-    getError
-  } = useErrors();
-  const validate = useCallback(value => {
-    const requiredChildren = Children.map(children, child => {
-      if ( /*#__PURE__*/isValidElement(child)) {
-        if (child.props.required) {
-          return child.props.name;
+  const { getError } = useErrors();
+  const validate = useCallback(
+    (value) => {
+      const requiredChildren = Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          if (child.props.required) {
+            return child.props.name;
+          }
+          return null;
         }
         return null;
+      })?.filter(Boolean) ?? [];
+      if (!required && arraysContainSameValues(value, requiredChildren)) {
+        return true;
       }
-      return null;
-    })?.filter(Boolean) ?? [];
-    if (!required && arraysContainSameValues(value, requiredChildren)) {
-      return true;
-    }
-    if (value.length >= Children.count(children)) {
-      return true;
-    }
-    return false;
-  }, [children, required]);
+      if (value.length >= Children.count(children)) {
+        return true;
+      }
+      return false;
+    },
+    [children, required]
+  );
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -58,29 +56,37 @@ const CheckboxGroupField = ({
       ...rules
     }
   });
-  return jsx(CheckboxGroup, {
-    legend: legend,
-    name: name,
-    value: field.value,
-    onChange: event => {
-      const fieldValue = field.value;
-      if (fieldValue?.includes(event.currentTarget.value)) {
-        field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
-      } else {
-        field.onChange([...field.value, event.currentTarget.value]);
-      }
-      onChange?.(event.currentTarget.value);
-    },
-    error: getError({
-      label
-    }, error) ?? customError,
-    className: className,
-    direction: direction,
-    helper: helper,
-    required: required,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(
+    CheckboxGroup,
+    {
+      legend,
+      name,
+      value: field.value,
+      onChange: (event) => {
+        const fieldValue = field.value;
+        if (fieldValue?.includes(event.currentTarget.value)) {
+          field.onChange(
+            fieldValue?.filter(
+              (currentValue) => currentValue !== event.currentTarget.value
+            )
+          );
+        } else {
+          field.onChange([...field.value, event.currentTarget.value]);
+        }
+        onChange?.(
+          event.currentTarget.value
+        );
+      },
+      error: getError({ label }, error) ?? customError,
+      className,
+      direction,
+      helper,
+      required,
+      children
+    }
+  );
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
-
-export { CheckboxGroupField };
+export {
+  CheckboxGroupField
+};

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

@@ -0,0 +1,16 @@
+import { DateInput } from '@ultraviolet/ui';
+import type { ComponentProps, FocusEvent } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type DateFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
+    maxDate?: Date;
+    minDate?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    locale?: string;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFocus?: (value: FocusEvent<HTMLElement>) => void;
+    autoFocus?: boolean;
+};
+export declare const DateField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateField/index.js

@@ -1,16 +1,15 @@
-import { DateInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { maxDateValidator } from '../../validators/maxDate.js';
-import { minDateValidator } from '../../validators/minDate.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-const parseDate = value => typeof value === 'string' ? new Date(value) : value;
-const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
+import { jsx } from "@emotion/react/jsx-runtime";
+import { DateInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { maxDateValidator } from "../../validators/maxDate.js";
+import { minDateValidator } from "../../validators/minDate.js";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const parseDate = (value) => typeof value === "string" ? new Date(value) : value;
+const isEmpty = (value) => typeof value === "string" ? value === "" : value === void 0;
 const DateField = ({
   required,
   name,
-  label = '',
+  label = "",
   format,
   locale,
   maxDate,
@@ -23,17 +22,13 @@ const DateField = ({
   autoFocus = false,
   excludeDates,
   selectsRange,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -47,48 +42,48 @@ const DateField = ({
       required
     }
   });
-  return jsx(DateInput, {
-    name: field.name,
-    label: label,
-    value: field.value,
-    format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
-    locale: locale,
-    required: required,
-    onChange: val => {
-      if (val && val instanceof Date) {
-        onChange?.(val);
-        const newDate = parseDate(val);
-        if (isEmpty(field.value)) {
+  return /* @__PURE__ */ jsx(
+    DateInput,
+    {
+      name: field.name,
+      label,
+      value: field.value,
+      format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""),
+      locale,
+      required,
+      onChange: (val) => {
+        if (val && val instanceof Date) {
+          onChange?.(val);
+          const newDate = parseDate(val);
+          if (isEmpty(field.value)) {
+            field.onChange(newDate);
+            return;
+          }
+          const currentDate = parseDate(field.value);
+          newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
           field.onChange(newDate);
-          return;
+        } else if (Array.isArray(val)) {
+          field.onChange(val);
         }
-        const currentDate = parseDate(field.value);
-        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-        field.onChange(newDate);
-      } else if (Array.isArray(val)) {
-        field.onChange(val);
-      }
-    },
-    onBlur: e => {
-      field.onBlur();
-      onBlur?.(e);
-    },
-    onFocus: onFocus,
-    maxDate: maxDate,
-    minDate: minDate,
-    error: getError({
-      minDate,
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      onFocus,
       maxDate,
-      label
-    }, error),
-    disabled: disabled,
-    autoFocus: autoFocus,
-    excludeDates: excludeDates,
-    selectsRange: selectsRange,
-    "data-testid": dataTestId,
-    startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : undefined,
-    endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : undefined
-  });
+      minDate,
+      error: getError({ minDate, maxDate, label }, error),
+      disabled,
+      autoFocus,
+      excludeDates,
+      selectsRange,
+      "data-testid": dataTestId,
+      startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0,
+      endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0
+    }
+  );
+};
+export {
+  DateField
 };
-
-export { DateField };

package/dist/components/Form/defaultErrors.d.ts

@@ -0,0 +1,2 @@
+import type { RequiredErrors } from '../../types';
+export declare const defaultErrors: RequiredErrors;

package/dist/components/Form/defaultErrors.js

@@ -1,21 +1,22 @@
 const defaultErrors = {
-  maxDate: () => '',
-  maxLength: () => '',
-  minLength: () => '',
-  max: () => '',
-  min: () => '',
-  required: () => '',
-  pattern: () => '',
-  deps: () => '',
-  value: () => '',
-  onBlur: () => '',
-  disabled: () => '',
-  onChange: () => '',
-  validate: () => '',
-  setValueAs: () => '',
-  valueAsDate: () => '',
-  valueAsNumber: () => '',
-  shouldUnregister: () => ''
+  maxDate: () => "",
+  maxLength: () => "",
+  minLength: () => "",
+  max: () => "",
+  min: () => "",
+  required: () => "",
+  pattern: () => "",
+  deps: () => "",
+  value: () => "",
+  onBlur: () => "",
+  disabled: () => "",
+  onChange: () => "",
+  validate: () => "",
+  setValueAs: () => "",
+  valueAsDate: () => "",
+  valueAsNumber: () => "",
+  shouldUnregister: () => ""
+};
+export {
+  defaultErrors
 };
-
-export { defaultErrors };

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { DefaultValues, FieldErrors, FieldValues, UseFormHandleSubmit, UseFormReturn } from 'react-hook-form';
+import { FORM_ERROR } from '../../constants';
+import type { FormErrors } from '../../types';
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+type SingleXOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type XOR<T extends unknown[]> = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR<A, B>, ...Rest]> : never;
+type FormStateReturn<TFormValues extends FieldValues> = {
+    values: TFormValues;
+    hasValidationErrors: boolean;
+    errors: FieldErrors<TFormValues>;
+    submitting: boolean;
+    pristine: boolean;
+    handleSubmit: () => Promise<void>;
+    submitError: boolean;
+    valid: boolean;
+    form: {
+        change: UseFormReturn<TFormValues>['setValue'];
+        reset: UseFormReturn<TFormValues>['reset'];
+        submit: () => Promise<void>;
+    };
+};
+type OnRawSubmitReturn = {
+    [FORM_ERROR]?: string;
+} | undefined | null | string | void | boolean | number;
+type FormSubmitContextValue<TFieldValues extends FieldValues = FieldValues> = {
+    handleSubmit: ReturnType<UseFormHandleSubmit<TFieldValues>>;
+};
+export declare const FormSubmitContext: React.Context<FormSubmitContextValue<FieldValues>>;
+export type FormProps<TFormValues extends FieldValues = FieldValues> = {
+    children?: ((props: FormStateReturn<TFormValues>) => ReactNode) | ReactNode;
+    errors: FormErrors;
+    name?: string;
+    onRawSubmit: (data: TFormValues, formState: {
+        reset: UseFormReturn<TFormValues>['reset'];
+        resetFieldState: UseFormReturn<TFormValues>['resetField'];
+        restart: () => void;
+        change: UseFormReturn<TFormValues>['setValue'];
+    }) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn;
+} & XOR<[
+    {
+        /**
+         * @deprecated Use the `methods` prop with [useForm](https://www.react-hook-form.com/api/useform/) instead.
+         *
+         * @example
+         * ```tsx
+         *  const methods = useForm({
+         *    defaultValues,
+         *    mode: 'onChange'
+         *  })
+         *
+         *  return (
+         *    <Form methods={methods} onRawSubmit={handleSubmit} errors={formErrors}>
+         *      // ...
+         *    </Form>
+         *  )
+         * ```
+         */
+        initialValues?: DefaultValues<TFormValues>;
+    },
+    {
+        methods: UseFormReturn<TFormValues>;
+    }
+]>;
+export declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};