@edifice.io/react 2.0.5 → 2.1.0-develop-b2school.20250204153130

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",

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, "data-testid": "button", 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/Dropdown/DropdownTrigger.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import SvgIconRafterUp from "../../modules/icons/components/IconRafterUp.js";
 import { useDropdownContext } from "./DropdownContext.js";
+import Badge from "../Badge/Badge.js";
 const DropdownTrigger = /* @__PURE__ */ forwardRef(({
   label,
   icon,
@@ -26,7 +27,10 @@ const DropdownTrigger = /* @__PURE__ */ forwardRef(({
   return /* @__PURE__ */ jsxs("button", { ref: forwardRef2, type: "button", disabled, ...mergedProps, children: [
     icon,
     label,
-    badgeContent ? /* @__PURE__ */ jsx("span", { className: "badge text-bg-secondary rounded-pill", children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
+    badgeContent ? /* @__PURE__ */ jsx(Badge, { variant: {
+      level: "info",
+      type: "notification"
+    }, children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
   ] });
 });
 export {

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,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/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/components/List/List.d.ts

@@ -5,6 +5,10 @@ export type ListProps<T> = {
      * Toolbar data items
      */
     items?: ToolbarItem[];
+    /**
+     * Checkable list
+     */
+    isCheckable?: boolean;
     /**
      * Generic data
      */
@@ -17,7 +21,11 @@ export type ListProps<T> = {
      * Callback to get selected ids
      */
     onSelectedItems?: (selectedIds: string[]) => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
 };
 export declare const List: <T extends {
     _id: string;
-}>({ items, data, renderNode, onSelectedItems, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ items, isCheckable, data, renderNode, onSelectedItems, className, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/List.js

@@ -7,9 +7,11 @@ import Checkbox from "../Checkbox/Checkbox.js";
 import { Toolbar } from "../Toolbar/Toolbar.js";
 const List = ({
   items,
+  isCheckable = !1,
   data,
   renderNode,
-  onSelectedItems
+  onSelectedItems,
+  className
 }) => {
   const {
     selectedItems,
@@ -21,11 +23,9 @@ const List = ({
   return useEffect(() => {
     selectedItems && (onSelectedItems == null || onSelectedItems(selectedItems));
   }, [onSelectedItems, selectedItems]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    items && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: clsx("d-flex align-items-center gap-8", {
-        "px-12": items
-      }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-8", children: [
+    (items || isCheckable) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: clsx("list-header d-flex align-items-center gap-8 px-12", className), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-8 py-12", children: [
           /* @__PURE__ */ jsx(Checkbox, { checked: allItemsSelected, indeterminate: isIndeterminate, onChange: () => handleOnSelectAllItems(allItemsSelected) }),
           /* @__PURE__ */ jsxs("span", { children: [
             "(",
@@ -33,15 +33,15 @@ const List = ({
             ")"
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
+        items && /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
           "px-0 ms-auto": !isDesktopDevice
         }) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "border-top" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-8", children: data == null ? void 0 : data.map((node) => {
-      const checkbox = /* @__PURE__ */ jsx(Checkbox, { checked: selectedItems.includes(node._id), onChange: () => handleOnSelectItem(node._id) }), checked = selectedItems.includes(node._id);
-      return /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node, checkbox, checked) }, node._id);
+      const checked = selectedItems.includes(node._id);
+      return /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node, /* @__PURE__ */ jsx(Checkbox, { checked, onChange: () => handleOnSelectItem(node._id), onClick: (event) => event.stopPropagation() }), checked) }, node._id);
     }) })
   ] });
 };

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

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { Size } from '../../types';
-export interface BaseProps {
+export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
     /**
      * String or Template literal with React i18next namespace
      */

package/dist/components/SearchBar/SearchBar.js

@@ -24,10 +24,12 @@ const SearchBar = ({
     "ps-48": isVariant
   }), handleClick = () => {
     onClick == null || onClick();
+  }, handleKeyDown = (e) => {
+    e.key === "Enter" && (e.preventDefault(), handleClick());
   };
   return /* @__PURE__ */ jsxs(FormControl, { id: "search-bar", className: searchbar, children: [
     isVariant && /* @__PURE__ */ jsx("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ jsx(SvgIconSearch, {}) }),
-    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, ...restProps }),
+    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, onKeyDown: handleKeyDown, ...restProps }),
     !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(SvgIconSearch, {}), className: "border-start-0", onClick: handleClick })
   ] });
 };

package/dist/hooks/useCheckable/useCheckable.js

@@ -7,7 +7,7 @@ const useCheckable = (data) => {
     });
   }, handleOnSelectAllItems = (deselect) => {
     setSelectedItems(() => deselect ? [] : (data == null ? void 0 : data.map((item) => item._id)) ?? []);
-  }, allItemsSelected = (selectedItems == null ? void 0 : selectedItems.length) === (data == null ? void 0 : data.length), isIndeterminate = data ? (selectedItems == null ? void 0 : selectedItems.length) > 0 && (selectedItems == null ? void 0 : selectedItems.length) < (data == null ? void 0 : data.length) : !1;
+  }, allItemsSelected = (selectedItems == null ? void 0 : selectedItems.length) === (data == null ? void 0 : data.length) && (data == null ? void 0 : data.length) > 0, isIndeterminate = data ? (selectedItems == null ? void 0 : selectedItems.length) > 0 && (selectedItems == null ? void 0 : selectedItems.length) < (data == null ? void 0 : data.length) : !1;
   return {
     selectedItems,
     allItemsSelected,

package/dist/hooks/useConversation/useConversation.d.ts

@@ -1,5 +1,5 @@
 declare const useConversation: () => {
-    readonly messages: number;
+    readonly messages: any;
     readonly msgLink: string;
     readonly zimbraWorkflow: boolean | Record<string, boolean> | undefined;
 };

package/dist/hooks/useConversation/useConversation.js

@@ -1,23 +1,21 @@
 import { useState, useEffect } from "react";
 import { odeServices } from "@edifice.io/client";
+import { useQuery } from "@tanstack/react-query";
 import useHasWorkflow from "../useHasWorkflow/useHasWorkflow.js";
 const useConversation = () => {
-  const zimbraWorkflow = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|view"), zimbraPreauth = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|preauth"), [messages, setMessages] = useState(0), [msgLink, setMsgLink] = useState(""), queryParams = {
+  const zimbraWorkflow = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|view"), zimbraPreauth = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|preauth"), [msgLink, setMsgLink] = useState(""), queryParams = {
     unread: !0,
     _: (/* @__PURE__ */ new Date()).getTime()
-  }, refreshMails = async () => {
-    const url = zimbraWorkflow ? "/zimbra/count/INBOX" : "/conversation/count/INBOX";
-    try {
-      const {
-        count
-      } = await odeServices.http().get(url, {
-        queryParams
-      });
-      setMessages(count ?? 0);
-    } catch (error) {
-      console.error(error), setMessages(0);
-    }
-  }, goToMessagerie = async () => {
+  }, {
+    data: messages
+  } = useQuery({
+    queryKey: ["conversation-navbar-count"],
+    queryFn: async () => await odeServices.http().get(zimbraWorkflow ? "/zimbra/count/INBOX" : "/conversation/count/INBOX", {
+      queryParams
+    }),
+    staleTime: 5 * 60 * 1e3
+    // 5 minutes
+  }), goToMessagerie = async () => {
     const defaultLink = "/zimbra/zimbra";
     try {
       const {
@@ -29,11 +27,9 @@ const useConversation = () => {
     }
   };
   return useEffect(() => {
-    refreshMails();
-  }, []), useEffect(() => {
     goToMessagerie();
   }, []), {
-    messages,
+    messages: messages ? messages.count : 0,
     msgLink,
     zimbraWorkflow
   };

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/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,