[TabPanel] Type mismatch between tabContext and tanPanel

[blackcow1987]

Steps to reproduce

According to TabPanel's type definition, value must be a string.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabPanel/TabPanel.d.ts#L24

  /**
   * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
   * no `value` was passed to `Tab`.
   */
  value: string;
};

But according to TabContext's type definition, value must be a string or number.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabContext/TabContext.d.ts#L16

  /**
   * The value of the currently selected `Tab`.
   */
  value: string | number;
}

When using TabContext, because the currently active tab information is stored in the Context and compared within the TabPanel component, the value ​​of the two components must use the same type.

https://github.com/mui/material-ui/blob/v6.1.4/packages/mui-lab/src/TabPanel/TabPanel.js#L50

  const context = useTabContext();
  if (context === null) {
    throw new TypeError('No TabContext provided');
  }
  const id = getPanelId(context, value);
  const tabId = getTabId(context, value);

  return (
    <TabPanelRoot
      aria-labelledby={tabId}
      className={clsx(classes.root, className)}
      hidden={value !== context.value}

Current behavior

The value ​​of TabContext and TabPanel are using different types.

Expected behavior

The value ​​of TabContext and TabPanel must use the same type.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: TabPanel