allaw-ui 3.6.9 → 3.7.1

package/dist/components/molecules/modal/Modal.d.ts

@@ -12,6 +12,17 @@ interface CustomContentConfig {
     component: React.ComponentType<any>;
     props?: Record<string, unknown>;
 }
+interface BreakpointConfig {
+    breakpoint: number;
+    maxWidth: number | string;
+}
+interface MaxWidthConfig {
+    default?: number | string;
+    mobile?: number | string;
+    tablet?: number | string;
+    desktop?: number | string;
+    breakpoints?: BreakpointConfig[];
+}
 export interface ModalProps {
     show: boolean;
     title: string;
@@ -29,6 +40,7 @@ export interface ModalProps {
         isOpen: boolean;
         onClose: () => void;
     }) => React.ReactNode;
+    maxWidthConfig?: MaxWidthConfig;
     verticalOffset?: {
         top?: number;
         bottom?: number;

package/dist/components/molecules/modal/Modal.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import style from "./Modal.module.css";
@@ -17,12 +26,14 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import Heading from "../../atoms/typography/Heading";
 import Paragraph from "../../atoms/typography/Paragraph";
 var Modal = function (_a) {
-    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, maxWidthConfig = _a.maxWidthConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
     var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
     var _e = useState(false), imgError = _e[0], setImgError = _e[1];
     var portalContainerRef = useRef(null);
     var modalContentRef = useRef(null);
     var isMouseDownOutsideRef = useRef(false);
+    // ID unique pour ce modal (pour éviter les conflits)
+    var modalId = useRef("modal-".concat(Math.random().toString(36).substr(2, 9)));
     useEffect(function () {
         if (show) {
             var container = document.createElement("div");
@@ -47,6 +58,11 @@ var Modal = function (_a) {
                 document.body.removeChild(portalContainerRef.current);
                 document.body.style.overflow = "";
             }
+            // Nettoyer les styles dynamiques de ce modal
+            var styleElement = document.getElementById("modal-styles-".concat(modalId.current));
+            if (styleElement) {
+                styleElement.remove();
+            }
         };
     }, [show]);
     var handleMouseDown = function (e) {
@@ -69,25 +85,110 @@ var Modal = function (_a) {
         setImgError(true);
     };
     var renderModalContent = function () {
-        if (renderContent) {
-            return (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel })));
-        }
-        if (customContent) {
-            var Component = customContent.component, _a = customContent.props, props = _a === void 0 ? {} : _a;
-            return (React.createElement("div", { className: style.modalCustomWrapper },
-                React.createElement(Component, __assign({}, props))));
-        }
-        if (children) {
-            return React.createElement("div", { className: style.modalCustomWrapper }, children);
-        }
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: style.modalHeadingWrapper },
                 React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
             React.createElement("div", { className: style.modalParagraphWrapper },
                 React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
-            imageConfig && !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
+            renderContent && (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel }))),
+            !renderContent && customContent && (React.createElement("div", { className: style.modalCustomWrapper },
+                React.createElement(customContent.component, __assign({}, (customContent.props || {}))))),
+            !renderContent && !customContent && children && (React.createElement("div", { className: style.modalCustomWrapper }, children)),
+            !renderContent &&
+                !customContent &&
+                !children &&
+                imageConfig &&
+                !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
                 React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))));
     };
+    // Générer les styles pour la largeur maximale responsive
+    var getMaxWidthStyles = function () {
+        if (!maxWidthConfig)
+            return {};
+        var styles = {};
+        // Approche avec breakpoints personnalisés (prioritaire)
+        if (maxWidthConfig.breakpoints && maxWidthConfig.breakpoints.length > 0) {
+            // Trier les breakpoints par ordre croissant
+            var sortedBreakpoints_1 = __spreadArray([], maxWidthConfig.breakpoints, true).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
+            // Générer les media queries avec classe unique
+            var mediaQueries_1 = "";
+            var uniqueClass_1 = "modal-".concat(modalId.current);
+            sortedBreakpoints_1.forEach(function (bp, index) {
+                var maxWidth = typeof bp.maxWidth === "number" ? "".concat(bp.maxWidth, "px") : bp.maxWidth;
+                if (index === 0) {
+                    // Premier breakpoint : max-width
+                    mediaQueries_1 += "@media (max-width: ".concat(bp.breakpoint - 1, "px) { .").concat(uniqueClass_1, " { max-width: ").concat(maxWidth, " !important; } }");
+                }
+                if (index === sortedBreakpoints_1.length - 1) {
+                    // Dernier breakpoint : min-width
+                    mediaQueries_1 += "@media (min-width: ".concat(bp.breakpoint, "px) { .").concat(uniqueClass_1, " { max-width: ").concat(maxWidth, " !important; } }");
+                }
+                else {
+                    // Breakpoints intermédiaires
+                    var nextBreakpoint = sortedBreakpoints_1[index + 1].breakpoint;
+                    mediaQueries_1 += "@media (min-width: ".concat(bp.breakpoint, "px) and (max-width: ").concat(nextBreakpoint - 1, "px) { .").concat(uniqueClass_1, " { max-width: ").concat(maxWidth, " !important; } }");
+                }
+            });
+            // Injecter les styles avec ID unique
+            if (mediaQueries_1) {
+                var styleElement = document.getElementById("modal-styles-".concat(modalId.current));
+                if (!styleElement) {
+                    styleElement = document.createElement("style");
+                    styleElement.id = "modal-styles-".concat(modalId.current);
+                    document.head.appendChild(styleElement);
+                }
+                styleElement.textContent = mediaQueries_1;
+            }
+            return styles;
+        }
+        // Approche classique (backward compatibility)
+        if (maxWidthConfig.default) {
+            styles.maxWidth =
+                typeof maxWidthConfig.default === "number"
+                    ? "".concat(maxWidthConfig.default, "px")
+                    : maxWidthConfig.default;
+        }
+        // Variables CSS pour les breakpoints prédéfinis
+        if (maxWidthConfig.mobile) {
+            styles["--modal-max-width-mobile"] =
+                typeof maxWidthConfig.mobile === "number"
+                    ? "".concat(maxWidthConfig.mobile, "px")
+                    : maxWidthConfig.mobile;
+        }
+        if (maxWidthConfig.tablet) {
+            styles["--modal-max-width-tablet"] =
+                typeof maxWidthConfig.tablet === "number"
+                    ? "".concat(maxWidthConfig.tablet, "px")
+                    : maxWidthConfig.tablet;
+        }
+        if (maxWidthConfig.desktop) {
+            styles["--modal-max-width-desktop"] =
+                typeof maxWidthConfig.desktop === "number"
+                    ? "".concat(maxWidthConfig.desktop, "px")
+                    : maxWidthConfig.desktop;
+        }
+        return styles;
+    };
+    // Gérer la classe pour les breakpoints personnalisés
+    var getDynamicModalClass = function () {
+        if ((maxWidthConfig === null || maxWidthConfig === void 0 ? void 0 : maxWidthConfig.breakpoints) && maxWidthConfig.breakpoints.length > 0) {
+            return "modal-".concat(modalId.current);
+        }
+        return "";
+    };
+    // Générer les classes CSS dynamiques pour les breakpoints prédéfinis
+    var getMaxWidthClasses = function () {
+        if (!maxWidthConfig || maxWidthConfig.breakpoints)
+            return "";
+        var classes = "";
+        if (maxWidthConfig.mobile)
+            classes += " ".concat(style.maxWidthMobile);
+        if (maxWidthConfig.tablet)
+            classes += " ".concat(style.maxWidthTablet);
+        if (maxWidthConfig.desktop)
+            classes += " ".concat(style.maxWidthDesktop);
+        return classes;
+    };
     if (!show || !isVisible || !portalContainerRef.current)
         return null;
     var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
@@ -102,7 +203,7 @@ var Modal = function (_a) {
                 ? "".concat(horizontalOffset.right, "px")
                 : undefined,
         } },
-        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : ""), ref: modalContentRef },
+        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : "", " ").concat(getMaxWidthClasses(), " ").concat(getDynamicModalClass()), ref: modalContentRef, style: __assign({}, getMaxWidthStyles()) },
             renderModalContent(),
             React.createElement("div", { className: style.modalButtons },
                 cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),

package/dist/components/molecules/modal/Modal.module.css

@@ -342,3 +342,35 @@
 .modal {
   /* Autres styles pour le modal */
 }
+
+/* Classes pour largeurs maximales responsives */
+.maxWidthMobile {
+  /* Styles appliqués sur mobile via JavaScript */
+}
+
+.maxWidthTablet {
+  /* Styles appliqués sur tablette via JavaScript */
+}
+
+.maxWidthDesktop {
+  /* Styles appliqués sur desktop via JavaScript */
+}
+
+/* Breakpoints pour largeurs maximales personnalisées */
+@media (max-width: 767px) {
+  .modalContent.maxWidthMobile {
+    max-width: var(--modal-max-width-mobile, 500px) !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .modalContent.maxWidthTablet {
+    max-width: var(--modal-max-width-tablet, 500px) !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .modalContent.maxWidthDesktop {
+    max-width: var(--modal-max-width-desktop, 500px) !important;
+  }
+}

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -21,7 +21,7 @@ declare namespace _default {
             let description_2: string;
             export { description_2 as description };
         }
-        export namespace verticalOffset {
+        export namespace maxWidthConfig {
             export namespace control_3 {
                 let type_1: string;
                 export { type_1 as type };
@@ -30,7 +30,7 @@ declare namespace _default {
             let description_3: string;
             export { description_3 as description };
         }
-        export namespace horizontalOffset {
+        export namespace verticalOffset {
             export namespace control_4 {
                 let type_2: string;
                 export { type_2 as type };
@@ -39,53 +39,62 @@ declare namespace _default {
             let description_4: string;
             export { description_4 as description };
         }
-        export namespace show {
-            let control_5: string;
+        export namespace horizontalOffset {
+            export namespace control_5 {
+                let type_3: string;
+                export { type_3 as type };
+            }
             export { control_5 as control };
             let description_5: string;
             export { description_5 as description };
         }
-        export namespace title_1 {
+        export namespace show {
             let control_6: string;
             export { control_6 as control };
             let description_6: string;
             export { description_6 as description };
         }
-        export { title_1 as title };
-        export namespace description_7 {
+        export namespace title_1 {
             let control_7: string;
             export { control_7 as control };
-            let description_8: string;
-            export { description_8 as description };
+            let description_7: string;
+            export { description_7 as description };
         }
-        export { description_7 as description };
-        export namespace confirmLabel {
+        export { title_1 as title };
+        export namespace description_8 {
             let control_8: string;
             export { control_8 as control };
             let description_9: string;
             export { description_9 as description };
         }
-        export namespace cancelLabel {
+        export { description_8 as description };
+        export namespace confirmLabel {
             let control_9: string;
             export { control_9 as control };
             let description_10: string;
             export { description_10 as description };
         }
-        export namespace imageConfig {
-            export namespace control_10 {
-                let type_3: string;
-                export { type_3 as type };
-            }
+        export namespace cancelLabel {
+            let control_10: string;
             export { control_10 as control };
             let description_11: string;
             export { description_11 as description };
         }
-        export namespace isDanger {
-            let control_11: string;
+        export namespace imageConfig {
+            export namespace control_11 {
+                let type_4: string;
+                export { type_4 as type };
+            }
             export { control_11 as control };
             let description_12: string;
             export { description_12 as description };
         }
+        export namespace isDanger {
+            let control_12: string;
+            export { control_12 as control };
+            let description_13: string;
+            export { description_13 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -108,4 +117,10 @@ export const WithLargeOffset: any;
 export const WithImageConfig: any;
 export const WithoutCancel: any;
 export const OffsetBothWays: any;
+export const WithCustomMaxWidth: any;
+export const WithResponsiveMaxWidth: any;
+export const WithLargeContentAndMaxWidth: any;
+export const WithCustomBreakpoints: any;
+export const WithManyBreakpoints: any;
+export const WithMixedUnitsBreakpoints: any;
 import Modal from "./Modal";

package/dist/components/molecules/modal/Modal.stories.js

@@ -54,6 +54,10 @@ export default {
             control: false,
             description: "Fonction de rendu (modalProps) => ReactNode",
         },
+        maxWidthConfig: {
+            control: { type: "object" },
+            description: "Configuration responsive pour la largeur maximale. Deux approches disponibles :\n\n**Approche classique (breakpoints pr\u00E9d\u00E9finis) :**\n{ default: 800, mobile: 350, tablet: 600, desktop: 900 }\n- mobile: \u2264 767px\n- tablet: 768px - 1023px  \n- desktop: \u2265 1024px\n\n**Approche personnalis\u00E9e (breakpoints custom) :**\n{ breakpoints: [{ breakpoint: 480, maxWidth: 320 }, { breakpoint: 1200, maxWidth: 900 }] }\n- D\u00E9finissez vos propres seuils de largeur d'\u00E9cran\n- Supporte les unit\u00E9s mixtes (px, vw, rem, etc.)",
+        },
         verticalOffset: {
             control: { type: "object" },
             description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
@@ -228,3 +232,78 @@ export var WithoutCancel = Template.bind({});
 WithoutCancel.args = __assign(__assign({}, Default.args), { title: "Information", description: "Cette action a été effectuée avec succès.", confirmLabel: "OK", cancelLabel: undefined });
 export var OffsetBothWays = Template.bind({});
 OffsetBothWays.args = __assign(__assign({}, Default.args), { title: "Modal avec décalages", description: "Décalages verticaux et horizontaux appliqués.", verticalOffset: { top: 100, bottom: 50 }, horizontalOffset: { left: 80, right: 80 } });
+// Nouvelles stories pour maxWidthConfig
+export var WithCustomMaxWidth = Template.bind({});
+WithCustomMaxWidth.args = __assign(__assign({}, Default.args), { title: "Modal avec largeur personnalisée", description: "Cette modal a une largeur maximale de 800px sur tous les écrans.", maxWidthConfig: {
+        default: 800,
+    } });
+export var WithResponsiveMaxWidth = Template.bind({});
+WithResponsiveMaxWidth.args = __assign(__assign({}, Default.args), { title: "Modal responsive", description: "Cette modal adapte sa largeur selon la taille d'écran : 350px sur mobile, 600px sur tablette, 900px sur desktop.", maxWidthConfig: {
+        mobile: 350,
+        tablet: 600,
+        desktop: 900,
+    } });
+export var WithLargeContentAndMaxWidth = Template.bind({});
+WithLargeContentAndMaxWidth.args = {
+    show: false,
+    title: "Modal large avec contenu personnalisé",
+    description: "Cette modal utilise une largeur plus grande pour accommoder plus de contenu.",
+    confirmLabel: "Valider",
+    cancelLabel: "Annuler",
+    maxWidthConfig: {
+        default: 700,
+        mobile: 350,
+        tablet: 650,
+        desktop: 800,
+    },
+    children: (React.createElement("div", { style: { textAlign: "center", padding: "2rem" } },
+        React.createElement("h2", { style: { color: "#1f2937", marginBottom: "1rem" } }, "Contenu \u00E9tendu n\u00E9cessitant plus d'espace"),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: "1rem",
+                marginBottom: "1.5rem",
+            } },
+            React.createElement("div", { style: {
+                    padding: "1rem",
+                    backgroundColor: "#f3f4f6",
+                    borderRadius: "0.5rem",
+                } },
+                React.createElement("h4", null, "Section 1"),
+                React.createElement("p", null, "Contenu de la premi\u00E8re section avec plus de texte pour tester l'espace disponible.")),
+            React.createElement("div", { style: {
+                    padding: "1rem",
+                    backgroundColor: "#f3f4f6",
+                    borderRadius: "0.5rem",
+                } },
+                React.createElement("h4", null, "Section 2"),
+                React.createElement("p", null, "Contenu de la deuxi\u00E8me section avec \u00E9galement plus de texte."))),
+        React.createElement("p", { style: { color: "#6b7280" } }, "Cette modal d\u00E9montre l'utilisation de largeurs personnalis\u00E9es pour accommoder du contenu plus large."))),
+};
+// Nouvelles stories pour breakpoints personnalisés
+export var WithCustomBreakpoints = Template.bind({});
+WithCustomBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec breakpoints personnalisés", description: "Cette modal utilise des breakpoints sur mesure : 480px, 900px, et 1400px.", maxWidthConfig: {
+        breakpoints: [
+            { breakpoint: 480, maxWidth: 320 },
+            { breakpoint: 900, maxWidth: 700 },
+            { breakpoint: 1400, maxWidth: 1000 },
+        ],
+    } });
+export var WithManyBreakpoints = Template.bind({});
+WithManyBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec multiples breakpoints", description: "Exemple avec 5 breakpoints personnalisés pour un contrôle précis.", maxWidthConfig: {
+        breakpoints: [
+            { breakpoint: 360, maxWidth: 300 },
+            { breakpoint: 640, maxWidth: 500 },
+            { breakpoint: 768, maxWidth: 600 },
+            { breakpoint: 1024, maxWidth: 800 },
+            { breakpoint: 1440, maxWidth: 1200 },
+        ],
+    } });
+export var WithMixedUnitsBreakpoints = Template.bind({});
+WithMixedUnitsBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec unités mixtes", description: "Démonstration avec différentes unités : px, vw, rem.", maxWidthConfig: {
+        breakpoints: [
+            { breakpoint: 480, maxWidth: "90vw" },
+            { breakpoint: 768, maxWidth: "40rem" },
+            { breakpoint: 1200, maxWidth: 900 },
+        ],
+    } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.6.9",
+  "version": "3.7.1",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",