@axa-fr/design-system-apollo-react 3.1.2-alpha.2 → 3.1.2-alpha.3

package/dist/Pagination/ItemPagination/ItemPaginationApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/ItemPagination/ItemPaginationApollo.css";
+export { type ItemPaginationCommonProps as ItemPaginationProps } from "./ItemPaginationCommon";
+export declare const ItemPagination: <T extends import("react").ElementType = "a">({ as, page, isCurrentPage, className, ...props }: import("./ItemPaginationCommon").ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/ItemPagination/ItemPaginationApollo.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/ItemPagination/ItemPaginationApollo.css";
+import { ItemPaginationCommon } from "./ItemPaginationCommon";
+export const ItemPagination = ItemPaginationCommon;

package/dist/Pagination/ItemPagination/ItemPaginationCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ElementType } from "react";
+import { type PolymorphicComponent } from "../../utilities/types/PolymorphicComponent";
+export declare const ELLIPSIS = "...";
+type ItemPaginationCustomProps = {
+    page: number | typeof ELLIPSIS;
+    isCurrentPage: boolean;
+};
+export type ItemPaginationCommonProps<T extends ElementType> = PolymorphicComponent<T, ItemPaginationCustomProps>;
+export declare const ItemPaginationCommon: <T extends ElementType = "a">({ as, page, isCurrentPage, className, ...props }: ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/ItemPagination/ItemPaginationCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../../utilities/getClassName";
+export const ELLIPSIS = "...";
+export const ItemPaginationCommon = ({ as, page, isCurrentPage, className, ...props }) => {
+    const Component = page === ELLIPSIS ? "span" : as || "a";
+    return (_jsx(Component, { href: Component === "a" ? `/${page}` : undefined, type: Component === "button" ? "button" : undefined, "aria-current": Component === "a" && isCurrentPage ? "page" : undefined, className: getClassName({
+            baseClassName: "af-item-pagination",
+            className,
+            modifiers: [isCurrentPage ? "current" : undefined],
+        }), ...props, children: page }));
+};

package/dist/Pagination/ItemPagination/ItemPaginationLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/ItemPagination/ItemPaginationLF.css";
+export { type ItemPaginationCommonProps as ItemPaginationProps } from "./ItemPaginationCommon";
+export declare const ItemPagination: <T extends import("react").ElementType = "a">({ as, page, isCurrentPage, className, ...props }: import("./ItemPaginationCommon").ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/ItemPagination/ItemPaginationLF.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/ItemPagination/ItemPaginationLF.css";
+import { ItemPaginationCommon } from "./ItemPaginationCommon";
+export const ItemPagination = ItemPaginationCommon;

package/dist/Pagination/Pagination.helper.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType } from "react";
+import type { ItemPaginationCommonProps } from "./ItemPagination/ItemPaginationCommon";
+export type getItemsProps = {
+    numberPages: number;
+    onChangePage: (page: number) => void;
+    currentPage: number;
+    asItem?: ElementType;
+};
+export declare const getItems: ({ numberPages, currentPage, asItem, onChangePage, }: getItemsProps) => ItemPaginationCommonProps<ElementType>[];

package/dist/Pagination/Pagination.helper.js

@@ -0,0 +1,34 @@
+import { ELLIPSIS } from "./ItemPagination/ItemPaginationCommon";
+const MAX_PAGE = 7;
+const ellipsisItem = {
+    page: ELLIPSIS,
+    isCurrentPage: false,
+};
+export const getItems = ({ numberPages, currentPage, asItem, onChangePage, }) => {
+    const items = Array.from({ length: numberPages }, (_, index) => ({
+        page: index + 1,
+        isCurrentPage: index + 1 === currentPage,
+        as: asItem,
+        onClick: () => onChangePage(index + 1),
+    }));
+    if (numberPages <= MAX_PAGE) {
+        return items;
+    }
+    if (currentPage && currentPage < MAX_PAGE - 1) {
+        return items.toSpliced(MAX_PAGE - 1, numberPages - 1, ellipsisItem, items[numberPages - 1]);
+    }
+    if (currentPage && currentPage > numberPages - (MAX_PAGE - 2)) {
+        return [
+            items[0],
+            ellipsisItem,
+            ...items.toSpliced(0, numberPages - (MAX_PAGE - 1)),
+        ];
+    }
+    return [
+        items[0],
+        ellipsisItem,
+        ...items.toSpliced(0, currentPage - 2).toSpliced(3, numberPages - 1),
+        ellipsisItem,
+        items[numberPages - 1],
+    ];
+};

package/dist/Pagination/PaginationApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/PaginationApollo.css";
+import { type PaginationProps } from "./PaginationCommon";
+export { type PaginationProps } from "./PaginationCommon";
+export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/PaginationApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Pagination/PaginationApollo.css";
+import { ItemPagination } from "./ItemPagination/ItemPaginationApollo";
+import { PaginationCommon } from "./PaginationCommon";
+export const Pagination = (props) => (_jsx(PaginationCommon, { ...props, ItemPaginationComponent: ItemPagination }));

package/dist/Pagination/PaginationCommon.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ComponentType, type ComponentPropsWithoutRef } from "react";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ItemPaginationCommon } from "./ItemPagination/ItemPaginationCommon";
+import { type getItemsProps } from "./Pagination.helper";
+export type PaginationProps = getItemsProps & ComponentPropsWithoutRef<"nav"> & {
+    hidePrevNext?: boolean;
+    prevButtonProps?: ComponentProps<typeof ClickIcon>;
+    nextButtonProps?: ComponentProps<typeof ClickIcon>;
+};
+type PaginationCommonProps = PaginationProps & {
+    ItemPaginationComponent: ComponentType<ComponentProps<typeof ItemPaginationCommon>>;
+};
+export declare const PaginationCommon: ({ numberPages, onChangePage, className, currentPage, asItem, hidePrevNext, "aria-label": ariaLabel, ItemPaginationComponent, prevButtonProps, nextButtonProps, }: PaginationCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/PaginationCommon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevronBackward from "@material-symbols/svg-400/rounded/chevron_backward.svg";
+import chevronForward from "@material-symbols/svg-400/rounded/chevron_forward.svg";
+import { getClassName } from "../utilities/getClassName";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ELLIPSIS, } from "./ItemPagination/ItemPaginationCommon";
+import { getItems } from "./Pagination.helper";
+export const PaginationCommon = ({ numberPages = 1, onChangePage, className, currentPage = 1, asItem, hidePrevNext = false, "aria-label": ariaLabel = "Pagination", ItemPaginationComponent, prevButtonProps, nextButtonProps, }) => {
+    const items = getItems({
+        numberPages,
+        currentPage,
+        asItem,
+        onChangePage,
+    });
+    return (_jsx("nav", { className: getClassName({
+            baseClassName: "af-pagination",
+            className,
+            modifiers: [hidePrevNext ? "hide-prev-next" : undefined],
+        }), "aria-label": ariaLabel, children: _jsxs("ol", { className: "af-pagination-list", children: [_jsx("li", { children: _jsx(ClickIcon, { src: chevronBackward, onClick: () => onChangePage(currentPage - 1), disabled: currentPage === 1, "aria-label": "Page pr\u00E9c\u00E9dente", ...prevButtonProps }) }), _jsx("li", { children: _jsx("span", { className: "af-pagination-counter", children: `Page ${currentPage} sur ${numberPages}` }) }), items.map((item, index) => (_jsx("li", { children: _jsx(ItemPaginationComponent, { ...item }) }, item.page === ELLIPSIS ? `ellipsis-${index}` : item.page))), _jsx("li", { children: _jsx(ClickIcon, { src: chevronForward, onClick: () => onChangePage(currentPage + 1), disabled: currentPage === numberPages, "aria-label": "Page suivante", ...nextButtonProps }) })] }) }));
+};

package/dist/Pagination/PaginationLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Pagination/PaginationLF.css";
+import { type PaginationProps } from "./PaginationCommon";
+export { type PaginationProps } from "./PaginationCommon";
+export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/PaginationLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Pagination/PaginationLF.css";
+import { ItemPagination } from "./ItemPagination/ItemPaginationLF";
+import { PaginationCommon } from "./PaginationCommon";
+export const Pagination = (props) => (_jsx(PaginationCommon, { ...props, ItemPaginationComponent: ItemPagination }));

package/dist/index.d.ts

@@ -52,3 +52,5 @@ export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
+export { Pagination } from "./Pagination/PaginationApollo";
+export { ItemPagination, type ItemPaginationProps, } from "./Pagination/ItemPagination/ItemPaginationApollo";

package/dist/index.js

@@ -51,3 +51,5 @@ export { TabBar, tabBarDirection, } from "./TabBar/TabBarApollo";
 export { Tag, tagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
+export { Pagination } from "./Pagination/PaginationApollo";
+export { ItemPagination, } from "./Pagination/ItemPagination/ItemPaginationApollo";

package/dist/indexLF.d.ts

@@ -56,3 +56,5 @@ export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
+export { Pagination } from "./Pagination/PaginationLF";
+export { ItemPagination, type ItemPaginationProps, } from "./Pagination/ItemPagination/ItemPaginationLF";

package/dist/indexLF.js

@@ -55,3 +55,5 @@ export { TabBar, tabBarDirection, } from "./TabBar/TabBarLF";
 export { Tag, tagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
+export { Pagination } from "./Pagination/PaginationLF";
+export { ItemPagination, } from "./Pagination/ItemPagination/ItemPaginationLF";

package/dist/utilities/types/PolymorphicComponent.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef, ElementType } from "react";
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
+export type PolymorphicComponent<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithRef<C>, keyof Props | "as"> & {
+    as?: C;
+} & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

package/dist/utilities/types/PolymorphicComponent.js

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

package/package.json

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