@axa-fr/design-system-slash-react 1.1.1-alpha.98 → 1.2.0-RC.1

package/dist/Link/LinkAnchor.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { linkClassName } from "./linkClassName";
+const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, ...restProps }, ref) => {
+    const finalClassName = classnames(linkClassName, className);
+    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, ...restProps, children: [leftIcon, children, rightIcon] }));
+});
+LinkAnchor.displayName = "LinkAnchor";
+export { LinkAnchor };

package/dist/Link/linkClassName.d.ts

@@ -0,0 +1 @@
+export declare const linkClassName = "af-slash-link";

package/dist/Link/linkClassName.js

@@ -0,0 +1 @@
+export const linkClassName = "af-slash-link";

package/dist/ModalAgent/Modal.js

@@ -3,7 +3,7 @@ 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-describedby": 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 (_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/Restitution/HeaderRestitution.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getComponentClassName } from "../utilities";
 export const HeaderRestitution = ({ title, subtitle, rightTitle, className, classModifier, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-restitution__header");
-    return (_jsxs("header", { className: componentClassName, children: [_jsx("div", { className: "af-restitution__header-left", children: _jsxs("div", { className: "af-restitution__title", children: [_jsx("span", { className: "af-restitution__title-main", children: title }), subtitle ? (_jsx("span", { className: "af-restitution__title-subtitle", children: subtitle })) : null] }) }), rightTitle ? (_jsx("div", { className: "af-restitution__header-right", children: _jsx("span", { className: "af-restitution__title", children: rightTitle }) })) : null] }));
+    return (_jsxs("header", { className: componentClassName, children: [_jsx("div", { className: "af-restitution__header-left", children: _jsxs("h3", { className: "af-restitution__title", children: [_jsx("span", { className: "af-restitution__title-main", children: title }), subtitle ? (_jsx("span", { className: "af-restitution__title-subtitle", children: subtitle })) : null] }) }), rightTitle ? (_jsx("div", { className: "af-restitution__header-right", children: _jsx("span", { className: "af-restitution__title", children: rightTitle }) })) : null] }));
 };

package/dist/Restitution/SectionRestitutionTitle.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getComponentClassName } from "../utilities";
 export const SectionRestitutionTitle = ({ title, className, classModifier, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content-title");
-    return _jsx("div", { className: componentClassName, children: title });
+    return _jsx("h4", { className: componentClassName, children: title });
 };

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

@@ -6,9 +6,10 @@ export type Props = {
     elementsLabel?: string;
     items?: number[];
     numberItems?: number;
+    selectAriaLabel?: string;
     onChange: (e: {
         value: number;
     }) => void;
 };
-declare const Items: ({ className, classModifier, onChange, displayLabel, elementsLabel, id, items, numberItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Items: ({ className, classModifier, onChange, displayLabel, elementsLabel, selectAriaLabel, id, items, numberItems, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Items };

package/dist/Table/Pagination/Items.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { getComponentClassName } from "../../utilities";
-const Items = ({ className, classModifier, onChange, displayLabel = "Afficher", elementsLabel = "éléments", id, items = [5, 10, 25, 50, 100], numberItems = 10, }) => {
+import { Select } from "../../Form/Select";
+const Items = ({ className, classModifier, onChange, displayLabel = "Afficher", elementsLabel = "éléments", selectAriaLabel = "Modifier le nombre d'éléments à afficher dans le tableau", id, items = [5, 10, 25, 50, 100], numberItems = 10, }) => {
     const defaultIdName = useId();
     const newId = id ?? defaultIdName;
     const componentClassName = getComponentClassName(className, classModifier, "af-paging__form");
-    return (_jsx("div", { className: "af-paging__limit", children: _jsx("form", { className: componentClassName, children: _jsxs("div", { className: "af-form__group", children: [_jsx("div", { className: "col col-sm-2 col-md-2 col-lg-2 col-xl-2", children: _jsx("label", { className: "af-form__group-label", htmlFor: newId, children: displayLabel }) }), _jsx("div", { className: "col col-sm-10 col-md-10 col-lg-10 col-xl-10", children: _jsxs("div", { className: "af-form__select", children: [_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { id: newId, className: "af-form__input-select", value: numberItems, onChange: (e) => {
-                                                e.preventDefault();
-                                                onChange({ value: Number(e.target.value) });
-                                            }, children: items.map((item) => (_jsx("option", { value: item, children: item }, item))) }), _jsx("span", { className: "glyphicon glyphicon-menu-down" })] }), _jsx("span", { className: "af-form__input-cmplt", children: elementsLabel })] }) })] }) }) }));
+    return (_jsx("div", { className: "af-paging__limit", children: _jsx("form", { className: componentClassName, children: _jsxs("div", { className: "af-form__group", children: [_jsx("div", { className: "col col-sm-2 col-md-2 col-lg-2 col-xl-2", children: _jsx("label", { className: "af-form__group-label", htmlFor: newId, children: displayLabel }) }), _jsxs("div", { className: "col col-sm-10 col-md-10 col-lg-10 col-xl-10", children: [_jsx(Select, { id: newId, value: numberItems, mode: "base", options: items.map((item) => ({
+                                    label: item.toString(),
+                                    value: item.toString(),
+                                })), onChange: (e) => {
+                                    e.preventDefault();
+                                    onChange({ value: Number(e.target.value) });
+                                }, "aria-label": selectAriaLabel }), _jsx("span", { className: "af-form__input-cmplt", children: elementsLabel })] })] }) }) }));
 };
 export { Items };

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

@@ -10,5 +10,5 @@ type OnChangePager = (e: {
 export type Props = Omit<PagingComponentProps, "onChange"> & {
     onChange?: OnChangePager;
 };
-declare const Paging: ({ className, classModifier, currentPage, displayLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Paging: ({ className, classModifier, currentPage, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Paging };

package/dist/Table/Pagination/Paging.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { getComponentClassName } from "../..";
 import { Items } from "./Items";
 import { Pager } from "./Pager";
-const Paging = ({ className, classModifier, currentPage = 1, displayLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
+const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-paging");
     const handleChangeItems = useCallback((e) => onChange &&
         onChange({
@@ -16,6 +16,6 @@ const Paging = ({ className, classModifier, currentPage = 1, displayLabel, eleme
             numberItems,
             page: e.value,
         }), [numberItems, onChange]);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectAriaLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
 };
 export { Paging };

package/dist/Title/Title.d.ts

@@ -1,9 +1,11 @@
 import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
-import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import { ComponentPropsWithRef, PropsWithChildren, ReactElement } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {
     classModifier?: string;
     heading?: Headings;
+    contentLeft?: ReactElement;
+    contentRight?: ReactElement;
 };
 export declare const Title: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TitleProps>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/dist/Title/Title.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
-import { forwardRef } from "react";
+import { forwardRef, } from "react";
 import { getComponentClassName } from "../utilities";
-export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-title");
-    return (_jsx(Heading, { ref: ref, className: componentClassName, ...otherProps, children: children }));
+const baseClass = "af-title";
+export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", contentLeft, contentRight, ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, baseClass);
+    return (_jsxs("div", { className: `${baseClass}--container`, children: [_jsxs(Heading, { ref: ref, className: componentClassName, ...otherProps, children: [children, contentLeft] }), contentRight ? (_jsx("div", { className: "content-right", children: contentRight })) : null] }));
 });
 Title.displayName = "Title";

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+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/tokens.css";
 import "@fontsource/source-sans-pro";

package/dist/index.js

@@ -1,3 +1,4 @@
+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/tokens.css";
 import "@fontsource/source-sans-pro";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.1.1-alpha.98",
+  "version": "1.2.0-RC.1",
   "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.1.1-alpha.98",
+    "@axa-fr/design-system-slash-css": "1.2.0-RC.1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -57,8 +57,8 @@
     }
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.2",
-    "@fontsource/source-sans-pro": "^5.0.8",
+    "@floating-ui/react": "^0.27.8",
+    "@fontsource/source-sans-pro": "^5.2.5",
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",