@axa-fr/canopee-react 1.4.2-alpha.3 → 1.4.2-alpha.5

package/dist/distributeur/Tabs/components/Tab.d.ts

@@ -4,7 +4,10 @@ export type TabProps = {
     title: ReactNode;
     children?: ReactNode;
     className?: string;
+    /**
+     * @deprecated Use className instead
+     */
     classModifier?: string;
 };
-declare const Tab: () => import("react/jsx-runtime").JSX.Element;
+declare const Tab: () => null;
 export { Tab };

package/dist/distributeur/Tabs/components/Tab.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Tabs/Tabs.css";
-const Tab = () => _jsx("span", {});
+const Tab = () => null;
 export { Tab };

package/dist/distributeur/Tabs/components/TabsCore.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
+import { type FormEvent } from "react";
 import { type TabsStatelessProps } from "./TabsStateless";
 type Tabs = {
-    onChange?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onChange?: (event: FormEvent<HTMLButtonElement>) => void;
     activeIndex?: string;
 };
 export type TabsCoreProps = Tabs & Omit<TabsStatelessProps, "activeIndex">;
-export declare const onChangeEvent: (onChange?: (event: React.MouseEvent<HTMLButtonElement>) => void) => (setState: (newValue: string) => void) => (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
-declare const TabsCore: React.FunctionComponent<TabsCoreProps>;
+declare const TabsCore: ({ activeIndex: activeIndexProp, onChange, ...otherProps }: TabsCoreProps) => import("react/jsx-runtime").JSX.Element;
 export { TabsCore };

package/dist/distributeur/Tabs/components/TabsCore.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { TabsStateless } from "./TabsStateless";
 const DEFAULT_ACTIVE_INDEX = "0";
-export const onChangeEvent = (onChange) => (setState) => (event, index) => {
-    if (onChange) {
-        onChange(event);
-    }
-    if (index) {
-        setState(index);
-    }
-};
-const TabsCore = ({ activeIndex = DEFAULT_ACTIVE_INDEX, onChange, ...otherProps }) => {
-    const [stateActiveIndex, setActiveIndex] = useState(activeIndex);
-    return (_jsx(TabsStateless, { activeIndex: stateActiveIndex, ...otherProps, onChange: onChangeEvent(onChange)(setActiveIndex) }));
+const TabsCore = ({ activeIndex: activeIndexProp = DEFAULT_ACTIVE_INDEX, onChange, ...otherProps }) => {
+    const [activeIndex, setActiveIndex] = useState(Number(activeIndexProp));
+    // Allow to update activeIndex from props
+    useEffect(() => {
+        setActiveIndex(Number(activeIndexProp));
+    }, [activeIndexProp]);
+    return (_jsx(TabsStateless, { activeIndex: activeIndex, ...otherProps, onChange: (e, index) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (index >= 0) {
+                setActiveIndex(index);
+            }
+        } }));
 };
 export { TabsCore };

package/dist/distributeur/Tabs/components/TabsStateless.d.ts

@@ -1,13 +1,17 @@
-import { type ReactNode, type MouseEvent } from "react";
-export interface TabsStatelessProps {
-    children: ReactNode;
-    activeIndex: string;
+import { type FormEvent, type ReactElement } from "react";
+import type { TabProps } from "./Tab";
+export type TabsStatelessProps = {
+    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    activeIndex: number;
     className?: string;
+    /**
+     * @deprecated Use `className` instead
+     */
     classModifier?: string;
-}
-export interface TabsStatelessHandlers {
-    onChange: (event: MouseEvent<HTMLButtonElement>, index: string) => void;
-}
+};
+export type TabsStatelessHandlers = {
+    onChange: (event: FormEvent<HTMLButtonElement>, index: number) => void;
+};
 type Props = TabsStatelessProps & TabsStatelessHandlers;
 declare const TabsStateless: ({ activeIndex, className, classModifier, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { TabsStateless };

package/dist/distributeur/Tabs/components/TabsStateless.js

@@ -1,11 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
-import { Children, isValidElement, } from "react";
-import { getComponentClassName } from "../../utilities";
-import { Pane } from "./Pane";
-import { Title } from "./Title";
+import { Children, isValidElement, useId, useRef, } from "react";
+import { getClassName } from "../../utilities/helpers/getClassName";
+function handleKeyDown(event, moveToTab, index, totalNumberOfTabs) {
+    let targetIndex = null;
+    if (event.key === "ArrowLeft") {
+        targetIndex = index - 1;
+    }
+    else if (event.key === "ArrowRight") {
+        targetIndex = index + 1;
+    }
+    else if (event.key === "Home") {
+        targetIndex = 0;
+    }
+    else if (event.key === "End") {
+        targetIndex = totalNumberOfTabs - 1;
+    }
+    if (targetIndex !== null) {
+        moveToTab(event, targetIndex);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
 const TabsStateless = ({ activeIndex, className = "af-tabs", classModifier, children, onChange, }) => {
-    const componentClassName = getComponentClassName(className, classModifier);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("ul", { className: "af-tabs__control", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx(Title, { active: activeIndex === index.toString(), onChange: onChange, id: `${index}`, classModifier: child.props.classModifier, children: child.props.title }, `title-${index}`))) }), _jsx("div", { className: "af-tabs__content", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx(Pane, { active: activeIndex === index.toString(), children: child.props.children }, `pane-${index}`))) })] }));
+    const componentClassName = getClassName({
+        baseClassName: "af-tabs",
+        className,
+        modifiers: classModifier?.split(" "),
+    });
+    const tabRefs = useRef([]);
+    const moveToTab = (event, index) => {
+        if (index < 0 || index >= Children.count(children)) {
+            return;
+        }
+        tabRefs.current[index]?.focus();
+        onChange(event, index);
+    };
+    const id = useId();
+    return (_jsxs("div", { className: componentClassName, role: "tablist", children: [_jsx("ul", { className: "af-tabs__control", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx("li", { className: getClassName({
+                        className,
+                        modifiers: [activeIndex === index && "active"],
+                        baseClassName: "af-tabs__item",
+                    }), children: _jsx("button", { type: "button", id: `${id}-tab-${index}`, ref: (el) => {
+                            tabRefs.current[index] = el;
+                        }, "aria-controls": `${id}-pane-${index}`, onChange: (event) => onChange(event, index), onKeyDown: (event) => {
+                            handleKeyDown(event, moveToTab, index, Children.count(children));
+                        }, className: "af-tabs__link", onClick: (event) => onChange(event, index), tabIndex: activeIndex === index ? 0 : -1, children: child.props.title }) }))) }), _jsx("div", { className: "af-tabs__content", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx("div", { id: `${id}-pane-${index}`, "aria-labelledby": `${id}-tab-${index}`, className: getClassName({
+                        baseClassName: "af-tabs__pane",
+                        modifiers: [activeIndex === index && "active"],
+                    }), role: "tabpanel", tabIndex: 0, children: child.props.children }, `pane-${index}`))) })] }));
 };
 export { TabsStateless };

package/dist/prospect-client/Stepper/StepperCommon.d.ts

@@ -6,7 +6,7 @@ export type StepperProps = {
     currentStep: number;
     currentSubtitle?: string;
     currentTitle?: string;
-    nbSteps?: 3 | 4 | 5 | 6 | 7 | 8;
+    nbSteps?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
     helper?: string;
     message?: string;
     messageType?: ItemMessageProps["messageType"];

package/package.json

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

package/dist/distributeur/Tabs/components/Title.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-export type TitleComponentProps = {
-    enable?: boolean | null;
-    active: boolean;
-    className?: string;
-    classModifier?: string;
-    id: string;
-    children?: React.ReactNode;
-    onChange: (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
-};
-declare const Title: {
-    ({ active, onChange, children, classModifier, className, enable, id, }: TitleComponentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Title };

package/dist/distributeur/Tabs/components/Title.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import React from "react";
-import { getComponentClassName } from "../../utilities";
-const Title = ({ active, onChange, children, classModifier, className, enable, id, }) => {
-    const newClassModifier = classNames(classModifier, {
-        disabled: enable === false,
-        active,
-    });
-    const componentClassName = getComponentClassName(className, newClassModifier, "af-tabs__item");
-    return (_jsx("li", { className: componentClassName, children: _jsx("button", { type: "button", id: id, className: "af-tabs__link", onClick: (event) => onChange(event, id), children: children }) }));
-};
-Title.displayName = "Title";
-export { Title };