@payfit/unity-components
Version:
46 lines (45 loc) • 2.58 kB
TypeScript
import { LinkComponent } from '@tanstack/react-router';
import { RawFormContextualLink } from '../../../../components/form-field/parts/RawFormContextualLink.js';
/**
* Unity's FormContextualLink 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 { FormContextualLink } 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">
* <FormContextualLink to="/help">
* Need help?
* </FormContextualLink>
* </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 RawFormContextualLink 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}
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead (see `TanstackFormContextualLink`).
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
*/
declare const FormContextualLink: LinkComponent<typeof RawFormContextualLink> & {
displayName: string;
};
export { FormContextualLink };