[test] Fix react@18/next nightly CI matrix failures

- test_regressions: skip the 'A11y results committed?' git-clean check on the
  react@17/18/next jobs, which pin React via package-overrides and so dirty
  package.json/pnpm-lock.yaml.
- ListItem: type slotProps.root as SlotProps so it accepts a callback (matches
  the conformance slotProps-callback test); regenerated propTypes + API docs.
- Tab: the conformance theme tests wrap the element in a provider; slot Tabs
  inside that wrapper so Tabs clones the Tab(s), not the provider. Cloning the
  provider with Tab-internal props (fullWidth, indicator, …) tripped its
  exactProp check under React 18.
- useValueAsRef: compare the ref captured after each render settles so React 18
  StrictMode's discarded initial-mount object doesn't skew the identity check.

Author: Janpot

.circleci/config.yml

@@ -269,7 +269,15 @@ jobs:
           command: xvfb-run pnpm test:regressions
       - run:
           name: A11y results committed?
-          command: git add -A && git diff --exit-code --staged
+          # The a11y results are React-version independent, so we only verify them on the
+          # default React job. The react@17/18/next jobs pin React via `package-overrides`,
+          # which rewrites package.json/pnpm-lock.yaml and would otherwise trip this check.
+          command: |
+            if [ "<< parameters.react-version >>" != "stable" ]; then
+              echo "Skipping a11y results check for react@<< parameters.react-version >>."
+              exit 0
+            fi
+            git add -A && git diff --exit-code --staged
       - run:
           name: Upload screenshots to Argos CI
           command: pnpm test:argos

docs/pages/material-ui/api/list-item.json

@@ -15,7 +15,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ root?: object, secondaryAction?: func<br>&#124;&nbsp;object }"
+        "description": "{ root?: func<br>&#124;&nbsp;object, secondaryAction?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },

packages/mui-material/src/ListItem/ListItem.d.ts

@@ -5,6 +5,8 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListItemClasses } from './listItemClasses';
 import { SlotProps } from '../utils/types';
 
+export interface ListItemRootSlotPropsOverrides {}
+
 export interface ListItemSecondaryActionSlotPropsOverrides {}
 
 /**
@@ -66,7 +68,13 @@ export interface ListItemOwnProps extends ListItemBaseProps {
    */
   slotProps?:
     | {
-        root?: React.HTMLAttributes<HTMLDivElement> | undefined;
+        root?:
+          | SlotProps<
+              React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
+              ListItemRootSlotPropsOverrides,
+              ListItemOwnerState
+            >
+          | undefined;
         secondaryAction?:
           | SlotProps<
               React.ElementType<React.HTMLAttributes<HTMLDivElement>>,

packages/mui-material/src/ListItem/ListItem.js

@@ -271,7 +271,7 @@ ListItem.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object,
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     secondaryAction: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**

packages/mui-material/src/Tab/Tab.test.js

@@ -16,9 +16,17 @@ describe('<Tab />', () => {
     classes,
     inheritComponent: ButtonBase,
     render: (node) => {
-      const value = node.props.value ?? 0;
+      // `Tab` must be a direct child of `Tabs`, which injects state into its children via
+      // `cloneElement`. Some conformance tests wrap the element(s) in a provider (e.g.
+      // `ThemeProvider`), so we slot `Tabs` *inside* the wrapper around the `Tab`s. Otherwise
+      // `Tabs` would clone the provider with `Tab`-internal props (`fullWidth`, `indicator`, …),
+      // tripping the provider's `exactProp` check under React 18.
+      // TODO: React 19 dropped runtime propType/`exactProp` validation, so once we stop testing
+      // React 18 this can revert to rendering `node` directly: `<Tabs value={0}>{node}</Tabs>`.
+      const isWrapped = node.type !== Tab;
+      const tabs = <Tabs value={0}>{isWrapped ? node.props.children : node}</Tabs>;
       const { container, ...other } = render(
-        <Tabs value={value}>{React.cloneElement(node, { value })}</Tabs>,
+        isWrapped ? React.cloneElement(node, undefined, tabs) : tabs,
       );
 
       return {

packages/mui-utils/src/useValueAsRef/useValueAsRef.test.tsx

@@ -33,25 +33,27 @@ describe('useValueAsRef', () => {
   });
 
   it('returns the same ref object across renders', () => {
-    let firstRef: object | undefined;
-    let nextRef: object | undefined;
+    let capturedRef: object | undefined;
 
     function Test(props: { value: number }) {
-      const valueRef = useValueAsRef(props.value);
-
-      if (firstRef === undefined) {
-        firstRef = valueRef;
-      } else {
-        nextRef = valueRef;
-      }
-
+      capturedRef = useValueAsRef(props.value);
       return null;
     }
 
+    // Collect the committed ref after each render settles. Reading inside the render body
+    // instead would capture React 18 StrictMode's discarded initial-mount object (a distinct
+    // transient `ValueRef`), which is never the one the component ends up using.
+    const refs: Array<object | undefined> = [];
     const { setProps } = render(<Test value={1} />);
-
+    refs.push(capturedRef);
     setProps({ value: 2 });
-
-    expect(nextRef).to.equal(firstRef);
+    refs.push(capturedRef);
+    setProps({ value: 3 });
+    refs.push(capturedRef);
+
+    expect(refs.length).to.be.at.least(2);
+    refs.forEach((ref) => {
+      expect(ref).to.equal(refs[0]);
+    });
   });
 });