[TabContext] Introduced new prop to allow deterministic button ids on tabs

docs/pages/material-ui/api/tab-context.json

@@ -4,7 +4,8 @@
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "required": true
     },
-    "children": { "type": { "name": "node" } }
+    "children": { "type": { "name": "node" } },
+    "idGenerator": { "type": { "name": "func" } }
   },
   "name": "TabContext",
   "imports": [

docs/translations/api-docs/tab-context/tab-context.json

@@ -2,6 +2,9 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": { "description": "The content of the component." },
+    "idGenerator": {
+      "description": "The optional id generator, internally used to render buttons, falls back to Math.random"
+    },
     "value": { "description": "The value of the currently selected <code>Tab</code>." }
   },
   "classDescriptions": {}

packages/mui-lab/src/TabContext/TabContext.d.ts

@@ -14,6 +14,10 @@ export interface TabContextProps {
    * The value of the currently selected `Tab`.
    */
   value: string | number;
+  /**
+   * The optional id generator, internally used to render buttons, falls back to Math.random
+   */
+  idGenerator?: () => number;
 }
 /**
  *

packages/mui-lab/src/TabContext/TabContext.js

@@ -10,17 +10,17 @@ if (process.env.NODE_ENV !== 'production') {
   Context.displayName = 'TabContext';
 }
 
-function useUniquePrefix() {
+function useUniquePrefix(idGenerator = Math.random) {
   const [id, setId] = React.useState(null);
   React.useEffect(() => {
-    setId(`mui-p-${Math.round(Math.random() * 1e5)}`);
-  }, []);
+    setId(`mui-p-${Math.round(idGenerator() * 1e5)}`);
+  }, [idGenerator]);
   return id;
 }
 
 export default function TabContext(props) {
-  const { children, value } = props;
-  const idPrefix = useUniquePrefix();
+  const { children, value, idGenerator } = props;
+  const idPrefix = useUniquePrefix(idGenerator);
 
   const context = React.useMemo(() => {
     return { idPrefix, value };
@@ -38,6 +38,10 @@ TabContext.propTypes /* remove-proptypes */ = {
    * The content of the component.
    */
   children: PropTypes.node,
+  /**
+   * The optional id generator, internally used to render buttons, falls back to Math.random
+   */
+  idGenerator: PropTypes.func,
   /**
    * The value of the currently selected `Tab`.
    */