Alternate value-required approach

Author: eps1lon

docs/pages/api-docs/tab-context.md

@@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
-| <span class="prop-name required">value&nbsp;*</span> | <span class="prop-type">any</span> |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
+| <span class="prop-name required">value&nbsp;*</span> | <span class="prop-type">string</span> |  | The value of the currently selected `Tab`. |
 
 The component cannot hold a ref.
 

docs/pages/api-docs/tab-list.md

@@ -28,7 +28,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">Array&lt;element&gt;</span> |  |  |
 
-The component cannot hold a ref.
+The `ref` is forwarded to the root element.
 
-Any other props supplied will be provided to the root element (native element).
+Any other props supplied will be provided to the root element ([Tabs](/api/tabs/)).
+
+## Inheritance
+
+The props of the [Tabs](/api/tabs/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
 

docs/pages/api-docs/tab-panel.md

@@ -28,10 +28,9 @@ The `MuiTabPanel` name can be used for providing [default props](/customization/
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">activeValue&nbsp;*</span> | <span class="prop-type">any</span> |  |  |
-| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  |  |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name required">value&nbsp;*</span> | <span class="prop-type">any</span> |  |  |
+| <span class="prop-name required">value&nbsp;*</span> | <span class="prop-type">string</span> |  | The `value` of the corresponding `Tab`. Must use the index of the `Tab` when no `value` was passed to `Tab`. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/tab-panels.js

@@ -5,7 +5,6 @@ import Tab from '@material-ui/core/Tab';
 import TabContext from '@material-ui/lab/TabContext';
 import TabList from '@material-ui/lab/TabList';
 import TabPanel from '@material-ui/lab/TabPanel';
-import TabPanels from '@material-ui/lab/TabPanels';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -16,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function LabTabs() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState('1');
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -27,16 +26,14 @@ export default function LabTabs() {
       <TabContext value={value}>
         <AppBar position="static">
           <TabList onChange={handleChange} aria-label="simple tabs example">
-            <Tab label="Item One" />
-            <Tab label="Item Two" />
-            <Tab label="Item Three" />
+            <Tab label="Item One" value="1" />
+            <Tab label="Item Two" value="2" />
+            <Tab label="Item Three" value="3" />
           </TabList>
         </AppBar>
-        <TabPanels>
-          <TabPanel>Item One</TabPanel>
-          <TabPanel>Item Two</TabPanel>
-          <TabPanel>Item Three</TabPanel>
-        </TabPanels>
+        <TabPanel value="1">Item One</TabPanel>
+        <TabPanel value="2">Item Two</TabPanel>
+        <TabPanel value="3">Item Three</TabPanel>
       </TabContext>
     </div>
   );

docs/pages/api-docs/tab-panels.md

@@ -5,7 +5,6 @@ import Tab from '@material-ui/core/Tab';
 import TabContext from '@material-ui/lab/TabContext';
 import TabList from '@material-ui/lab/TabList';
 import TabPanel from '@material-ui/lab/TabPanel';
-import TabPanels from '@material-ui/lab/TabPanels';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -16,9 +15,9 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export default function LabTabs() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState('1');
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
     setValue(newValue);
   };
 
@@ -27,16 +26,14 @@ export default function LabTabs() {
       <TabContext value={value}>
         <AppBar position="static">
           <TabList onChange={handleChange} aria-label="simple tabs example">
-            <Tab label="Item One" />
-            <Tab label="Item Two" />
-            <Tab label="Item Three" />
+            <Tab label="Item One" value="1" />
+            <Tab label="Item Two" value="2" />
+            <Tab label="Item Three" value="3" />
           </TabList>
         </AppBar>
-        <TabPanels>
-          <TabPanel>Item One</TabPanel>
-          <TabPanel>Item Two</TabPanel>
-          <TabPanel>Item Three</TabPanel>
-        </TabPanels>
+        <TabPanel value="1">Item One</TabPanel>
+        <TabPanel value="2">Item Two</TabPanel>
+        <TabPanel value="3">Item Three</TabPanel>
       </TabContext>
     </div>
   );

docs/src/pages/components/tabs/LabTabs.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
 
 export interface TabContextValue {
-  panelPrefix: string;
-  tabPrefix: string;
-  value: unknown;
+  idPrefix: string;
+  value: string;
 }
 
 export interface TabContextProps {
   children?: React.ReactNode;
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this property to `false`.
    */
-  value: unknown;
+  value: string;
 }
 /**
  *
@@ -22,3 +20,5 @@ export interface TabContextProps {
  */
 export default function TabContext(props: TabContextProps): JSX.Element;
 export function useTabContext(): TabContextValue | null;
+export function getPanelId(context: TabContextValue, tabValue: string): string;
+export function getTabId(context: TabContextValue, tabValue: string): string;

docs/src/pages/components/tabs/LabTabs.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 
+/**
+ * @type {React.Context<{ idPrefix: string; value: string } | null>}
+ */
 const Context = React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   Context.displayName = 'TabContext';
@@ -9,19 +12,18 @@ if (process.env.NODE_ENV !== 'production') {
 function useUniquePrefix() {
   const [id, setId] = React.useState(null);
   React.useEffect(() => {
-    setId(`mui-${Math.round(Math.random() * 1e5)}`);
+    setId(`mui-p-${Math.round(Math.random() * 1e5)}`);
   }, []);
   return id;
 }
 
 export default function TabContext(props) {
   const { children, value } = props;
-  const panelPrefix = useUniquePrefix();
-  const tabPrefix = useUniquePrefix();
+  const idPrefix = useUniquePrefix();
 
   const context = React.useMemo(() => {
-    return { tabPrefix, panelPrefix, value };
-  }, [panelPrefix, tabPrefix, value]);
+    return { idPrefix, value };
+  }, [idPrefix, value]);
 
   return <Context.Provider value={context}>{children}</Context.Provider>;
 }
@@ -37,11 +39,29 @@ TabContext.propTypes = {
   children: PropTypes.node,
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this property to `false`.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.string.isRequired,
 };
 
+/**
+ * @returns {unknown}
+ */
 export function useTabContext() {
   return React.useContext(Context);
 }
+
+export function getPanelId(context, value) {
+  const { idPrefix } = context;
+  if (idPrefix === null) {
+    return null;
+  }
+  return `${context.idPrefix}-P-${value}`;
+}
+
+export function getTabId(context, value) {
+  const { idPrefix } = context;
+  if (idPrefix === null) {
+    return null;
+  }
+  return `${context.idPrefix}-T-${value}`;
+}

packages/material-ui-lab/src/TabContext/TabContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
 import { createClientRender } from 'test/utils/createClientRender';
-import TabContext, { useTabContext } from './TabContext';
+import TabContext, { getPanelId, getTabId, useTabContext } from './TabContext';
 
 describe('<TabContext />', () => {
   const render = createClientRender();
@@ -19,21 +19,21 @@ describe('<TabContext />', () => {
     expect(value).to.equal(null);
   });
 
-  it('provides tab and panel prefixes for IDREFs and the active value', () => {
-    function Tabs() {
-      const { panelPrefix, tabPrefix, value } = useTabContext();
+  it('provides an id prefix for IDREFs and the active value', () => {
+    function Tabs({ value }) {
+      const context = useTabContext();
       return (
         <React.Fragment>
-          <div data-testid="active-value" data-value={value} />
-          <div role="tab" id={tabPrefix} />
-          <div role="tabpanel" id={panelPrefix} />
+          <div data-testid="active-value" data-value={context.value} />
+          <div role="tab" id={getTabId(context, value)} />
+          <div role="tabpanel" id={getPanelId(context, value)} />
         </React.Fragment>
       );
     }
 
     const { getByRole, getByTestId } = render(
-      <TabContext value={0}>
-        <Tabs />
+      <TabContext value="0">
+        <Tabs value="0" />
       </TabContext>,
     );
 
@@ -46,20 +46,20 @@ describe('<TabContext />', () => {
   });
 
   it('provides undefined tab and panel prefixes and the active value when ssr', () => {
-    function Tabs() {
-      const { panelPrefix, tabPrefix, value } = useTabContext();
+    function Tabs({ value }) {
+      const context = useTabContext();
       return (
         <React.Fragment>
-          <div data-testid="active-value" data-value={value} />
-          <div role="tab" id={tabPrefix} />
-          <div role="tabpanel" id={panelPrefix} />
+          <div data-testid="active-value" data-value={context.value} />
+          <div role="tab" id={getTabId(context, value)} />
+          <div role="tabpanel" id={getPanelId(context, value)} />
         </React.Fragment>
       );
     }
 
     const markup = ReactDOMServer.renderToStaticMarkup(
-      <TabContext value={0}>
-        <Tabs />
+      <TabContext value="0">
+        <Tabs value="0" />
       </TabContext>,
     );
 
@@ -69,18 +69,18 @@ describe('<TabContext />', () => {
   });
 
   it('hydrates tab and tabpanel prefixes', () => {
-    function Tabs() {
-      const { panelPrefix, tabPrefix } = useTabContext();
+    function Tabs({ value }) {
+      const context = useTabContext();
       return (
         <React.Fragment>
-          <div role="tab" id={tabPrefix} />
-          <div role="tabpanel" id={panelPrefix} />
+          <div role="tab" id={getTabId(context, value)} />
+          <div role="tabpanel" id={getPanelId(context, value)} />
         </React.Fragment>
       );
     }
     const reactElement = (
-      <TabContext value={0}>
-        <Tabs />
+      <TabContext value="0">
+        <Tabs value="0" />
       </TabContext>
     );
     const markup = ReactDOMServer.renderToString(reactElement);

packages/material-ui-lab/src/TabContext/TabContext.js

@@ -1 +1,2 @@
-export { default, useTabContext } from './TabContext';
+export { default } from './TabContext';
+export * from './TabContext';

packages/material-ui-lab/src/TabContext/TabContext.test.js

@@ -1 +1,2 @@
-export { default, useTabContext } from './TabContext';
+export { default } from './TabContext';
+export * from './TabContext';

packages/material-ui-lab/src/TabContext/index.d.ts

@@ -16,6 +16,7 @@ export interface TabListTypeMap<
  * API:
  *
  * - [TabList API](https://material-ui.com/api/tab-list/)
+ * - inherits [Tabs API](https://material-ui.com/api/tabs/)
  */
 declare const TabList: OverridableComponent<TabListTypeMap>;