@edifice.io/react 2.6.6-develop-b2school.20260924114544 → 2.6.6-develop-b2school.20260924174112

package/dist/components/Alert/Alert.js

@@ -1,13 +1,14 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
+import { forwardRef, useState, useRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect } from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import SvgIconAlertCircle from "../../modules/icons/components/IconAlertCircle.js";
+import SvgIconAlertTriangle from "../../modules/icons/components/IconAlertTriangle.js";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
 import SvgIconError from "../../modules/icons/components/IconError.js";
 import SvgIconInfoCircle from "../../modules/icons/components/IconInfoCircle.js";
 import SvgIconSuccessOutline from "../../modules/icons/components/IconSuccessOutline.js";
-import Button from "../Button/Button.js";
-const Alert = /* @__PURE__ */ forwardRef(({
+import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
+const TOAST_EXIT_ANIMATION_DURATION = 240, getToastAnimationClass = (position, isClosing) => position === "top-left" || position === "bottom-left" ? isClosing ? "alert-slide-out-left" : "alert-slide-in-left" : position === "top-right" || position === "bottom-right" ? isClosing ? "alert-slide-out-right" : "alert-slide-in-right" : isClosing ? "alert-fade-out" : "alert-fade-in", Alert = /* @__PURE__ */ forwardRef(({
   type = "success",
   className = "",
   children,
@@ -21,31 +22,53 @@ const Alert = /* @__PURE__ */ forwardRef(({
   onClose,
   onVisibilityChange
 }, ref) => {
-  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
+  const [isVisible, setVisibleStatus] = useState(!0), [isClosing, setIsClosing] = useState(!1), refAlert = useRef(null), {
     t
   } = useTranslation(), hide = useCallback(() => {
+    if (isToast) {
+      setIsClosing(!0);
+      return;
+    }
     setVisibleStatus(!1), onClose == null || onClose();
-  }, [onClose]);
+  }, [isToast, onClose]);
+  useEffect(() => {
+    if (!isClosing)
+      return;
+    const timeoutId = setTimeout(() => {
+      setVisibleStatus(!1), onClose == null || onClose();
+    }, TOAST_EXIT_ANIMATION_DURATION);
+    return () => clearTimeout(timeoutId);
+  }, [isClosing, onClose]);
+  const handleToastClick = () => {
+    isToast && !isConfirm && hide();
+  };
   useImperativeHandle(ref, () => ({
     show,
     hide,
     ...refAlert.current
   })), useLayoutEffect(() => {
     onVisibilityChange == null || onVisibilityChange(isVisible);
-  }, [isVisible, onVisibilityChange]), useEffect(() => {
-    autoClose && isVisible && setTimeout(() => {
-      hide();
-    }, autoCloseDelay);
-  }, [autoClose, autoCloseDelay, hide, isVisible]);
-  const show = () => {
-    setVisibleStatus(!0);
+  }, [isVisible, onVisibilityChange]);
+  const shouldAutoClose = autoClose && isVisible && !isClosing, showProgress = autoClose && isToast && !isDismissible && !isClosing, remainingRef = useRef(autoCloseDelay), timeoutRef = useRef(), startedAtRef = useRef(0), [isPaused, setIsPaused] = useState(!1), clearAutoCloseTimeout = useCallback(() => {
+    timeoutRef.current && (clearTimeout(timeoutRef.current), timeoutRef.current = void 0);
+  }, []);
+  useEffect(() => {
+    if (shouldAutoClose)
+      return remainingRef.current = autoCloseDelay, startedAtRef.current = Date.now(), timeoutRef.current = setTimeout(hide, autoCloseDelay), clearAutoCloseTimeout;
+  }, [shouldAutoClose, autoCloseDelay, hide, clearAutoCloseTimeout]);
+  const handleMouseEnter = () => {
+    !shouldAutoClose || isPaused || (clearAutoCloseTimeout(), remainingRef.current = Math.max(remainingRef.current - (Date.now() - startedAtRef.current), 0), setIsPaused(!0));
+  }, handleMouseLeave = () => {
+    !shouldAutoClose || !isPaused || (startedAtRef.current = Date.now(), timeoutRef.current = setTimeout(hide, remainingRef.current), setIsPaused(!1));
+  }, show = () => {
+    setIsClosing(!1), setVisibleStatus(!0);
   }, mapping = {
     success: {
       icon: /* @__PURE__ */ jsx(SvgIconSuccessOutline, {}),
       classModifier: "alert-success"
     },
     warning: {
-      icon: /* @__PURE__ */ jsx(SvgIconAlertCircle, {}),
+      icon: /* @__PURE__ */ jsx(SvgIconAlertTriangle, {}),
       classModifier: "alert-warning"
     },
     info: {
@@ -58,21 +81,22 @@ const Alert = /* @__PURE__ */ forwardRef(({
     }
   }, toastClasses = {
     "is-dismissible": isDismissible,
-    "is-toast ": isToast
+    "is-toast": isToast
   }, confirmClasses = {
     "is-confirm": isConfirm
-  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
-  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
+  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, isToast && getToastAnimationClass(position, isClosing), className);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleToastClick, children: [
     !isConfirm && mapping[type].icon,
     /* @__PURE__ */ jsx("div", { className: "alert-content small flex-grow-1", children }),
-    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
+    button && /* @__PURE__ */ jsxs("div", { className: "alert-actions", onClick: (e) => e.stopPropagation(), children: [
       button,
-      " ",
-      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
+      isConfirm && /* @__PURE__ */ jsx(ButtonBeta, { onClick: hide, children: t("close") })
     ] }),
-    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
-    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
-      transform: "scaleX(0)"
+    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(ButtonBeta, { type: "button", leftIcon: /* @__PURE__ */ jsx(SvgIconClose, {}), variant: "ghost", color: "tertiary", "aria-label": t("close"), title: t("close"), onClick: hide }) }),
+    showProgress && /* @__PURE__ */ jsx("div", { className: clsx("alert-progress", {
+      "is-paused": isPaused
+    }), style: {
+      "--alert-progress-duration": `${autoCloseDelay}ms`
     } })
   ] }) : null });
 });

package/dist/components/Layout/Layout.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 import clsx from "clsx";
-import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useEdificeTheme } from "../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
 import { useOverlay } from "../PageLayout/hook/useOverlay.js";
@@ -9,11 +8,12 @@ import Header from "./components/Header.js";
 import HeaderNotificationsOverlay from "./components/HeaderNotificationsOverlay.js";
 import useUiOverride from "../../hooks/useUiOverride/useUiOverride.js";
 import useBackground from "../../hooks/useBackground/useBackground.js";
+import useToast from "../../hooks/useToast/useToast.js";
 import useCookiesConsent from "../../hooks/useCookiesConsent/useCookiesConsent.js";
 import useZendeskGuide from "../../hooks/useZendeskGuide/useZendeskGuide.js";
 import useCantoo from "../../hooks/useCantoo/useCantoo.js";
 import Alert from "../Alert/Alert.js";
-import Button from "../Button/Button.js";
+import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
 const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/components/Header/Header.js")), Layout = ({
   children,
   headless = !1,
@@ -29,7 +29,7 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
     isBackgroundImageOverridden
   } = useBackground(), {
     toggleOverlay
-  } = useOverlay(), {
+  } = useOverlay(), toast = useToast(), {
     t
   } = useTranslation(), {
     showCookiesConsent,
@@ -42,9 +42,7 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
     "container-fluid": !headless,
     "rounded-4 border": (theme == null ? void 0 : theme.is1d) && !headless,
     "mt-24": (theme == null ? void 0 : theme.is1d) && !headless
-  }, className), renderHeader = headless ? null : isHeaderV2 ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeaderV2, { src: theme == null ? void 0 : theme.basePath, dataProduct: override == null ? void 0 : override.theme, onNotificationsClick: toggleOverlay }) }) : /* @__PURE__ */ jsx(Header, { is1d: theme == null ? void 0 : theme.is1d, src: theme == null ? void 0 : theme.basePath }), renderNotificationsOverlay = !headless && isHeaderV2 && /* @__PURE__ */ jsx(HeaderNotificationsOverlay, {}), renderCookies = showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", className: "m-12 rgpd", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(Button, { color: "tertiary", variant: "ghost", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") }), renderToaster = /* @__PURE__ */ jsx(Toaster, { containerClassName: "toaster-container", toastOptions: {
-    position: "top-right"
-  } });
+  }, className), renderHeader = headless ? null : isHeaderV2 ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeaderV2, { src: theme == null ? void 0 : theme.basePath, dataProduct: override == null ? void 0 : override.theme, onNotificationsClick: toggleOverlay }) }) : /* @__PURE__ */ jsx(Header, { is1d: theme == null ? void 0 : theme.is1d, src: theme == null ? void 0 : theme.basePath }), renderNotificationsOverlay = !headless && isHeaderV2 && /* @__PURE__ */ jsx(HeaderNotificationsOverlay, {}), renderCookies = showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", className: "m-12 rgpd", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(ButtonBeta, { variant: "outline", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") }), renderToaster = toast.renderToaster();
   return /* @__PURE__ */ jsxs("div", { "data-product": productOverride, "data-background": theme != null && theme.is1d ? void 0 : background, className: clsx("layout", {
     "layout-has-background-image": isBackgroundImageOverridden
   }), children: [

package/dist/components/PageLayout/PageLayout.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
 import clsx from "clsx";
+import { useTranslation } from "react-i18next";
 import PageLayoutBreadcrumb from "./components/PageLayoutBreadcrumb.js";
 import PageLayoutContent from "./components/PageLayoutContent.js";
 import PageLayoutHeader from "./components/PageLayoutHeader.js";
@@ -9,6 +10,10 @@ import PageLayoutOverlay from "./components/PageLayoutOverlay.js";
 import PageLayoutSidebarLeft from "./components/PageLayoutSidebarLeft.js";
 import PageLayoutSidebarRight from "./components/PageLayoutSidebarRight.js";
 import { PageLayoutContext } from "./PageLayoutContext.js";
+import useCookiesConsent from "../../hooks/useCookiesConsent/useCookiesConsent.js";
+import useToast from "../../hooks/useToast/useToast.js";
+import Alert from "../Alert/Alert.js";
+import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
 function analyzeChildren(children) {
   let hasLeftSidebar = !1, hasRightSidebar = !1, breadcrumb = null, overlay = null, helpZone = null;
   const headerChildren = [], mainChildren = [];
@@ -59,11 +64,17 @@ const Root = ({
   className,
   ...props
 }) => {
-  const contextValue = useMemo(() => ({
+  const {
+    t
+  } = useTranslation(), {
+    showCookiesConsent,
+    handleConsultCookies,
+    handleCloseCookiesConsent
+  } = useCookiesConsent(), contextValue = useMemo(() => ({
     variant,
     scrollMode,
     noPadding
-  }), [variant, scrollMode, noPadding]), {
+  }), [variant, scrollMode, noPadding]), renderToaster = useToast().renderToaster(), {
     hasLeftSidebar,
     hasRightSidebar,
     breadcrumb,
@@ -86,9 +97,11 @@ const Root = ({
         isFullpage && breadcrumb,
         mainChildren
       ] }),
-      overlay
+      overlay,
+      showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(ButtonBeta, { variant: "outline", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") })
     ] }),
-    helpZone
+    helpZone,
+    renderToaster
   ] });
 }, PageLayout = Object.assign(Root, {
   Header: PageLayoutHeader,

package/dist/hooks/useToast/useToast.d.ts

@@ -7,6 +7,7 @@ export interface CustomToastOptions {
     duration?: number;
 }
 export default function useToast(): {
+    renderToaster: () => import("react/jsx-runtime").JSX.Element;
     success: (message: string | ReactNode, options?: CustomToastOptions) => string;
     error: (message: string | ReactNode, options?: CustomToastOptions) => string;
     info: (message: string | ReactNode, options?: CustomToastOptions) => string;

package/dist/hooks/useToast/useToast.js

@@ -1,27 +1,30 @@
 import { jsx } from "react/jsx-runtime";
-import toast from "react-hot-toast";
+import toast, { Toaster } from "react-hot-toast";
 import Alert from "../../components/Alert/Alert.js";
 const DEFAULT_POSITION = "top-right", DEFAULT_DURATION = 5e3;
 function useToast() {
   return {
-    success: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "success", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+    renderToaster: () => /* @__PURE__ */ jsx(Toaster, { containerClassName: "toaster-container", toastOptions: {
+      position: "top-right"
+    } }),
+    success: (message, options) => toast.custom((t) => /* @__PURE__ */ jsx(Alert, { type: "success", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, autoClose: !(options != null && options.isDismissible), autoCloseDelay: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION, onClose: () => toast.dismiss(t.id), className: "mb-12", children: message }), {
       id: options == null ? void 0 : options.id,
-      duration: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION,
+      duration: 1 / 0,
       position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
     }),
-    error: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "danger", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+    error: (message, options) => toast.custom((t) => /* @__PURE__ */ jsx(Alert, { type: "danger", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, autoClose: !(options != null && options.isDismissible), autoCloseDelay: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION, onClose: () => toast.dismiss(t.id), className: "mb-12", children: message }), {
       id: options == null ? void 0 : options.id,
-      duration: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION,
+      duration: 1 / 0,
       position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
     }),
-    info: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "info", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+    info: (message, options) => toast.custom((t) => /* @__PURE__ */ jsx(Alert, { type: "info", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, autoClose: !(options != null && options.isDismissible), autoCloseDelay: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION, onClose: () => toast.dismiss(t.id), className: "mb-12", children: message }), {
       id: options == null ? void 0 : options.id,
-      duration: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION,
+      duration: 1 / 0,
       position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
     }),
-    warning: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "warning", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+    warning: (message, options) => toast.custom((t) => /* @__PURE__ */ jsx(Alert, { type: "warning", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, autoClose: !(options != null && options.isDismissible), autoCloseDelay: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION, onClose: () => toast.dismiss(t.id), className: "mb-12", children: message }), {
       id: options == null ? void 0 : options.id,
-      duration: (options == null ? void 0 : options.duration) ?? DEFAULT_DURATION,
+      duration: 1 / 0,
       position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
     }),
     loading: toast.loading,

package/dist/modules/homepage/components/Notifications/services/queries/notification.js

@@ -1,6 +1,8 @@
 import { odeServices } from "@edifice.io/client";
 import { useQuery, useInfiniteQuery, useMutation, useQueryClient, queryOptions, infiniteQueryOptions } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { notificationService } from "../api/index.js";
+import useToast from "../../../../../../hooks/useToast/useToast.js";
 const notificationQueryKeys = {
   all: () => ["notifications"],
   notifications: (types = []) => [...notificationQueryKeys.all(), "list", types],
@@ -52,7 +54,9 @@ const notificationQueryKeys = {
 }, useReportNotification = () => useMutation({
   mutationFn: (id) => notificationService.reportNotification(id)
 }), useDeleteNotification = () => {
-  const queryClient = useQueryClient();
+  const {
+    t
+  } = useTranslation(), toast = useToast(), queryClient = useQueryClient();
   return useMutation({
     mutationFn: (id) => notificationService.deleteNotification(id),
     onSuccess: (_data, id) => {
@@ -61,7 +65,10 @@ const notificationQueryKeys = {
       }, (data) => data && {
         ...data,
         pages: data.pages.map((page) => page.filter((notification) => notification._id !== id))
-      });
+      }), toast.success(t("homepage.notifications.options.delete.success"));
+    },
+    onError: () => {
+      toast.error(t("homepage.notifications.options.delete.error"));
     }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.6.6-develop-b2school.20260924114544",
+  "version": "2.6.6-develop-b2school.20260924174112",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -140,9 +140,9 @@
     "swiper": "10.1.0",
     "ua-parser-js": "1.0.36",
     "zustand": "4.5.7",
-    "@edifice.io/bootstrap": "2.6.6-develop-b2school.20260924114544",
-    "@edifice.io/tiptap-extensions": "2.6.6-develop-b2school.20260924114544",
-    "@edifice.io/utilities": "2.6.6-develop-b2school.20260924114544"
+    "@edifice.io/bootstrap": "2.6.6-develop-b2school.20260924174112",
+    "@edifice.io/tiptap-extensions": "2.6.6-develop-b2school.20260924174112",
+    "@edifice.io/utilities": "2.6.6-develop-b2school.20260924174112"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "7.27.1",
@@ -173,8 +173,8 @@
     "vite": "5.4.14",
     "vite-plugin-dts": "4.5.4",
     "vite-tsconfig-paths": "5.1.4",
-    "@edifice.io/client": "2.6.6-develop-b2school.20260924114544",
-    "@edifice.io/config": "2.6.6-develop-b2school.20260924114544"
+    "@edifice.io/client": "2.6.6-develop-b2school.20260924174112",
+    "@edifice.io/config": "2.6.6-develop-b2school.20260924174112"
   },
   "peerDependencies": {
     "@react-spring/web": "9.7.5",