@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/components/Table/Table.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableThead, TableTh, TableTbody, TableTr, TableTd } from "./Table.components.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { className: "table-responsive", children: /* @__PURE__ */ jsx("table", { ref, className: "table align-middle mb-0", children }) })), Table = /* @__PURE__ */ Object.assign(Root, {
+  Thead: TableThead,
+  Th: TableTh,
+  Tbody: TableTbody,
+  Tr: TableTr,
+  Td: TableTd
+}), Table$1 = Table;
+export {
+  Root,
+  Table$1 as default
+};

package/dist/ui/src/components/Tabs/Tabs.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { TabsContext } from "./TabsContext.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  onChange,
+  children
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  useEffect(() => {
+    const currentItem2 = items.find((item) => item.id === activeTab);
+    currentItem2 && (onChange == null || onChange(currentItem2));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      var _a;
+      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+      }
+    }
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
+      case "ArrowLeft":
+        moveFocusToPreviousTab(activeTab);
+        break;
+      case "ArrowRight":
+        moveFocusToNextTab(activeTab);
+        break;
+      case "Home":
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        break;
+      case "End":
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        break;
+    }
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth]), currentItem = items.find((item) => item.id === activeTab);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tabs.List, {}),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
+  ] }) });
+};
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+const Tabs$1 = Tabs;
+export {
+  Tabs$1 as default
+};

package/dist/ui/src/components/Tabs/TabsContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const TabsContext = /* @__PURE__ */ createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context)
+    throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
+  return context;
+}
+export {
+  TabsContext,
+  useTabsContext
+};

package/dist/ui/src/components/Tabs/TabsItem.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "./TabsContext.js";
+const TabsItem = ({
+  icon,
+  label,
+  id,
+  order
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsx("small", { children: t(label) })
+  ] }) });
+};
+export {
+  TabsItem as default
+};

package/dist/ui/src/components/Tabs/TabsList.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Tabs from "./Tabs.js";
+import { useTabsContext } from "./TabsContext.js";
+const TabsList = (props) => {
+  const {
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    ...restProps
+  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
+    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
+    } })
+  ] });
+};
+export {
+  TabsList as default
+};

package/dist/ui/src/components/Tabs/TabsPanel.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "./TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem
+}) => {
+  const {
+    activeTab
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+};
+export {
+  TabsPanel as default
+};

package/dist/ui/src/components/TextArea/TextArea.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+const TextArea = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  height = "md",
+  className,
+  ...restProps
+}, ref) => {
+  const {
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "textarea-height-lg": height === "lg",
+    "textarea-height-md": height === "md",
+    "textarea-height-sm": height === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
+});
+export {
+  TextArea as default
+};

package/dist/ui/src/components/TextArea/TextareaCounter.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+const TextareaCounter = ({
+  content,
+  maxLength
+}) => /* @__PURE__ */ jsx("p", { className: "small text-gray-700 p-2 text-end", children: content ? `${content.length} / ${maxLength}` : "" });
+export {
+  TextareaCounter
+};

package/dist/ui/src/components/Toolbar/Toolbar.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import clsx from "clsx";
+import { mergeRefs } from "../../utils/ref.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Button from "../Button/Button.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import IconButton from "../Button/IconButton.js";
+const Toolbar = /* @__PURE__ */ forwardRef(({
+  items,
+  variant = "default",
+  align = "space",
+  isBlock = !1,
+  ariaControls,
+  className
+}, ref) => {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
+    default: variant === "default",
+    "no-shadow": variant === "no-shadow",
+    "d-flex": isBlock,
+    "d-inline-flex": !isBlock,
+    "overflow-x-auto": isBlock,
+    "justify-content-start": align === "left",
+    "justify-content-between": align === "space",
+    "justify-content-center": align === "center",
+    "justify-content-end": align === "right"
+  });
+  useEffect(() => {
+    var _a;
+    const buttons = (_a = divToolbarRef.current) == null ? void 0 : _a.querySelectorAll("button"), enabledItems = [];
+    let isfirstItemSet = !1;
+    buttons == null || buttons.forEach((item) => {
+      item.disabled || (isfirstItemSet || (setFirstA11yNavigationItem(item), isfirstItemSet = !0), setA11yNavigationLastItem(item), enabledItems.push(item));
+    }), setA11yNavigationItems(enabledItems), setFirstFocusableItemIndex(items.findIndex((item) => (item.type === "button" || item.type === "icon") && !item.props.disabled));
+  }, [items]);
+  const handleFocus = (event) => {
+    event.target.classList.add("focus");
+  }, handleBlur = (event) => {
+    event.target.classList.remove("focus");
+  }, handleKeyDown = (event) => {
+    var _a, _b;
+    const index = a11yNavigationItems.indexOf(event.currentTarget);
+    switch (event.code) {
+      case "ArrowLeft":
+        event.currentTarget === firstA11yNavigationItem ? lastA11yNavigationItem == null || lastA11yNavigationItem.focus() : (_a = a11yNavigationItems[index - 1]) == null || _a.focus();
+        break;
+      case "ArrowRight":
+        event.currentTarget === lastA11yNavigationItem ? firstA11yNavigationItem == null || firstA11yNavigationItem.focus() : (_b = a11yNavigationItems[index + 1]) == null || _b.focus();
+        break;
+    }
+  }, renderTooltipMessage = (item) => {
+    var _a;
+    return typeof item.tooltip == "string" ? item.tooltip : (_a = item.tooltip) == null ? void 0 : _a.message;
+  }, renderTooltipPosition = (item) => {
+    var _a;
+    return typeof item.tooltip != "string" ? (_a = item.tooltip) == null ? void 0 : _a.position : "top";
+  };
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
+    if (item.visibility === "hide") return null;
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
+      case "button":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+      case "icon":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+      case "dropdown":
+        return /* @__PURE__ */ createElement(Dropdown, { ...item.props, key: item.name ?? index, extraTriggerKeyDownHandler: handleKeyDown, overflow: item.overflow });
+      case "primary":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ jsx(Button, { ...item.props, variant: "filled", color: "primary", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+    }
+    return null;
+  }) });
+}), Toolbar$1 = Toolbar;
+export {
+  Toolbar$1 as default
+};

package/dist/ui/src/components/Tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { usePopper } from "react-popper";
+const Tooltip = ({
+  children,
+  message,
+  icon = null,
+  placement = "auto"
+}) => {
+  const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: "arrow",
+      options: {
+        element: arrowElement
+      }
+    }]
+  }), [visible, setVisible] = useState(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "d-inline-block position-relative z-2", ref: setReferenceElement, onMouseEnter: () => {
+      setVisible(!0);
+    }, onMouseLeave: () => {
+      setVisible(!1);
+    }, children }),
+    visible && message && /* @__PURE__ */ jsxs("div", { className: clsx("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: setPopperElement, style: styles.popper, ...attributes.popper, children: [
+      /* @__PURE__ */ jsxs("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
+        icon && icon,
+        /* @__PURE__ */ jsx("div", { children: message })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
+    ] })
+  ] });
+};
+export {
+  Tooltip as default
+};

package/dist/ui/src/components/TreeView/TreeItem.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { RafterRight as SvgRafterRight$1, RafterDown as SvgRafterDown$1, Folder as SvgFolder$1 } from "../../../../icons/dist/index.js";
+import useTreeItemEvents from "./hooks/useTreeItemEvents.js";
+const TreeItem = (props) => {
+  const {
+    nodeId,
+    label,
+    children,
+    section,
+    selected,
+    onItemSelect,
+    onItemFold,
+    onItemUnfold,
+    onItemFocus,
+    onItemBlur,
+    selectedNodesIds
+  } = props, {
+    t
+  } = useTranslation(), [expanded, setExpanded] = useState(!1), {
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick,
+    handleItemFoldUnfoldKeyDown,
+    handleItemFocus,
+    handleItemBlur
+  } = useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur);
+  useEffect(() => {
+    if (selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1) {
+      const lastNodeId = selectedNodesIds[selectedNodesIds.length - 1];
+      selectedNodesIds.some((node) => node === nodeId && nodeId !== lastNodeId ? (setExpanded(!0), node === nodeId) : (setExpanded(!1), !1));
+    } else
+      setExpanded(!1);
+  }, [nodeId, selectedNodesIds]);
+  const rafterSize = section ? 16 : 12, renderItem = () => /* @__PURE__ */ jsx("li", { id: `listitem_${nodeId}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "action-container d-flex align-items-center gap-8 px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: `py-8 ${Array.isArray(children) ? null : "invisible"}`, tabIndex: 0, role: "button", onClick: handleItemFoldUnfoldClick, onKeyDown: handleItemFoldUnfoldKeyDown, "aria-label": t("foldUnfold"), children: [
+        Array.isArray(children) && !!children.length && !expanded && /* @__PURE__ */ jsx(SvgRafterRight$1, { title: t("foldUnfold"), width: rafterSize, height: rafterSize }),
+        Array.isArray(children) && !!children.length && expanded && /* @__PURE__ */ jsx(SvgRafterDown$1, { title: t("foldUnfold"), width: rafterSize, height: rafterSize }),
+        !Array.isArray(children) && /* @__PURE__ */ jsx(SvgRafterRight$1, { title: t("foldUnfold"), width: rafterSize, height: rafterSize, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { tabIndex: 0, role: "button", className: "flex-fill d-flex align-items-center text-truncate gap-8 py-8", onClick: handleItemClick, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, onBlur: handleItemBlur, children: [
+        section && /* @__PURE__ */ jsx(SvgFolder$1, { title: t("folder"), width: 20, height: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "text-truncate", children: label })
+      ] })
+    ] }),
+    Array.isArray(children) && /* @__PURE__ */ jsx("ul", { role: "group", children })
+  ] }) }, nodeId);
+  return section ? /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: renderItem() }) : renderItem();
+};
+export {
+  TreeItem as default
+};

package/dist/ui/src/components/TreeView/TreeView.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo, useImperativeHandle } from "react";
+import TreeItem from "./TreeItem.js";
+const TreeView = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    data,
+    onTreeItemSelect,
+    onTreeItemFold,
+    onTreeItemUnfold,
+    onTreeItemFocus,
+    onTreeItemBlur,
+    selectedNodesIds
+  } = props, [selectedItem, setSelectedItem] = useState(null);
+  useEffect(() => {
+    selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1 ? setSelectedItem(selectedNodesIds[selectedNodesIds.length - 1]) : setSelectedItem(null);
+  }, [selectedNodesIds]);
+  const handlers = useMemo(() => ({
+    unselectAll() {
+      setSelectedItem(null);
+    },
+    select(nodeId) {
+      setSelectedItem(nodeId), onTreeItemSelect == null || onTreeItemSelect(nodeId);
+    }
+  }), [onTreeItemSelect]);
+  useImperativeHandle(ref, () => handlers, [handlers]);
+  const handleItemFold = (nodeId) => {
+    onTreeItemFold == null || onTreeItemFold(nodeId);
+  }, handleItemUnfold = (nodeId) => {
+    onTreeItemUnfold == null || onTreeItemUnfold(nodeId);
+  }, handleItemFocus = (nodeId) => {
+    onTreeItemFocus == null || onTreeItemFocus(nodeId);
+  }, handleItemBlur = (nodeId) => {
+    onTreeItemBlur == null || onTreeItemBlur(nodeId);
+  }, renderTree = (node) => /* @__PURE__ */ jsx(TreeItem, { nodeId: node.id, label: node.name, section: node.section, selectedNodesIds, selected: selectedItem === node.id, onItemSelect: handlers.select, onItemFold: handleItemFold, onItemUnfold: handleItemUnfold, onItemFocus: handleItemFocus, onItemBlur: handleItemBlur, children: Array.isArray(node.children) ? node.children.map((item) => renderTree(item)) : null }, node.id);
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: renderTree(data) });
+}), TreeView$1 = TreeView;
+export {
+  TreeView$1 as default
+};

package/dist/ui/src/components/TreeView/hooks/useTreeItemEvents.js

@@ -0,0 +1,28 @@
+function useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur) {
+  const handleItemClick = (event) => {
+    event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation();
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation());
+  }, itemFoldUnfold = () => {
+    setExpanded(!expanded), expanded ? onItemFold == null || onItemFold(nodeId) : onItemUnfold == null || onItemUnfold(nodeId);
+  };
+  return {
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick: (event) => {
+      event.preventDefault(), itemFoldUnfold(), event.stopPropagation();
+    },
+    handleItemFoldUnfoldKeyDown: (event) => {
+      (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), itemFoldUnfold(), event.stopPropagation());
+    },
+    handleItemFocus: (event) => {
+      event.preventDefault(), onItemFocus == null || onItemFocus(nodeId);
+    },
+    handleItemBlur: (event) => {
+      event.preventDefault(), onItemBlur == null || onItemBlur(nodeId);
+    }
+  };
+}
+export {
+  useTreeItemEvents as default
+};

package/dist/ui/src/components/UploadCard/UploadCard.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Reset as SvgReset$1, SuccessOutline as SvgSuccessOutline$1, Close as SvgClose$1, Wand as SvgWand$1 } from "../../../../icons/dist/index.js";
+import Button from "../Button/Button.js";
+import Image from "../Image/Image.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Loading from "../Loading/Loading.js";
+import Card from "../Card/Card.js";
+import IconButton from "../Button/IconButton.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+const UploadCard = ({
+  item,
+  status = "idle",
+  isClickable = !1,
+  isSelectable = !1,
+  onDelete,
+  onEdit,
+  onRetry
+}) => {
+  const [imagePath] = usePaths(), {
+    t
+  } = useTranslation(), {
+    src,
+    name,
+    info
+  } = item, isIdle = status === "idle", isLoading = status === "loading", isSuccess = status === "success", isTypeImage = info == null ? void 0 : info.type.startsWith("image"), imgPlaceholder = `${imagePath}/common/image-placeholder.png`, defaultMapping = {
+    text: "",
+    context: null,
+    image: /* @__PURE__ */ jsx("img", { src: imgPlaceholder, alt: "", width: "48", height: "48" })
+  }, mapping = {
+    error: {
+      text: /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("small", { className: "text-danger caption", children: t("tiptap.upload.error") }) }),
+      context: /* @__PURE__ */ jsx(Button, { leftIcon: /* @__PURE__ */ jsx(SvgReset$1, {}), variant: "ghost", color: "tertiary", onClick: onRetry, children: t("tiptap.upload.retry") }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: `${imagePath}/common/image-status-error.svg`, objectFit: "cover" })
+    },
+    idle: defaultMapping,
+    loading: {
+      text: "",
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loading"), placement: "top", children: /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingPosition: "left", className: "text-secondary" }) }),
+      image: defaultMapping.image
+    },
+    warning: defaultMapping,
+    success: {
+      text: /* @__PURE__ */ jsxs("em", { children: [
+        info == null ? void 0 : info.type,
+        " ",
+        (info == null ? void 0 : info.weight) && `- ${info.weight}`
+      ] }),
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loaded"), placement: "top", children: /* @__PURE__ */ jsx(SvgSuccessOutline$1, { className: "text-success" }) }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: src ?? "", width: "48", objectFit: "cover", className: "rounded", style: {
+        aspectRatio: 1 / 1
+      } })
+    },
+    unknown: defaultMapping
+  }, canEditItem = () => isTypeImage && /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.edit"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgWand$1, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.loading"), disabled: isLoading || !isSuccess, onClick: onEdit, color: "secondary" }) });
+  return /* @__PURE__ */ jsx(Card, { isClickable, isSelectable, className: "card-upload", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx("div", { className: "card-image", children: mapping[status].image }),
+    /* @__PURE__ */ jsxs("div", { className: "text-truncate", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "caption", children: mapping[status].text })
+    ] }),
+    !isIdle && /* @__PURE__ */ jsx("div", { className: "ms-auto", children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+      mapping[status].context,
+      !isIdle && /* @__PURE__ */ jsx("div", { className: "vr" }),
+      canEditItem(),
+      /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.delete"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgClose$1, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.delete"), color: "tertiary", onClick: onDelete }) })
+    ] }) })
+  ] }) });
+};
+export {
+  UploadCard
+};

package/dist/ui/src/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const VisuallyHidden = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("span", { className: "visually-hidden", ref, children }));
+export {
+  VisuallyHidden as default
+};

package/dist/ui/src/core/OdeClientProvider/OdeClientProvider.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo, useContext } from "react";
+import { useTranslation } from "react-i18next";
+import useSession from "../useSession/useSession.js";
+import useConf from "../useConf/useConf.js";
+const OdeClientContext = /* @__PURE__ */ createContext(null);
+function OdeClientProvider({
+  children,
+  params
+}) {
+  const appCode = params.app, {
+    t
+  } = useTranslation(), translatedAppCode = t(appCode), sessionQuery = useSession(), confQuery = useConf({
+    appCode
+  }), init = (confQuery == null ? void 0 : confQuery.isSuccess) && (sessionQuery == null ? void 0 : sessionQuery.isSuccess);
+  useEffect(() => {
+    var _a;
+    [
+      {
+        data: "html",
+        value: ((_a = sessionQuery == null ? void 0 : sessionQuery.data) == null ? void 0 : _a.currentLanguage) || "fr"
+      },
+      // #WB-3137 Disable the translation of the content of the page which provoced issues
+      {
+        data: "translate",
+        value: "no"
+      }
+    ].forEach((attribute) => {
+      var _a2;
+      return (_a2 = document.querySelector("html")) == null ? void 0 : _a2.setAttribute(attribute.data, attribute.value);
+    });
+  }, [sessionQuery == null ? void 0 : sessionQuery.data]), useEffect(() => {
+    document.title = `${translatedAppCode}`;
+  }, [appCode, sessionQuery.data, translatedAppCode]);
+  const values = useMemo(() => {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+      appCode,
+      applications: (_a = confQuery == null ? void 0 : confQuery.data) == null ? void 0 : _a.applications,
+      confQuery,
+      currentApp: (_b = confQuery == null ? void 0 : confQuery.data) == null ? void 0 : _b.currentApp,
+      currentLanguage: (_c = sessionQuery == null ? void 0 : sessionQuery.data) == null ? void 0 : _c.currentLanguage,
+      init,
+      sessionQuery,
+      user: (_d = sessionQuery == null ? void 0 : sessionQuery.data) == null ? void 0 : _d.user,
+      userDescription: (_e = sessionQuery == null ? void 0 : sessionQuery.data) == null ? void 0 : _e.userDescription,
+      userProfile: (_f = sessionQuery == null ? void 0 : sessionQuery.data) == null ? void 0 : _f.userProfile
+    };
+  }, [appCode, confQuery, init, sessionQuery]);
+  return /* @__PURE__ */ jsx(OdeClientContext.Provider, { value: values, children });
+}
+function useOdeClient() {
+  const context = useContext(OdeClientContext);
+  if (!context)
+    throw new Error("Cannot be used outside of OdeClientProvider");
+  return context;
+}
+export {
+  OdeClientContext,
+  OdeClientProvider,
+  useOdeClient
+};