@axa-fr/design-system-apollo-react 2.0.4-alpha.83 → 2.0.4-alpha.87

package/dist/Form/ItemLabel/ItemLabelCommon.d.ts

@@ -2,7 +2,7 @@ import { type ComponentType, type MouseEventHandler, type ReactNode } from "reac
 import type { ButtonProps } from "../../Button/ButtonCommon";
 export type ItemLabelProps = {
     label?: ReactNode;
-    description?: string;
+    description?: ReactNode;
     required?: boolean;
     inputId: string;
     sideButtonLabel?: string;

package/dist/ItemTabBar/ItemTabBarApollo.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/ItemTabBar/ItemTabBarApollo.css";
-export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./ItemTabBarCommon";
+export { ItemTabBar, type ItemTabBarProps } from "./ItemTabBarCommon";

package/dist/ItemTabBar/ItemTabBarApollo.js

@@ -1,2 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/ItemTabBar/ItemTabBarApollo.css";
-export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBarCommon";
+export { ItemTabBar } from "./ItemTabBarCommon";

package/dist/ItemTabBar/ItemTabBarCommon.d.ts

@@ -1,14 +1,6 @@
-import { ComponentPropsWithRef, ReactNode } from "react";
-export declare const itemTabBarVariants: {
-    readonly tabBar: "tabBar";
-    readonly header: "header";
-};
-export type ItemTabBarVariants = keyof typeof itemTabBarVariants;
-type ItemTabBarProps = ComponentPropsWithRef<"button"> & {
-    variant?: ItemTabBarVariants;
+import { ComponentPropsWithRef } from "react";
+export type ItemTabBarProps = ComponentPropsWithRef<"button"> & {
     isActive?: boolean;
-    icon?: ReactNode;
     title: string;
 };
 export declare const ItemTabBar: import("react").ForwardRefExoticComponent<Omit<ItemTabBarProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/ItemTabBar/ItemTabBarCommon.js

@@ -1,12 +1,8 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
-export const itemTabBarVariants = {
-    tabBar: "tabBar",
-    header: "header",
-};
-export const ItemTabBar = forwardRef(({ variant = "tabBar", isActive = false, icon, title, className, ...props }, ref) => {
-    const classNames = getComponentClassName("af-item-tab-bar", className, variant);
-    return (_jsxs("button", { ref: ref, type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: [icon, title] }));
+export const ItemTabBar = forwardRef(({ isActive = false, title, className, ...props }, ref) => {
+    const classNames = getComponentClassName("af-item-tab-bar", className);
+    return (_jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: title }));
 });
 ItemTabBar.displayName = "ItemTabBar";

package/dist/ItemTabBar/ItemTabBarLF.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/ItemTabBar/ItemTabBarLF.css";
-export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./ItemTabBarCommon";
+export { ItemTabBar, type ItemTabBarProps } from "./ItemTabBarCommon";

package/dist/ItemTabBar/ItemTabBarLF.js

@@ -1,2 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/ItemTabBar/ItemTabBarLF.css";
-export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBarCommon";
+export { ItemTabBar } from "./ItemTabBarCommon";

package/dist/List/ContentItemDuo/ContentItemDuoCommon.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from "react";
+import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 import type { ButtonProps } from "../../Button/ButtonCommon";
 export type ContentItemDuoProps = {
     label: string;
@@ -8,9 +8,9 @@ export type ContentItemDuoProps = {
     classModifier?: string;
     buttonText?: string;
     onButtonClick?: () => void;
-};
+} & ComponentProps<"div">;
 type ContentItemDuoCommonProps = ContentItemDuoProps & {
     ButtonComponent: ComponentType<ButtonProps>;
 };
-export declare const ContentItemDuoCommon: ({ label, value, isVertical, className, classModifier, buttonText, onButtonClick, ButtonComponent, }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentItemDuoCommon: ({ label, value, isVertical, className, classModifier, buttonText, onButtonClick, ButtonComponent, ...containerProps }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/List/ContentItemDuo/ContentItemDuoCommon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-export const ContentItemDuoCommon = ({ label, value, isVertical = false, className, classModifier, buttonText, onButtonClick, ButtonComponent, }) => {
+export const ContentItemDuoCommon = ({ label, value, isVertical = false, className, classModifier, buttonText, onButtonClick, ButtonComponent, ...containerProps }) => {
     const componentClassName = useMemo(() => {
         const classModifiers = [classModifier];
         if (isVertical) {
@@ -9,5 +9,5 @@ export const ContentItemDuoCommon = ({ label, value, isVertical = false, classNa
         }
         return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, className, isVertical]);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText ? (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(ButtonComponent, { variant: "ghost", onClick: onButtonClick, children: buttonText }) })) : null] }));
+    return (_jsxs("div", { className: componentClassName, ...containerProps, children: [_jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText ? (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(ButtonComponent, { variant: "ghost", onClick: onButtonClick, children: buttonText }) })) : null] }));
 };

package/dist/TabBar/TabBarApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/TabBar/TabBarApollo.css";
+import { type TabBarProps } from "./TabBarCommon";
+export { tabBarDirection, type TabBarProps, type TabBarDirection, } from "./TabBarCommon";
+export declare const TabBar: (props: TabBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabBar/TabBarApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/TabBar/TabBarApollo.css";
+import { ItemTabBar } from "../ItemTabBar/ItemTabBarApollo";
+import { TabBarCommon } from "./TabBarCommon";
+export { tabBarDirection, } from "./TabBarCommon";
+export const TabBar = (props) => (_jsx(TabBarCommon, { ...props, ItemTabBarComponent: ItemTabBar }));

package/dist/TabBar/TabBarCommon.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ComponentType, ReactNode } from "react";
+import { ItemTabBar, type ItemTabBarProps } from "../ItemTabBar/ItemTabBarCommon";
+export declare const tabBarDirection: {
+    readonly center: "center";
+    readonly left: "left";
+};
+export type TabBarDirection = keyof typeof tabBarDirection;
+export type TabBarProps = {
+    items: ({
+        content: ReactNode;
+    } & Omit<ItemTabBarProps, "content">)[];
+    preSelectedTabIndex?: number;
+    direction?: TabBarDirection;
+};
+type TabBarPropsCommon = TabBarProps & {
+    ItemTabBarComponent: ComponentType<ComponentProps<typeof ItemTabBar>>;
+};
+export declare const TabBarCommon: ({ items, preSelectedTabIndex, direction, ItemTabBarComponent, }: TabBarPropsCommon) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TabBar/TabBarCommon.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState, } from "react";
+import classNames from "classnames";
+export const tabBarDirection = {
+    center: "center",
+    left: "left",
+};
+const CLASS_NAME = "af-tabbar";
+export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", ItemTabBarComponent, }) => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTabIndex || 0);
+    const buttonRefs = useRef([]);
+    const tablistRef = useRef(null);
+    const totalTabs = items.length;
+    const isActive = (index) => index === selectedTabIndex;
+    const onChangeTab = useCallback((e) => {
+        const firstTabIndex = 0;
+        const lastTabIndex = totalTabs - 1;
+        const goToNextTab = (nextTabIndex) => {
+            setSelectedTabIndex(nextTabIndex);
+            buttonRefs.current[nextTabIndex].focus();
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        switch (e.key) {
+            case "ArrowRight":
+                goToNextTab(selectedTabIndex < lastTabIndex
+                    ? selectedTabIndex + 1
+                    : firstTabIndex);
+                break;
+            case "ArrowLeft":
+                goToNextTab(selectedTabIndex > firstTabIndex
+                    ? selectedTabIndex - 1
+                    : lastTabIndex);
+                break;
+            case "Home":
+                goToNextTab(firstTabIndex);
+                break;
+            case "End":
+                goToNextTab(lastTabIndex);
+                break;
+            default:
+                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: () => setSelectedTabIndex(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}`)))] }));
+};

package/dist/TabBar/TabBarLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/TabBar/TabBarLF.css";
+import { type TabBarProps } from "./TabBarCommon";
+export { tabBarDirection, type TabBarProps, type TabBarDirection, } from "./TabBarCommon";
+export declare const TabBar: (props: TabBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabBar/TabBarLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/TabBar/TabBarLF.css";
+import { ItemTabBar } from "../ItemTabBar/ItemTabBarLF";
+import { TabBarCommon } from "./TabBarCommon";
+export { tabBarDirection, } from "./TabBarCommon";
+export const TabBar = (props) => (_jsx(TabBarCommon, { ...props, ItemTabBarComponent: ItemTabBar }));

package/dist/index.d.ts

@@ -33,7 +33,8 @@ export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./Grid/DebugGridApollo";
 export { Heading, type HeadingLevel } from "./Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./Icon/IconApollo";
-export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./ItemTabBar/ItemTabBarApollo";
+export { ItemTabBar, type ItemTabBarProps, } from "./ItemTabBar/ItemTabBarApollo";
+export { TabBar, type TabBarProps, tabBarDirection, type TabBarDirection, } from "./TabBar/TabBarApollo";
 export { Footer, type FooterProps } from "./Layout/Footer/FooterApollo";
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkApollo";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemApollo";

package/dist/index.js

@@ -32,7 +32,8 @@ export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./Grid/DebugGridApollo";
 export { Heading } from "./Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, } from "./Icon/IconApollo";
-export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBar/ItemTabBarApollo";
+export { ItemTabBar, } from "./ItemTabBar/ItemTabBarApollo";
+export { TabBar, tabBarDirection, } from "./TabBar/TabBarApollo";
 export { Footer } from "./Layout/Footer/FooterApollo";
 export { Link, linkVariants } from "./Link/LinkApollo";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemApollo";

package/dist/indexLF.d.ts

@@ -37,7 +37,8 @@ export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { DebugGrid } from "./Grid/DebugGridLF";
 export { Heading, type HeadingLevel } from "./Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./Icon/IconLF";
-export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./ItemTabBar/ItemTabBarLF";
+export { ItemTabBar, type ItemTabBarProps } from "./ItemTabBar/ItemTabBarLF";
+export { TabBar, type TabBarProps, tabBarDirection, type TabBarDirection, } from "./TabBar/TabBarLF";
 export { Footer, type FooterProps } from "./Layout/Footer/FooterLF";
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkLF";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemLF";

package/dist/indexLF.js

@@ -36,7 +36,8 @@ export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { DebugGrid } from "./Grid/DebugGridLF";
 export { Heading } from "./Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, } from "./Icon/IconLF";
-export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBar/ItemTabBarLF";
+export { ItemTabBar } from "./ItemTabBar/ItemTabBarLF";
+export { TabBar, tabBarDirection, } from "./TabBar/TabBarLF";
 export { Footer } from "./Layout/Footer/FooterLF";
 export { Link, linkVariants } from "./Link/LinkLF";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemLF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "2.0.4-alpha.83",
+  "version": "2.0.4-alpha.87",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "2.0.4-alpha.83",
-    "@axa-fr/design-system-look-and-feel-css": "2.0.4-alpha.83",
+    "@axa-fr/design-system-apollo-css": "2.0.4-alpha.87",
+    "@axa-fr/design-system-look-and-feel-css": "2.0.4-alpha.87",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },