badge-overflow

1"use client";
2 
3import { Slot as SlotPrimitive } from "radix-ui";
4import * as React from "react";
5import { useComposedRefs } from "@/lib/compose-refs";
6import { cn } from "@/lib/utils";
7 
8interface GetBadgeLabel<T> {
9  /**
10   * Callback that returns a label string for each badge item.
11   * Optional for primitive arrays (strings, numbers), required for object arrays.
12   * @example getBadgeLabel={(item) => item.name}
13   */
14  getBadgeLabel: (item: T) => string;
15}
16 
17type BadgeOverflowElement = React.ComponentRef<typeof BadgeOverflow>;
18 
19type BadgeOverflowProps<T = string> = React.ComponentProps<"div"> &
20  (T extends object ? GetBadgeLabel<T> : Partial<GetBadgeLabel<T>>) & {
21    items: T[];
22    lineCount?: number;
23    renderBadge: (item: T, label: string) => React.ReactNode;
24    renderOverflow?: (count: number) => React.ReactNode;
25    asChild?: boolean;
26  };
27 
28function BadgeOverflow<T = string>(props: BadgeOverflowProps<T>) {
29  const {
30    items,
31    getBadgeLabel: getBadgeLabelProp,
32    lineCount = 1,
33    renderBadge,
34    renderOverflow,
35    asChild,
36    className,
37    style,
38    ref,
39    ...rootProps
40  } = props;
41 
42  const getBadgeLabel = React.useCallback(
43    (item: T): string => {
44      if (typeof item === "object" && !getBadgeLabelProp) {
45        throw new Error(
46          "`getBadgeLabel` is required when using array of objects",
47        );
48      }
49      return getBadgeLabelProp ? getBadgeLabelProp(item) : (item as string);
50    },
51    [getBadgeLabelProp],
52  );
53 
54  const rootRef = React.useRef<BadgeOverflowElement | null>(null);
55  const composedRef = useComposedRefs(ref, rootRef);
56  const measureRef = React.useRef<HTMLDivElement | null>(null);
57  const [containerWidth, setContainerWidth] = React.useState(0);
58  const [badgeGap, setBadgeGap] = React.useState(4);
59  const [badgeHeight, setBadgeHeight] = React.useState(20);
60  const [overflowBadgeWidth, setOverflowBadgeWidth] = React.useState(40);
61  const [isMeasured, setIsMeasured] = React.useState(false);
62  const [badgeWidths, setBadgeWidths] = React.useState<Map<string, number>>(
63    new Map(),
64  );
65 
66  React.useLayoutEffect(() => {
67    if (!rootRef.current || !measureRef.current) return;
68 
69    function measureContainer() {
70      if (!rootRef.current || !measureRef.current) return;
71 
72      const computedStyle = getComputedStyle(rootRef.current);
73 
74      const gapValue = computedStyle.gap;
75      const gap = gapValue ? parseFloat(gapValue) : 4;
76      setBadgeGap(gap);
77 
78// … truncated