diff --git a/docs/pages/material-ui/api/tab-context.json b/docs/pages/material-ui/api/tab-context.json
index 9a6e0b870f4894..e556a646968a57 100644
--- a/docs/pages/material-ui/api/tab-context.json
+++ b/docs/pages/material-ui/api/tab-context.json
@@ -4,7 +4,8 @@
"type": { "name": "union", "description": "number
| string" },
"required": true
},
- "children": { "type": { "name": "node" } }
+ "children": { "type": { "name": "node" } },
+ "idGenerator": { "type": { "name": "func" } }
},
"name": "TabContext",
"imports": [
diff --git a/docs/translations/api-docs/tab-context/tab-context.json b/docs/translations/api-docs/tab-context/tab-context.json
index 3349d8547760ca..e9f3e6b7bffb77 100644
--- a/docs/translations/api-docs/tab-context/tab-context.json
+++ b/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 Tab." }
},
"classDescriptions": {}
diff --git a/packages/mui-lab/src/TabContext/TabContext.d.ts b/packages/mui-lab/src/TabContext/TabContext.d.ts
index 38274ad8257053..22d665c3e6d2ec 100644
--- a/packages/mui-lab/src/TabContext/TabContext.d.ts
+++ b/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;
}
/**
*
diff --git a/packages/mui-lab/src/TabContext/TabContext.js b/packages/mui-lab/src/TabContext/TabContext.js
index a910236bab70b1..1fe9c63faab244 100644
--- a/packages/mui-lab/src/TabContext/TabContext.js
+++ b/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`.
*/