Merge branch 'CE-3388-reinstate-useuniquekeys' into 'main'

CE-3388: Reinstate useuniquekeys

See merge request !186

package-lock.json

 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ess-ics/ce-ui-common",
-      "version": "10.0.0",
+      "version": "10.1.0",
       "dependencies": {
         "@fontsource/titillium-web": "^5.0.22",
         "@mui/x-data-grid-pro": "^6.5.0",

package.json

 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "private": true,
   "type": "module",
   "main": "dist/index.js",

src/components/common/TabPanel/TabPanel.jsx

@@ -4,6 +4,7 @@ import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import { Stack } from "@mui/material";
+import { useUniqueKeys } from "../../../hooks/UseUniqueKeys";
 
 const TabContent = ({ children, value, index, ...other }) => {
   return (
@@ -73,6 +74,9 @@ export const TabPanel = ({
     initialIndex && initialIndex >= 0 ? initialIndex : 0
   );
 
+  const tabsKeys = useUniqueKeys(tabs);
+  const tabsContentKeys = useUniqueKeys(tabs);
+
   const handleChange = (event, newValue) => {
     setTabIndex(newValue);
     if (onTabChange) {
@@ -90,7 +94,7 @@ export const TabPanel = ({
       >
         {tabs?.map((tab, i) => (
           <Tab
-            key={`tab${tab.label}${i}`}
+            key={tabsKeys[i]}
             label={tab.label}
             {...a11yProps(i)}
           />
@@ -114,7 +118,7 @@ export const TabPanel = ({
       <Box>{_renderTabs()}</Box>
       {tabs?.map((tab, i) => (
         <TabContent
-          key={`tabContent${tab.label}${i}`}
+          key={tabsContentKeys[i]}
           value={tabIndex}
           index={i}
         >