import { RefObject } from 'react';
import { MenuItem } from '../models';
export type UseDynamicMenuItems = {
    visibleItems: MenuItem[];
    overflowItems: MenuItem[];
    containerRef: RefObject<HTMLDivElement | null>;
    menuItemRefs: RefObject<(HTMLDivElement | null)[]>;
    hasMeasured: boolean;
};
/**
 * Hook that dynamically updates how many menu items are visible in a navbar based
 * on the screen size / container width and the collective width of the menu items
 * in the DOM + the size of the gap between them.
 *
 * @example
 * ```tsx
 * const {
 *   visibleItems,
 *   overflowItems,
 *   containerRef,
 *   menuItemRefs
 * } = useDynamicMenuItems({ menuItems, gapWidth: 20, moreButtonWidth: 72 });
 *
 * ...
 *
 * return (
 *   <div ref={containerRef}>
 *     {visibleItems.map((item, index) => (
 *       <div ref={(el) => {
 *         menuItemRefs.current[index] = el;
 *       }}
 *       >
 *         {item.name}
 *       </div>
 *     ))}
 *   </div>
 * )
 * ```
 */
export default function useDynamicMenuItems({ menuItems, gapWidth, moreButtonWidth, debounceInterval, }: {
    menuItems: MenuItem[];
    gapWidth: number;
    moreButtonWidth: number;
    debounceInterval?: number;
}): UseDynamicMenuItems;
//# sourceMappingURL=use-dynamic-menu-items.d.ts.map