badge-overflow

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