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`. */