@payfit/unity-components
Version:
83 lines (82 loc) • 4.12 kB
TypeScript
import { TabsProps as BaseTabsProps } from '../../../../components/tabs/Tabs.js';
export interface TabsProps extends Omit<BaseTabsProps, 'selectedKey' | 'isExact'> {
/**
* The currently selected tab key. If not provided, automatically uses the current route pathname.
* @default location.pathname
*/
selectedKey?: BaseTabsProps['selectedKey'];
/**
* Whether to use exact matching for active tab detection. Possible values are:
* - 'exact' - The tab will be active if the current route pathname matches the tab's pathname exactly
* - 'fuzzy' - The tab will be active if the current route pathname is a substring of the tab's pathname
* @default 'fuzzy'
*/
routeMatch?: 'exact' | 'fuzzy';
}
/**
* A Tabs component that integrates with Tanstack Router for navigation.
* Provides both selection state management and routing capabilities with automatic route synchronization.
* @param {TabsProps} props - Standard Tabs props plus Tanstack Router integration options
* @example
* ```tsx
* import { Tabs, Tab, TabList, TabPanel } from '@payfit/unity-components/integrations/tanstack-router'
* import { Outlet } from '@tanstack/react-router'
*
* // Pattern 1: Single auto-updating TabPanel (recommended for consistent layouts)
* // Tabs automatically resolve their IDs from route definitions
* function NavigationTabs() {
* return (
* <Tabs>
* <TabList aria-label="Main navigation">
* <Tab to="/dashboard">Dashboard</Tab>
* <Tab to="/employees/$employeeId" params={{employeeId: '1'}}>Employee</Tab>
* </TabList>
* <TabPanel>
* <Outlet />
* </TabPanel>
* </Tabs>
* )
* }
*
* // Pattern 2: Multiple explicit TabPanels (for different layouts per tab)
* // When Tab has explicit id, you MUST provide matching TabPanel with same id
* function CustomLayoutTabs() {
* return (
* <Tabs>
* <TabList aria-label="Custom layouts">
* <Tab to="/dashboard" id="dashboard">Dashboard</Tab>
* <Tab to="/analytics" id="analytics">Analytics</Tab>
* </TabList>
* <TabPanel id="dashboard" className="uy:grid uy:grid-cols-3">
* <Outlet />
* </TabPanel>
* <TabPanel id="analytics" className="uy:w-full uy:h-screen">
* <Outlet />
* </TabPanel>
* </Tabs>
* )
* }
* ```
* @remarks
* - Automatically syncs selectedKey with current route using sophisticated route matching
* - Tab IDs are automatically resolved from route definitions (no manual IDs needed)
* - Handles nested routes properly (e.g., /settings/security matches /settings tab)
* - Supports both exact and fuzzy route matching via routeMatch prop
* - Integrates seamlessly with Tanstack Router's navigation system
* - Maintains all accessibility features from the base Tabs component
* - **TabPanel Pattern Constraint**: Choose ONE of two patterns:
* - Pattern 1 (Auto-sync): Single TabPanel without id prop - automatically shows active route content
* - Pattern 2 (Explicit): Multiple TabPanels with explicit id props - each Tab with explicit id MUST have matching TabPanel
* - Never mix auto-sync and explicit id patterns in the same Tabs component
* - When using explicit Tab IDs, provide corresponding TabPanel for each one
* - selectedKey and onSelectionChange can be overridden for custom behavior
* @see {@link TabsProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/tabs 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}
*/
export declare function Tabs({ children, selectedKey: selectedKeyProp, onSelectionChange, routeMatch, ...tabsProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Tabs {
var displayName: string;
}