allaw-ui 4.2.3 → 4.2.5

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

@@ -13,6 +13,7 @@ export interface AvatarBubbleProps {
     borderThick?: boolean;
     showTooltip?: boolean;
     tooltipId?: string;
+    clickable?: boolean;
 }
 declare const AvatarBubble: React.FC<AvatarBubbleProps>;
 export default AvatarBubble;

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

@@ -36,8 +36,8 @@ 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, _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 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, _k = _a.clickable, clickable = _k === void 0 ? true : _k;
+    var _l = useState(false), imageError = _l[0], setImageError = _l[1];
     var hasValidSrc = src && src.trim() !== "";
     var shouldShowInitials = !hasValidSrc || imageError;
     var backgroundColor = generateBackgroundColor(firstName, name);
@@ -49,19 +49,22 @@ var AvatarBubble = function (_a) {
         setImageError(true);
     }, []);
     var handleClick = useCallback(function () {
-        if (!disabled && onClick) {
+        if (!disabled && clickable && onClick) {
             onClick();
         }
-    }, [disabled, onClick]);
+    }, [disabled, clickable, onClick]);
     var handleKeyDown = useCallback(function (event) {
+        if (!clickable)
+            return;
         if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
             handleClick();
         }
-    }, [handleClick]);
+    }, [handleClick, clickable]);
     var containerStyle = {
         width: "".concat(size, "px"),
         height: "".concat(size, "px"),
+        cursor: clickable && !disabled ? "pointer" : "default",
     };
     var initialsStyle = {
         backgroundColor: backgroundColor,
@@ -75,7 +78,18 @@ var AvatarBubble = function (_a) {
                         : 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 && {
+                        : styles.thin), style: containerStyle }, (clickable
+            ? {
+                role: "button",
+                tabIndex: disabled ? -1 : 0,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+                "aria-label": ariaLabel,
+            }
+            : {
+                tabIndex: -1,
+                "aria-label": ariaLabel,
+            }), { "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 },

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

@@ -77,6 +77,12 @@ declare namespace _default {
             let description_11: string;
             export { description_11 as description };
         }
+        namespace clickable {
+            let control_11: string;
+            export { control_11 as control };
+            let description_12: string;
+            export { description_12 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -101,5 +107,6 @@ export const SelectedWithoutHoverAnimation: any;
 export function MultipleSizes(): React.JSX.Element;
 export function ColorVariations(): React.JSX.Element;
 export function HoverAnimationComparison(): React.JSX.Element;
+export const NotClickable: any;
 import AvatarBubble from "./AvatarBubble";
 import React from "react";

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

@@ -66,6 +66,10 @@ export default {
             control: "text",
             description: "Texte alternatif pour l'accessibilité",
         },
+        clickable: {
+            control: "boolean",
+            description: "État cliquable de l'avatar",
+        },
     },
     parameters: {
         backgrounds: {
@@ -237,3 +241,15 @@ export var HoverAnimationComparison = function () {
             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, showTooltip: true, tooltipId: "hover-comparison-tooltip" }))));
 };
+export var NotClickable = Template.bind({});
+NotClickable.args = {
+    firstName: "Non",
+    name: "Cliquable",
+    src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: false,
+    disabled: false,
+    clickable: false,
+    showTooltip: true,
+    tooltipId: "avatar-not-clickable",
+};

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pro } from "./AvatarToggleGroup";
-interface ProSwitchProps {
+export interface ProSwitchProps {
     pros: Pro[];
     selected: string[];
     mode: "single" | "multiple";

package/dist/components/molecules/proSwitch/avatarBubble.module.css

@@ -114,3 +114,10 @@
   box-shadow: 0px 0px 4px rgba(37, 190, 235, 0.5);
   z-index: 5;
 }
+
+.avatarBubble[data-clickable="false"] {
+  cursor: default !important;
+}
+.avatarBubble[data-clickable="false"]:hover {
+  transform: none;
+}

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

@@ -0,0 +1,6 @@
+export { default as ProSwitch } from "./ProSwitch";
+export type { ProSwitchProps } from "./ProSwitch";
+export { default as AvatarBubble } from "./AvatarBubble";
+export type { AvatarBubbleProps } from "./AvatarBubble";
+export { default as AvatarToggleGroup } from "./AvatarToggleGroup";
+export type { AvatarToggleGroupProps } from "./AvatarToggleGroup";

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

@@ -0,0 +1,3 @@
+export { default as ProSwitch } from "./ProSwitch";
+export { default as AvatarBubble } from "./AvatarBubble";
+export { default as AvatarToggleGroup } from "./AvatarToggleGroup";

package/dist/index.d.ts

@@ -120,3 +120,4 @@ export { default as blogTextImageBlock } from "./components/molecules/blogTextIm
 export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
 export type { FileUploaderProps } from "./components/molecules/fileUploader/FileUploader";
+export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";

package/dist/index.js

@@ -115,3 +115,4 @@ export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 // File Uploader
 export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
+export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";

package/package.json

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