UNPKG

@payfit/unity-components

Version:

44 lines (43 loc) 2.42 kB
import { LinkComponent } from '@tanstack/react-router'; import { TanstackRawFormContextualLink } from '../../../../components/form-field/parts/TanstackRawFormContextualLink.js'; /** * Unity's TanstackFormContextualLink that integrates with Tanstack Router for seamless client-side navigation within form fields. * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities while maintaining form field context. * @example * ```tsx * import { TanstackFormContextualLink } from '@payfit/unity-components/integrations/tanstack-router' * import { useTanstackUnityForm } from '@payfit/unity-components' * * function MyForm() { * const { Form, FormField } = useTanstackUnityForm({ * defaultValues: { email: '' }, * }) * return ( * <Form> * <FormField name="email"> * <TanstackFormContextualLink to="/help"> * Need help? * </TanstackFormContextualLink> * </FormField> * </Form> * ) * } * ``` * @remarks * - Must be used inside a FormField component to maintain proper form context * - Supports type-safe navigation with route parameters and search params * - Provides automatic route preloading on hover or mount via the `preload` prop * - Handles relative and absolute paths with `from` and `to` props for flexible routing * - Integrates seamlessly with Tanstack Router's navigation system and loader functions * - Maintains all accessibility features from the underlying TanstackRawFormContextualLink component * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer") * - Inherits the "small" size and "secondary" color styling appropriate for form contextual links * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/form-contextual-link GitHub} * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma} * @see Design docs in {@link https://www.payfit.design/ Payfit.design} * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io} */ declare const TanstackFormContextualLink: LinkComponent<typeof TanstackRawFormContextualLink> & { displayName: string; }; export { TanstackFormContextualLink };