/** * Options for useDynamicTabWidths hook */ export interface UseDynamicTabWidthsOptions { /** Ref to the container element holding the tab elements */ containerRef: React.RefObject; /** CSS class name used to identify tab elements */ tabClassName: string; /** Whether the measurement system is enabled. Defaults to true. */ enabled?: boolean; } /** * Return value from useDynamicTabWidths hook */ export interface UseDynamicTabWidthsReturn { /** * A counter that increments whenever tab widths are recalculated. * Use this in dependency arrays to trigger effects when measurements change. */ measurementKey: number; } /** * Custom hook for dynamic tab width measurement. * * Manages tab widths to prevent layout shifts when content changes (e.g., tab counts updating). * Implements a dual-observer system to detect and respond to content changes. * * @example * ```tsx * const { measurementKey } = useDynamicTabWidths({ * containerRef: tabsContainerRef, * tabClassName: 'tab-link', * enabled: true, * }) * * useLayoutEffect(() => { * // Realign active bar when measurements change * alignActiveBar() * }, [measurementKey]) * ``` * * ## Problem Solved * Tab labels can change dynamically (e.g., "Images (5)" → "Images (125)"), * causing the active highlight bar to become misaligned because tab widths change. * * ## Solution * This hook implements a comprehensive measurement system that: * 1. Measures each tab's width accounting for bold font weight when active * 2. Watches for any changes using ResizeObserver and MutationObserver * 3. Triggers realignment by incrementing measurementKey when widths change * * ## Performance * Uses requestAnimationFrame to batch measurements and avoid layout thrashing. * Includes guard against infinite loops when setting width to 'auto' for measurement. */ export declare function useDynamicTabWidths({ containerRef, tabClassName, enabled, }: UseDynamicTabWidthsOptions): UseDynamicTabWidthsReturn;