@payfit/unity-components 2.68.15 → 2.68.16

package/dist/esm/components/form/Form.context.js

@@ -1,17 +0,0 @@
-import { createContext as e, useContext as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/form/Form.context.tsx
-var r = e(null);
-function i({ children: e, schema: t }) {
-	return /* @__PURE__ */ n(r.Provider, {
-		value: { schema: t },
-		children: e
-	});
-}
-function a() {
-	let e = t(r);
-	if (!e) throw Error("useFormContext must be used within a Form component");
-	return e;
-}
-//#endregion
-export { r as UnityFormContext, i as UnityFormProvider, a as useUnityFormProvider };

package/dist/esm/components/form/Form.d.ts

@@ -1,43 +0,0 @@
-import { default as React, PropsWithChildren, Ref } from 'react';
-import { StandardSchemaV1 } from '@standard-schema/spec';
-import { FormProps as AriaFormProps } from 'react-aria-components/Form';
-import { FieldErrors, UseFormReturn } from 'react-hook-form';
-import { Schema, TFormValues } from '../../hooks/use-form.types.js';
-type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
-export interface FormProps<TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
-    /** The form instance from react-hook-form */
-    form: UseFormReturn<TFormInputValues, any, TFormOutputs>;
-    /** The schema to validate the form data */
-    schema: TSchema;
-    /** The operations to execute when the form is submitted and the input data is valid */
-    action: (values: TFormOutputs) => Promise<TActionResult> | TActionResult;
-    /** Handle successful form submission (when the `action` callback resolves its promise or does not throw an error) */
-    onSuccess?: (result: TActionResult, data: TFormOutputs) => void;
-    /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
-    onError?: (error: unknown, data: TFormOutputs) => void;
-    /** Handle form validation errors (when form data is invalid) */
-    onInvalid?: (errors: FieldErrors<TFormInputValues>) => void;
-    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
-    debug?: boolean;
-}
-type FormComponent = {
-    <TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown>(props: FormProps<TSchema, TFormInputValues, TFormOutputs, TActionResult> & {
-        ref?: Ref<HTMLFormElement>;
-    }): React.JSX.Element;
-    displayName?: string;
-};
-/**
- * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
- *
- * Use this component to create complex forms with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
- *
- * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
- *
- * ```bash
- * $ pnpm add zod react-hook-form
- * ```
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const Form: FormComponent;
-export { Form };

package/dist/esm/components/form/Form.js

@@ -1,41 +0,0 @@
-import { UnityFormProvider as e } from "./Form.context.js";
-import { Suspense as t, forwardRef as n, lazy as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { FormProvider as s } from "react-hook-form";
-//#region src/components/form/Form.tsx
-var c = r(() => import("@hookform/devtools").then((e) => ({ default: e.DevTool }))), l = ({ form: n, schema: r, onSuccess: l, onError: u, onInvalid: d, action: f, children: p, className: m, onReset: h, debug: g = !1, ..._ }, v) => {
-	let y = n.handleSubmit((e) => {
-		Promise.resolve().then(() => f(e)).then((t) => {
-			l?.(t, e);
-		}).catch((t) => {
-			u?.(t, e);
-		});
-	}, (e) => {
-		d?.(e);
-	});
-	return /* @__PURE__ */ a(e, {
-		schema: r,
-		children: /* @__PURE__ */ o(s, {
-			...n,
-			children: [g && /* @__PURE__ */ a(t, {
-				fallback: /* @__PURE__ */ a(i, {}),
-				children: /* @__PURE__ */ a(c, { control: n.control })
-			}), /* @__PURE__ */ a("form", {
-				..._,
-				ref: v,
-				onSubmit: (e) => {
-					y(e);
-				},
-				className: m,
-				onReset: h,
-				"data-dd-privacy": "mask",
-				children: p
-			})]
-		})
-	});
-}, u = n(function(e, t) {
-	return l(e, t);
-});
-u.displayName = "Form";
-//#endregion
-export { u as Form };

package/dist/esm/components/form-field/FormField.context.d.ts

@@ -1,33 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
-    id: string;
-    name: TName;
-    isRequired?: boolean;
-    isLoading?: boolean;
-    isReadOnly?: boolean;
-    isDisabled?: boolean;
-    hasHelperText?: boolean;
-    hasContextualLink?: boolean;
-}
-export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
-export declare function FormFieldProvider({ children, id, name, isRequired, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useFormField(): {
-    fieldState: {
-        isRequired: boolean | undefined;
-        isLoading: boolean | undefined;
-        isReadOnly: boolean | undefined;
-        isDisabled: boolean | undefined;
-    };
-    formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
-    id: string;
-    name: string;
-    hasHelperText: boolean | undefined;
-    hasContextualLink: boolean | undefined;
-    formLabelId: string;
-    formItemId: string;
-    formDescriptionId: string | undefined;
-    formMessageId: string;
-    formContextualLinkId: string | undefined;
-};
-export {};

package/dist/esm/components/form-field/FormField.context.js

@@ -1,47 +0,0 @@
-import { createContext as e, useContext as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { useFormState as r } from "react-hook-form";
-//#region src/components/form-field/FormField.context.tsx
-var i = e({
-	id: "",
-	name: ""
-});
-function a({ children: e, id: t, name: r, isRequired: a, isLoading: o, isReadOnly: s, isDisabled: c, hasHelperText: l, hasContextualLink: u }) {
-	return /* @__PURE__ */ n(i.Provider, {
-		value: {
-			id: t,
-			name: r,
-			isRequired: a,
-			isLoading: o,
-			isReadOnly: s,
-			isDisabled: c,
-			hasHelperText: l,
-			hasContextualLink: u
-		},
-		children: e
-	});
-}
-function o() {
-	let e = t(i), n = r({ name: e.name }), { id: a, isRequired: o, isLoading: s, isReadOnly: c, isDisabled: l, hasHelperText: u, hasContextualLink: d } = e;
-	if (!e) throw Error("useFormField should be used within <FormField> component");
-	return {
-		id: a,
-		name: e.name,
-		hasHelperText: u,
-		hasContextualLink: d,
-		formLabelId: `${a}-form-field-label`,
-		formItemId: `${a}-form-item`,
-		formDescriptionId: u ? `${a}-form-field-description` : void 0,
-		formMessageId: `${a}-form-field-feedback-text`,
-		formContextualLinkId: d ? `${a}-form-field-contextual-link` : void 0,
-		fieldState: {
-			isRequired: o,
-			isLoading: s,
-			isReadOnly: c,
-			isDisabled: l
-		},
-		formState: n
-	};
-}
-//#endregion
-export { i as FormFieldContext, a as FormFieldProvider, o as useFormField };

package/dist/esm/components/form-field/FormField.d.ts

@@ -1,61 +0,0 @@
-import { default as React } from 'react';
-import { Control, FieldPath, FieldValues } from 'react-hook-form';
-export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
-    /** The form control from react-hook-form */
-    control: Control<TFieldValues>;
-    /** The name of the field in the form */
-    name: TName;
-    /** Whether the field is required */
-    isRequired?: boolean;
-    /** Whether the field is in a loading state */
-    isLoading?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
- * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
- * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
- * @see {@link FormFieldProps} for all available props
- * @example
- * ```tsx
- * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
- * import { useUnityForm } from '@payfit/unity-components'
- * import { z } from 'zod'
- *
- * const loginSchema = z.object({
- *   email: z.string().email('Invalid email address'),
- *   password: z.string().min(8, 'Password must be at least 8 characters'),
- * })
- *
- * const MyForm = () => {
- *   const { Form, FormField } = useUnityForm(loginSchema)
- *
- *   const submitForm = (values: z.infer<typeof loginSchema>) => {
- *     console.log(values)
- *   }
- *
- *   return (
- *     <Form action={submitForm}>
- *       <FormField name="email">
- *         <FormLabel>Email</FormLabel>
- *         <FormHelperText>Enter your primary email address</FormHelperText>
- *         <FormControl>
- *          <Input type="email"/>
- *         </FormControl>
- *         <FormFeedbackText/>
- *       </FormField>
- *    </Form>
- *   )
- * }
- * ```
- * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
-export { FormField };

package/dist/esm/components/form-field/FormField.js

@@ -1,50 +0,0 @@
-import e from "../../hooks/use-id.js";
-import { useUnityFormProvider as t } from "../form/Form.context.js";
-import { createSchemaAdapter as n } from "../../utils/createSchemaAdapter.js";
-import { FormFieldProvider as r } from "./FormField.context.js";
-import { FormHelperText as i } from "./parts/FormHelperText.js";
-import { RawFormContextualLink as a } from "./parts/RawFormContextualLink.js";
-import { isFieldRequired as o } from "./utils/isFieldRequired.js";
-import s, { forwardRef as c, useMemo as l } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-import { jsx as d } from "react/jsx-runtime";
-import { useController as f } from "react-hook-form";
-//#region src/components/form-field/FormField.tsx
-var p = u({ slots: { base: "uy:flex uy:flex-col uy:gap-100" } }), m = c(({ children: c, control: u, name: m, isLoading: h, isReadOnly: g, className: _, isRequired: v, isDisabled: y }, b) => {
-	let x = e(), { schema: S } = t(), { formState: C } = f({
-		name: m,
-		control: u
-	}), w = l(() => o(n(S), m), [S, m]), { hasHelperText: T, hasContextualLink: E } = l(() => {
-		let e = !1, t = !1, n = (r) => {
-			s.Children.forEach(r, (r) => {
-				if (!s.isValidElement(r)) return;
-				let o = r;
-				o.type === i ? e = !0 : o.type === a && (t = !0), o.props && typeof o.props == "object" && "children" in o.props && n(o.props.children);
-			});
-		};
-		return n(c), {
-			hasHelperText: e,
-			hasContextualLink: t
-		};
-	}, [c]), D = {
-		name: m,
-		isLoading: h,
-		isReadOnly: g,
-		hasHelperText: T,
-		hasContextualLink: E,
-		id: x,
-		isRequired: v ?? w,
-		isDisabled: y ?? (C.isSubmitting || C.disabled)
-	}, { base: O } = p();
-	return /* @__PURE__ */ d("div", {
-		ref: b,
-		className: O({ className: _ }),
-		children: /* @__PURE__ */ d(r, {
-			...D,
-			children: c
-		})
-	});
-});
-m.displayName = "FormField";
-//#endregion
-export { m as FormField };

package/dist/esm/components/form-field/parts/FormControl.d.ts

@@ -1,32 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-export type FormControlProps = React.ComponentProps<typeof Slot>;
-/**
- * FormControl is a wrapper component that connects input components to form state within a FormField.
- * It handles accessibility concerns like proper ARIA attributes and focus states.
- *
- * This component is required when building custom form fields - it must wrap the actual input element
- * to connect it properly to the form state.
- * @example
- * ```tsx
- * import { FormControl, FormField, Input } from '@payfit/unity-components'
- *
- * function MyFormField() {
- *   return (
- *     <FormField name="email">
- *       <FormControl>
- *         <Input />
- *       </FormControl>
- *     </FormField>
- *   )
- * }
- * ```
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
-declare namespace FormControl {
-    var displayName: string;
-}
-export { FormControl };

package/dist/esm/components/form-field/parts/FormControl.js

@@ -1,42 +0,0 @@
-import { useFormField as e } from "../FormField.context.js";
-import { useMemo as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Slot as r } from "@radix-ui/react-slot";
-import { mergeProps as i } from "react-aria/mergeProps";
-import { useController as a, useFormContext as o } from "react-hook-form";
-//#region src/components/form-field/parts/FormControl.tsx
-function s({ ...s }) {
-	let { name: c, hasHelperText: l, hasContextualLink: u, fieldState: d, formLabelId: f, formItemId: p, formDescriptionId: m, formMessageId: h, formContextualLinkId: g } = e(), { control: _ } = o(), { field: { ref: v, ...y }, fieldState: { invalid: b, error: x } } = a({
-		name: c,
-		control: _
-	}), S = t(() => [x ? h : void 0, l ? m : void 0].filter(Boolean).join(" "), [
-		x,
-		l,
-		m,
-		h
-	]), C = {
-		isInvalid: b,
-		isDisabled: d.isDisabled,
-		isLoading: d.isLoading,
-		isReadOnly: d.isReadOnly
-	};
-	return /* @__PURE__ */ n(r, {
-		...i(s, C, y),
-		ref: v,
-		"data-slot": "form-control",
-		id: p,
-		"aria-labelledby": f,
-		"aria-describedby": S,
-		"aria-details": u ? g : void 0,
-		"aria-invalid": C.isInvalid,
-		"data-invalid": C.isInvalid,
-		"aria-disabled": C.isDisabled,
-		"data-disabled": C.isDisabled,
-		"aria-readonly": C.isReadOnly,
-		"data-readonly": C.isReadOnly,
-		"aria-busy": C.isLoading
-	});
-}
-s.displayName = "FormControl";
-//#endregion
-export { s as FormControl };

package/dist/esm/components/form-field/parts/FormFeedbackText.d.ts

@@ -1,9 +0,0 @@
-/**
- * FormErrorText is a component that displays error text for a form field.
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const FormFeedbackText: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLParagraphElement>>;
-export { FormFeedbackText };

package/dist/esm/components/form-field/parts/FormFeedbackText.js

@@ -1,24 +0,0 @@
-import { Text as e } from "../../text/Text.js";
-import { useFormField as t } from "../FormField.context.js";
-import { forwardRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { useController as i, useFormContext as a } from "react-hook-form";
-//#region src/components/form-field/parts/FormFeedbackText.tsx
-var o = n(({ children: n, ...o }, s) => {
-	let { name: c, formMessageId: l } = t(), u = i({
-		name: c,
-		control: a().control
-	}), d = u.fieldState.error, f = u.fieldState.invalid, p = d ? String(d.message) : n;
-	return !f || !p ? null : /* @__PURE__ */ r(e, {
-		...o,
-		id: l,
-		ref: s,
-		"data-unity-slot": "form-feedback-text",
-		className: "uy:typography-body-small-strong uy:text-content-form-invalid",
-		"data-dd-privacy": "allow",
-		children: p
-	});
-});
-o.displayName = "FormFeedbackText";
-//#endregion
-export { o as FormFeedbackText };

package/dist/esm/components/form-field/parts/FormHelperText.d.ts

@@ -1,9 +0,0 @@
-/**
- * FormHelperText is a component that displays helper text for a form field.
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const FormHelperText: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLElement>>;
-export { FormHelperText };

package/dist/esm/components/form-field/parts/FormHelperText.js

@@ -1,21 +0,0 @@
-import { Text as e } from "../../text/Text.js";
-import { useFormField as t } from "../FormField.context.js";
-import { forwardRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/components/form-field/parts/FormHelperText.tsx
-var i = n(({ children: n, ...i }, a) => {
-	let { formDescriptionId: o } = t();
-	return /* @__PURE__ */ r(e, {
-		...i,
-		id: o,
-		"data-unity-slot": "helper-text",
-		variant: "bodySmall",
-		color: "content.neutral.low",
-		ref: a,
-		"data-dd-privacy": "allow",
-		children: n
-	});
-});
-i.displayName = "HelperText";
-//#endregion
-export { i as FormHelperText };

package/dist/esm/components/form-field/parts/FormLabel.d.ts

@@ -1,10 +0,0 @@
-import { LabelProps } from '../../label/Label.js';
-export type FormLabelProps = Omit<LabelProps, 'isRequired'>;
-/**
- * FormLabel is a component that displays a label for a form field.
- * It is used to provide context for the form field.
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-export { FormLabel };

package/dist/esm/components/form-field/parts/FormLabel.js

@@ -1,21 +0,0 @@
-import { Label as e } from "../../label/Label.js";
-import { useFormField as t } from "../FormField.context.js";
-import { forwardRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/components/form-field/parts/FormLabel.tsx
-var i = n(({ children: n, ...i }, a) => {
-	let { requiredVariant: o } = i, { formLabelId: s, formItemId: c, fieldState: { isRequired: l } } = t();
-	return /* @__PURE__ */ r(e, {
-		ref: a,
-		id: s,
-		isRequired: l,
-		requiredVariant: o,
-		htmlFor: c,
-		className: "uy:leading-[1]!",
-		...i,
-		children: n
-	});
-});
-i.displayName = "Label";
-//#endregion
-export { i as FormLabel };

package/dist/esm/components/form-field/parts/RawFormContextualLink.d.ts

@@ -1,22 +0,0 @@
-import { PropsWithChildren } from 'react';
-interface FormContextualLinkProps {
-    /**
-     * The href of the contextual link
-     */
-    href: string;
-    onPress?: never;
-}
-interface FormContextualLinkActionProps {
-    /**
-     * A function to open a contextual panel
-     */
-    onPress: () => void;
-    href?: never;
-}
-/**
- * FormContextualLink is a component that displays a contextual link for a form field.
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { RawFormContextualLink };

package/dist/esm/components/form-field/parts/RawFormContextualLink.js

@@ -1,33 +0,0 @@
-import { RawLink as e } from "../../link/RawLink.js";
-import { useFormField as t } from "../FormField.context.js";
-import { forwardRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { Button as i } from "react-aria-components/Button";
-//#region src/components/form-field/parts/RawFormContextualLink.tsx
-var a = n((n, a) => {
-	let { children: o, href: s, onPress: c, ...l } = n, { formContextualLinkId: u } = t();
-	return s ? /* @__PURE__ */ r(e, {
-		id: u,
-		size: "small",
-		color: "secondary",
-		variant: "standalone",
-		"data-unity-slot": "contextual-link",
-		href: s,
-		ref: a,
-		"data-dd-privacy": "allow",
-		...l,
-		children: o
-	}) : /* @__PURE__ */ r(i, {
-		id: u,
-		onPress: c,
-		"data-unity-slot": "contextual-link",
-		className: "uy:typography-body-small uy:w-fit",
-		ref: a,
-		"data-dd-privacy": "allow",
-		...l,
-		children: o
-	});
-});
-a.displayName = "RawFormContextualLink";
-//#endregion
-export { a as RawFormContextualLink };

package/dist/esm/components/form-field/utils/isFieldRequired.d.ts

@@ -1,8 +0,0 @@
-import { StandardSchema } from '../../../types/schema.js';
-/**
- * Determines if a field is required based on its path in a schema
- * @param schema - The schema adapter object
- * @param fieldPath - The path to the field (e.g., "preferences.marketing")
- * @returns true if the field is required, false if optional or not found
- */
-export declare function isFieldRequired(schema: StandardSchema | null | undefined, fieldPath: string): boolean;

package/dist/esm/components/form-field/utils/isFieldRequired.js

@@ -1,8 +0,0 @@
-//#region src/components/form-field/utils/isFieldRequired.ts
-function e(e, t) {
-	if (!e) return !1;
-	let n = e.getField(t);
-	return n ? !n.isOptional : !1;
-}
-//#endregion
-export { e as isFieldRequired };

package/dist/esm/components/multi-select-field/MultiSelectField.d.ts

@@ -1,92 +0,0 @@
-import { StandardSchemaV1 } from '@standard-schema/spec';
-import { ForwardedRef, ReactNode } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { Schema } from '../../hooks/use-form.types.js';
-import { LabelProps } from '../label/Label.js';
-import { MultiSelectProps } from '../multi-select/MultiselectTypes.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
-    /** The name of the field, which should match the form schema. */
-    name: TName;
-    /** The label for the multi-select field. */
-    label: string;
-    /** Helper text to display below the multi-select field. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the multi-select field. */
-    feedbackText?: ReactNode;
-    /** A contextual link to display below the multi-select field. */
-    contextualLink?: ReactNode;
-}
-type BaseMultiSelectProps<TItems = undefined> = Omit<MultiSelectProps<TItems>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
-export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItems = undefined> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItems>;
-/**
- * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
- *
- * The component uses a single generic parameter `TItems` that infers the item type from the `items` prop
- * for the dynamic API, or defaults to `undefined` for the static API (using `children` directly).
- * @example Static API
- * ```tsx
- * const schema = z.object({
- *   fruits: z.set(z.string()),
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <MultiSelectField<typeof schema>
- *         name="fruits"
- *         label="Select fruits"
- *       >
- *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
- *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
- *       </MultiSelectField>
- *     </Form>
- *   )
- * }
- * ```
- * @example Dynamic API
- * ```tsx
- * interface Fruit { id: string; name: string }
- * const fruits = new Set<Fruit>([...])
- *
- * const schema = z.object({
- *   fruits: z.set(z.string()),
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <MultiSelectField<typeof schema, Set<Fruit>>
- *         name="fruits"
- *         label="Select fruits"
- *         items={fruits}
- *         getItemValue={fruit => fruit.id}
- *       >
- *         {fruit => (
- *           <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
- *         )}
- *       </MultiSelectField>
- *     </Form>
- *   )
- * }
- * ```
- * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-/**
- * Component type for MultiSelectField with proper generic support
- */
-type MultiSelectFieldComponent = <TSchema extends Schema = Schema, TItems = undefined>(props: MultiSelectFieldProps<StandardSchemaV1.InferOutput<TSchema>, FieldPath<StandardSchemaV1.InferOutput<TSchema>>, TItems> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => React.JSX.Element;
-export declare const MultiSelectField: MultiSelectFieldComponent & {
-    displayName: string;
-};
-export {};