@edifice.io/react 2.1.0-develop-enabling.0 → 2.1.0-develop-wl.20250204154502

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/AppIcon/AppIcon.js

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
 import * as iconsApps from "../../icons-apps.js";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
 import SvgIconPlaceholder from "../../modules/icons/components/apps/IconPlaceholder.js";
 import Image from "../Image/Image.js";
-import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
 const AppIcon = /* @__PURE__ */ forwardRef(({
   app,
   size = "24",
@@ -32,7 +32,7 @@ const AppIcon = /* @__PURE__ */ forwardRef(({
     ...iconSizes,
     ...iconVariant,
     ...iconFits,
-    [`bg-light-${appCode}`]: appCode && !isContain,
+    [`bg-light-${appCode}`]: !isContain,
     [`color-app-${appCode}`]: appCode
   }, className), IconComponent = iconsApps[`Icon${appCode.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}`] ?? SvgIconPlaceholder;
   if (isIconURL) {

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/Form/FormContext.js

@@ -1,4 +1,4 @@
-import { useContext, createContext } from "react";
+import { createContext, useContext } from "react";
 const Context = /* @__PURE__ */ createContext(null), useFormControl = () => {
   const context = useContext(Context);
   if (!context)

package/dist/components/Form/FormControl.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { Context } from "./FormContext.js";
 import FormText from "./FormText.js";
-import Label from "../Label/Label.js";
 import Input from "../Input/Input.js";
+import Label from "../Label/Label.js";
 const Root = /* @__PURE__ */ forwardRef(({
   children,
   className,

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

@@ -4,16 +4,18 @@ 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";
+import useHeader from "../hooks/useHeader.js";
 import Help from "./Help.js";
 import { Navbar } from "./Navbar.js";
 import { NavBarNav } from "./NavbarNav.js";
@@ -25,7 +27,6 @@ import useConversation from "../../../hooks/useConversation/useConversation.js";
 import useUser from "../../../hooks/useUser/useUser.js";
 import useHasWorkflow from "../../../hooks/useHasWorkflow/useHasWorkflow.js";
 import { useHelp } from "../hooks/useHelp.js";
-import useHeader from "../../../hooks/useHeader/useHeader.js";
 import Avatar from "../../Avatar/Avatar.js";
 import Badge from "../../Badge/Badge.js";
 import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.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/Layout/components/WidgetApps.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import AppIcon from "../../AppIcon/AppIcon.js";
 const WidgetAppsFooter = () => {

package/dist/{hooks/useHeader → components/Layout/hooks}/useHeader.js

@@ -1,11 +1,11 @@
 import { useState, useId, useCallback, useMemo } from "react";
 import { odeServices } from "@edifice.io/client";
+import { useHover } from "@uidotdev/usehooks";
 import { useTranslation } from "react-i18next";
-import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
-import { useEdificeTheme } from "../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
-import useHover from "../useHover/useHover.js";
-import useBookmark from "../useBookmark/useBookmark.js";
-import useHasWorkflow from "../useHasWorkflow/useHasWorkflow.js";
+import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useEdificeTheme } from "../../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import useBookmark from "../../../hooks/useBookmark/useBookmark.js";
+import useHasWorkflow from "../../../hooks/useHasWorkflow/useHasWorkflow.js";
 function useHeader({
   user,
   avatar
@@ -39,7 +39,7 @@ function useHeader({
     isCollapsed,
     toggleCollapsedNav,
     handleLogout
-  }), [appsRef, bookmarkedApps, communityWorkflow, conversationWorflow, isAppsHovered, isCollapsed, popoverAppsId, popoverSearchId, searchWorkflow, title, toggleCollapsedNav, userAvatar, userName, welcomeUser]);
+  }), [appsRef, bookmarkedApps, communityWorkflow, conversationWorflow, handleLogout, isAppsHovered, isCollapsed, popoverAppsId, popoverSearchId, searchWorkflow, title, toggleCollapsedNav, userAvatar, userName, welcomeUser]);
 }
 export {
   useHeader as default

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/index.d.ts

@@ -1,11 +1,9 @@
-export * from './useAvatar';
 export * from './useBookmark';
 export * from './useBreakpoint';
 export * from './useBrowserInfo';
 export * from './useCantoo';
 export * from './useCheckable';
 export * from './useClickOutside';
-export * from './useConf';
 export * from './useConversation';
 export * from './useDate';
 export * from './useDebounce';
@@ -14,16 +12,14 @@ export * from './useDropdown';
 export * from './useDropzone';
 export * from './useEdificeIcons';
 export * from './useHasWorkflow';
-export * from './useHeader';
 export * from './useHover';
+export * from './useHttpErrorToast';
 export * from './useImage';
 export * from './useIsAdml';
 export * from './useKeyPress';
 export * from './useLibraryUrl';
 export * from './useMediaLibrary';
-export * from './useResourceSearch';
 export * from './useScrollToTop';
-export * from './useSession';
 export * from './useTitle';
 export * from './useToast';
 export * from './useToggle';

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/useDropdown/useDropdown.js

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useEffect, useCallback } from "react";
-import { useFloating, autoUpdate, offset, size, flip, useHover, safePolygon } from "@floating-ui/react";
+import { useFloating, offset, size, flip, autoUpdate, useHover, safePolygon } from "@floating-ui/react";
 import { mergeRefs } from "../../utilities/refs/ref.js";
 const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !1) => {
   const id = useId(), [visible, setVisible] = useState(!1), [activeIndex, setActiveIndex] = useState(-1), [isFocused, setIsFocused] = useState(null), {

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/useHasWorkflow/useHasWorkflow.js

@@ -1,21 +1,13 @@
 import { useState, useEffect } from "react";
 import { odeServices } from "@edifice.io/client";
-import { useMockedData } from "../../providers/MockedDataProvider/MockedDataProvider.js";
 function useHasWorkflow(workflow) {
-  const mock = useMockedData(), [state, setState] = useState();
+  const [state, setState] = useState();
   return useEffect(() => {
     (async () => {
       let response;
-      if (mock != null && mock.hasWorkflow)
-        if (typeof workflow == "string")
-          response = await mock.hasWorkflow(workflow);
-        else
-          throw "not.implemented.yet)";
-      else
-        typeof workflow == "string" ? response = await odeServices.rights().sessionHasWorkflowRight(workflow) : response = await odeServices.rights().sessionHasWorkflowRights(workflow);
-      setState(response);
+      typeof workflow == "string" ? response = await odeServices.rights().sessionHasWorkflowRight(workflow) : response = await odeServices.rights().sessionHasWorkflowRights(workflow), setState(response);
     })();
-  }, [workflow, mock]), state;
+  }, [workflow]), state;
 }
 export {
   useHasWorkflow as default

package/dist/hooks/useHttpErrorToast/index.d.ts

@@ -0,0 +1 @@
+export { default as useHttpErrorToast } from './useHttpErrorToast';

package/dist/hooks/useHttpErrorToast/useHttpErrorToast.d.ts

@@ -0,0 +1,3 @@
+import { CustomToastOptions } from '../../hooks/useToast/useToast';
+declare const useHttpErrorToast: (options?: CustomToastOptions) => string | undefined;
+export default useHttpErrorToast;

package/dist/hooks/useHttpErrorToast/useHttpErrorToast.js

@@ -0,0 +1,21 @@
+import React, { useRef, useEffect } from "react";
+import { odeServices, LAYER_NAME } from "@edifice.io/client";
+import { useTranslation } from "react-i18next";
+import useToast from "../useToast/useToast.js";
+const useHttpErrorToast = (options) => {
+  const message = useRef(), toast = useToast(), {
+    t
+  } = useTranslation();
+  return useEffect(() => {
+    const subscription = odeServices.notify().events().subscribe(LAYER_NAME.TRANSPORT, (event) => {
+      var _a, _b;
+      message.current = t(((_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.payload) == null ? void 0 : _b.error) || event.data.response.statusText), toast.error(/* @__PURE__ */ React.createElement("div", {
+        children: [message.current]
+      }), options);
+    });
+    return () => subscription.revoke();
+  }, [t, toast]), message.current;
+};
+export {
+  useHttpErrorToast as default
+};

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/hooks/useUploadFiles/useUploadFiles.js

@@ -1,8 +1,8 @@
 import { useState, useCallback, useEffect } from "react";
 import { ImageResizer, addTimestampToImageUrl } from "@edifice.io/utilities";
 import { useDropzoneContext } from "../../components/Dropzone/DropzoneContext.js";
-import useUpload from "../useUpload/useUpload.js";
 import useWorkspaceFile from "../useWorkspaceFile/useWorkspaceFile.js";
+import useUpload from "../useUpload/useUpload.js";
 const useUploadFiles = ({
   handleOnChange,
   visibility,

package/dist/hooks/useWorkspaceSearch/useWorkspaceSearch.js

@@ -2,9 +2,8 @@ import { useReducer, useCallback } from "react";
 import { odeServices, DocumentHelper } from "@edifice.io/client";
 import { findNodeById } from "../../components/TreeView/utilities/treeview.js";
 import useHasWorkflow from "../useHasWorkflow/useHasWorkflow.js";
-import { useMockedData } from "../../providers/MockedDataProvider/MockedDataProvider.js";
 function useWorkspaceSearch(rootId, rootName, filter, format) {
-  const mock = useMockedData(), canListDocs = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listDocuments"), canListFolders = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listFolders");
+  const canListDocs = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listDocuments"), canListFolders = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listFolders");
   function treeReducer(state, action) {
     switch (action.type) {
       case "update": {
@@ -25,15 +24,8 @@ function useWorkspaceSearch(rootId, rootName, filter, format) {
     name: rootName,
     section: !0
   }), loadContent = useCallback(async (folderId) => {
-    var _a;
     if (canListDocs && canListFolders) {
-      const realWorkspaceId = folderId === rootId ? "" : folderId, payload = mock != null && mock.listWorkspaceDocuments ? await ((_a = mock == null ? void 0 : mock.listWorkspaceDocuments) == null ? void 0 : _a.call(mock).then((results) => results.map((result) => {
-        const ret = {
-          ...result,
-          _id: "" + Math.round(Math.random() * 9999)
-        };
-        return ret.name = result.eType == "folder" ? "folder id=" + ret._id : "file id=" + ret._id, ret;
-      }))) : await odeServices.workspace().listDocuments(filter, realWorkspaceId), subfolders = [], files = [];
+      const realWorkspaceId = folderId === rootId ? "" : folderId, payload = await odeServices.workspace().listDocuments(filter, realWorkspaceId), subfolders = [], files = [];
       payload.filter((f) => {
         if (!format || f.eType === "folder") return !0;
         const role = DocumentHelper.getRole(f);
@@ -47,7 +39,7 @@ function useWorkspaceSearch(rootId, rootName, filter, format) {
         type: "update"
       });
     }
-  }, [canListDocs, canListFolders, rootId, mock, filter, format]);
+  }, [canListDocs, canListFolders, rootId, filter, format]);
   return {
     root,
     loadContent