breaking(tabs): remove isSelected prop

reach · Apr 20, 2022 · 2dd0aec · 2dd0aec
1 parent 1849e74
commit 2dd0aec
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 44 deletions.
diff --git a/packages/tabs/src/index.tsx b/packages/tabs/src/index.tsx
@@ -27,7 +27,6 @@ import {
   useDescendants,
 } from "@reach/descendants";
 import { getComputedStyle } from "@reach/utils/computed-styles";
-import { cloneValidElement } from "@reach/utils/clone-valid-element";
 import { useControlledState } from "@reach/utils/use-controlled-state";
 import { useStatefulRefValue } from "@reach/utils/use-stateful-ref-value";
 import { useIsomorphicLayoutEffect as useLayoutEffect } from "@reach/utils/use-isomorphic-layout-effect";
@@ -362,12 +361,7 @@ const TabListImpl = React.forwardRef(
         ref={ref}
         onKeyDown={handleKeyDown}
       >
-        {React.Children.map(children, (child, index) => {
-          // TODO: Remove in 1.0
-          return cloneValidElement(child, {
-            isSelected: index === selectedIndex,
-          });
-        })}
+        {children}
       </Comp>
     );
   }

diff --git a/website/src/pages/tabs.mdx b/website/src/pages/tabs.mdx
@@ -568,43 +568,6 @@ Disables a tab when true. Clicking will not work and keyboard navigation will sk
 
 All other props are passed to the underlying `button` (or component passed to `as`).
 
-##### Tab `isSelected`
-
-Because TabList needs to know the order of the children, we use `cloneElement` to pass state internally. If you want to know if a tab is active, you can wrap it, and then inspect clone props passed in.
-
-> NOTE: We will deprecate this behavior in the future. We now prefer to use context to pass data down to descendants for `Tabs` for better composability. If you'd like your Tabs to be a bit more future proof, we suggest using a controlled `Tabs` component so that your app knows the state of your tabs.
-
-```jsx
-// jsx-demo
-(() => {
-  function CoolTab(props) {
-    // `isSelected` comes from `TabList` cloning the `CoolTab`.
-    const { isSelected, children } = props;
-
-    // make sure to forward *all* props received from TabList
-    return (
-      <Tab {...props}>
-        {isSelected ? "😎" : "😐"}
-        {children}
-      </Tab>
-    );
-  }
-
-  return (
-    <Tabs>
-      <TabList>
-        <CoolTab>One</CoolTab>
-        <CoolTab>Two</CoolTab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>1</TabPanel>
-        <TabPanel>2</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-})();
-```
-
 ### TabPanel
 
 The panel that displays when it's corresponding tab is active.