@ultraviolet/form 2.13.2 → 2.13.3

package/dist/components/RadioField/index.js

@@ -1,19 +1,15 @@
-import { Radio } 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 `RadioGroupField` instead.
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Radio } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioField = ({
   className,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   id,
   name,
   onBlur,
-  label = '',
+  label = "",
   onChange,
   onFocus,
   required,
@@ -22,14 +18,10 @@ const RadioField = ({
   tooltip,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -38,30 +30,32 @@ const RadioField = ({
       ...rules
     }
   });
-  return jsx(Radio, {
-    name: field.name,
-    checked: field.value === value,
-    className: className,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      label: typeof label === 'string' ? label : ''
-    }, error),
-    id: id,
-    onChange: () => {
-      field.onChange(value);
-      onChange?.(value);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: onFocus,
-    required: required,
-    value: value ?? '',
-    label: label,
-    tooltip: tooltip
-  });
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      name: field.name,
+      checked: field.value === value,
+      className,
+      "data-testid": dataTestId,
+      disabled,
+      error: getError({ label: typeof label === "string" ? label : "" }, error),
+      id,
+      onChange: () => {
+        field.onChange(value);
+        onChange?.(value);
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onFocus,
+      required,
+      value: value ?? "",
+      label,
+      tooltip
+    }
+  );
+};
+export {
+  RadioField
 };
-
-export { RadioField };

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

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

package/dist/components/RadioGroupField/index.js

@@ -1,30 +1,25 @@
-import { RadioGroup } 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 { RadioGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioGroupField = ({
   className,
-  legend = '',
+  legend = "",
   name,
   onChange,
   required,
   rules,
   children,
-  label = '',
+  label = "",
   error: customError,
   helper,
   direction,
   shouldUnregister = false
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -33,24 +28,28 @@ const RadioGroupField = ({
       ...rules
     }
   });
-  return jsx(RadioGroup, {
-    className: className,
-    name: field.name,
-    onChange: event => {
-      field.onChange(event);
-      onChange?.(event.target.value);
-    },
-    required: required,
-    value: field.value,
-    legend: legend,
-    error: getError({
-      label
-    }, error) ?? customError,
-    helper: helper,
-    direction: direction,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      className,
+      name: field.name,
+      onChange: (event) => {
+        field.onChange(event);
+        onChange?.(
+          event.target.value
+        );
+      },
+      required,
+      value: field.value,
+      legend,
+      error: getError({ label }, error) ?? customError,
+      helper,
+      direction,
+      children
+    }
+  );
 };
 RadioGroupField.Radio = RadioGroup.Radio;
-
-export { RadioGroupField };
+export {
+  RadioGroupField
+};

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

@@ -0,0 +1,82 @@
+import type { CSSObject, Theme, css } from '@emotion/react';
+import { SelectInput } from '@ultraviolet/ui';
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select';
+import type Select from 'react-select';
+import type { BaseFieldProps } from '../../types';
+export type SelectInputType = typeof SelectInput;
+type SelectOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    description?: string;
+    inlineDescription?: string;
+};
+type WithSelectProps = {
+    selectProps: SelectProps;
+};
+type SelectStyleProps = {
+    error?: string;
+    /**
+     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
+     */
+    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
+    animation?: string;
+    /**
+     * Time of the animation
+     */
+    animationDuration?: number;
+    /**
+     * Show/hide the label inside the component
+     */
+    noTopLabel?: boolean;
+    theme: Theme;
+};
+type StyledContainerProps = {
+    isDisabled?: boolean;
+    additionalStyles?: Parameters<typeof css>[0];
+};
+type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
+    value?: string | SelectOption;
+    checked?: boolean;
+    error?: string;
+    labelId?: string;
+    required?: boolean;
+    time?: boolean;
+};
+type StateManagedSelect = typeof Select;
+type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
+    /**
+     * Name of the animation
+     */
+    animation?: string;
+    /**
+     * Play the animation when the value change
+     */
+    animationOnChange?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    innerRef?: ForwardedRef<StateManagedSelect>;
+    /**
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     */
+    customComponents?: SelectProps['components'];
+    children: ReactNode;
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+}>;
+/**
+ * @deprecated This component is deprecated, please use `SelectInputFieldV2` instead
+ */
+export type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
+    multiple?: boolean;
+    parse?: (value: unknown, name?: string) => unknown;
+    format?: (value: unknown, name: string) => unknown;
+    maxLength?: number;
+    minLength?: number;
+};
+export declare const SelectInputField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption, boolean, GroupBase<import("@ultraviolet/ui").SelectOption>> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
+};
+export {};

package/dist/components/SelectInputField/index.js

@@ -1,12 +1,9 @@
-import { SelectInput } from '@ultraviolet/ui';
-import { useMemo, Children, useCallback } from 'react';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-const identity = x => x;
-// const identity = <T,>(x: T) => x
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectInput } from "@ultraviolet/ui";
+import { useMemo, Children, useCallback } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const identity = (x) => x;
 const SelectInputField = ({
   animation,
   animationDuration,
@@ -22,7 +19,7 @@ const SelectInputField = ({
   isClearable,
   isLoading,
   isSearchable,
-  label = '',
+  label = "",
   maxLength,
   menuPortalTarget,
   minLength,
@@ -41,92 +38,102 @@ const SelectInputField = ({
   emptyState,
   customStyle,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
-  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
-    props: {
-      children: labelChild,
-      ...option
-    }
-  }) => ({
-    ...option,
-    label: labelChild
-  })), [optionsProp, children]);
-  const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = useCallback(val => {
-    if (multiple) return formatProp(val, name);
-    const find = (opts, valueToFind) => opts?.find(option => option.value === valueToFind);
-    let selected = '';
-    if (val && options) {
-      // TODO: find a proper way to simplify format with recursive options
-      selected = find(options, val);
-      if (!selected) {
-        selected = options.map(curr => find(curr.options, val)).filter(identity);
-        if (Array.isArray(selected) && selected.length === 0) {
-          selected = '';
+  const options = useMemo(
+    () => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({ props: { children: labelChild, ...option } }) => ({
+      ...option,
+      label: labelChild
+    })),
+    [optionsProp, children]
+  );
+  const parse = useMemo(
+    () => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name),
+    [multiple, parseProp, name]
+  );
+  const format = useCallback(
+    (val) => {
+      if (multiple)
+        return formatProp(val, name);
+      const find = (opts, valueToFind) => opts?.find(
+        (option) => option.value === valueToFind
+      );
+      let selected = "";
+      if (val && options) {
+        selected = find(
+          options,
+          val
+        );
+        if (!selected) {
+          selected = options.map(
+            (curr) => find(
+              curr.options,
+              val
+            )
+          ).filter(identity);
+          if (Array.isArray(selected) && selected.length === 0) {
+            selected = "";
+          }
         }
       }
-    }
-    return formatProp(selected, name);
-  }, [formatProp, multiple, name, options]);
-  const {
-    getError
-  } = useErrors();
+      return formatProp(selected, name);
+    },
+    [formatProp, multiple, name, options]
+  );
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
     rules: {
       required,
-      minLength: minLength || required ? 1 : undefined,
+      minLength: minLength || required ? 1 : void 0,
       maxLength,
       ...rules
     }
   });
-  return jsx(SelectInput, {
-    name: field.name,
-    animation: animation,
-    animationDuration: animationDuration,
-    animationOnChange: animationOnChange,
-    className: className,
-    disabled: disabled,
-    error: getError({
-      label,
-      minLength,
-      maxLength
-    }, error),
-    id: id,
-    inputId: inputId,
-    isClearable: isClearable,
-    isLoading: isLoading,
-    isMulti: multiple,
-    customStyle: customStyle,
-    isSearchable: isSearchable,
-    menuPortalTarget: menuPortalTarget,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: (event, action) => {
-      field.onChange(parse(event));
-      onChange?.(event, action);
-    },
-    onFocus: onFocus,
-    options: options,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    noTopLabel: noTopLabel,
-    required: required,
-    value: format(field.value),
-    emptyState: emptyState,
-    "data-testid": dataTestId,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(
+    SelectInput,
+    {
+      name: field.name,
+      animation,
+      animationDuration,
+      animationOnChange,
+      className,
+      disabled,
+      error: getError({ label, minLength, maxLength }, error),
+      id,
+      inputId,
+      isClearable,
+      isLoading,
+      isMulti: multiple,
+      customStyle,
+      isSearchable,
+      menuPortalTarget,
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onChange: (event, action) => {
+        field.onChange(parse(event));
+        onChange?.(event, action);
+      },
+      onFocus,
+      options,
+      placeholder,
+      readOnly,
+      noTopLabel,
+      required,
+      value: format(field.value),
+      emptyState,
+      "data-testid": dataTestId,
+      children
+    }
+  );
 };
 SelectInputField.Option = SelectInput.Option;
-
-export { SelectInputField };
+export {
+  SelectInputField
+};

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

@@ -0,0 +1,7 @@
+import { SelectInputV2 } from '@ultraviolet/ui';
+import { type ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectInputFieldV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Pick<ComponentProps<typeof SelectInputV2>, 'placeholder' | 'placeholderSearch' | 'label' | 'helper' | 'options' | 'emptyState' | 'searchable' | 'readOnly' | 'clearable' | 'size' | 'multiselect' | 'required' | 'descriptionDirection' | 'footer' | 'labelDescription' | 'success' | 'loadMore' | 'isLoading' | 'selectAll' | 'selectAllGroup' | 'autofocus' | 'data-testid' | 'onChange' | 'id' | 'onBlur' | 'aria-label' | 'className' | 'onFocus' | 'optionalInfoPlacement' | 'disabled'>;
+export declare const SelectInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ 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, }: SelectInputFieldV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInputFieldV2/index.js

@@ -1,21 +1,20 @@
-import { SelectInputV2 } from '@ultraviolet/ui';
-import { useCallback } 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 { SelectInputV2 } from "@ultraviolet/ui";
+import { useCallback } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectInputFieldV2 = ({
   autofocus,
   className,
   id,
-  label = '',
+  label = "",
   onFocus,
   onBlur,
   placeholder,
   readOnly,
   required,
   size,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   placeholderSearch,
   helper,
@@ -34,16 +33,14 @@ const SelectInputFieldV2 = ({
   selectAll,
   selectAllGroup,
   name,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   optionalInfoPlacement,
   rules,
   shouldUnregister = false
 }) => {
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -52,53 +49,56 @@ const SelectInputFieldV2 = ({
       ...rules
     }
   });
-  const {
-    getError
-  } = useErrors();
-  const handleChange = useCallback(value => {
-    onChange?.(value);
-    field.onChange(value);
-  }, [onChange, field]);
-  return jsx(SelectInputV2, {
-    name: field.name,
-    options: options,
-    required: required,
-    size: size,
-    "data-testid": dataTestId,
-    className: className,
-    disabled: disabled,
-    id: id,
-    label: label,
-    onFocus: onFocus,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
+  const { getError } = useErrors();
+  const handleChange = useCallback(
+    (value) => {
+      onChange?.(value);
+      field.onChange(value);
     },
-    placeholder: placeholder,
-    readOnly: readOnly,
-    multiselect: multiselect,
-    value: field.value,
-    placeholderSearch: placeholderSearch,
-    helper: helper,
-    emptyState: emptyState,
-    searchable: searchable,
-    clearable: clearable,
-    descriptionDirection: descriptionDirection,
-    footer: footer,
-    labelDescription: labelDescription,
-    error: getError({
-      label
-    }, error),
-    success: success,
-    loadMore: loadMore,
-    isLoading: isLoading,
-    selectAll: selectAll,
-    selectAllGroup: selectAllGroup,
-    autofocus: autofocus,
-    optionalInfoPlacement: optionalInfoPlacement,
-    "aria-label": ariaLabel,
-    onChange: handleChange
-  });
+    [onChange, field]
+  );
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+};
+export {
+  SelectInputFieldV2
 };
-
-export { SelectInputFieldV2 };