@axa-fr/canopee-react 1.2.1-alpha.11 → 1.2.1-alpha.12

package/dist/client.d.ts

@@ -61,3 +61,5 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardLF";
 export { List, type ListProps } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListLF";

package/dist/client.js

@@ -60,3 +60,5 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardLF";
 export { List } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListLF";

package/dist/prospect-client/Skeleton/SkeletonApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonCommon.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+type isLoadingAndChildrenProps = {
+    children: ReactNode;
+    isLoading: boolean;
+} | {
+    children?: undefined;
+    isLoading?: boolean;
+};
+export type SkeletonProps = {
+    className?: string;
+    grid: number[][];
+    "aria-busy"?: boolean;
+    "aria-label"?: string;
+    maxCols?: number;
+    colGap?: number;
+    rowGap?: number;
+} & isLoadingAndChildrenProps;
+export declare const Skeleton: ({ className, grid, "aria-busy": ariaBusy, "aria-label": ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export {};

package/dist/prospect-client/Skeleton/SkeletonCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+const CLASS_NAME = "af-skeleton";
+export const Skeleton = ({ className, grid = [], "aria-busy": ariaBusy = true, "aria-label": ariaLabel = "Chargement", maxCols = 12, colGap = 16, rowGap = 8, isLoading = true, children, }) => isLoading ? (_jsx("div", { className: getClassName({
+        baseClassName: `${CLASS_NAME}-container`,
+        className,
+    }), "aria-label": ariaLabel, role: "status", "aria-busy": ariaBusy, style: {
+        "--max-cols": maxCols,
+        "--col-gap": `calc(${colGap} / var(--font-size-base) * 1rem)`,
+        "--row-gap": `calc(${rowGap} / var(--font-size-base) * 1rem)`,
+    }, children: grid.map((cols, indexRow) => cols.map((colSize, indexCol) => (_jsx("div", { style: { "--col-size": colSize }, className: CLASS_NAME }, `${indexRow}-${indexCol}`)))) })) : (children);

package/dist/prospect-client/Skeleton/SkeletonLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/SkeletonList/SkeletonListApollo.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonApollo";
+import { List } from "../List/List/ListApollo";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect-client/SkeletonList/SkeletonListCommon.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import type { SkeletonProps } from "../Skeleton/SkeletonCommon";
+import type { ListProps } from "../List/List/ListCommon";
+export type SkeletonListProps = {
+    lists: {
+        lines?: number;
+        grid: SkeletonProps["grid"];
+    }[];
+    isLoading?: boolean;
+    className?: string;
+} & PropsWithChildren;
+type SkeletonListPropsCommon = SkeletonListProps & {
+    ListComponent: ComponentType<ListProps>;
+    SkeletonComponent: ComponentType<SkeletonProps>;
+};
+export declare const SkeletonListCommon: ({ children, isLoading, lists, className, ListComponent, SkeletonComponent, }: SkeletonListPropsCommon) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};

package/dist/prospect-client/SkeletonList/SkeletonListCommon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SkeletonListCommon = ({ children, isLoading, lists = [], className, ListComponent, SkeletonComponent, }) => isLoading
+    ? lists.map(({ lines = 1, grid }, linesIndex) => (_jsx(ListComponent, { className: className, children: [...Array(lines).keys()].map((_, lineIndex) => (_jsx(SkeletonComponent, { grid: grid }, lineIndex))) }, linesIndex)))
+    : children;

package/dist/prospect-client/SkeletonList/SkeletonListLF.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonLF";
+import { List } from "../List/List/ListLF";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect.d.ts

@@ -57,3 +57,5 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
 export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListApollo";

package/dist/prospect.js

@@ -56,3 +56,5 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardApollo";
 export { List } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.2.1-alpha.11",
+  "version": "1.2.1-alpha.12",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.2.1-alpha.11",
+    "@axa-fr/canopee-css": "1.2.1-alpha.12",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"