@axa-fr/design-system-slash-react 1.2.0-alpha.5 → 1.2.0

package/dist/Alert/Alert.d.ts

@@ -12,6 +12,6 @@ export type AlertCoreComponentProps = {
     onClose?: MouseEventHandler<HTMLButtonElement>;
     className?: string;
     classModifier?: "error" | "danger" | "info" | "success";
-    ariaLabel?: string;
+    closeButtonAriaLabel?: string;
 };
-export declare const Alert: ({ className, onClose, icon, title, children, classModifier, ariaLabel, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ className, onClose, icon, title, children, classModifier, closeButtonAriaLabel, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.js

@@ -8,7 +8,7 @@ export var TypeIcons;
     TypeIcons["info"] = "glyphicon glyphicon-info-sign";
     TypeIcons["success"] = "glyphicon glyphicon-ok";
 })(TypeIcons || (TypeIcons = {}));
-export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", ariaLabel = "close", }) => {
+export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", closeButtonAriaLabel = "close", }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-alert");
-    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { role: "presentation", className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": ariaLabel, children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { role: "presentation", className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": closeButtonAriaLabel, children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
 };

package/dist/Form/Checkbox/CheckboxItem.js

@@ -5,7 +5,7 @@ import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.scss";
 const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, ...otherProps }, inputRef) => {
     const newLabel = children || label;
     const generatedId = useId();
-    const newId = id ?? generatedId;
+    const newId = id ?? generatedId; // id is required on this component
     const optionClassName = getOptionClassName(className ?? "", classModifier ?? "", "af-form__checkbox", disabled);
     return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox", ref: inputRef }), _jsxs("label", { className: "af-form__label", htmlFor: newId, children: [_jsx("span", { className: "af-form__indicator", children: _jsx("i", { className: "glyphicon glyphicon-ok" }) }), _jsx("span", { className: "af-form__description", children: newLabel })] })] }));
 });

package/dist/Form/Select/Select.d.ts

@@ -292,6 +292,20 @@ declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
     size?: number | undefined | undefined;
     forceDisplayPlaceholder?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
+    /**
+     * @deprecated Use `children` instead
+     * Instead of
+     * ```jsx
+     * <SelectBase options={[{ value: "1", label: "Option 1" }]} />
+     * ```
+     * you can now do something like :
+     * ```jsx
+     * <SelectBase>
+     *   <option value="1">Option 1</option>
+     * </SelectBase>
+     * ```
+     * It allows you to use the `optgroup` tag for example.
+     */
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     mode?: "default" | "base";
 } & {
@@ -304,6 +318,20 @@ declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
     forceDisplayPlaceholder?: boolean;
     placeholder?: string;
 }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
+    /**
+     * @deprecated Use `children` instead
+     * Instead of
+     * ```jsx
+     * <SelectBase options={[{ value: "1", label: "Option 1" }]} />
+     * ```
+     * you can now do something like :
+     * ```jsx
+     * <SelectBase>
+     *   <option value="1">Option 1</option>
+     * </SelectBase>
+     * ```
+     * It allows you to use the `optgroup` tag for example.
+     */
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     mode?: "default" | "base";
 } & {

package/dist/Form/Select/SelectBase.d.ts

@@ -1,6 +1,23 @@
 import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.scss";
 import { OptionHTMLAttributes } from "react";
+/**
+ * @deprecated Use Select instead
+ */
 declare const SelectBase: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+    /**
+     * @deprecated Use `children` instead
+     * Instead of
+     * ```jsx
+     * <SelectBase options={[{ value: "1", label: "Option 1" }]} />
+     * ```
+     * you can now do something like :
+     * ```jsx
+     * <SelectBase>
+     *   <option value="1">Option 1</option>
+     * </SelectBase>
+     * ```
+     * It allows you to use the `optgroup` tag for example.
+     */
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     classModifier?: string;
 } & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Form/Select/SelectBase.js

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.scss";
 import { forwardRef, } from "react";
 import { getComponentClassName } from "../../utilities";
+/**
+ * @deprecated Use Select instead
+ */
 const SelectBase = forwardRef(({ options, id, className, classModifier, required, children, ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-form__input-select");
     return (_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { ...otherProps, id: id, className: componentClassName, ref: inputRef, required: classModifier?.includes("required") || required, children: children ??

package/dist/Form/Select/SelectDefaultWithOptions.d.ts

@@ -5,5 +5,19 @@ type Props = ComponentPropsWithRef<typeof SelectBase> & {
     forceDisplayPlaceholder?: boolean;
     placeholder?: string;
 };
+/**
+ * @deprecated Use `SelectDefault` instead
+ * Instead of
+ * ```jsx
+ * <SelectDefaultWithOptions options={[{ value: "1", label: "Option 1" }]} />
+ * ```
+ * you can now do something like :
+ * ```jsx
+ * <SelectDefault>
+ *   <option value="1">Option 1</option>
+ * </SelectDefault>
+ * ```
+ * It allows you to use the `optgroup` tag for example.
+ */
 export declare const SelectDefaultWithOptions: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export {};

package/dist/Form/Select/SelectDefaultWithOptions.js

@@ -1,6 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useId, useMemo, useState, } from "react";
 import { SelectBase } from "./SelectBase";
+/**
+ * @deprecated Use `SelectDefault` instead
+ * Instead of
+ * ```jsx
+ * <SelectDefaultWithOptions options={[{ value: "1", label: "Option 1" }]} />
+ * ```
+ * you can now do something like :
+ * ```jsx
+ * <SelectDefault>
+ *   <option value="1">Option 1</option>
+ * </SelectDefault>
+ * ```
+ * It allows you to use the `optgroup` tag for example.
+ */
 export const SelectDefaultWithOptions = forwardRef(({ onChange, forceDisplayPlaceholder = false, value, placeholder = "- Select -", options, id, ...otherProps }, inputRef) => {
     const [hasHandleChangeOnce, setHasHandleChangeOnce] = useState(false);
     const generatedId = useId();

package/dist/Form/core/FieldForm.js

@@ -138,6 +138,7 @@ export const FieldForm = ({ children, message = "", messageType = MessageTypes.e
         setState,
         setStateMemoryFn,
     ]);
+    // for particular case on particular browers which does not throw onFocus or onBlur event
     const onChange = () => onChangeByStateFn(setState, state?.hasChange);
     const onBlur = () => setState(setStateOnBlurFn());
     const onFocus = () => setState(setStateOnFocusFn({ message, messageType }));

package/dist/Layout/Footer/Footer.d.ts

@@ -5,6 +5,7 @@ type FooterProps = {
     alt?: string;
     icon?: string;
     className?: string;
+    version?: string;
 };
 export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & {
     children?: import("react").ReactNode | undefined;

package/dist/Layout/Footer/Footer.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import logo from "@axa-fr/design-system-slash-css/logo-axa.svg";
 import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
 import { forwardRef } from "react";
-export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children })] }) })));
+export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version && (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] }))] }) })));
 Footer.displayName = "Footer";

package/dist/Layout/Header/NavBar/NavBarItem/NavBarItemBase.js

@@ -8,6 +8,9 @@ export const NavBarItemBase = ({ tabIndex = -1, role = "menuitem", children, has
     useEffect(() => {
         handleLinkFocus(ref?.current, hasFocus, isMenuOpen);
     }, [hasFocus, isMenuOpen]);
+    /* On ajoute la classe permettant définir l'état ouvert sur l'élément
+     * si celui a le focus, si le menu est ouvert et s'il possède des éléments enfants
+     */
     const openClass = useMemo(() => (hasFocus && isMenuOpen && children ? "af-nav__item--open" : ""), [children, hasFocus, isMenuOpen]);
     return (_jsxs("li", { className: `${componentClassName} ${openClass}`, role: "none", onKeyDown: (e) => {
             e.preventDefault();

package/dist/ModalAgent/Modal.js

@@ -3,7 +3,9 @@ import { forwardRef } from "react";
 import { getComponentClassName } from "..";
 const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-modal");
-    return (_jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+    _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
 });
 Modal.displayName = "Modal";
 export { Modal };

package/dist/Popover/AnimatedPopover.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useRef } from "react";
 import { arrow, FloatingArrow, offset, useFloating, } from "@floating-ui/react";
 import { getComponentClassName } from "../utilities";

package/dist/Svg/Svg.js

@@ -14,6 +14,7 @@ export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
         if (hasError) {
             setHasError(false);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [src]);
     useLayoutEffect(() => {
         if (hasError) {
@@ -25,6 +26,8 @@ export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
             const svg = document.createElement("svg");
             parent.appendChild(svg);
             cloneAttributes(root, svg);
+            // Default SVG size was 24px with @material-design-icons/svg. With @material-symbols/svg-400 this is now 48px (with no native way to change it)
+            // In order not to break existing CSS, we manually set the default value back to 24px
             svg.setAttribute("width", width.toString());
             svg.setAttribute("height", height.toString());
             svgInjector(svg, {

package/dist/Table/Pagination/Items.d.ts

@@ -2,10 +2,25 @@ export type Props = {
     id?: string;
     className?: string;
     classModifier?: string;
+    /**
+     * Text displayed before the per-page select
+     */
     displayLabel?: string;
+    /**
+     * Text displayed after the per-page select
+     */
     elementsLabel?: string;
+    /**
+     * Possible values for the number of items displayed per page
+     */
     items?: number[];
+    /**
+     * Number of items displayed per page
+     */
     numberItems?: number;
+    /**
+     * Aria label for the the per-page select
+     */
     selectAriaLabel?: string;
     onChange: (e: {
         value: number;

package/dist/Table/Pagination/Pager.d.ts

@@ -4,11 +4,33 @@ import { PaginationButton } from "./PaginationButton";
 export type PagerComponentProps = Pick<ComponentPropsWithoutRef<typeof PaginationButton>, "onChange"> & {
     className?: string;
     classModifier?: string;
+    /**
+     * Total number of pages in the table
+     */
     numberPages?: number;
+    /**
+     * Current page
+     */
     currentPage?: number;
+    /**
+     * "default" or "light".
+     * Default displays the first, last, previous and next pages.
+     * Light displays only previous and next buttons, and "{currentPage} {ofLabel} {numberPages}"
+     * @default "default"
+     */
     mode?: "default" | "light";
+    /**
+     * Label for the previous button
+     */
     previousLabel?: string;
+    /**
+     * Label for the next button
+     */
     nextLabel?: string;
+    /**
+     * Label for text betweeen current page a total number of pages. Only used in "light" mode
+     * @default "sur"
+     */
     ofLabel?: string;
 };
 declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.d.ts

@@ -5,9 +5,15 @@ type TableProps = ComponentPropsWithoutRef<"table"> & {
 };
 declare const Table: {
     ({ className, classModifier, children, ...othersProps }: TableProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * @deprecated Use Table.THead instead
+     */
     Header: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         classModifier?: string;
     }) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * @deprecated Use Table.TBody instead
+     */
     Body: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         classModifier?: string;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.js

@@ -10,7 +10,13 @@ const Table = ({ className, classModifier, children, ...othersProps }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-table");
     return (_jsx("table", { className: componentClassName, ...othersProps, children: children }));
 };
+/**
+ * @deprecated Use Table.THead instead
+ */
 Table.Header = THead;
+/**
+ * @deprecated Use Table.TBody instead
+ */
 Table.Body = TBody;
 Table.THead = THead;
 Table.TBody = TBody;

package/dist/Tabs/components/TabsStateless.js

@@ -1,4 +1,5 @@
 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 "../..";
 import { Pane } from "./Pane";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
@@ -8,10 +8,11 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
-export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
+export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { File, FileInput, FileTable, type FilePreview } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Number, NumberInput } from "./Form/Number";
 export { Pass, PassInput } from "./Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
@@ -19,7 +20,6 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
 export { Link, type LinkProps } from "./Link/Link";

package/dist/index.js

@@ -1,5 +1,5 @@
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
@@ -8,10 +8,11 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
-export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
+export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { File, FileInput, FileTable } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Number, NumberInput } from "./Form/Number";
 export { Pass, PassInput } from "./Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
@@ -19,7 +20,6 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
 export { Link } from "./Link/Link";

package/dist/utilities/helpers/getComponentClassName.js

@@ -13,6 +13,7 @@ const listClassModifier = (classModifier) => {
 };
 export const getComponentClassName = (className, classModifier, defaultClassName) => {
     const classNameToUse = className || defaultClassName;
+    // Fail fast, when no className or defaultClassName we don't want to loop on modifier
     if (!classNameToUse) {
         return "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.0-alpha.5",
+  "version": "1.2.0",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.0-alpha.5",
+    "@axa-fr/design-system-slash-css": "1.2.0",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },