@axa-fr/canopee-react 1.4.2-alpha.2 → 1.4.2-alpha.4

package/dist/distributeur/Form/Experimental/Input.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/distributeur/Form/Experimental/Input.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import { forwardRef } from "react";
+import { getClassName } from "../../utilities/helpers/getClassName";
+const Input = forwardRef(({ className, ...otherProps }, inputRef) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-input__input",
+        className,
+    });
+    return (_jsx("input", { className: componentClassName, ref: inputRef, ...otherProps }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/distributeur/Form/Experimental/InputContainer.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputContainer.css";
+import type { PropsWithChildren } from "react";
+type InputContainerProps = PropsWithChildren<{
+    vertical?: boolean;
+    className?: string;
+}>;
+export declare const InputContainer: ({ children, vertical, className, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Form/Experimental/InputContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputContainer.css";
+import classNames from "classnames";
+export const InputContainer = ({ children, vertical, className, }) => {
+    const containerClass = classNames("af-input__container", { "af-input__container--vertical": vertical }, className);
+    return _jsx("div", { className: containerClass, children: children });
+};

package/dist/distributeur/Form/Experimental/InputUnit.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
+import type { PropsWithChildren } from "react";
+export declare const InputUnit: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/InputUnit.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
+export const InputUnit = ({ children }) => (_jsx("span", { className: "af-input__unit", children: children }));

package/dist/distributeur/Form/Experimental/ItemMessage.d.ts

@@ -0,0 +1,28 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/ItemMessage.css";
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    /**
+     * The variant of the message.
+     * - "error": displays an error message with an error icon.
+     * - "success": displays a success message with a success icon.
+     * - undefined: displays an help message without any icon.
+     *
+     * @default undefined
+     */
+    variant?: "error" | "success";
+    /**
+     * Additional class name(s) to apply to the component.
+     */
+    className?: string;
+    /**
+     * The id attribute for the component.
+     *
+     * Useful for linking the message to other elements for accessibility.
+     * @default undefined
+     *
+     */
+    id?: string;
+};
+export declare const ItemMessage: ({ variant, children, className, id }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Form/Experimental/ItemMessage.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/ItemMessage.css";
+import success from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import error from "@material-symbols/svg-400/outlined/error-fill.svg";
+import { Svg } from "../../Svg";
+import { getClassName } from "../../utilities/helpers/getClassName";
+const iconByVariant = {
+    success,
+    error,
+};
+export const ItemMessage = ({ variant, children, className, id }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-item-message",
+        className,
+        modifiers: [variant],
+    });
+    const icon = variant ? iconByVariant[variant] : null;
+    return (_jsxs("div", { className: componentClassName, id: id, children: [icon ? _jsx(Svg, { src: icon, className: "af-item-message__icon" }) : null, children] }));
+};

package/dist/distributeur/Form/Experimental/Label.d.ts

@@ -0,0 +1,13 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
+import type { ComponentProps } from "react";
+type LabelProps = ComponentProps<"label"> & {
+    /**
+     * Whether the label is required or not.
+     * This will add a `*` after the label text.
+     * This is purely presentational and does not enforce any validation logic.
+     * @default false
+     */
+    required?: boolean;
+};
+export declare const Label: ({ children, required, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Form/Experimental/Label.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
+export const Label = ({ children, required = false, ...props }) => (_jsxs("label", { className: "af-label", ...props, children: [children, required ? (_jsx("span", { className: "af-label__required", "aria-hidden": true, children: "*" })) : null] }));

package/dist/distributeur/Form/Experimental/TextInput.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps } from "react";
+import { Input } from "./Input";
+import type { InputBaseProps } from "./types";
+export type TextInputProps = Omit<ComponentProps<typeof Input>, "children"> & InputBaseProps;
+/**
+ * This component renders a label, a text input field and optionnally help and  error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { TextInput };

package/dist/distributeur/Form/Experimental/TextInput.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Input } from "./Input";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a text input field and optionnally help and  error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+const TextInput = forwardRef(({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }, inputRef) => {
+    const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition,
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsx(Input, { ...props, className: inputClassName, id: inputId, ref: inputRef, "aria-describedby": describedBy, "aria-invalid": isInvalid }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+});
+TextInput.displayName = "TextInput";
+export { TextInput };

package/dist/distributeur/Form/Experimental/index.d.ts

@@ -1 +1,9 @@
-export {};
+export { Input } from "./Input";
+export { InputContainer } from "./InputContainer";
+export { InputUnit } from "./InputUnit";
+export { ItemMessage } from "./ItemMessage";
+export { Label } from "./Label";
+export { TextInput } from "./TextInput";
+export type { TextInputProps } from "./TextInput";
+export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";
+export { useInput } from "./useInput.hook";

package/dist/distributeur/Form/Experimental/index.js

@@ -1 +1,7 @@
-export {};
+export { Input } from "./Input";
+export { InputContainer } from "./InputContainer";
+export { InputUnit } from "./InputUnit";
+export { ItemMessage } from "./ItemMessage";
+export { Label } from "./Label";
+export { TextInput } from "./TextInput";
+export { useInput } from "./useInput.hook";

package/dist/distributeur/Form/Experimental/types.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+export type InputBaseProps = {
+    /**
+     * The id of the input element.
+     * This is used to link the label to the input, and its descriptions (helper and error messages).
+     * If not provided, a unique id will be generated.
+     */
+    id?: string;
+    /**
+     * The label text for the input.
+     */
+    label: ReactNode;
+    /**
+     * Whether the input is required or not.
+     * This will add a `*` after the label text.
+     * This is purely presentational and does not enforce any validation logic.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * className for the container. Use this to apply styles to the input container.
+     */
+    containerClassName?: string;
+    /**
+     * className for the label. Use this to apply styles to the label.
+     */
+    labelClassName?: string;
+    /**
+     * className for the input. Use this to apply styles to the input.
+     */
+    inputClassName?: string;
+    /**
+     * The position of the label relative to the input.
+     * - `centerLeft` will place the label on the left of the input, centered vertically. This is the default position for most inputs.
+     * - `leftAbove` will place the label above the input, aligned to the left. This is used to have the label above the input.
+     * @default "centerLeft"
+     */
+    labelPosition?: SingleLineLabelPosition;
+    /**
+     * The help message to display below the input.
+     */
+    helpMessage?: string;
+    /**
+     * The error message to display below the input.
+     * This will also set the `aria-invalid` attribute on the input, and apply the error styles to the input.
+     */
+    errorMessage?: string;
+    /**
+     * The right element to display next to the input.
+     * This should be used to display a unit, but **if you really need to** an icon, or any other element that should be displayed next to the input.
+     */
+    contentRight?: ReactNode;
+};
+export type LabelPosition = "topLeft" | SingleLineLabelPosition;
+export type SingleLineLabelPosition = "centerLeft" | "above";

package/dist/distributeur/Form/Experimental/types.js

@@ -0,0 +1 @@
+import {} from "react";

package/dist/distributeur/Form/Experimental/useInput.hook.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type LabelPosition } from "./types";
+type useInputProps = {
+    id?: string;
+    labelPosition?: LabelPosition;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorMessage?: ReactNode;
+    helpMessage?: ReactNode;
+};
+export declare const useInput: (props: useInputProps) => {
+    isInvalid: boolean;
+    isContainerVertical: boolean;
+    inputClassName: string;
+    labelClassName: string;
+    describedBy: string;
+    errorId: string | undefined;
+    helperId: string | undefined;
+    inputId: string;
+};
+export {};

package/dist/distributeur/Form/Experimental/useInput.hook.js

@@ -0,0 +1,30 @@
+import { useId } from "react";
+import { getClassName } from "../../utilities/helpers/getClassName";
+import {} from "./types";
+export const useInput = (props) => {
+    const inputUseId = useId();
+    const inputId = props.id ?? inputUseId;
+    const isInvalid = Boolean(props.errorMessage);
+    const inputClassName = getClassName({
+        baseClassName: "af-input__input",
+        className: props.inputClassName,
+    });
+    const labelClassName = getClassName({
+        baseClassName: "af-label",
+        modifiers: [props.labelPosition === "above" && "top"],
+        className: props.labelClassName,
+    });
+    const errorId = isInvalid ? `${inputId}-description` : undefined;
+    const helperId = props.helpMessage ? `${inputId}-helper` : undefined;
+    const describedBy = [errorId, helperId].filter(Boolean).join(" ").trim();
+    return {
+        isInvalid,
+        isContainerVertical: props.labelPosition === "above",
+        inputClassName,
+        labelClassName,
+        describedBy,
+        errorId,
+        helperId,
+        inputId,
+    };
+};

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/distributeur-experimental.d.ts

@@ -0,0 +1 @@
+export * from "./distributeur/Form/Experimental";

package/dist/distributeur-experimental.js

@@ -0,0 +1 @@
+export * from "./distributeur/Form/Experimental";

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.4.2-alpha.2",
+  "version": "1.4.2-alpha.4",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
       "import": "./dist/distributeur.js",
       "types": "./dist/distributeur.d.ts"
     },
+    "./distributeur/experimental": {
+      "import": "./dist/distributeur-experimental.js",
+      "types": "./dist/distributeur-experimental.d.ts"
+    },
     "./client": {
       "import": "./dist/client.js",
       "types": "./dist/client.d.ts"
@@ -45,7 +49,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.4.2-alpha.2",
+    "@axa-fr/canopee-css": "1.4.2-alpha.4",
     "@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 };