perf(react-compiler): enable useSafeTimeout, token remove buttons, and UnderlinePanels

.changeset/react-compiler-safe-timeout.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+useSafeTimeout: Support automatic memoization with React Compiler.

.changeset/react-compiler-token-remove-button.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Token, IssueLabelToken: Improve rendering performance with React Compiler support.

.changeset/react-compiler-underline-panels.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+UnderlinePanels: Improve rendering performance with React Compiler support.

packages/react/script/react-compiler.mjs

@@ -25,21 +25,18 @@ const unsupportedPatterns = [
   'src/SelectPanel/SelectPanel.test.tsx',
   'src/SelectPanel/SelectPanel.tsx',
   'src/Skeleton/SkeletonBox.figma.tsx',
-  'src/Token/_RemoveTokenButton.tsx',
   'src/TreeView/TreeView.features.stories.tsx',
   'src/TreeView/TreeView.tsx',
   'src/deprecated/utils/create-slots.tsx',
   'src/experimental/SelectPanel2/SelectPanel.tsx',
   'src/experimental/UnderlinePanels/UnderlinePanels.test.tsx',
-  'src/experimental/UnderlinePanels/UnderlinePanels.tsx',
   'src/hooks/useAnchoredPosition.ts',
   'src/hooks/useControllableState.ts',
   'src/hooks/useFocusTrap.ts',
   'src/hooks/useFocusZone.ts',
   'src/hooks/useOnEscapePress.ts',
   'src/hooks/useOnOutsideClick.tsx',
   'src/hooks/useResizeObserver.ts',
-  'src/hooks/useSafeTimeout.ts',
   'src/internal/hooks/__tests__/useFocus.test.tsx',
   'src/internal/hooks/useDevOnlyEffect.ts',
   'src/utils/StressTest.tsx',

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -12,7 +12,8 @@ interface TokenButtonProps {
   isParentInteractive?: boolean
 }
 
-type RemoveTokenButtonProps = TokenButtonProps & Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement>, 'size'>
+type RemoveTokenButtonProps = TokenButtonProps &
+  Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement>, 'size' | 'ref'>
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,
@@ -43,16 +44,13 @@ const RemoveTokenButton = ({
 
   return (
     <button
-      // eslint-disable-next-line react-hooks/refs
       {...rest}
       aria-label={'Remove token'}
       data-size={size}
       className={clsx(classes.TokenButton, className)}
       style={{
         transform: `translate(${borderOffset}px, -${borderOffset}px)`,
       }}
-      // eslint-disable-next-line react-hooks/refs
-      ref={rest.ref as React.Ref<HTMLButtonElement>}
       type="button"
     >
       <XIcon size={size === 'small' || size === 'medium' ? 12 : 16} />

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -147,19 +147,21 @@ const UnderlinePanels: FCWithSlotMarker<UnderlinePanelsProps> = ({
 
   const [tabs, tabPanels, tabsHaveIcons, selectedFromProps, tabValues, panelValues] = useMemo(() => {
     // Derived in render (not an effect) to avoid an empty-tablist frame.
-    let tabIndex = 0
-    let panelIndex = 0
+    const indices = {
+      tab: 0,
+      panel: 0,
+    }
 
     const childrenWithProps = Children.map(children, child => {
       if (isValidElement<TabProps & WithValue>(child) && (child.type === Tab || isSlot(child, Tab))) {
-        const value = child.props.value ?? `${tabIndex}`
-        tabIndex++
+        const value = child.props.value ?? `${indices.tab}`
+        indices.tab++
         return cloneElement(child, {value})
       }
 
       if (isValidElement<PanelProps & WithValue>(child) && (child.type === Panel || isSlot(child, Panel))) {
-        const value = child.props.value ?? `${panelIndex}`
-        panelIndex++
+        const value = child.props.value ?? `${indices.panel}`
+        indices.panel++
         return cloneElement(child, {value})
       }
       return child

packages/react/src/hooks/useSafeTimeout.ts

@@ -26,9 +26,9 @@ export default function useSafeTimeout(): {safeSetTimeout: SetTimeout; safeClear
   }, [])
 
   useEffect(() => {
+    const timerSet = timers.current
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      for (const id of timers.current) {
+      for (const id of timerSet) {
         clearTimeout(id)
       }
     }