Function LabelGroup

packages/react/src/LabelGroup/LabelGroup.tsx:148–368

({
  children,
  visibleChildCount,
  overflowStyle = 'overlay',
  sx: sxProp,
})

// TODO: reduce re-renders
const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
  children,
  visibleChildCount,
  overflowStyle = 'overlay',
  sx: sxProp,
}) => {
  const containerRef = React.useRef<HTMLDivElement>(null)
  const collapseButtonRef = React.useRef<HTMLButtonElement>(null)
  const firstHiddenIndexRef = React.useRef<number | undefined>(undefined)
  const [visibilityMap, setVisibilityMap] = React.useState<Record<string, boolean>>({})
  const [isOverflowShown, setIsOverflowShown] = React.useState<boolean>(false)
  const [buttonClientRect, setButtonClientRect] = React.useState<DOMRect>({
    width: 0,
    right: 0,
    height: 0,
    x: 0,
    y: 0,
    top: 0,
    left: 0,
    bottom: 0,
    toJSON: () => undefined,
  })

  const {theme} = useTheme()

  const overlayPaddingPx = parseInt(get('space.2')(theme), 10)

  const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key])

  // `overlayWidth` is only needed when we render an overlay
  // if we don't use an overlay, we can skip the width calculation
  // and save on reflows caused by measuring DOM nodes.
  const overlayWidth =
    hiddenItemIds.length && overflowStyle === 'overlay'
      ? getOverlayWidth(buttonClientRect, containerRef, overlayPaddingPx)
      : undefined

  const expandButtonRef: React.RefCallback<HTMLButtonElement> = React.useCallback(
    node => {
      if (node !== null) {
        const nodeClientRect = node.getBoundingClientRect()

        if (nodeClientRect.width !== buttonClientRect.width || nodeClientRect.right !== buttonClientRect.right) {
          setButtonClientRect(nodeClientRect)
        }

        // @ts-ignore you can set `.current` on ref objects or ref callbacks in React
        expandButtonRef.current = node
      }
    },
    [buttonClientRect],
  )

  // Sets the visibility map to hide children after the given index.
  const hideChildrenAfterIndex = React.useCallback((truncateAfter: number) => {
    const containerChildren = containerRef.current?.children || []
    const updatedEntries: Record<string, boolean> = {}
    for (const child of containerChildren) {