@axa-fr/canopee-react 2.0.0-alpha.80 → 2.0.0-alpha.81

package/dist/prospect-client/TabBar/TabBarCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { useCallback, useRef, useState, } from "react";
+import { useCallback, useId, useRef, useState, } from "react";
 import { ItemTabBar, } from "../ItemTabBar/ItemTabBarCommon";
 export const tabBarDirection = {
     center: "center",
@@ -10,6 +10,9 @@ const CLASS_NAME = "af-tabbar";
 export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", ItemTabBarComponent, }) => {
     const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTabIndex || 0);
     const buttonRefs = useRef([]);
+    const baseId = useId();
+    const getTabId = (index) => `${baseId}-tab-${index}`;
+    const getTabPanelId = (index) => `${baseId}-tabpanel-${index}`;
     const tablistRef = useRef(null);
     const totalTabs = items.length;
     const isActive = (index) => index === selectedTabIndex;
@@ -48,7 +51,7 @@ export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", I
                 break;
         }
     }, [selectedTabIndex, totalTabs]);
-    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => handleClickFn(index), ref: (element) => {
+    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: getTabId(index), "aria-selected": isActive(index), "aria-controls": getTabPanelId(index), onKeyDown: onChangeTab, onClick: () => handleClickFn(index), ref: (element) => {
                         buttonRefs.current[index] = element;
-                    }, tabIndex: isActive(index) ? 0 : -1, title: title }, `tab-${title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, children: item.content }, `tabpanel-${item.title}`)))] }));
+                    }, tabIndex: isActive(index) ? 0 : -1, title: title }, `tab-${title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: getTabPanelId(index), "aria-labelledby": getTabId(index), children: item.content }, `tabpanel-${item.title}`)))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "2.0.0-alpha.80",
+  "version": "2.0.0-alpha.81",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "2.0.0-alpha.80",
+    "@axa-fr/canopee-css": "2.0.0-alpha.81",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 19"