@edifice.io/react 2.0.4 → 2.0.5-develop-pedago.20250124124139

package/README.md

@@ -52,8 +52,8 @@ src
 - Export everything if Component has types & interfaces
 
 ```jsx
-export { default as Component } from "./Component";
-export * from "./Component";
+export { default as Component } from './Component';
+export * from './Component';
 ```
 
 ### Component Guideline
@@ -102,7 +102,7 @@ export interface ButtonProps {
 - Import your component inside `index.ts` file.
 
 ```jsx
-export * from "./Button";
+export * from './Button';
 ```
 
 ## Dev

package/dist/components/Attachment/Attachment.js

@@ -6,7 +6,7 @@ const Attachment = /* @__PURE__ */ forwardRef(({
   name = "Attachment Name",
   options,
   ...restProps
-}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, tabIndex: 0, children: [
   /* @__PURE__ */ jsxs(Tooltip, { message: name, className: "filename text-truncate d-flex align-items-center gap-8", children: [
     /* @__PURE__ */ jsx(SvgIconPaperclip, { height: 22, width: 22 }),
     /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name })

package/dist/components/Button/Button.js

@@ -24,7 +24,7 @@ const Button = /* @__PURE__ */ forwardRef(({
     "btn-lg": size === "lg",
     "btn-sm": size === "sm"
   }, className);
-  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsx("button", { ref, "data-testid": "button", className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
     leftIcon,
     children,
     rightIcon

package/dist/components/Layout/components/Header.js

@@ -4,13 +4,14 @@ import { useTranslation } from "react-i18next";
 import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
 import { useEdificeTheme } from "../../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
 import SvgIconRafterDown from "../../../modules/icons/components/IconRafterDown.js";
-import SvgIconAssistance from "../../../modules/icons/components/apps/IconAssistance.js";
 import SvgIconCommunity from "../../../modules/icons/components/nav/IconCommunity.js";
 import SvgIconDisconnect from "../../../modules/icons/components/nav/IconDisconnect.js";
 import SvgIconHome from "../../../modules/icons/components/nav/IconHome.js";
 import SvgIconMyApps from "../../../modules/icons/components/nav/IconMyApps.js";
+import SvgIconNeoAssistance from "../../../modules/icons/components/nav/IconNeoAssistance.js";
 import SvgIconNeoMessaging from "../../../modules/icons/components/nav/IconNeoMessaging.js";
 import SvgIconNewRelease from "../../../modules/icons/components/nav/IconNewRelease.js";
+import SvgIconOneAssistance from "../../../modules/icons/components/nav/IconOneAssistance.js";
 import SvgIconOneMessaging from "../../../modules/icons/components/nav/IconOneMessaging.js";
 import SvgIconOneProfile from "../../../modules/icons/components/nav/IconOneProfile.js";
 import SvgIconUserbook from "../../../modules/icons/components/nav/IconUserbook.js";
@@ -98,7 +99,7 @@ const Header = ({
           /* @__PURE__ */ jsxs("button", { className: "nav-link", onClick: () => {
             setIsHelpOpen(!0);
           }, children: [
-            /* @__PURE__ */ jsx(SvgIconAssistance, { className: "icon help" }),
+            /* @__PURE__ */ jsx(SvgIconOneAssistance, { className: "icon help" }),
             /* @__PURE__ */ jsx(VisuallyHidden, { children: t("navbar.help") })
           ] }),
           /* @__PURE__ */ jsx(Help, { isHelpOpen, setIsHelpOpen, parsedContent, parsedHeadline, error })
@@ -157,7 +158,7 @@ const Header = ({
         /* @__PURE__ */ jsxs("button", { className: "nav-link btn btn-naked", onClick: () => {
           setIsHelpOpen(!0);
         }, children: [
-          /* @__PURE__ */ jsx(SvgIconAssistance, { color: "#fff" }),
+          /* @__PURE__ */ jsx(SvgIconNeoAssistance, { color: "#fff" }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: t("support") })
         ] }),
         /* @__PURE__ */ jsx(Help, { isHelpOpen, setIsHelpOpen, parsedContent, parsedHeadline, error })

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const Root = /* @__PURE__ */ forwardRef((props, ref) => {
     scrollable = !1,
     focusId,
     children
-  } = props, ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus();
+  } = props, ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus(isOpen);
   useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
     if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
       const elem = document.getElementById(focusId);

package/dist/components/Tree/components/SortableTree.js

@@ -11,6 +11,7 @@ import SvgIconRafterRight from "../../../modules/icons/components/IconRafterRigh
 import { useTree } from "../hooks/useTree.js";
 import { useTreeSortable } from "../hooks/useTreeSortable.js";
 import { flattenNodes } from "../utilities/tree-sortable.js";
+import { mergeRefs } from "../../../utilities/refs/ref.js";
 const SortableTree = ({
   nodes,
   selectedNodeId: externalSelectedNodeId,
@@ -73,7 +74,7 @@ const SortableTree = ({
   renderNode,
   onTreeItemClick,
   onToggleNode
-}) => {
+}, ref) => {
   const {
     t
   } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), animateLayoutChanges = ({
@@ -108,7 +109,7 @@ const SortableTree = ({
   }, handleItemToggleKeyDown = (event) => {
     (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onToggleNode == null || onToggleNode(node.id));
   }, spaceGestion = () => isDragging ? isChild ? depth === 1 ? `${indentationWidth * depth}px` : "0px" : `${indentationWidth * depth}px` : isChild ? "20px" : null;
-  return /* @__PURE__ */ jsx("li", { ref: setNodeRef, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, style: {
+  return /* @__PURE__ */ jsx("li", { ref: mergeRefs(setNodeRef, ref), id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, style: {
     ...style,
     marginLeft: spaceGestion()
   }, ...listeners, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [

package/dist/components/Tree/types/index.d.ts

@@ -41,6 +41,7 @@ export interface TreeProps extends SharedTreeProps {
     onTreeItemUnfold?: (nodeId: string) => void;
     /**
      * Callback function to secondary action
+     * @deprecated Use `renderNode ` instead
      */
     onTreeItemAction?: (nodeId: string) => void;
 }

package/dist/components/Tree/utilities/tree.d.ts

@@ -1,6 +1,7 @@
 import { IFolder } from '@edifice.io/client';
 import { TreeItem } from '../types';
 export declare function findNodeById(data: TreeItem | TreeItem[], id: string): TreeItem | undefined;
+export declare function getChildrenIds(data: TreeItem[], folderId: string): string[];
 export declare function addNode(node: TreeItem, { parentId, newFolder }: {
     parentId: string;
     newFolder: IFolder;
@@ -10,7 +11,7 @@ export declare function deleteNode(node: TreeItem, { folders }: {
     folders: string[];
 }): TreeItem;
 export declare const findParentNode: (parentNode: TreeItem, childId: string) => TreeItem | undefined;
-export declare function getAncestors(data: TreeItem, folderId: string): string[];
+export declare function getAncestors(data: TreeItem[], folderId: string): string[];
 export declare function hasChildren(folderId: string, data: TreeItem): boolean;
 export declare function modifyNode(data: TreeItem, callback: (node: TreeItem, parent?: TreeItem) => TreeItem | undefined): TreeItem;
 export declare function moveNode(node: TreeItem, { destinationId, folders }: {

package/dist/hooks/useConf/useConf.d.ts

@@ -1,4 +1,4 @@
-import { App } from '@edifice.io/client';
+import { App, IGetConf } from '@edifice.io/client';
 export default function useConf({ appCode }: {
     appCode: App;
-}): QueryObserverResult<TData, TError>;
+}): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;

package/dist/hooks/useDropzone/useDropzone.js

@@ -30,7 +30,7 @@ const useDropzone = (props) => {
         type: file.type
       })
     ));
-    props != null && props.forceFilters ? (filesToAdd = applyInputFiltersOn(filesToAdd), filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd])) : setFiles((prevFiles) => [...prevFiles, ...files2]);
+    filesToAdd.reverse(), props != null && props.forceFilters ? (filesToAdd = applyInputFiltersOn(filesToAdd), filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd])) : setFiles((prevFiles) => [...prevFiles, ...files2]);
   }, cleanFiles = () => {
     setFiles([]);
   }, handleOnChange = (event) => {

package/dist/hooks/useSession/useSession.d.ts

@@ -1 +1,2 @@
-export default function useSession(): QueryObserverResult<TData, TError>;
+import { IGetSession } from '@edifice.io/client';
+export default function useSession(): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;

package/dist/hooks/useTrapFocus/useTrapFocus.d.ts

@@ -1 +1 @@
-export default function useTrapFocus(): import('react').MutableRefObject<HTMLElement | null>;
+export default function useTrapFocus(isActive?: boolean): import('react').MutableRefObject<HTMLElement | null>;

package/dist/hooks/useTrapFocus/useTrapFocus.js

@@ -1,7 +1,8 @@
 import { useRef, useEffect } from "react";
-function useTrapFocus() {
+function useTrapFocus(isActive) {
   const ref = useRef(null), focusableElements = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
   return useEffect(() => {
+    if (!isActive) return;
     const node = ref.current, firstFocusableElement = node.querySelectorAll(focusableElements)[0], focusableContent = node.querySelectorAll(focusableElements), lastFocusableElement = ref && (focusableContent == null ? void 0 : focusableContent[focusableContent.length - 1]), handleKeydown = (event) => {
       event.key === "Tab" && (event.shiftKey ? document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), event.preventDefault()) : document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), event.preventDefault()));
     };
@@ -9,7 +10,7 @@ function useTrapFocus() {
       return node.addEventListener("keydown", handleKeydown), () => {
         node.removeEventListener("keydown", handleKeydown);
       };
-  }, []), ref;
+  }, [isActive]), ref;
 }
 export {
   useTrapFocus as default

package/dist/index.js

@@ -100,6 +100,7 @@ import { useEdificeClient } from "./providers/EdificeClientProvider/EdificeClien
 import { EdificeThemeProvider } from "./providers/EdificeThemeProvider/EdificeThemeProvider.js";
 import { EdificeThemeContext } from "./providers/EdificeThemeProvider/EdificeThemeProvider.context.js";
 import { useEdificeTheme } from "./providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import { MockedProvider } from "./providers/MockedProvider/MockedProvider.js";
 import { checkUserRight } from "./utilities/check-user-rights/check-user-rights.js";
 import { emptyScreenMapping } from "./utilities/emptyscreen-mapping/emptyscreen-mapping.js";
 import { mergeRefs, setRef } from "./utilities/refs/ref.js";
@@ -145,6 +146,7 @@ export {
   default64 as LoadingScreen,
   default19 as Logo,
   Menu,
+  MockedProvider,
   default65 as Modal,
   default74 as OnboardingModal,
   Popover,

package/dist/modules/audience/ReactionChoice.d.ts

@@ -1,7 +1,20 @@
 import { ReactionSummaryData, ReactionType } from '@edifice.io/client';
+/**
+ * Props for the ReactionChoice component.
+ */
 export interface ReactionChoiceProps {
+    /**
+     * An array of available reactions that can be chosen.
+     */
     availableReactions: ReactionType[];
+    /**
+     * Optional summary data of the reactions.
+     */
     summary?: ReactionSummaryData;
+    /**
+     * Optional callback function that is called when a reaction is chosen.
+     * @param chosenReaction - The reaction that was chosen.
+     */
     onChange?: (chosenReaction?: ReactionType) => void;
 }
 declare const ReactionChoice: {

package/dist/modules/audience/ReactionModal.d.ts

@@ -1,19 +1,37 @@
 import { ReactionDetailsData } from '@edifice.io/client';
 import { ReactionModalCard } from './ReactionModal.Card';
+/**
+ * Props for the ReactionModal component.
+ */
 export interface ReactionModalProps {
-    /** Id of resource. */
+    /**
+     * The unique identifier for the resource.
+     */
     resourceId: string;
-    /** Number of results per page, defaults to 30. */
+    /**
+     * The number of items to display per page. Optional.
+     */
     pageSize?: number;
-    /** Display modal ? */
+    /**
+     * Indicates whether the modal is open.
+     */
     isOpen: boolean;
-    /** Close button handler. */
+    /**
+     * Callback function to handle the modal close event.
+     */
     onModalClose(): void;
-    /** Function for loading reactions to the resource. */
+    /**
+     * Function to load reaction details for a given resource.
+     *
+     * @param resourceId - The unique identifier for the resource.
+     * @param page - The current page number.
+     * @param size - The number of items to display per page.
+     * @returns A promise that resolves to the reaction details data or undefined.
+     */
     reactionDetailsLoader: (resourceId: string, page: number, size: number) => Promise<ReactionDetailsData | undefined>;
 }
 declare const ReactionModal: {
-    ({ resourceId, pageSize, reactionDetailsLoader: loadReactionDetails, onModalClose, ...restProps }: ReactionModalProps): import('react').ReactPortal;
+    ({ resourceId, pageSize, reactionDetailsLoader: loadReactionDetails, onModalClose, ...restProps }: ReactionModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Card: typeof ReactionModalCard;
 };

package/dist/modules/audience/ReactionModal.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { ReactionTypes } from "@edifice.io/client";
 import { StringUtils } from "@edifice.io/utilities";
 import { useState, useId, useCallback, useMemo, useEffect } from "react";
@@ -57,14 +57,17 @@ const ALL_TAB_ID = "all", ReactionModal = ({
   const handleTabChange = (tab) => {
     setCurrentTabId(tab.id);
   }, hasMore = reactions.length < counters.allReactionsCounter;
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.reaction.modal.header") }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
-    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
-      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
-    ] })
-  ] }), document.getElementById("portal"));
+  return (
+    // Using a fragment to ensure Storybook correctly interprets JSDoc comments: https://github.com/storybookjs/storybook/issues/27169
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.reaction.modal.header") }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
+      /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+        hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
+        /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
+      ] })
+    ] }), document.getElementById("portal")) })
+  );
 };
 ReactionModal.Card = ReactionModalCard;
 export {

package/dist/modules/audience/ReactionSummary.d.ts

@@ -1,6 +1,15 @@
 import { ReactionSummaryData } from '@edifice.io/client';
+/**
+ * Props for the ReactionSummary component.
+ */
 export interface ReactionSummaryProps {
+    /**
+     * An optional summary of reaction data.
+     */
     summary?: ReactionSummaryData;
+    /**
+     * An optional click handler function.
+     */
     onClick?: () => void;
 }
 declare const ReactionSummary: {

package/dist/modules/audience/ViewsCounter.d.ts

@@ -1,6 +1,16 @@
 export interface ViewsCounterProps {
+    /**
+     * The number of views to display.
+     *
+     */
     viewsCounter: number;
+    /**
+     * Optional click handler for the counter button.
+     */
     onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional CSS class name to apply to the counter component.
+     */
     className?: string;
 }
 declare const ViewsCounter: {

package/dist/modules/audience/ViewsModal.d.ts

@@ -1,11 +1,23 @@
 import { ViewsDetails } from '@edifice.io/client';
+/**
+ * Props for the ViewsModal component.
+ */
 export interface ViewsModalProps {
+    /**
+     * Details of the views to be displayed in the modal.
+     */
     viewsDetails: ViewsDetails;
+    /**
+     * Boolean flag indicating whether the modal is open.
+     */
     isOpen: boolean;
+    /**
+     * Callback function to be called when the modal is closed.
+     */
     onModalClose: () => void;
 }
 declare const ViewsModal: {
-    ({ viewsDetails, isOpen, onModalClose, }: ViewsModalProps): import('react').ReactPortal;
+    ({ viewsDetails, isOpen, onModalClose, }: ViewsModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ViewsModal;

package/dist/modules/audience/ViewsModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { StringUtils } from "@edifice.io/utilities";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
@@ -16,25 +16,28 @@ const ViewsModal = ({
   const {
     t
   } = useTranslation(), hasUniqueViews = viewsDetails.uniqueViewsCounter !== void 0;
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
-    /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
-        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconSee, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
-        /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+  return (
+    // Using a fragment to ensure Storybook correctly interprets JSDoc comments: https://github.com/storybookjs/storybook/issues/27169
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+          /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconSee, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
+          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+          /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconUsers, {}) }),
+          hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
+            /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
+          ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
+        ] }),
+        hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
-        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconUsers, {}) }),
-        hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
-          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
-        ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
-      ] }),
-      hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
-    ] }),
-    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
-  ] }), document.getElementById("portal"));
+      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
+    ] }), document.getElementById("portal")) })
+  );
 };
 export {
   ViewsModal as default

package/dist/modules/comments/components/Comment.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, Suspense, lazy } from "react";
 import { useTranslation } from "react-i18next";
 import SvgIconSave from "../../icons/components/IconSave.js";
 import { useAutosizeTextarea } from "../hooks/useAutosizeTextarea.js";
@@ -10,7 +10,8 @@ import { CommentDate } from "./CommentDate.js";
 import { CommentTitle } from "./CommentTitle.js";
 import { TextCounter } from "./TextCounter.js";
 import Button from "../../../components/Button/Button.js";
-const Comment = ({
+import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
+const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comment = ({
   comment,
   userId,
   profile
@@ -22,12 +23,13 @@ const Comment = ({
     createdAt,
     updatedAt,
     comment: content
-  } = comment, [ref, onFocus, resizeTextarea] = useAutosizeTextarea(!0), {
+  } = comment, [ref, onFocus, resizeTextarea] = useAutosizeTextarea(!0), [isDeleteModalOpen, setIsDeleteModalOpen] = useState(!1), {
     t
   } = useTranslation(), {
     editCommentId,
     options,
     type,
+    userRights,
     handleDeleteComment: onDeleteComment,
     handleModifyComment,
     handleReset,
@@ -57,14 +59,15 @@ const Comment = ({
         ] })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
-        userId === authorId && type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
+        type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
+          userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
             handleModifyComment(comment.id), setValue(content);
           }, children: t("comment.edit") }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => onDeleteComment(id), children: t("comment.remove") })
+          (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
         ] })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: isDeleteModalOpen && /* @__PURE__ */ jsx(DeleteModal, { isOpen: isDeleteModalOpen, onCancel: () => setIsDeleteModalOpen(!1), onSuccess: () => onDeleteComment(id) }) })
   ] }, id);
 };
 export {

package/dist/modules/comments/components/DeleteModal.d.ts

@@ -0,0 +1,7 @@
+interface DeleteModalProps {
+    isOpen: boolean;
+    onCancel: () => void;
+    onSuccess: () => void;
+}
+export declare const DeleteModal: ({ isOpen, onCancel, onSuccess, }: DeleteModalProps) => import("react/jsx-runtime").JSX.Element;
+export default DeleteModal;

package/dist/modules/comments/components/DeleteModal.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Modal from "../../../components/Modal/Modal.js";
+import Button from "../../../components/Button/Button.js";
+const DeleteModal = ({
+  isOpen,
+  onCancel,
+  onSuccess
+}) => /* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose: onCancel, id: "delete-comment-modal", children: [
+  /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: "Suppression de commentaire" }),
+  /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx("p", { children: "Voulez-vous vraiment supprimer ce commentaire ?" }) }),
+  /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+    /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: "Annuler" }),
+    /* @__PURE__ */ jsx(Button, { color: "danger", onClick: onSuccess, type: "button", variant: "filled", children: "Supprimer le commentaire" })
+  ] })
+] });
+export {
+  DeleteModal,
+  DeleteModal as default
+};

package/dist/modules/comments/context/Context.d.ts

@@ -1,3 +1,4 @@
+import { RightRole } from '@edifice.io/client';
 import { CommentOptions, CommentProps, CommentType, UserProfileResult } from '../types';
 export declare const CommentContext: import('react').Context<{
     comments: CommentProps[] | undefined;
@@ -6,6 +7,7 @@ export declare const CommentContext: import('react').Context<{
     profiles: (UserProfileResult | undefined)[];
     options: Partial<CommentOptions>;
     type: CommentType;
+    userRights?: Record<RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
     handleChangeContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/dist/modules/comments/hooks/useComments.d.ts

@@ -6,7 +6,10 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
     callbacks: CommentCallbacks | null;
 }) => {
     profilesQueries: {
-        data: any[];
+        data: ({
+            userId: string;
+            profile: "Student" | "Teacher" | "Relative" | "Personnel" | "Guest";
+        } | undefined)[];
         isLoading: boolean;
     };
     content: string;
@@ -24,6 +27,6 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
     handleDeleteComment: (id: string) => void;
     handleCreateComment: (content: string) => void;
     handleModifyComment: (commentId: string) => void;
-    handleUpdateComment: (comment: string) => void;
+    handleUpdateComment: (comment: string) => Promise<void>;
     handleReset: () => void;
 };

package/dist/modules/comments/hooks/useComments.js

@@ -50,7 +50,7 @@ const useComments = ({
     handleModifyComment: (commentId) => {
       setEditCommentId(commentId);
     },
-    handleUpdateComment: (comment) => {
+    handleUpdateComment: async (comment) => {
       editCommentId && (type === "edit" && (callbacks == null || callbacks.put({
         comment,
         commentId: editCommentId

package/dist/modules/comments/hooks/useCommentsContext.d.ts

@@ -5,6 +5,7 @@ export declare const useCommentsContext: () => {
     profiles: (import('../types').UserProfileResult | undefined)[];
     options: Partial<import('../types').CommentOptions>;
     type: import('../types').CommentType;
+    userRights?: Record<import('@edifice.io/client').RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
     handleChangeContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/dist/modules/comments/hooks/useProfileQueries.d.ts

@@ -1,4 +1,7 @@
 export declare const useProfileQueries: (usersIds: string[]) => {
-    data: any[];
+    data: ({
+        userId: string;
+        profile: "Student" | "Teacher" | "Relative" | "Personnel" | "Guest";
+    } | undefined)[];
     isLoading: boolean;
 };

package/dist/modules/comments/provider/CommentProvider.js

@@ -46,7 +46,7 @@ const CommentProvider = ({
     defaultComments,
     callbacks: type == "edit" ? props.callbacks : null,
     options
-  }), values = useMemo(
+  }), userRights = type === "edit" ? props.rights : void 0, values = useMemo(
     () => ({
       comments,
       content,
@@ -54,6 +54,7 @@ const CommentProvider = ({
       editCommentId,
       options,
       type,
+      userRights,
       setEditCommentId,
       handleCreateComment,
       handleModifyComment,

package/dist/modules/comments/types.d.ts

@@ -1,4 +1,4 @@
-import { UserProfile } from '@edifice.io/client';
+import { RightRole, UserProfile } from '@edifice.io/client';
 export interface CommentProps {
     /**
      * Comment Id
@@ -61,6 +61,10 @@ interface EditRootProps extends BaseProps {
      * Callbacks to perform CRUD on comment
      */
     callbacks: CommentCallbacks;
+    /**
+     * Rights to perform CRUD on comment
+     */
+    rights?: Record<RightRole, boolean>;
 }
 interface ReadRootProps extends BaseProps {
     type: 'read';

package/dist/modules/editor/components/Renderer/AttachmentRenderer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 import SvgIconDelete from "../../../icons/components/IconDelete.js";
@@ -10,15 +10,20 @@ import { useEditorContext } from "../../hooks/useEditorContext.js";
 import { Grid } from "../../../../components/Grid/Grid.js";
 const AttachmentRenderer = (props) => {
   const {
+    node,
+    editor
+  } = props, [attachmentArrayAttrs, setAttachmentArrayAttrs] = useState(node.attrs.links), {
     t
   } = useTranslation(), {
-    node
-  } = props, {
     editable
-  } = useEditorContext(), [attachmentArrayAttrs, setAttachmentArrayAttrs] = useState(node.attrs.links), handleDelete = (index) => {
-    setAttachmentArrayAttrs((oldAttachments) => oldAttachments.filter((_, i) => i !== index));
+  } = useEditorContext();
+  useEffect(() => {
+    attachmentArrayAttrs !== node.attrs.links && setAttachmentArrayAttrs(node.attrs.links);
+  }, [node.attrs.links, attachmentArrayAttrs]);
+  const handleDelete = (index, documentId) => {
+    editor.commands.unsetAttachment(documentId), setAttachmentArrayAttrs((oldAttachments) => oldAttachments.filter((_, i) => i !== index));
   };
-  return attachmentArrayAttrs.length !== 0 && /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsxs("div", { style: {
+  return (attachmentArrayAttrs == null ? void 0 : attachmentArrayAttrs.length) !== 0 && /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsxs("div", { style: {
     backgroundColor: "#F2F2F2",
     borderRadius: ".8rem",
     padding: "1.2rem"
@@ -26,7 +31,7 @@ const AttachmentRenderer = (props) => {
     /* @__PURE__ */ jsx("p", { className: "m-12 mt-0", children: t("tiptap.attachments.bloc") }),
     /* @__PURE__ */ jsx(Grid, { children: attachmentArrayAttrs == null ? void 0 : attachmentArrayAttrs.map((attachment, index) => /* @__PURE__ */ jsx(Grid.Col, { sm: "6", children: /* @__PURE__ */ jsx(Attachment, { name: attachment.name, options: /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("a", { href: attachment.href, download: !0, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.download"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDownload, {}), variant: "ghost" }) }),
-      editable && /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.delete"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), variant: "ghost", onClick: () => handleDelete(index) })
+      editable && /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.delete"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), variant: "ghost", onClick: () => handleDelete(index, attachment.documentId) })
     ] }) }) }, index)) })
   ] }) });
 };

package/dist/modules/editor/components/Renderer/AudioRenderer.js

@@ -4,7 +4,10 @@ const AudioRenderer = (props) => {
   const {
     node
   } = props;
-  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx("div", { className: "audio-wrapper", children: /* @__PURE__ */ jsx("audio", { src: node.attrs.src, controls: !0, "data-document-id": node.attrs.src, children: /* @__PURE__ */ jsx("track", { kind: "captions" }) }) }) });
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { style: {
+    display: "inline-block",
+    width: "fit-content"
+  }, children: /* @__PURE__ */ jsx("div", { className: "audio-wrapper", "data-drag-handle": !0, children: /* @__PURE__ */ jsx("audio", { src: node.attrs.src, controls: !0, "data-document-id": node.attrs.src, children: /* @__PURE__ */ jsx("track", { kind: "captions" }) }) }) });
 };
 export {
   AudioRenderer as default

package/dist/modules/editor/hooks/useCommentEditor.d.ts

@@ -6,7 +6,7 @@ import { Content, HTMLContent } from '@tiptap/react';
  * @param content default rich content
  */
 export declare const useCommentEditor: (editable: boolean, content: Content, maxLength?: number) => {
-    editor: import('@tiptap/react').Editor | null;
+    editor: import('@tiptap/core').Editor | null;
     commentLength: number;
     getComment: () => HTMLContent;
     resetComment: () => void;

package/dist/modules/editor/hooks/useTipTapEditor.d.ts

@@ -11,6 +11,6 @@ import { WorkspaceVisibility } from '@edifice.io/client';
 export declare const useTipTapEditor: (editable: boolean, content: Content, focus?: FocusPosition, placeholder?: string, onContentChange?: ({ editor }: {
     editor: any;
 }) => void, visibility?: WorkspaceVisibility) => {
-    editor: import('@tiptap/react').Editor | null;
+    editor: import('@tiptap/core').Editor | null;
     editable: boolean;
 };

package/dist/modules/editor/hooks/useTipTapEditor.js

@@ -58,7 +58,7 @@ const useTipTapEditor = (editable, content, focus, placeholder, onContentChange,
     }), Underline, TextStyle, Color, Subscript, Superscript, Table.configure({
       resizable: !0
     }), TableRow, TableHeader, TableCell, TextAlign.configure({
-      types: ["heading", "paragraph", "custom-image", "video"]
+      types: ["heading", "paragraph", "video"]
     }), CustomHeading.configure({
       levels: [1, 2]
     }), Typography, FontSize, SpeechRecognition, SpeechSynthesis.configure({

package/dist/providers/MockedProvider/MockedProvider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const MockedProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/MockedProvider/MockedProvider.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { EdificeClientProvider } from "../EdificeClientProvider/EdificeClientProvider.js";
+import { EdificeThemeContext } from "../EdificeThemeProvider/EdificeThemeProvider.context.js";
+const queryClient = new QueryClient(), Providers = ({
+  children
+}) => /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(EdificeClientProvider, { params: {
+  app: "wiki"
+}, children }) }), MockedProvider = ({
+  children
+}) => {
+  const themeContextValue = {
+    theme: "default",
+    setTheme: vi.fn()
+  };
+  return /* @__PURE__ */ jsx(Providers, { children: /* @__PURE__ */ jsx(EdificeThemeContext.Provider, { value: themeContextValue, children }) });
+};
+export {
+  MockedProvider
+};

package/dist/providers/index.d.ts

@@ -4,3 +4,4 @@ export * from './EdificeClientProvider/EdificeClientProvider.hook';
 export * from './EdificeThemeProvider/EdificeThemeProvider';
 export * from './EdificeThemeProvider/EdificeThemeProvider.context';
 export * from './EdificeThemeProvider/EdificeThemeProvider.hook';
+export * from './MockedProvider/MockedProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.0.4",
+  "version": "2.0.5-develop-pedago.20250124124139",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -80,35 +80,34 @@
     "@pixi/mixin-get-child-by-name": "7.4.2",
     "@pixi/react": "7.1.2",
     "@popperjs/core": "2.11.8",
-    "@tiptap/core": "2.3.0",
-    "@tiptap/extension-character-count": "2.3.0",
-    "@tiptap/extension-color": "2.3.0",
-    "@tiptap/extension-focus": "2.3.0",
-    "@tiptap/extension-font-family": "2.3.0",
-    "@tiptap/extension-heading": "2.3.0",
-    "@tiptap/extension-highlight": "2.3.0",
-    "@tiptap/extension-image": "2.3.0",
-    "@tiptap/extension-link": "2.3.0",
-    "@tiptap/extension-list-item": "2.3.0",
-    "@tiptap/extension-placeholder": "2.3.0",
-    "@tiptap/extension-subscript": "2.3.0",
-    "@tiptap/extension-superscript": "2.3.0",
-    "@tiptap/extension-table": "2.3.0",
-    "@tiptap/extension-table-cell": "2.3.0",
-    "@tiptap/extension-table-header": "2.3.0",
-    "@tiptap/extension-table-row": "2.3.0",
-    "@tiptap/extension-text-align": "2.3.0",
-    "@tiptap/extension-text-style": "2.3.0",
-    "@tiptap/extension-typography": "2.3.0",
-    "@tiptap/extension-underline": "2.3.0",
-    "@tiptap/pm": "2.3.0",
-    "@tiptap/react": "2.3.0",
-    "@tiptap/starter-kit": "2.3.0",
+    "@tiptap/core": "2.11.0",
+    "@tiptap/extension-character-count": "2.11.0",
+    "@tiptap/extension-color": "2.11.0",
+    "@tiptap/extension-focus": "2.11.0",
+    "@tiptap/extension-font-family": "2.11.0",
+    "@tiptap/extension-heading": "2.11.0",
+    "@tiptap/extension-highlight": "2.11.0",
+    "@tiptap/extension-image": "2.11.0",
+    "@tiptap/extension-link": "2.11.0",
+    "@tiptap/extension-list-item": "2.11.0",
+    "@tiptap/extension-placeholder": "2.11.0",
+    "@tiptap/extension-subscript": "2.11.0",
+    "@tiptap/extension-superscript": "2.11.0",
+    "@tiptap/extension-table": "2.11.0",
+    "@tiptap/extension-table-cell": "2.11.0",
+    "@tiptap/extension-table-header": "2.11.0",
+    "@tiptap/extension-table-row": "2.11.0",
+    "@tiptap/extension-text-align": "2.11.0",
+    "@tiptap/extension-text-style": "2.11.0",
+    "@tiptap/extension-typography": "2.11.0",
+    "@tiptap/extension-underline": "2.11.0",
+    "@tiptap/pm": "2.11.0",
+    "@tiptap/react": "2.11.0",
+    "@tiptap/starter-kit": "2.11.0",
     "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "dayjs": "1.11.10",
     "emoji-picker-react": "4.5.2",
-    "globals": "^15.11.0",
     "html-react-parser": "4.2.1",
     "ohash": "1.1.3",
     "pako": "2.1.0",
@@ -119,15 +118,16 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.0.4",
-    "@edifice.io/tiptap-extensions": "2.0.4",
-    "@edifice.io/utilities": "2.0.4"
+    "@edifice.io/bootstrap": "2.0.5-develop-pedago.20250124124139",
+    "@edifice.io/tiptap-extensions": "2.0.5-develop-pedago.20250124124139",
+    "@edifice.io/utilities": "2.0.5-develop-pedago.20250124124139"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
     "@eslint/js": "^9.12.0",
     "@react-spring/web": "^9.7.5",
     "@svgr/cli": "^8.1.0",
+    "@tanstack/query-core": "5.62.7",
     "@tanstack/react-query": "5.62.7",
     "@types/node": "^22.9.1",
     "@types/pako": "^2.0.3",
@@ -147,7 +147,9 @@
     "typescript-eslint": "^8.8.1",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
-    "@edifice.io/client": "2.0.4"
+    "vite-tsconfig-paths": "^5.0.1",
+    "@edifice.io/config": "2.0.5-develop-pedago.20250124124139",
+    "@edifice.io/client": "2.0.5-develop-pedago.20250124124139"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",
@@ -167,11 +169,12 @@
   "scripts": {
     "build": "pnpm build:icons && vite build",
     "build:icons": "svgr src/modules/icons/assets --config-file ./svgr.config.cjs",
-    "fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "fix": "eslint --fix --report-unused-disable-directives --max-warnings 0",
     "format": "pnpm run format:write && pnpm run format:check",
-    "format:check": "npx prettier --check .",
-    "format:write": "npx prettier --write .",
-    "lint": "eslint .",
-    "test": "vitest"
+    "format:check": "npx prettier --check \"src/**/*.{ts,tsx}\"",
+    "format:write": "npx prettier --write \"src/**/*.{ts,tsx}\"",
+    "lint": "eslint",
+    "test": "vitest",
+    "test:watch": "vitest --watch"
   }
 }