@ultraviolet/form 2.13.1 → 2.13.3

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

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

package/dist/components/SelectableCardField/index.js

@@ -1,7 +1,6 @@
-import { SelectableCard } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectableCard } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
 const SelectableCardField = ({
   name,
   value,
@@ -19,13 +18,11 @@ const SelectableCardField = ({
   label,
   rules,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -34,42 +31,50 @@ const SelectableCardField = ({
       ...rules
     }
   });
-  const isChecked = type === 'checkbox' && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return jsx(SelectableCard, {
-    isError: !!error,
-    showTick: showTick,
-    checked: isChecked,
-    className: className,
-    disabled: 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));
+  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([...fieldValue, event.currentTarget.value]);
+          field.onChange(event);
         }
-      } else {
-        field.onChange(event);
-      }
-      onChange?.(event);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    type: type,
-    id: id,
-    tooltip: tooltip,
-    label: label,
-    value: value ?? '',
-    name: field.name,
-    "data-testid": dataTestId,
-    children: children
-  });
+        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
 };
-
-export { SelectableCardField };

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

@@ -0,0 +1,42 @@
+import { SelectableCardGroup } from '@ultraviolet/ui';
+import type { ComponentProps, JSX } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+export declare const SelectableCardGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, }: SelectableCardGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: {
+        value: string | number;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        disabled?: boolean | undefined;
+        children?: import("react").ReactNode | (({ disabled, checked, }: Pick<{
+            name?: string | undefined;
+            children?: import("react").ReactNode | any;
+            value: string | number;
+            onChange: import("react").ChangeEventHandler<HTMLInputElement>;
+            showTick?: boolean | undefined;
+            type?: "checkbox" | "radio" | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+            className?: string | undefined;
+            isError?: boolean | undefined;
+            onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+            onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+            id?: string | undefined;
+            tooltip?: string | undefined;
+            label?: import("react").ReactNode;
+            'data-testid'?: string | undefined;
+        }, "disabled" | "checked">) => import("react").ReactNode);
+        className?: string | undefined;
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        name?: string | undefined;
+        label?: import("react").ReactNode;
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        id?: string | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        isError?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/SelectableCardGroupField/index.js

@@ -1,8 +1,7 @@
-import { SelectableCardGroup } 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 { SelectableCardGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
   className,
   legend,
@@ -11,22 +10,18 @@ const SelectableCardGroupField = ({
   required = false,
   rules,
   children,
-  label = '',
+  label = "",
   error: customError,
   helper,
   columns = 1,
   showTick,
-  type = 'radio',
+  type = "radio",
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -35,35 +30,41 @@ const SelectableCardGroupField = ({
       ...rules
     }
   });
-  return jsx(SelectableCardGroup, {
-    legend: legend,
-    name: name,
-    type: type,
-    showTick: 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));
+  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([...fieldValue, event.currentTarget.value]);
+          field.onChange(event);
         }
-      } else {
-        field.onChange(event);
-      }
-      onChange?.(event);
-    },
-    error: getError({
-      label
-    }, error) ?? customError,
-    className: className,
-    columns: columns,
-    helper: helper,
-    required: required,
-    children: children
-  });
+        onChange?.(event);
+      },
+      error: getError({ label }, error) ?? customError,
+      className,
+      columns,
+      helper,
+      required,
+      children
+    }
+  );
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
-
-export { SelectableCardGroupField };
+export {
+  SelectableCardGroupField
+};

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

@@ -0,0 +1,17 @@
+import { Button } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+type SubmitProps = {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: ComponentProps<typeof Button>['icon'];
+    iconPosition?: ComponentProps<typeof Button>['iconPosition'];
+    size?: ComponentProps<typeof Button>['size'];
+    variant?: ComponentProps<typeof Button>['variant'];
+    sentiment?: ComponentProps<typeof Button>['sentiment'];
+    tooltip?: ComponentProps<typeof Button>['tooltip'];
+    fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    onClick?: ComponentProps<typeof Button>['onClick'];
+};
+export declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Submit/index.js

@@ -1,7 +1,6 @@
-import { Button } from '@ultraviolet/ui';
-import { useFormState } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Button } from "@ultraviolet/ui";
+import { useFormState } from "react-hook-form";
 const Submit = ({
   children,
   className,
@@ -9,32 +8,33 @@ const Submit = ({
   icon,
   iconPosition,
   size,
-  variant = 'filled',
-  sentiment = 'primary',
+  variant = "filled",
+  sentiment = "primary",
   tooltip,
   fullWidth,
   onClick
 }) => {
-  const {
-    isSubmitting,
-    isValid
-  } = useFormState();
+  const { isSubmitting, isValid } = useFormState();
   const isDisabled = disabled || isSubmitting || !isValid;
-  return jsx(Button, {
-    className: className,
-    disabled: isDisabled,
-    icon: icon,
-    iconPosition: iconPosition,
-    isLoading: isSubmitting,
-    size: size,
-    type: "submit",
-    variant: variant,
-    sentiment: sentiment,
-    tooltip: tooltip,
-    fullWidth: fullWidth,
-    onClick: onClick,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className,
+      disabled: isDisabled,
+      icon,
+      iconPosition,
+      isLoading: isSubmitting,
+      size,
+      type: "submit",
+      variant,
+      sentiment,
+      tooltip,
+      fullWidth,
+      onClick,
+      children
+    }
+  );
+};
+export {
+  Submit
 };
-
-export { Submit };

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

@@ -0,0 +1,3 @@
+export declare const SubmitErrorAlert: ({ className }: {
+    className?: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/SubmitErrorAlert/index.js

@@ -1,18 +1,10 @@
-import { Alert } from '@ultraviolet/ui';
-import { useFormState } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const SubmitErrorAlert = ({
-  className
-}) => {
-  const {
-    errors
-  } = useFormState();
-  return errors?.root?.['submit']?.message ? jsx(Alert, {
-    className: className,
-    sentiment: "danger",
-    children: errors.root['submit'].message
-  }) : null;
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Alert } from "@ultraviolet/ui";
+import { useFormState } from "react-hook-form";
+const SubmitErrorAlert = ({ className }) => {
+  const { errors } = useFormState();
+  return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsx(Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
+};
+export {
+  SubmitErrorAlert
 };
-
-export { SubmitErrorAlert };

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

@@ -0,0 +1,6 @@
+import { TagInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+export type TagInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>>;
+export declare const TagInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, }: TagInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -1,8 +1,7 @@
-import { TagInput } 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 { TagInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TagInputField = ({
   className,
   disabled,
@@ -14,7 +13,7 @@ const TagInputField = ({
   rules,
   variant,
   shouldUnregister = false,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   clearable,
   label,
   labelDescription,
@@ -23,14 +22,10 @@ const TagInputField = ({
   readOnly,
   tooltip
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     rules: {
@@ -39,30 +34,32 @@ const TagInputField = ({
       ...rules
     }
   });
-  return jsx(TagInput, {
-    name: field.name,
-    className: className,
-    disabled: disabled,
-    id: id,
-    onChange: newTags => {
-      field.onChange(newTags);
-      onChange?.(newTags);
-    },
-    placeholder: placeholder,
-    variant: variant,
-    value: field.value,
-    "data-testid": dataTestId,
-    clearable: clearable,
-    label: label,
-    labelDescription: labelDescription,
-    size: size,
-    success: success,
-    error: getError({
-      label: label ?? ''
-    }, error),
-    readOnly: readOnly,
-    tooltip: 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
 };
-
-export { TagInputField };

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

@@ -0,0 +1,11 @@
+import { TextArea } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+export type TextAreaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextArea>, 'value' | 'error' | 'name' | 'onChange'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * This component offers a form field based on Ultraviolet UI TextArea component
+ */
+export declare const TextAreaField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ 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, }: TextAreaFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TextAreaField/index.js

@@ -1,17 +1,13 @@
-import { TextArea } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * This component offers a form field based on Ultraviolet UI TextArea component
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextArea } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextAreaField = ({
   autoFocus,
   clearable,
   className,
   tabIndex,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   helper,
   label,
@@ -31,67 +27,72 @@ 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 === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-        } : {}),
+        ...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 jsx(TextArea, {
-    autoFocus: autoFocus,
-    className: className,
-    clearable: clearable,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      regex: regexes,
+  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,
-      label,
+      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
-    }, error),
-    helper: helper,
-    label: label,
-    labelDescription: labelDescription,
-    minLength: minLength,
-    maxLength: maxLength,
-    name: name,
-    onBlur: event => {
-      onBlur?.(event);
-      field.onBlur();
-    },
-    onChange: event => {
-      field.onChange(event);
-      onChange?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    placeholder: placeholder,
-    readOnly: readOnly,
-    required: required,
-    rows: rows,
-    success: success,
-    tabIndex: tabIndex,
-    tooltip: tooltip,
-    value: field.value
-  });
+    }
+  );
+};
+export {
+  TextAreaField
 };
-
-export { TextAreaField };