@axa-fr/design-system-apollo-react 3.0.1-alpha.15 → 3.0.1-alpha.18

package/dist/Form/FileUpload/FileUpload/FileUploadApollo.d.ts

@@ -1,3 +1,3 @@
 import { type FileUploadProps } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadApollo.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { InputFile } from "../InputFile/InputFileApollo";
 import { FileUploadCommon } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
 FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/FileUpload/FileUploadCommon.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, forwardRef, } from "react";
 import { generateId } from "../../../utilities/generateId";
+import { getClassName } from "../../../utilities/getClassName";
 export const FileUploadCommon = forwardRef(({ InputFileComponent, className, children, fileListLabel = "Vos fichiers importés :", ...props }, ref) => {
-    return (_jsx(InputFileComponent, { ...props, className: ["af-file-upload", className].filter(Boolean).join(" "), ref: ref, children: children ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-file-list__title", children: fileListLabel }), _jsx("ul", { className: "af-file-list", children: Children.map(children, (child) => (_jsx("li", { className: "af-file-list__item", children: child }, generateId(child)))) })] })) : null }));
+    return (_jsx(InputFileComponent, { ...props, className: getClassName({
+            baseClassName: "af-file-upload",
+            className,
+        }), ref: ref, children: children ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-file-list__title", children: fileListLabel }), _jsx("ul", { className: "af-file-list", children: Children.map(children, (child) => (_jsx("li", { className: "af-file-list__item", children: child }, generateId(child)))) })] })) : null }));
 });
 FileUploadCommon.displayName = "FileUploadCommon";

package/dist/Form/FileUpload/FileUpload/FileUploadLF.d.ts

@@ -1,3 +1,3 @@
 import { type FileUploadProps } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadLF.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { InputFile } from "../InputFile/InputFileLF";
 import { FileUploadCommon } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
 FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/InputFile/InputFileCommon.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import addCircleIcon from "@material-symbols/svg-400/rounded/add_circle-fill.svg";
 import { Svg } from "../../../Svg/Svg";
+import { getClassName } from "../../../utilities/getClassName";
 const DEFAULT_DROPZONE_LABELS = {
     dropzone: "Glisser et déposer un fichier",
     or: "ou",
@@ -22,13 +23,17 @@ export const InputFileCommon = forwardRef(({ ItemLabelComponent, ItemMessageComp
         or: dropzoneLabels.or || DEFAULT_DROPZONE_LABELS.or,
         button: dropzoneLabels.button || DEFAULT_DROPZONE_LABELS.button,
     };
-    return (_jsxs("div", { className: ["af-input-file", className].filter(Boolean).join(" "), style: style, children: [_jsx(ItemLabelComponent, { htmlFor: inputId, description: description, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, ...labelProps, children: label }), _jsxs("div", { className: "af-input-file__container", children: [_jsxs("span", { className: [
-                            "af-input-file__dropzone",
-                            hasError && "af-input-file__dropzone--error",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [_jsx("input", { ref: ref, type: "file", id: inputId, required: required, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": ariaDescribedby.length > 0
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-input-file",
+            className,
+        }), style: style, children: [_jsx(ItemLabelComponent, { htmlFor: inputId, description: description, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, ...labelProps, children: label }), _jsxs("div", { className: "af-input-file__container", children: [_jsxs("span", { className: getClassName({
+                            baseClassName: "af-input-file__dropzone",
+                            modifiers: [hasError && "error"],
+                        }), children: [_jsx("input", { ref: ref, type: "file", id: inputId, required: required, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": ariaDescribedby.length > 0
                                     ? ariaDescribedby.join(" ")
-                                    : undefined, ...props }), _jsx("span", { children: resolvedDropzoneLabels.dropzone }), _jsx("span", { children: resolvedDropzoneLabels.or }), _jsxs("span", { className: "af-btn-client af-btn-client--tertiary", children: [_jsx(Svg, { src: addCircleIcon, role: "presentation" }), resolvedDropzoneLabels.button] })] }), helper ? (_jsx("span", { id: helpId, className: "af-input-file__help", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }), children] }));
+                                    : undefined, ...props }), _jsx("span", { children: resolvedDropzoneLabels.dropzone }), _jsx("span", { children: resolvedDropzoneLabels.or }), _jsxs("span", { className: getClassName({
+                                    baseClassName: "af-btn-client",
+                                    modifiers: ["tertiary"],
+                                }), children: [_jsx(Svg, { src: addCircleIcon, role: "presentation" }), resolvedDropzoneLabels.button] })] }), helper ? (_jsx("span", { id: helpId, className: "af-input-file__help", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }), children] }));
 });
 InputFileCommon.displayName = "InputFileCommon";

package/dist/Form/FileUpload/ItemFile/ItemFileCommon.js

@@ -1,6 +1,7 @@
 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 { getClassName } from "../../../utilities/getClassName";
 const BASE_UNIT = 1000;
 const BYTE_UNITS = ["Ko", "Mo", "Go"];
 const getReadableFileSizeString = (fileSizeInBytes) => {
@@ -17,7 +18,9 @@ export const ItemFileCommon = ({ file, isLoading, errorMessage, className, onRem
     const handleClick = (callback) => (e) => {
         callback(file, e);
     };
-    return (_jsxs("section", { className: ["af-item-file", hasError && "af-item-file--error", className]
-            .filter(Boolean)
-            .join(" "), "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 })] }));
+    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 })] }));
 };

package/package.json

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