@axa-fr/design-system-slash-react 0.2.0-beta.278

package/dist/Pagination/PaginationMobile.client.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-slash-css/dist/Pagination/PaginationMobile.client.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PropsPaginationMobile = {
+    numberPage: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+} & ComponentPropsWithoutRef<"div">;
+export declare const PaginationMobile: ({ numberPage, currentPage, setCurrentPage, }: PropsPaginationMobile) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/PaginationMobile.client.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Pagination/PaginationMobile.client.scss";
+import arrowBackIos from "@material-symbols/svg-400/outlined/arrow_back_ios.svg";
+import arrowForwardIos from "@material-symbols/svg-400/outlined/arrow_forward_ios.svg";
+import { Svg } from "../Svg";
+export const PaginationMobile = ({ numberPage, currentPage, setCurrentPage, }) => {
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === numberPage;
+    return (_jsxs("div", { className: "af-pagination-mobile", children: [_jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage - 1), disabled: isFirstPage, "aria-label": "Page pr\u00E9c\u00E9dente", children: _jsx(Svg, { src: arrowBackIos, className: "arrow" }) }), _jsxs("span", { children: [currentPage, " sur ", numberPage] }), _jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage + 1), disabled: isLastPage, "aria-label": "Page suivant", children: _jsx(Svg, { src: arrowForwardIos, className: "arrow" }) })] }));
+};

package/dist/Stepper/Stepper.client.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import "@axa-fr/design-system-slash-css/dist/Stepper/Stepper.client.scss";
+export type StepperProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    currentSubtitle?: string;
+    currentTitle?: string;
+    nbSteps: 2 | 3 | 4 | 5 | 6;
+    isTitleVisible?: boolean;
+    isSubtitleVisible?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
+export declare const Stepper: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible, isSubtitleVisible, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/Stepper.client.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId } from "react";
+import classNames from "classnames";
+import "@axa-fr/design-system-slash-css/dist/Stepper/Stepper.client.scss";
+const INITIAL_STEPPER_PROGRESS = 10;
+const MAX_STEPPER_PROGRESS = 100;
+export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
+    const stepperId = useId();
+    const getCurrentProgress = useCallback((index) => {
+        if (index < currentStep) {
+            return MAX_STEPPER_PROGRESS;
+        }
+        if (index === currentStep) {
+            if (currentStepProgress === 0) {
+                return INITIAL_STEPPER_PROGRESS;
+            }
+            return currentStepProgress;
+        }
+        return 0;
+    }, [currentStep, currentStepProgress]);
+    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
+};

package/dist/Stepper/Stepper.client.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Stepper } from "./Stepper.client";
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type StoryProps = Omit<ComponentProps<typeof Stepper>, "currentStep" | "currentStepProgress" | "isTitleVisible" | "isSubtitleVisible" | "currentTitle" | "nbSteps"> & {
+    currentStep: number;
+    currentSubtitle: string;
+    currentStepProgress: number;
+    isTitleVisible: boolean;
+    isSubtitleVisible: boolean;
+    currentTitle: string;
+    nbSteps: 2 | 3 | 4 | 5 | 6;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;

package/dist/Stepper/Stepper.client.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stepper } from "./Stepper.client";
+const meta = {
+    component: Stepper,
+    title: "Client/Components/Stepper",
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Playground = {
+    name: "Stepper",
+    render: (props) => (_jsx("div", { style: { minWidth: "70vw" }, children: _jsx(Stepper, { ...props }) })),
+    args: {
+        nbSteps: 3,
+        currentTitle: "Step title",
+        currentStep: 2,
+        currentSubtitle: "Step subtitle",
+        currentStepProgress: 50,
+        isTitleVisible: true,
+        isSubtitleVisible: true,
+    },
+};

package/dist/Steps/Step.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+import { StepLink } from "./StepLink";
+type Props = Omit<ComponentPropsWithoutRef<typeof StepLink>, "href"> & {
+    href?: string;
+    mode?: "link" | "active" | "disabled";
+};
+declare const Step: ({ number, id, title, classModifier, href, onClick, mode, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Step };

package/dist/Steps/Step.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepCurrent } from "./StepCurrent";
+import { StepDisabled } from "./StepDisabled";
+import { StepLink } from "./StepLink";
+const Step = ({ number, id, title, classModifier, href, onClick, mode = "link", className, }) => {
+    switch (mode) {
+        case "link":
+            return (_jsx(StepLink, { id: id, href: href ?? "#", number: number, classModifier: classModifier, className: className, title: title, onClick: onClick }));
+        case "active":
+            return (_jsx(StepCurrent, { id: id, title: title, classModifier: classModifier, className: className, number: number }));
+        default:
+            return (_jsx(StepDisabled, { id: id, title: title, classModifier: classModifier, className: className, number: number }));
+    }
+};
+export { Step };

package/dist/Steps/StepBase.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type Props = {
+    id: string;
+    title: string;
+    children?: ReactNode;
+    className?: string;
+    classModifier?: string;
+};
+declare const StepBase: ({ children, id, title, className, classModifier }: Props) => import("react/jsx-runtime").JSX.Element;
+export { StepBase };

package/dist/Steps/StepBase.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../agent";
+const StepBase = ({ children, id, title, className, classModifier }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-steps-list-step");
+    return (_jsx("li", { className: componentClassName, title: title, children: children }, id));
+};
+export { StepBase };

package/dist/Steps/StepCurrent.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+import { StepNoLink } from "./StepNoLink";
+type Props = ComponentPropsWithoutRef<typeof StepNoLink>;
+declare const StepCurrent: ({ className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { StepCurrent };

package/dist/Steps/StepCurrent.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepNoLink } from "./StepNoLink";
+const StepCurrent = ({ className = "on af-steps-list-step", ...otherProps }) => _jsx(StepNoLink, { className: className, ...otherProps });
+export { StepCurrent };

package/dist/Steps/StepDisabled.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+import { StepNoLink } from "./StepNoLink";
+type Props = ComponentPropsWithoutRef<typeof StepNoLink>;
+declare const StepDisabled: ({ className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { StepDisabled };

package/dist/Steps/StepDisabled.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepNoLink } from "./StepNoLink";
+const StepDisabled = ({ className = "disabled af-steps-list-step", ...otherProps }) => _jsx(StepNoLink, { className: className, ...otherProps });
+export { StepDisabled };

package/dist/Steps/StepLink.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { StepBase } from "./StepBase";
+import type { CustomClickEvent } from "./types";
+type Props = ComponentPropsWithoutRef<typeof StepBase> & {
+    href: string;
+    number?: ReactNode;
+    onClick?: (e: CustomClickEvent) => void;
+};
+declare const StepLink: ({ id, href, number, title, className, onClick, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { StepLink };

package/dist/Steps/StepLink.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StepBase } from "./StepBase";
+const StepLink = ({ id, href, number, title, className = "past af-steps-list-step", onClick, ...otherProps }) => (_jsx(StepBase, { id: id, className: `${className} ${number ? "number" : ""}`, title: title, ...otherProps, children: _jsxs("a", { className: "af-steps-list-step__label", href: href, onClick: (e) => {
+            e.preventDefault();
+            onClick?.({ href, id, title, number });
+        }, children: [Boolean(number) && (_jsx("div", { className: "af-steps-list-step__number", children: number })), _jsx("div", { className: "af-steps-list-step__title", children: title })] }) }));
+export { StepLink };

package/dist/Steps/StepNoLink.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { StepBase } from "./StepBase";
+type Props = ComponentPropsWithoutRef<typeof StepBase> & {
+    number?: ReactNode;
+};
+declare const StepNoLink: ({ number, title, className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { StepNoLink };

package/dist/Steps/StepNoLink.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StepBase } from "./StepBase";
+const StepNoLink = ({ number, title, className = "af-steps-list-step", ...otherProps }) => (_jsx(StepBase, { className: `${className} ${number ? "number" : ""}`, title: title, ...otherProps, children: _jsxs("div", { className: "af-steps-list-step__label", children: [Boolean(number) && (_jsx("div", { className: "af-steps-list-step__number", children: number })), _jsx("div", { className: "af-steps-list-step__title", children: title })] }) }));
+export { StepNoLink };

package/dist/Steps/Steps.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    className?: string;
+    classModifier?: string;
+};
+declare const Steps: ({ children, className, classModifier, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Steps };

package/dist/Steps/Steps.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../agent";
+const defaultClassName = "af-steps-new";
+const Steps = ({ children, className = defaultClassName, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsx("div", { className: componentClassName, children: _jsx("ol", { className: "af-steps-list", children: children }) }));
+};
+export { Steps };

package/dist/Steps/Steps.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, type StoryObj } from "@storybook/react";
+import { Steps } from ".";
+import type { CustomClickEvent } from "./types";
+type StoryProps = React.ComponentProps<typeof Steps> & {
+    onClick: (e: CustomClickEvent | React.MouseEvent) => void;
+    mode?: "link" | "active" | "disabled";
+};
+declare const meta: Meta<StoryProps>;
+export default meta;
+type Story = StoryObj<StoryProps>;
+export declare const NewStepsStory: Story;

package/dist/Steps/Steps.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Step, StepBase, Steps } from ".";
+const meta = {
+    component: Steps,
+    title: "Agent/Components/Steps",
+    args: {
+        mode: "link",
+    },
+    argTypes: {
+        onClick: { action: "onClick" },
+        mode: {
+            options: ["link", "active", "disabled"],
+            control: {
+                type: "select",
+            },
+        },
+    },
+};
+export default meta;
+const withPreventDefaultClick = (next) => (e) => {
+    e.preventDefault();
+    next?.(e);
+};
+export const NewStepsStory = {
+    name: "New Design Steps",
+    render: ({ classModifier, className, mode, onClick }) => (_jsxs(Steps, { classModifier: classModifier, className: className, children: [_jsx(Step, { id: "id1", href: "/etape1", onClick: onClick, number: "1", mode: mode, title: "Previous step" }), _jsx(Step, { id: "id2", href: "/etape2", number: "2", onClick: onClick, title: "Previous step", mode: "link" }), _jsx(Step, { id: "id3", number: "3", onClick: onClick, title: "Current step", mode: "active" }), _jsx(StepBase, { id: "idf4", title: "Un titre", children: _jsxs("a", { className: "af-steps-list-step__label", href: "#/", onClick: withPreventDefaultClick(onClick), children: [_jsx("span", { className: "af-steps-list-step__number", children: _jsx("i", { className: "glyphicon glyphicon-ok" }) }), _jsx("span", { className: "af-steps-list-step__title", children: "Custom" })] }) }), _jsx(Step, { id: "id5", number: "5", title: "Final step", mode: "disabled" })] })),
+    args: {
+        classModifier: "",
+        className: "",
+    },
+};

package/dist/Steps/__tests__/Step.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Steps/__tests__/Step.spec.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { Step, StepBase, Steps } from "../index";
+describe("<Steps>", () => {
+    it("renders Steps correctly", () => {
+        const { asFragment } = render(_jsxs(Steps, { children: [_jsx(Step, { id: "id1", href: "/etape1", onClick: vi.fn(), number: "1", mode: "link", title: "Previous step" }), _jsx(StepBase, { id: "idf4", title: "Un titre", children: _jsxs("a", { className: "af-steps-list-step__label", href: "/#", onClick: vi.fn(), children: [_jsx("span", { className: "af-steps-list-step__number", children: _jsx("i", { className: "glyphicon glyphicon-ok" }) }), _jsx("span", { className: "af-steps-list-step__title", children: "Custom" })] }) }), _jsx(Step, { id: "id5", number: "5", title: "Final step", mode: "disabled" })] }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

package/dist/Steps/index.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
+export { Step } from "./Step";
+export { StepBase } from "./StepBase";
+export { Steps } from "./Steps";

package/dist/Steps/index.js

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
+export { Step } from "./Step";
+export { StepBase } from "./StepBase";
+export { Steps } from "./Steps";

package/dist/Svg/Svg.agent.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import "./Svg.stories.css";
+import { Svg } from "./index";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj<typeof Svg>;
+export declare const Headphones: StoryObj<typeof Svg>;

package/dist/Svg/Svg.agent.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import headphonesIcons from "@material-symbols/svg-400/outlined/headphones.svg";
+import homeIcons from "@material-symbols/svg-400/outlined/home.svg";
+import saveIcons from "@material-symbols/svg-400/outlined/save.svg";
+import closeIcons from "@material-symbols/svg-400/outlined/close.svg";
+import "./Svg.stories.css";
+import { Svg } from "./index";
+const meta = {
+    title: "Agent/Components/Svg",
+    component: Svg,
+};
+export default meta;
+const MODIFIERS = {
+    "/public/headphones.svg": headphonesIcons,
+    "/public/home.svg": homeIcons,
+    "/public/save.svg": saveIcons,
+    "/public/close.svg": closeIcons,
+    "simulate svg error": "foo",
+};
+export const Default = {
+    name: "Svg",
+    render: ({ src, ...args }) => _jsx(Svg, { src: MODIFIERS[src], ...args }),
+    args: {
+        src: "/public/headphones.svg",
+        fill: "#00008f",
+        alt: "error",
+    },
+    argTypes: {
+        src: {
+            options: Object.keys(MODIFIERS),
+            control: { type: "select" },
+        },
+    },
+};
+export const Headphones = {
+    name: "Svg Headphones",
+    render: () => _jsx(Svg, { src: headphonesIcons, fill: "#00008f" }),
+};

package/dist/Svg/Svg.client.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import "./Svg.stories.css";
+import { Svg } from "./index";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj<typeof Svg>;
+export declare const Headphones: StoryObj<typeof Svg>;

package/dist/Svg/Svg.client.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import headphonesIcons from "@material-symbols/svg-400/outlined/headphones.svg";
+import homeIcons from "@material-symbols/svg-400/outlined/home.svg";
+import saveIcons from "@material-symbols/svg-400/outlined/save.svg";
+import closeIcons from "@material-symbols/svg-400/outlined/close.svg";
+import "./Svg.stories.css";
+import { Svg } from "./index";
+const meta = {
+    title: "Client/Components/Svg",
+    component: Svg,
+};
+export default meta;
+const MODIFIERS = {
+    "/public/headphones.svg": headphonesIcons,
+    "/public/home.svg": homeIcons,
+    "/public/save.svg": saveIcons,
+    "/public/close.svg": closeIcons,
+    "simulate svg error": "foo",
+};
+export const Default = {
+    name: "Svg",
+    render: ({ src, ...args }) => _jsx(Svg, { src: MODIFIERS[src], ...args }),
+    args: {
+        src: "/public/headphones.svg",
+        fill: "#00008f",
+        alt: "error",
+    },
+    argTypes: {
+        src: {
+            options: Object.keys(MODIFIERS),
+            control: { type: "select" },
+        },
+    },
+};
+export const Headphones = {
+    name: "Svg Headphones",
+    render: () => _jsx(Svg, { src: headphonesIcons, fill: "#00008f" }),
+};

package/dist/Svg/Svg.d.ts

@@ -0,0 +1,7 @@
+import { type SVGAttributes } from "react";
+type SvgProps = SVGAttributes<SVGSVGElement> & {
+    src: string;
+    alt?: string;
+};
+export declare const Svg: ({ src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Svg/Svg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { svgInjector } from "./svgInjector";
+const cloneAttributes = (from, to) => {
+    const attributes = from.getAttributeNames();
+    attributes.forEach((attribute) => {
+        to.setAttribute(attribute, from.getAttribute(attribute));
+    });
+};
+export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
+    const rootRef = useRef(null);
+    const [hasError, setHasError] = useState(false);
+    useLayoutEffect(() => {
+        if (hasError) {
+            setHasError(false);
+        }
+    }, [src]);
+    useLayoutEffect(() => {
+        if (hasError) {
+            return;
+        }
+        const root = rootRef.current;
+        if (root) {
+            const parent = document.createElement("div");
+            const svg = document.createElement("svg");
+            parent.appendChild(svg);
+            cloneAttributes(root, svg);
+            svg.setAttribute("width", width.toString());
+            svg.setAttribute("height", height.toString());
+            svgInjector(svg, {
+                afterEach: (error, svgInject) => {
+                    if (error) {
+                        setHasError(true);
+                    }
+                    if (svgInject) {
+                        root.innerHTML = svgInject.innerHTML;
+                        cloneAttributes(svgInject, root);
+                    }
+                },
+            });
+        }
+    }, [src, width, height, hasError]);
+    if (hasError) {
+        return alt ? (_jsx("span", { ...props, children: alt })) : null;
+    }
+    return _jsx("svg", { ref: rootRef, "data-src": src, ...props });
+};

package/dist/Svg/__tests__/Svg.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Svg/__tests__/Svg.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { Svg } from "../Svg";
+const mocks = vi.hoisted(() => {
+    return {
+        SVGInjector: vi.fn(),
+    };
+});
+vi.mock("@tanem/svg-injector", () => mocks);
+describe("<Svg />", () => {
+    describe("render", () => {
+        it("renders correctly", () => {
+            mocks.SVGInjector.mockImplementationOnce((el, { afterEach }) => {
+                afterEach(undefined, el);
+            });
+            const svgSrc = "svgSrc";
+            render(_jsx(Svg, { src: "svgSrc", alt: "foo", "aria-label": "test" }));
+            const svg = screen.getByLabelText("test");
+            expect(svg).toBeInTheDocument();
+            expect(svg).toHaveAttribute("data-src", svgSrc);
+        });
+        it("renders fallback when src not found", async () => {
+            mocks.SVGInjector.mockImplementationOnce((_, { afterEach }) => {
+                afterEach("error");
+            });
+            render(_jsx(Svg, { src: "fake", alt: "foo", "aria-label": "test" }));
+            const svg = screen.getByText("foo");
+            expect(svg).toBeInTheDocument();
+        });
+    });
+    describe("A11Y", () => {
+        it("shouldn't have an accessibility violation <Svg />", async () => {
+            const { container } = render(_jsx(Svg, { src: "svgSrc", alt: "foo" }));
+            expect(await axe(container)).toHaveNoViolations();
+        });
+    });
+});

package/dist/Svg/index.d.ts

@@ -0,0 +1 @@
+export { Svg } from "./Svg";

package/dist/Svg/index.js

@@ -0,0 +1 @@
+export { Svg } from "./Svg";

package/dist/Svg/svgInjector.d.ts

@@ -0,0 +1,12 @@
+import { type AfterAll, type BeforeEach, type Errback, type EvalScripts } from "@tanem/svg-injector";
+type Options = {
+    afterAll?: AfterAll;
+    afterEach?: Errback;
+    beforeEach?: BeforeEach;
+    cacheRequests?: boolean;
+    evalScripts?: EvalScripts;
+    httpRequestWithCredentials?: boolean;
+    renumerateIRIElements?: boolean;
+};
+export declare const svgInjector: (element: HTMLElement | SVGSVGElement | null, { beforeEach, ...options }?: Options) => void;
+export {};

package/dist/Svg/svgInjector.js

@@ -0,0 +1,28 @@
+import { SVGInjector, } from "@tanem/svg-injector";
+import DOMPurify from "dompurify";
+const attributesToRestore = ["fill", "stroke"];
+const restoreAttributes = (element, svg) => {
+    const attributes = {};
+    element?.getAttributeNames().forEach((attribute) => {
+        if (attribute.startsWith("aria-") ||
+            attributesToRestore.includes(attribute)) {
+            attributes[attribute] = element.getAttribute(attribute);
+        }
+    });
+    Object.keys(attributes).forEach((attribute) => {
+        svg.setAttribute(attribute, attributes[attribute]);
+    });
+};
+export const svgInjector = (element, { beforeEach = () => { }, ...options } = {}) => {
+    SVGInjector(element, {
+        ...options,
+        beforeEach: (svg) => {
+            DOMPurify.sanitize(svg, {
+                USE_PROFILES: { svg: true, svgFilters: true },
+                IN_PLACE: true,
+            });
+            restoreAttributes(element, svg);
+            beforeEach(svg);
+        },
+    });
+};

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

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

package/dist/Table/Pagination/Items.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { getComponentClassName } from "../../Form/core";
+const Items = ({ className, classModifier, onChange, displayLabel = "Afficher", elementsLabel = "éléments", 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 })] }) })] }) }) }));
+};
+export { Items };

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

@@ -0,0 +1,10 @@
+type LiProps = {
+    isVisible?: boolean;
+    active?: boolean;
+    value: number;
+    onChange: (e: {
+        value: number;
+    }) => void;
+};
+declare const Li: ({ isVisible, active, value, ...props }: LiProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Li };

package/dist/Table/Pagination/Li.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const onClick = ({ onChange, value }) => (event) => {
+    event.preventDefault();
+    onChange({
+        value: Number(value),
+    });
+};
+const Li = ({ isVisible, active, value, ...props }) => {
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx("li", { className: classNames("af-pager__item", {
+            "af-pager__item--active": active,
+        }), children: _jsx("a", { className: "af-pager__item-link", href: "/#", onClick: onClick({ ...props, value }), children: _jsx("span", { children: value }) }) }));
+};
+export { Li };

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type LiPointProps = {
+    isVisible?: boolean;
+    children?: ReactNode;
+};
+declare const LiPoint: ({ isVisible, children }: LiPointProps) => import("react/jsx-runtime").JSX.Element | null;
+export { LiPoint };

package/dist/Table/Pagination/LiPoint.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LiPoint = ({ isVisible, children }) => {
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx("li", { className: "af-pager__item af-pager__item--disabled", children: _jsx("span", { className: "af-pager__item-link", children: children }) }));
+};
+export { LiPoint };