allaw-ui 4.1.4 → 4.1.5

package/dist/components/molecules/proSwitch/AvatarBubble.d.ts

@@ -11,6 +11,8 @@ export interface AvatarBubbleProps {
     alt?: string;
     className?: string;
     borderThick?: boolean;
+    showTooltip?: boolean;
+    tooltipId?: string;
 }
 declare const AvatarBubble: React.FC<AvatarBubbleProps>;
 export default AvatarBubble;

package/dist/components/molecules/proSwitch/AvatarBubble.js

@@ -1,5 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useState, useCallback } from "react";
 import Image from "next/image";
+import { Tooltip } from "react-tooltip";
 import styles from "./avatarBubble.module.css";
 // Fonction de hash simple (DJB2)
 var hashString = function (str) {
@@ -24,13 +36,14 @@ var generateInitials = function (firstName, name) {
     return "".concat(firstInitial).concat(lastInitial);
 };
 var AvatarBubble = function (_a) {
-    var firstName = _a.firstName, name = _a.name, src = _a.src, _b = _a.size, size = _b === void 0 ? 42.5 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableHoverAnimation, disableHoverAnimation = _e === void 0 ? false : _e, onClick = _a.onClick, alt = _a.alt, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.borderThick, borderThick = _g === void 0 ? false : _g;
-    var _h = useState(false), imageError = _h[0], setImageError = _h[1];
+    var firstName = _a.firstName, name = _a.name, src = _a.src, _b = _a.size, size = _b === void 0 ? 42.5 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableHoverAnimation, disableHoverAnimation = _e === void 0 ? false : _e, onClick = _a.onClick, alt = _a.alt, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.borderThick, borderThick = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? false : _h, _j = _a.tooltipId, tooltipId = _j === void 0 ? "avatar-tooltip" : _j;
+    var _k = useState(false), imageError = _k[0], setImageError = _k[1];
     var hasValidSrc = src && src.trim() !== "";
     var shouldShowInitials = !hasValidSrc || imageError;
     var backgroundColor = generateBackgroundColor(firstName, name);
     var initials = generateInitials(firstName, name);
     var displayAlt = alt || "".concat(firstName, " ").concat(name);
+    var fullName = "".concat(firstName, " ").concat(name);
     var ariaLabel = "".concat(firstName, " ").concat(name).concat(isSelected ? ", sélectionné(e)" : "");
     var handleImageError = useCallback(function () {
         setImageError(true);
@@ -54,19 +67,34 @@ var AvatarBubble = function (_a) {
         backgroundColor: backgroundColor,
         fontSize: "".concat(Math.max(12, size * 0.4), "px"),
     };
-    return (React.createElement("div", { className: "".concat(styles.avatarBubble, " ").concat(className, " ") +
-            (borderThick
-                ? isSelected
-                    ? styles.selectedThick
-                    : styles.thick
-                : isSelected
-                    ? styles.selectedThin
-                    : styles.thin), style: containerStyle, role: "button", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: handleKeyDown, "data-selected": isSelected, "data-disabled": disabled, "data-disable-hover-animation": disableHoverAnimation }, shouldShowInitials ? (React.createElement("div", { className: styles.initials, style: initialsStyle, "aria-label": displayAlt }, initials)) : (React.createElement("div", { className: styles.imageContainer },
-        React.createElement(Image, { src: src, alt: displayAlt, width: size, height: size, className: styles.image, onError: handleImageError, onLoad: function () { return setImageError(false); }, style: {
-                objectFit: "cover",
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-            } })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: "".concat(styles.avatarBubble, " ").concat(className, " ") +
+                (borderThick
+                    ? isSelected
+                        ? styles.selectedThick
+                        : styles.thick
+                    : isSelected
+                        ? styles.selectedThin
+                        : styles.thin), style: containerStyle, role: "button", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: handleKeyDown, "data-selected": isSelected, "data-disabled": disabled, "data-disable-hover-animation": disableHoverAnimation }, (showTooltip && {
+            "data-tooltip-id": tooltipId,
+            "data-tooltip-content": fullName,
+        })), shouldShowInitials ? (React.createElement("div", { className: styles.initials, style: initialsStyle, "aria-label": displayAlt }, initials)) : (React.createElement("div", { className: styles.imageContainer },
+            React.createElement(Image, { src: src, alt: displayAlt, width: size, height: size, className: styles.image, onError: handleImageError, onLoad: function () { return setImageError(false); }, style: {
+                    objectFit: "cover",
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: "50%",
+                } })))),
+        showTooltip && (React.createElement(Tooltip, { id: tooltipId, place: "top", style: {
+                fontSize: "12px",
+                color: "#FFF",
+                background: "#171E25",
+                maxWidth: "400px",
+                whiteSpace: "wrap",
+                fontFamily: "'SF Pro Display', 'Source Sans Pro', 'Open Sans', sans-serif",
+                padding: "4px 8px",
+                margin: "0",
+                zIndex: 1000,
+            }, delayShow: 500, noArrow: true, opacity: 0.87 }))));
 };
 export default AvatarBubble;

package/dist/components/molecules/proSwitch/AvatarBubble.stories.d.ts

@@ -54,17 +54,29 @@ declare namespace _default {
             let description_7: string;
             export { description_7 as description };
         }
-        namespace onClick {
-            export let action: string;
+        namespace showTooltip {
+            let control_8: string;
+            export { control_8 as control };
             let description_8: string;
             export { description_8 as description };
         }
-        namespace alt {
-            let control_8: string;
-            export { control_8 as control };
+        namespace tooltipId {
+            let control_9: string;
+            export { control_9 as control };
             let description_9: string;
             export { description_9 as description };
         }
+        namespace onClick {
+            export let action: string;
+            let description_10: string;
+            export { description_10 as description };
+        }
+        namespace alt {
+            let control_10: string;
+            export { control_10 as control };
+            let description_11: string;
+            export { description_11 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {

package/dist/components/molecules/proSwitch/AvatarBubble.stories.js

@@ -50,6 +50,14 @@ export default {
             control: "boolean",
             description: "Bordure épaisse (4px) autour de l'avatar si true, 2px sinon (défaut)",
         },
+        showTooltip: {
+            control: "boolean",
+            description: "Afficher le tooltip avec le nom complet au hover",
+        },
+        tooltipId: {
+            control: "text",
+            description: "ID personnalisé pour le tooltip",
+        },
         onClick: {
             action: "clicked",
             description: "Callback appelé au clic",
@@ -90,6 +98,8 @@ Default.args = {
     disabled: false,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var WithInitials = Template.bind({});
 WithInitials.args = {
@@ -101,6 +111,8 @@ WithInitials.args = {
     disabled: false,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var Selected = Template.bind({});
 Selected.args = {
@@ -112,6 +124,8 @@ Selected.args = {
     disabled: false,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var Disabled = Template.bind({});
 Disabled.args = {
@@ -123,6 +137,8 @@ Disabled.args = {
     disabled: true,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var Small = Template.bind({});
 Small.args = {
@@ -134,6 +150,8 @@ Small.args = {
     disabled: false,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var Large = Template.bind({});
 Large.args = {
@@ -145,6 +163,8 @@ Large.args = {
     disabled: false,
     disableHoverAnimation: false,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var WithoutHoverAnimation = Template.bind({});
 WithoutHoverAnimation.args = {
@@ -156,6 +176,8 @@ WithoutHoverAnimation.args = {
     disabled: false,
     disableHoverAnimation: true,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var SelectedWithoutHoverAnimation = Template.bind({});
 SelectedWithoutHoverAnimation.args = {
@@ -167,6 +189,8 @@ SelectedWithoutHoverAnimation.args = {
     disabled: false,
     disableHoverAnimation: true,
     borderThick: false,
+    showTooltip: true,
+    tooltipId: "avatar-tooltip",
 };
 export var MultipleSizes = function () {
     var _a = useState(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
@@ -180,7 +204,7 @@ export var MultipleSizes = function () {
             display: "flex",
             gap: "20px",
             alignItems: "center",
-        } }, avatars.map(function (avatar, index) { return (React.createElement(AvatarBubble, { key: index, firstName: avatar.firstName, name: avatar.name, size: avatar.size, isSelected: selectedIndex === index, onClick: function () { return setSelectedIndex(index); } })); })));
+        } }, avatars.map(function (avatar, index) { return (React.createElement(AvatarBubble, { key: index, firstName: avatar.firstName, name: avatar.name, size: avatar.size, isSelected: selectedIndex === index, onClick: function () { return setSelectedIndex(index); }, showTooltip: true, tooltipId: "multiple-sizes-tooltip" })); })));
 };
 export var ColorVariations = function () {
     var names = [
@@ -196,7 +220,7 @@ export var ColorVariations = function () {
             display: "flex",
             gap: "10px",
             flexWrap: "wrap",
-        } }, names.map(function (name, index) { return (React.createElement(AvatarBubble, { key: index, firstName: name.firstName, name: name.name, size: 42.5, onClick: function () { return action("Clicked ".concat(name.firstName, " ").concat(name.name))(); } })); })));
+        } }, names.map(function (name, index) { return (React.createElement(AvatarBubble, { key: index, firstName: name.firstName, name: name.name, size: 42.5, onClick: function () { return action("Clicked ".concat(name.firstName, " ").concat(name.name))(); }, showTooltip: true, tooltipId: "color-variations-tooltip" })); })));
 };
 export var HoverAnimationComparison = function () {
     var _a = useState(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
@@ -208,8 +232,8 @@ export var HoverAnimationComparison = function () {
         } },
         React.createElement("div", { style: { textAlign: "center" } },
             React.createElement("h4", { style: { marginBottom: "10px" } }, "Avec animation"),
-            React.createElement(AvatarBubble, { firstName: "Jean", name: "Dupont", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 0, onClick: function () { return setSelectedIndex(0); } })),
+            React.createElement(AvatarBubble, { firstName: "Jean", name: "Dupont", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 0, onClick: function () { return setSelectedIndex(0); }, showTooltip: true, tooltipId: "hover-comparison-tooltip" })),
         React.createElement("div", { style: { textAlign: "center" } },
             React.createElement("h4", { style: { marginBottom: "10px" } }, "Sans animation"),
-            React.createElement(AvatarBubble, { firstName: "Marie", name: "Martin", src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 1, onClick: function () { return setSelectedIndex(1); }, disableHoverAnimation: true }))));
+            React.createElement(AvatarBubble, { firstName: "Marie", name: "Martin", src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 1, onClick: function () { return setSelectedIndex(1); }, disableHoverAnimation: true, showTooltip: true, tooltipId: "hover-comparison-tooltip" }))));
 };

package/dist/components/molecules/proSwitch/AvatarToggleGroup.d.ts

@@ -16,6 +16,8 @@ export interface AvatarToggleGroupProps {
     disabled?: boolean;
     onOpenPortal?: () => void;
     className?: string;
+    showTooltips?: boolean;
+    tooltipId?: string;
 }
 declare const AvatarToggleGroup: React.FC<AvatarToggleGroupProps>;
 export default AvatarToggleGroup;

package/dist/components/molecules/proSwitch/AvatarToggleGroup.js

@@ -9,12 +9,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import AvatarBubble from "./AvatarBubble";
+import { Tooltip } from "react-tooltip";
 import styles from "./avatarToggleGroup.module.css";
 var AvatarToggleGroup = function (_a) {
-    var pros = _a.pros, mode = _a.mode, selected = _a.selected, onSelect = _a.onSelect, maxVisible = _a.maxVisible, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onOpenPortal = _a.onOpenPortal, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var pros = _a.pros, mode = _a.mode, selected = _a.selected, onSelect = _a.onSelect, maxVisible = _a.maxVisible, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onOpenPortal = _a.onOpenPortal, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.showTooltips, showTooltips = _d === void 0 ? false : _d, _e = _a.tooltipId, tooltipId = _e === void 0 ? "avatar-toggle-tooltip" : _e;
     var containerRef = useRef(null);
-    var _d = useState(maxVisible || 0), calculatedMaxVisible = _d[0], setCalculatedMaxVisible = _d[1];
-    var _e = useState(-1), focusedIndex = _e[0], setFocusedIndex = _e[1];
+    var _f = useState(maxVisible || 0), calculatedMaxVisible = _f[0], setCalculatedMaxVisible = _f[1];
+    var _g = useState(-1), focusedIndex = _g[0], setFocusedIndex = _g[1];
     // Calcul dynamique de maxVisible
     var calculateMaxVisible = useCallback(function () {
         if (maxVisible !== undefined) {
@@ -69,6 +70,11 @@ var AvatarToggleGroup = function (_a) {
             // En mode multiple, on toggle
             var isCurrentlySelected = selected.includes(pro.proUserId);
             if (isCurrentlySelected) {
+                // Empêcher la désélection totale en mode multiple
+                if (selected.length === 1) {
+                    // Garder la sélection actuelle
+                    return;
+                }
                 newSelected = selected.filter(function (id) { return id !== pro.proUserId; });
             }
             else {
@@ -141,10 +147,21 @@ var AvatarToggleGroup = function (_a) {
                     zIndex: isSelected ? 100 : visiblePros.length - index,
                     marginLeft: index === 0 ? 0 : -8,
                 } },
-                React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 42.5, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "" })));
+                React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 42.5, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "", showTooltip: showTooltips, tooltipId: tooltipId })));
         })),
         hasHiddenPros && (React.createElement("button", { className: styles.moreButton, onClick: onOpenPortal, onKeyDown: handleKeyDown, disabled: disabled, "aria-label": "Voir ".concat(pros.length, " professionnels"), tabIndex: disabled ? -1 : 0 },
             "+",
-            hiddenCount))));
+            hiddenCount)),
+        showTooltips && (React.createElement(Tooltip, { id: tooltipId, place: "top", style: {
+                fontSize: "12px",
+                color: "#FFF",
+                background: "#171E25",
+                maxWidth: "400px",
+                whiteSpace: "wrap",
+                fontFamily: "'SF Pro Display', 'Source Sans Pro', 'Open Sans', sans-serif",
+                padding: "4px 8px",
+                margin: "0",
+                zIndex: 1000,
+            }, delayShow: 500, noArrow: true, opacity: 0.87 }))));
 };
 export default AvatarToggleGroup;

package/dist/components/molecules/proSwitch/AvatarToggleGroup.stories.d.ts

@@ -50,6 +50,18 @@ declare namespace _default {
             let description_6: string;
             export { description_6 as description };
         }
+        namespace showTooltips {
+            let control_5: string;
+            export { control_5 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace tooltipId {
+            let control_6: string;
+            export { control_6 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -71,5 +83,6 @@ export const WithMaxVisible: any;
 export const SingleWithInitials: any;
 export function ResponsiveTest(): React.JSX.Element;
 export function InteractiveDemo(): React.JSX.Element;
+export function TooltipTest(): React.JSX.Element;
 import AvatarToggleGroup from "./AvatarToggleGroup";
 import React from "react";

package/dist/components/molecules/proSwitch/AvatarToggleGroup.stories.js

@@ -53,6 +53,14 @@ export default {
             action: "portal opened",
             description: "Callback appelé à l'ouverture de la modal",
         },
+        showTooltips: {
+            control: "boolean",
+            description: "Afficher les tooltips sur chaque avatar",
+        },
+        tooltipId: {
+            control: "text",
+            description: "ID personnalisé pour les tooltips",
+        },
     },
     parameters: {
         backgrounds: {
@@ -144,7 +152,12 @@ var Template = function (args) {
         React.createElement("div", { style: { marginTop: "20px", fontSize: "14px", color: "#666" } },
             React.createElement("strong", null, "S\u00E9lection actuelle :"),
             " ",
-            selected.join(", ") || "Aucune")));
+            selected.join(", ") || "Aucune",
+            React.createElement("br", null),
+            React.createElement("small", null, "\uD83D\uDCA1 Testez le hover sur les avatars pour voir les tooltips"),
+            args.mode === "multiple" && (React.createElement(React.Fragment, null,
+                React.createElement("br", null),
+                React.createElement("small", null, "\uD83D\uDD12 En mode multiple, impossible de d\u00E9s\u00E9lectionner le dernier pro"))))));
 };
 export var Default = Template.bind({});
 Default.args = {
@@ -152,6 +165,8 @@ Default.args = {
     mode: "single",
     selected: ["1"],
     disabled: false,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var Multiple = Template.bind({});
 Multiple.args = {
@@ -159,6 +174,8 @@ Multiple.args = {
     mode: "multiple",
     selected: ["1", "3"],
     disabled: false,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var WithManyPros = Template.bind({});
 WithManyPros.args = {
@@ -166,6 +183,8 @@ WithManyPros.args = {
     mode: "multiple",
     selected: ["1", "3", "5"],
     disabled: false,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var Disabled = Template.bind({});
 Disabled.args = {
@@ -173,6 +192,8 @@ Disabled.args = {
     mode: "single",
     selected: ["1"],
     disabled: true,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var WithMaxVisible = Template.bind({});
 WithMaxVisible.args = {
@@ -181,6 +202,8 @@ WithMaxVisible.args = {
     selected: ["1", "2"],
     maxVisible: 3,
     disabled: false,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var SingleWithInitials = Template.bind({});
 SingleWithInitials.args = {
@@ -213,6 +236,8 @@ SingleWithInitials.args = {
     mode: "single",
     selected: ["1"],
     disabled: false,
+    showTooltips: true,
+    tooltipId: "avatar-toggle-tooltip",
 };
 export var ResponsiveTest = function () {
     var _a = useState(["1"]), selected = _a[0], setSelected = _a[1];
@@ -229,7 +254,7 @@ export var ResponsiveTest = function () {
                 maxWidth: "100%",
                 overflow: "hidden",
             } },
-            React.createElement(AvatarToggleGroup, { pros: samplePros, mode: "multiple", selected: selected, onSelect: handleSelect, onOpenPortal: function () { return action("Portal opened")(); } })),
+            React.createElement(AvatarToggleGroup, { pros: samplePros, mode: "multiple", selected: selected, onSelect: handleSelect, onOpenPortal: function () { return action("Portal opened")(); }, showTooltips: true, tooltipId: "responsive-test-tooltip" })),
         React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
             React.createElement("strong", null, "S\u00E9lection :"),
             " ",
@@ -264,7 +289,7 @@ export var InteractiveDemo = function () {
                 padding: "20px",
                 marginBottom: "20px",
             } },
-            React.createElement(AvatarToggleGroup, { pros: samplePros.slice(0, 5), mode: mode, selected: selected, onSelect: handleSelect, disabled: disabled, onOpenPortal: function () { return action("Portal opened")(); } })),
+            React.createElement(AvatarToggleGroup, { pros: samplePros.slice(0, 5), mode: mode, selected: selected, onSelect: handleSelect, disabled: disabled, onOpenPortal: function () { return action("Portal opened")(); }, showTooltips: true, tooltipId: "interactive-demo-tooltip" })),
         React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
             React.createElement("strong", null, "Mode :"),
             " ",
@@ -272,5 +297,32 @@ export var InteractiveDemo = function () {
             " | ",
             React.createElement("strong", null, "S\u00E9lection :"),
             " ",
-            selected.join(", ") || "Aucune")));
+            selected.join(", ") || "Aucune",
+            React.createElement("br", null),
+            "\uD83D\uDCA1 Survolez les avatars pour voir les tooltips",
+            mode === "multiple" && (React.createElement(React.Fragment, null,
+                React.createElement("br", null),
+                "\uD83D\uDD12 En mode multiple, impossible de d\u00E9s\u00E9lectionner le dernier pro")))));
+};
+export var TooltipTest = function () {
+    var _a = useState(["1"]), selected = _a[0], setSelected = _a[1];
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (pro) { return pro.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement("h3", { style: { marginBottom: "10px" } }, "Test des Tooltips"),
+        React.createElement("p", { style: { marginBottom: "20px", fontSize: "14px", color: "#666" } }, "\uD83D\uDCA1 Survolez chaque avatar pour voir le tooltip avec le nom complet"),
+        React.createElement("div", { style: {
+                border: "1px solid #ccc",
+                padding: "20px",
+                marginBottom: "20px",
+            } },
+            React.createElement(AvatarToggleGroup, { pros: samplePros.slice(0, 6), mode: "multiple", selected: selected, onSelect: handleSelect, showTooltips: true, tooltipId: "tooltip-test" })),
+        React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
+            React.createElement("strong", null, "S\u00E9lection :"),
+            " ",
+            selected.join(", ") || "Aucune",
+            React.createElement("br", null),
+            React.createElement("small", null, "\u2705 Tooltips activ\u00E9s sur tous les avatars"))));
 };

package/dist/components/molecules/proSwitch/ProSwitch.d.ts

@@ -11,6 +11,8 @@ interface ProSwitchProps {
     onOpenPortal?: () => void;
     onClosePortal?: () => void;
     className?: string;
+    showTooltips?: boolean;
+    tooltipId?: string;
 }
 declare const ProSwitch: React.FC<ProSwitchProps>;
 export default ProSwitch;

package/dist/components/molecules/proSwitch/ProSwitch.js

@@ -13,11 +13,11 @@ import ProSwitchModal from "./ProSwitchModal";
 import styles from "./proSwitch.module.css";
 var LOCALSTORAGE_KEY = "allaw.proSwitch.order";
 var ProSwitch = function (_a) {
-    var _b = _a.pros, pros = _b === void 0 ? [] : _b, _c = _a.selected, selected = _c === void 0 ? [] : _c, mode = _a.mode, _d = _a.disabled, disabled = _d === void 0 ? false : _d, maxVisible = _a.maxVisible, onSelect = _a.onSelect, onOrderChange = _a.onOrderChange, onOpenPortal = _a.onOpenPortal, onClosePortal = _a.onClosePortal, _e = _a.className, className = _e === void 0 ? "" : _e;
+    var _b = _a.pros, pros = _b === void 0 ? [] : _b, _c = _a.selected, selected = _c === void 0 ? [] : _c, mode = _a.mode, _d = _a.disabled, disabled = _d === void 0 ? false : _d, maxVisible = _a.maxVisible, onSelect = _a.onSelect, onOrderChange = _a.onOrderChange, onOpenPortal = _a.onOpenPortal, onClosePortal = _a.onClosePortal, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.showTooltips, showTooltips = _f === void 0 ? false : _f, _g = _a.tooltipId, tooltipId = _g === void 0 ? "pro-switch-tooltip" : _g;
     var containerRef = useRef(null);
-    var _f = useState([]), order = _f[0], setOrder = _f[1];
-    var _g = useState(selected), selectedIds = _g[0], setSelectedIds = _g[1];
-    var _h = useState(false), modalOpen = _h[0], setModalOpen = _h[1];
+    var _h = useState([]), order = _h[0], setOrder = _h[1];
+    var _j = useState(selected), selectedIds = _j[0], setSelectedIds = _j[1];
+    var _k = useState(false), modalOpen = _k[0], setModalOpen = _k[1];
     // Initialisation de l'ordre depuis localStorage ou props
     useEffect(function () {
         var initialOrder = pros.map(function (p) { return p.proUserId; });
@@ -44,10 +44,18 @@ var ProSwitch = function (_a) {
     }, [selected]);
     // Gestion de la sélection
     var handleSelect = useCallback(function (selectedPros) {
-        setSelectedIds(selectedPros.map(function (p) { return p.proUserId; }));
+        var newSelectedIds = selectedPros.map(function (p) { return p.proUserId; });
+        // Empêcher la désélection totale en mode multiple
+        if (mode === "multiple" &&
+            newSelectedIds.length === 0 &&
+            selectedIds.length > 0) {
+            // Garder la sélection actuelle
+            return;
+        }
+        setSelectedIds(newSelectedIds);
         if (onSelect)
             onSelect(selectedPros);
-    }, [onSelect]);
+    }, [mode, selectedIds, onSelect]);
     // Gestion de l'ouverture de la modal
     var handleOpenModal = useCallback(function () {
         setModalOpen(true);
@@ -80,7 +88,7 @@ var ProSwitch = function (_a) {
         return (React.createElement("div", { className: styles.proSwitchEmpty }, "Aucun professionnel disponible"));
     }
     return (React.createElement("div", { className: "".concat(styles.proSwitchContainer, " ").concat(className), ref: containerRef },
-        React.createElement(AvatarToggleGroup, { pros: orderedPros, mode: mode, selected: selectedIds, onSelect: handleSelect, onOpenPortal: handleOpenModal, disabled: disabled, maxVisible: maxVisible, className: styles.avatarToggleGroup }),
+        React.createElement(AvatarToggleGroup, { pros: orderedPros, mode: mode, selected: selectedIds, onSelect: handleSelect, onOpenPortal: handleOpenModal, disabled: disabled, maxVisible: maxVisible, className: styles.avatarToggleGroup, showTooltips: showTooltips, tooltipId: tooltipId }),
         modalOpen && (React.createElement(ProSwitchModal, { open: modalOpen, pros: orderedPros, selected: selectedIds, mode: mode, onClosePortal: handleCloseModal, onOpenPortal: onOpenPortal, onOrderChange: handleOrderChange, onSelect: handleSelect }))));
 };
 export default ProSwitch;

package/dist/components/molecules/proSwitch/ProSwitch.stories.js

@@ -129,16 +129,24 @@ var samplePros = [
 ];
 export var SingleSelect = function () {
     var _a = useState(["1"]), selected = _a[0], setSelected = _a[1];
-    return (React.createElement(ProSwitch, { pros: samplePros.slice(0, 15), selected: selected, mode: "single", onSelect: function (pros) {
-            setSelected(pros.map(function (p) { return p.proUserId; }));
-            action("onSelect")(pros);
-        }, onOrderChange: action("onOrderChange") }));
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement("h3", { style: { marginBottom: "10px" } }, "Mode Single avec Tooltips"),
+        React.createElement(ProSwitch, { pros: samplePros.slice(0, 15), selected: selected, mode: "single", onSelect: function (pros) {
+                setSelected(pros.map(function (p) { return p.proUserId; }));
+                action("onSelect")(pros);
+            }, onOrderChange: action("onOrderChange"), showTooltips: true, tooltipId: "single-select-tooltip" }),
+        React.createElement("div", { style: { marginTop: "10px", fontSize: "12px", color: "#666" } }, "\uD83D\uDCA1 Survolez les avatars pour voir les tooltips")));
 };
 export var MultiSelectOverflow = function () {
     var _a = useState(["1", "2"]), selected = _a[0], setSelected = _a[1];
-    return (React.createElement("div", { style: { width: 200 } },
+    return (React.createElement("div", { style: { width: 200, padding: "20px" } },
+        React.createElement("h3", { style: { marginBottom: "10px" } }, "Mode Multiple avec Blocage"),
         React.createElement(ProSwitch, { pros: samplePros, selected: selected, mode: "multiple", onSelect: function (pros) {
                 setSelected(pros.map(function (p) { return p.proUserId; }));
                 action("onSelect")(pros);
-            }, onOrderChange: action("onOrderChange") })));
+            }, onOrderChange: action("onOrderChange"), showTooltips: true, tooltipId: "multi-select-tooltip" }),
+        React.createElement("div", { style: { marginTop: "10px", fontSize: "12px", color: "#666" } },
+            "\uD83D\uDCA1 Survolez les avatars pour voir les tooltips",
+            React.createElement("br", null),
+            "\uD83D\uDD12 Essayez de d\u00E9s\u00E9lectionner le dernier pro (impossible)")));
 };

package/dist/components/molecules/proSwitch/ProSwitchModal.js

@@ -195,6 +195,11 @@ var ProSwitchModal = function (_a) {
         }
         else {
             if (selected.includes(pro.proUserId)) {
+                // Empêcher la désélection totale en mode multiple
+                if (selected.length === 1) {
+                    // Garder la sélection actuelle
+                    return;
+                }
                 newSelected = selected.filter(function (id) { return id !== pro.proUserId; });
             }
             else {

package/dist/components/molecules/proSwitch/ProSwitchModal.stories.d.ts

@@ -57,4 +57,6 @@ export const FallbackInitiales: any;
 export const Responsive: any;
 export const ResponsiveMobile: any;
 export const FewProfiles: any;
+export function TestBlocking(): React.JSX.Element;
 import ProSwitchModal from "./ProSwitchModal";
+import React from "react";

package/dist/components/molecules/proSwitch/ProSwitchModal.stories.js

@@ -137,29 +137,71 @@ export var Default = Template.bind({});
 Default.args = {
     mode: "multiple",
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: "Modal avec blocage de désélection en mode multiple. Essayez de désélectionner le dernier pro sélectionné.",
+        },
+    },
+};
 export var Single = Template.bind({});
 Single.args = {
     mode: "single",
 };
+Single.parameters = {
+    docs: {
+        description: {
+            story: "Modal en mode single.",
+        },
+    },
+};
 export var Reorder = Template.bind({});
 Reorder.args = {
     mode: "multiple",
 };
+Reorder.parameters = {
+    docs: {
+        description: {
+            story: "Modal avec réorganisation drag-and-drop. Testez la réorganisation.",
+        },
+    },
+};
 export var Scroll = Template.bind({});
 Scroll.args = {
     mode: "multiple",
     pros: __spreadArray(__spreadArray(__spreadArray([], samplePros, true), samplePros.map(function (p, i) { return (__assign(__assign({}, p), { proUserId: "x" + (i + 1) })); }), true), samplePros.map(function (p, i) { return (__assign(__assign({}, p), { proUserId: "y" + (i + 1) })); }), true),
 };
+Scroll.parameters = {
+    docs: {
+        description: {
+            story: "Modal avec beaucoup de pros et scroll. Testez le blocage de désélection.",
+        },
+    },
+};
 export var FallbackInitiales = Template.bind({});
 FallbackInitiales.args = {
     mode: "multiple",
     pros: samplePros.map(function (p) { return (__assign(__assign({}, p), { profilePictureLink: "" })); }),
 };
+FallbackInitiales.parameters = {
+    docs: {
+        description: {
+            story: "Modal avec fallback sur les initiales.",
+        },
+    },
+};
 export var Responsive = Template.bind({});
 Responsive.args = {
     mode: "multiple",
     pros: samplePros,
 };
+Responsive.parameters = {
+    docs: {
+        description: {
+            story: "Modal responsive. Redimensionnez la fenêtre pour tester la responsivité.",
+        },
+    },
+};
 export var ResponsiveMobile = Template.bind({});
 ResponsiveMobile.args = {
     mode: "multiple",
@@ -169,6 +211,11 @@ ResponsiveMobile.parameters = {
         defaultViewport: "mobile1",
     },
     layout: "fullscreen",
+    docs: {
+        description: {
+            story: "Modal en mode mobile. Testez sur mobile ou redimensionnez la fenêtre.",
+        },
+    },
 };
 export var FewProfiles = Template.bind({});
 FewProfiles.args = {
@@ -192,3 +239,31 @@ FewProfiles.args = {
         },
     ],
 };
+FewProfiles.parameters = {
+    docs: {
+        description: {
+            story: "Modal avec peu de profils. Testez le blocage de désélection.",
+        },
+    },
+};
+export var TestBlocking = function () {
+    var _a = useState(["1", "2"]), selected = _a[0], setSelected = _a[1];
+    var _b = useState(samplePros.map(function (p) { return p.proUserId; })), order = _b[0], setOrder = _b[1];
+    var handleOrderChange = function (newOrderPros) {
+        setOrder(newOrderPros.map(function (p) { return p.proUserId; }));
+        action("onOrderChange")(newOrderPros);
+    };
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (p) { return p.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement("h3", { style: { marginBottom: "10px" } }, "Test du Blocage de D\u00E9s\u00E9lection"),
+        React.createElement("p", { style: { marginBottom: "20px", fontSize: "14px", color: "#666" } }, "\uD83D\uDD12 En mode multiple, essayez de d\u00E9s\u00E9lectionner le dernier pro s\u00E9lectionn\u00E9. Cela devrait \u00EAtre impossible !"),
+        React.createElement("button", { onClick: function () { return setSelected(["1", "2"]); }, style: { marginBottom: "16px", padding: "8px 16px" } }, "Reset \u00E0 2 pros s\u00E9lectionn\u00E9s"),
+        React.createElement(ProSwitchModal, { open: true, pros: samplePros.filter(function (p) { return order.includes(p.proUserId); }), selected: selected, mode: "multiple", onOrderChange: handleOrderChange, onSelect: handleSelect, onClosePortal: function () { }, onOpenPortal: action("onOpenPortal") }),
+        React.createElement("div", { style: { marginTop: "10px", fontSize: "12px", color: "#666" } },
+            React.createElement("strong", null, "S\u00E9lection actuelle :"),
+            " ",
+            selected.join(", ") || "Aucune")));
+};

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export { default as DocumentCard } from "./components/molecules/documentCard/Doc
 export type { DocumentCardProps } from "./components/molecules/documentCard/DocumentCard";
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 export { Stepper as DataStepper } from "./components/molecules/DataStepper";
-export type { StepField as DataStepField, StepConfig as DataStepConfig, StepperProps as DataStepperProps } from "./components/molecules/DataStepper";
+export type { StepField as DataStepField, StepConfig as DataStepConfig, StepperProps as DataStepperProps, } from "./components/molecules/DataStepper";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
 export { default as RangeSlider } from "./components/molecules/rangeSlider/RangeSlider";
@@ -107,6 +107,10 @@ export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHead
 export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
 export type { BlogFooterProps } from "./components/molecules/blogFooter/BlogFooter";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export { default as ProSwitch } from "./components/molecules/proSwitch/ProSwitch";
+export type { Pro } from "./components/molecules/proSwitch/AvatarToggleGroup";
+export type { AvatarBubbleProps } from "./components/molecules/proSwitch/AvatarBubble";
+export type { AvatarToggleGroupProps } from "./components/molecules/proSwitch/AvatarToggleGroup";
 export type { BlogCardProps } from "./components/molecules/blogCard/BlogCard";
 export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export type { BlogTextProps } from "./components/molecules/blogText/BlogText";

package/dist/index.js

@@ -108,6 +108,8 @@ export { default as Brands } from "./components/molecules/brands/Brands";
 export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
 export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+// ProSwitch
+export { default as ProSwitch } from "./components/molecules/proSwitch/ProSwitch";
 export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 // File Uploader

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -50,6 +50,7 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-hook-form": "^7.53.0",
+    "react-tooltip": "^5.29.1",
     "typeface-open-sans": "^1.1.13"
   },
   "devDependencies": {