@axa-fr/canopee-react 1.7.1-alpha.16 → 1.7.1-alpha.17

package/dist/prospect-client/Form/FileUpload/ItemFile/ItemFileApollo.d.ts

@@ -1,3 +1,4 @@
 import { type ItemFileProps } from "./ItemFileCommon";
+import "@axa-fr/canopee-css/prospect/ContentItemMono/ContentItemMonoApollo.css";
 import "@axa-fr/canopee-css/prospect/Form/FileUpload/ItemFile/ItemFileApollo.css";
 export declare const ItemFile: (props: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/FileUpload/ItemFile/ItemFileApollo.js

@@ -6,5 +6,6 @@ import { Icon } from "../../../Icon/IconApollo";
 import { Spinner } from "../../../Spinner/SpinnerApollo";
 import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
 import { ItemFileCommon } from "./ItemFileCommon";
+import "@axa-fr/canopee-css/prospect/ContentItemMono/ContentItemMonoApollo.css";
 import "@axa-fr/canopee-css/prospect/Form/FileUpload/ItemFile/ItemFileApollo.css";
 export const ItemFile = (props) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, ClickIconComponent: ClickIcon, removeIcon: deleteIcon, previewIcon: visibilityIcon, ...props }));

package/dist/prospect-client/Form/FileUpload/ItemFile/ItemFileCommon.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
 import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
-import {} from "react";
+import { useMemo, } from "react";
+import { ContentItemMonoCore } from "../../../ContentItemMono/ContentItemMonoCore";
 import { getClassName } from "../../../utilities/getClassName";
 const BASE_UNIT = 1000;
 const BYTE_UNITS = ["Ko", "Mo", "Go"];
@@ -19,9 +20,10 @@ export const ItemFileCommon = ({ file, isLoading, errorMessage, className, onRem
     const handleClick = (callback) => (e) => {
         callback(file, e);
     };
+    const statusIndicator = useMemo(() => isLoading && !hasError ? (_jsx(ItemSpinnerComponent, { size: 24 })) : (_jsx(ItemIconComponent, { size: "S", src: hasError ? errorIcon : validationIcon })), [ItemIconComponent, ItemSpinnerComponent, hasError, isLoading]);
     return (_jsxs("section", { className: getClassName({
             baseClassName: "af-item-file",
             modifiers: [hasError && "error"],
             className,
-        }), "aria-busy": isLoading ? true : undefined, "aria-live": "polite", ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [isLoading && !hasError ? (_jsx(ItemSpinnerComponent, { size: 24 })) : (_jsx(ItemIconComponent, { size: "S", src: hasError ? errorIcon : validationIcon })), _jsx("p", { className: "af-item-file__file-name", children: file.name }), _jsx("p", { className: "af-item-file__file-size", children: getReadableFileSizeString(file.size) }), _jsxs("div", { className: "af-item-file__actions", children: [!isLoading && !hasError && (_jsx(ClickIconComponent, { src: previewIcon, onClick: handleClick(onPreview), "aria-label": `Previsualiser le fichier ${file.name}`, ...previewProps })), _jsx(ClickIconComponent, { src: removeIcon, onClick: handleClick(onRemove), "aria-label": `Suppression du fichier ${file.name}`, ...removeProps })] })] }), _jsx(ItemMessageComponent, { message: errorMessage })] }));
+        }), "aria-busy": isLoading ? true : undefined, "aria-live": "polite", ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [_jsx(ContentItemMonoCore, { leftComponent: statusIndicator, primarySubtitle: file.name, subtitle: getReadableFileSizeString(file.size) }), _jsxs("div", { className: "af-item-file__actions", children: [!isLoading && !hasError && (_jsx(ClickIconComponent, { src: previewIcon, onClick: handleClick(onPreview), "aria-label": `Previsualiser le fichier ${file.name}`, ...previewProps })), _jsx(ClickIconComponent, { src: removeIcon, onClick: handleClick(onRemove), "aria-label": `Suppression du fichier ${file.name}`, ...removeProps })] })] }), _jsx(ItemMessageComponent, { message: errorMessage })] }));
 };

package/dist/prospect-client/Form/FileUpload/ItemFile/ItemFileLF.d.ts

@@ -1,3 +1,4 @@
 import { type ItemFileProps } from "./ItemFileCommon";
+import "@axa-fr/canopee-css/client/ContentItemMono/ContentItemMonoLF.css";
 import "@axa-fr/canopee-css/client/Form/FileUpload/ItemFile/ItemFileLF.css";
 export declare const ItemFile: (props: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/FileUpload/ItemFile/ItemFileLF.js

@@ -6,5 +6,6 @@ import { Icon } from "../../../Icon/IconLF";
 import { Spinner } from "../../../Spinner/SpinnerLF";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { ItemFileCommon } from "./ItemFileCommon";
+import "@axa-fr/canopee-css/client/ContentItemMono/ContentItemMonoLF.css";
 import "@axa-fr/canopee-css/client/Form/FileUpload/ItemFile/ItemFileLF.css";
 export const ItemFile = (props) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, ClickIconComponent: ClickIcon, removeIcon: deleteIconFilled, previewIcon: visibilityIcon, ...props }));

package/package.json

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