From 66ad4ddd480d1c8741c29931ec532aa2d96d5e07 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 21:05:54 +0100
Subject: [PATCH] Fix warning about Tab and TabPanel

---
 src/components/Toolbar.js                     | 86 ++++++++++---------
 .../controls/atoms/ToolbarButton.js           |  3 +
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index d8aaf72..6f9db38 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -4,7 +4,7 @@ import { bindActionCreators } from "redux";
 import * as actions from "../actions";
 import * as selectors from "../selectors";
 
-import { Tabs, TabPanel } from "react-tabs";
+import { Tabs, TabList, TabPanel } from "react-tabs";
 import FilterListPanel from "./controls/FilterListPanel";
 import CategoriesListPanel from "./controls/CategoriesListPanel";
 import ShapesListPanel from "./controls/ShapesListPanel";
@@ -127,7 +127,7 @@ class Toolbar extends React.Component {
         {Object.keys(catMap).map((type) => {
           const children = catMap[type];
           return (
-            <TabPanel>
+            <TabPanel key={type}>
               <CategoriesListPanel
                 categories={children}
                 activeCategories={this.props.activeCategories}
@@ -180,9 +180,10 @@ class Toolbar extends React.Component {
     }
   }
 
-  renderToolbarTab(_selected, label, iconKey) {
+  renderToolbarTab(_selected, label, iconKey, key) {
     return (
       <ToolbarButton
+        key={key}
         label={label}
         iconKey={iconKey}
         isActive={this.state._selected === _selected}
@@ -201,7 +202,8 @@ class Toolbar extends React.Component {
           return this.renderToolbarTab(
             idxs[key],
             panelCategories[key].label,
-            panelCategories[key].icon
+            panelCategories[key].icon,
+            key
           );
         })}
       </div>
@@ -215,14 +217,12 @@ class Toolbar extends React.Component {
     return (
       <div className={classes}>
         {this.renderClosePanel()}
-        <Tabs onSelect={() => null} selectedIndex={this.state._selected}>
-          {narratives && narratives.length !== 0
-            ? this.renderToolbarNarrativePanel()
-            : null}
-          {features.USE_CATEGORIES ? this.renderToolbarCategoriesPanel() : null}
-          {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
-          {features.USE_SHAPES ? this.renderToolbarShapePanel() : null}
-        </Tabs>
+        {narratives && narratives.length !== 0
+          ? this.renderToolbarNarrativePanel()
+          : null}
+        {features.USE_CATEGORIES ? this.renderToolbarCategoriesPanel() : null}
+        {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
+        {features.USE_SHAPES ? this.renderToolbarShapePanel() : null}
       </div>
     );
   }
@@ -275,33 +275,35 @@ class Toolbar extends React.Component {
           <p>{title}</p>
         </div>
         <div className="toolbar-tabs">
-          {narrativesExist
-            ? this.renderToolbarTab(
-                narrativesIdx,
-                panels.narratives.label,
-                panels.narratives.icon
-              )
-            : null}
-          {features.USE_CATEGORIES
-            ? this.renderToolbarCategoryTabs(categoryIdxs)
-            : null}
-          {features.USE_ASSOCIATIONS
-            ? this.renderToolbarTab(
-                filtersIdx,
-                panels.filters.label,
-                panels.filters.icon
-              )
-            : null}
-          {features.USE_SHAPES
-            ? this.renderToolbarTab(
-                shapesIdx,
-                panels.shapes.label,
-                panels.shapes.icon
-              )
-            : null}
-          {features.USE_FULLSCREEN && (
-            <FullscreenToggle language={this.props.language} />
-          )}
+          <TabList>
+            {narrativesExist
+              ? this.renderToolbarTab(
+                  narrativesIdx,
+                  panels.narratives.label,
+                  panels.narratives.icon
+                )
+              : null}
+            {features.USE_CATEGORIES
+              ? this.renderToolbarCategoryTabs(categoryIdxs)
+              : null}
+            {features.USE_ASSOCIATIONS
+              ? this.renderToolbarTab(
+                  filtersIdx,
+                  panels.filters.label,
+                  panels.filters.icon
+                )
+              : null}
+            {features.USE_SHAPES
+              ? this.renderToolbarTab(
+                  shapesIdx,
+                  panels.shapes.label,
+                  panels.shapes.icon
+                )
+              : null}
+            {features.USE_FULLSCREEN && (
+              <FullscreenToggle language={this.props.language} />
+            )}
+          </TabList>
         </div>
         <BottomActions
           info={{
@@ -329,8 +331,10 @@ class Toolbar extends React.Component {
         id="toolbar-wrapper"
         className={`toolbar-wrapper ${isNarrative ? "narrative-mode" : ""}`}
       >
-        {this.renderToolbarTabs()}
-        {this.renderToolbarPanels()}
+        <Tabs onSelect={() => null} selectedIndex={this.state._selected}>
+          {this.renderToolbarTabs()}
+          {this.renderToolbarPanels()}
+        </Tabs>
       </div>
     );
   }
diff --git a/src/components/controls/atoms/ToolbarButton.js b/src/components/controls/atoms/ToolbarButton.js
index a8520d9..7e8f652 100644
--- a/src/components/controls/atoms/ToolbarButton.js
+++ b/src/components/controls/atoms/ToolbarButton.js
@@ -10,3 +10,6 @@ export function ToolbarButton({ isActive, iconKey, onClick, label }) {
     </div>
   );
 }
+
+// https://github.com/reactjs/react-tabs#set-tabsrole
+ToolbarButton.tabsRole = "Tab";