"use client"; import * as React from "react"; import { DropdownMenu as MenuPrimitive } from "radix-ui"; import { motion } from "motion/react"; import { cn, useControllableState } from "@kineticui/core"; import { ChevronDownIcon } from "@kineticui/icons"; export type OverflowTab = { value: string; label: string; icon?: React.ReactNode; count?: number }; export type OverflowTabsProps = { tabs: OverflowTab[]; value?: string; defaultValue?: string; onValueChange?: (v: string) => void; className?: string; }; /** Tab bar that measures itself and folds tabs that don't fit into a "More" menu. The active tab always stays visible. */ export function OverflowTabs({ tabs, value, defaultValue, onValueChange, className }: OverflowTabsProps) { const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? tabs[0]?.value ?? "", onChange: onValueChange }); const wrap = React.useRef(null); const measure = React.useRef(null); const [visibleCount, setVisibleCount] = React.useState(tabs.length); const id = React.useId(); React.useLayoutEffect(() => { const el = wrap.current; const m = measure.current; if (!el || !m) return; const calc = () => { const widths = Array.from(m.children).map((c) => (c as HTMLElement).offsetWidth + 4); const more = 92; let used = 0; let n = 0; for (let i = 0; i < widths.length; i++) { const needMore = i < widths.length - 1; if (used + widths[i]! + (needMore ? more : 0) > el.clientWidth) break; used += widths[i]!; n++; } setVisibleCount(Math.max(1, n)); }; calc(); const ro = new ResizeObserver(calc); ro.observe(el); return () => ro.disconnect(); }, [tabs]); let visible = tabs.slice(0, visibleCount); let hidden = tabs.slice(visibleCount); const activeHidden = hidden.find((t) => t.value === current); if (activeHidden && visible.length) { // Swap the active tab into view. hidden = [visible[visible.length - 1]!, ...hidden.filter((t) => t !== activeHidden)]; visible = [...visible.slice(0, -1), activeHidden]; } const tabEl = (t: OverflowTab, interactive = true) => { const on = t.value === current; return ( ); }; return (

{tabs.map((t) => tabEl(t, false))}

{visible.map((t) => tabEl(t))} {hidden.length ? ( More {hidden.length} {hidden.map((t) => ( setCurrent(t.value)} className="flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none data-[highlighted]:bg-surface-overlay [&_svg]:size-4 [&_svg]:text-muted"> {t.icon} {t.label} {t.count !== undefined ? {t.count} : null} ))} ) : null}

); }

Overflow Tabs

Installation

Exports