@primer/react 38.26.0-rc.73c77c7d0 → 38.26.0-rc.d5cb2b340

package/CHANGELOG.md

@@ -36,6 +36,14 @@
 
 - [#7878](https://github.com/primer/react/pull/7878) [`8c468fd`](https://github.com/primer/react/commit/8c468fd28322456f48601f9cbf6226fc4c35b661) Thanks [@mattcosta7](https://github.com/mattcosta7)! - FilteredActionList: Guard against `undefined` items in the virtualizer's `getItemKey` callback to prevent a crash when `@tanstack/react-virtual` invokes it with an index whose item was just removed (e.g. when filtering shrinks the items list).
 
+- [#7876](https://github.com/primer/react/pull/7876) [`980e94c`](https://github.com/primer/react/commit/980e94cc1de7807bb2b3fc4dd006ea8dbf3e8303) Thanks [@mattcosta7](https://github.com/mattcosta7)! - UnderlinePanels: Eliminate the empty-tablist frame on mount and the cascading
+  re-render when icons toggle. Tabs and panels are now derived in render
+  (previously stored in state synced via `useEffect`), the list width is kept
+  in a ref instead of state, and `iconsVisible` / `loadingCounters` flow to
+  each tab via context — combined with `React.memo(Tab)`, that makes
+  resize-driven icon toggles update only the part of each tab that depends on
+  the change, not the whole tablist subtree. Behavior is unchanged.
+
 - [#7874](https://github.com/primer/react/pull/7874) [`8cc7e99`](https://github.com/primer/react/commit/8cc7e998d2dbde1fb927b598755810b534702a6a) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Dev-only effects (the `if (__DEV__) { useEffect(...) }` pattern with an
   `eslint-disable react-hooks/rules-of-hooks` comment at every call site) are
   now expressed via a new internal `useDevOnlyEffect` hook. The lint

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA+J7D,wBAA2D"}
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8M7D,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
+import React, { useState, useRef, useMemo, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
 import { TabContainerElement } from '@github/tab-container-element';
 import { createComponent } from '../../utils/create-component.js';
 import { UnderlineWrapper, UnderlineItemList, UnderlineItem } from '../../internal/components/UnderlineTabbedInterface.js';
@@ -9,10 +9,21 @@ import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js'
 import classes from './UnderlinePanels.module.css.js';
 import { clsx } from 'clsx';
 import { isSlot } from '../../utils/is-slot.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from '../../hooks/useId.js';
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container');
+
+// Carries flags that affect every Tab's rendering but that don't belong on the
+// consumer-facing Tab API. Passing them via context (instead of cloneElement)
+// keeps each Tab element's props referentially stable across UnderlinePanels
+// re-renders, so React.memo(Tab) can skip work when an unrelated piece of
+// state changes.
+
+const UnderlinePanelsContext = /*#__PURE__*/createContext({
+  iconsVisible: true,
+  loadingCounters: undefined
+});
 const UnderlinePanels = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
@@ -27,21 +38,22 @@ const UnderlinePanels = ({
   // We need to always call useId() because React Hooks must be
   // called in the exact same order in every component render
   const parentId = useId(props.id);
-  const [tabs, setTabs] = useState([]);
-  const [tabPanels, setTabPanels] = useState([]);
-
-  // Make sure we have fresh prop data whenever the tabs or panels are updated (keep aria-selected current)
-  useEffect(() => {
-    // Loop through the chidren, if it's a tab, then add id="{id}-tab-{index}"
-    // If it's a panel, then add aria-labelledby="{id}-tab-{index}"
+  const [tabs_0, tabPanels_0, tabsHaveIcons_0] = useMemo(() => {
+    // Walk children, clone each Tab with a generated id, and each Panel with a
+    // matching aria-labelledby. Derive in render so we never ship a
+    // "before-the-effect-ran" empty-tablist frame and so that re-renders of
+    // UnderlinePanels don't churn through an extra commit cycle.
+    //
+    // iconsVisible / loadingCounters are NOT baked into the cloned Tab
+    // elements — they flow through UnderlinePanelsContext, so this memo's deps
+    // can stay tight ([children, parentId]) and Tab elements stay
+    // referentially stable across resize-driven iconsVisible toggles.
     let tabIndex = 0;
     let panelIndex = 0;
     const childrenWithProps = Children.map(children, child => {
       if (/*#__PURE__*/isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
         return /*#__PURE__*/cloneElement(child, {
-          id: `${parentId}-tab-${tabIndex++}`,
-          loadingCounters,
-          iconsVisible
+          id: `${parentId}-tab-${tabIndex++}`
         });
       }
       if (/*#__PURE__*/isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
@@ -52,64 +64,81 @@ const UnderlinePanels = ({
       }
       return child;
     });
-    const newTabs = Children.toArray(childrenWithProps).filter(child_0 => {
-      return /*#__PURE__*/isValidElement(child_0) && (child_0.type === Tab || isSlot(child_0, Tab));
-    });
-    const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && (child_1.type === Panel || isSlot(child_1, Panel)));
-
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setTabs(newTabs);
-    setTabPanels(newTabPanels);
-  }, [children, parentId, loadingCounters, iconsVisible]);
-  const tabsHaveIcons = tabs.some(tab => /*#__PURE__*/React.isValidElement(tab) && tab.props.icon);
+    const tabs = [];
+    const tabPanels = [];
+    for (const child_0 of Children.toArray(childrenWithProps)) {
+      if (! /*#__PURE__*/isValidElement(child_0)) continue;
+      if (child_0.type === Tab || isSlot(child_0, Tab)) tabs.push(child_0);else if (child_0.type === Panel || isSlot(child_0, Panel)) tabPanels.push(child_0);
+    }
+    const tabsHaveIcons = tabs.some(tab => /*#__PURE__*/React.isValidElement(tab) && tab.props.icon);
+    return [tabs, tabPanels, tabsHaveIcons];
+  }, [children, parentId]);
+  const contextValue = useMemo(() => ({
+    iconsVisible,
+    loadingCounters
+  }), [iconsVisible, loadingCounters]);
 
-  // this is a workaround to get the list's width on the first render
-  const [listWidth, setListWidth] = useState(0);
+  // Mirror iconsVisible into a ref so the list observer below can read it
+  // without being re-created on every toggle (re-creating the observer
+  // would re-trigger its initial callback and churn extra work).
+  const iconsVisibleRef = useRef(iconsVisible);
   useIsomorphicLayoutEffect(() => {
-    var _listRef$current$getB, _listRef$current;
-    if (!tabsHaveIcons) {
-      return;
-    }
-    setListWidth((_listRef$current$getB = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getBoundingClientRect().width) !== null && _listRef$current$getB !== void 0 ? _listRef$current$getB : 0);
-  }, [tabsHaveIcons]);
+    iconsVisibleRef.current = iconsVisible;
+  }, [iconsVisible]);
+
+  // The list's natural width (icons + labels), kept in sync via a
+  // ResizeObserver on the list — never read in render, so updates don't
+  // cause commits. Only refreshed while icons are visible: when icons are
+  // hidden the list is at its compressed width, which is not the value we
+  // want to compare against. The ResizeObserver fires synchronously on
+  // observe, which seeds the ref on mount for free.
+  const listWidthRef = useRef(0);
+  useResizeObserver(entries => {
+    if (!tabsHaveIcons_0) return;
+    if (!iconsVisibleRef.current) return;
+    listWidthRef.current = entries[0].contentRect.width;
+  }, listRef, []);
 
   // when the wrapper resizes, check if the icons should be visible
   // by comparing the wrapper width to the list width
   useResizeObserver(resizeObserverEntries => {
-    if (!tabsHaveIcons) {
+    if (!tabsHaveIcons_0) {
       return;
     }
     const wrapperWidth = resizeObserverEntries[0].contentRect.width;
-    setIconsVisible(wrapperWidth > listWidth);
+    setIconsVisible(wrapperWidth > listWidthRef.current);
   }, wrapperRef, []);
   if (process.env.NODE_ENV !== "production") {
-    const selectedTabs = tabs.filter(tab_0 => {
+    const selectedTabs = tabs_0.filter(tab_0 => {
       const ariaSelected = /*#__PURE__*/React.isValidElement(tab_0) && tab_0.props['aria-selected'];
       return ariaSelected === true || ariaSelected === 'true';
     });
     !(selectedTabs.length <= 1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Only one tab can be selected at a time.') : invariant(false) : void 0;
-    !(tabs.length === tabPanels.length) ? process.env.NODE_ENV !== "production" ? invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`) : invariant(false) : void 0;
+    !(tabs_0.length === tabPanels_0.length) ? process.env.NODE_ENV !== "production" ? invariant(false, `The number of tabs and panels must be equal. Counted ${tabs_0.length} tabs and ${tabPanels_0.length} panels.`) : invariant(false) : void 0;
   }
-  return /*#__PURE__*/jsxs(TabContainerComponent, {
-    children: [/*#__PURE__*/jsx(UnderlineWrapper, {
-      ref: wrapperRef,
-      slot: "tablist-wrapper",
-      "data-icons-visible": iconsVisible,
-      className: clsx(className, classes.StyledUnderlineWrapper),
-      ...props,
-      children: /*#__PURE__*/jsx(UnderlineItemList, {
-        ref: listRef,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        role: "tablist",
-        children: tabs
-      })
-    }), tabPanels]
+  return /*#__PURE__*/jsx(UnderlinePanelsContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsxs(TabContainerComponent, {
+      children: [/*#__PURE__*/jsx(UnderlineWrapper, {
+        ref: wrapperRef,
+        slot: "tablist-wrapper",
+        "data-icons-visible": iconsVisible,
+        className: clsx(className, classes.StyledUnderlineWrapper),
+        ...props,
+        children: /*#__PURE__*/jsx(UnderlineItemList, {
+          ref: listRef,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          role: "tablist",
+          children: tabs_0
+        })
+      }), tabPanels_0]
+    })
   });
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const Tab = t0 => {
-  const $ = c(14);
+const TabImpl = t0 => {
+  const $ = c(16);
   let ariaSelected;
   let onSelect;
   let props;
@@ -128,6 +157,10 @@ const Tab = t0 => {
     onSelect = $[2];
     props = $[3];
   }
+  const {
+    iconsVisible,
+    loadingCounters
+  } = useContext(UnderlinePanelsContext);
   let t1;
   if ($[4] !== onSelect) {
     t1 = event => {
@@ -156,7 +189,7 @@ const Tab = t0 => {
   const keyDownHandler = t2;
   const t3 = ariaSelected ? 0 : -1;
   let t4;
-  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== iconsVisible || $[11] !== keyDownHandler || $[12] !== loadingCounters || $[13] !== props || $[14] !== t3) {
     t4 = /*#__PURE__*/jsx(UnderlineItem, {
       as: "button",
       role: "tab",
@@ -165,19 +198,30 @@ const Tab = t0 => {
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
+      iconsVisible: iconsVisible,
+      loadingCounters: loadingCounters,
       ...props
     });
     $[8] = ariaSelected;
     $[9] = clickHandler;
-    $[10] = keyDownHandler;
-    $[11] = props;
-    $[12] = t3;
-    $[13] = t4;
+    $[10] = iconsVisible;
+    $[11] = keyDownHandler;
+    $[12] = loadingCounters;
+    $[13] = props;
+    $[14] = t3;
+    $[15] = t4;
   } else {
-    t4 = $[13];
+    t4 = $[15];
   }
   return t4;
 };
+
+// Memoized so that UnderlinePanels re-rendering (e.g. when iconsVisible flips)
+// only re-renders Tabs whose own props actually changed. iconsVisible and
+// loadingCounters reach Tab via UnderlinePanelsContext, so Tabs still react
+// to those changes through context propagation.
+TabImpl.displayName = 'UnderlinePanels.Tab';
+const Tab = /*#__PURE__*/React.memo(TabImpl);
 Tab.displayName = 'UnderlinePanels.Tab';
 const Panel = t0 => {
   const $ = c(6);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.26.0-rc.73c77c7d0",
+  "version": "38.26.0-rc.d5cb2b340",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",