@gridsuite/commons-ui 0.54.0 → 0.55.0

package/dist/components/DirectoryItemSelector/directory-item-selector.d.ts

@@ -1,25 +1,16 @@
 import { UUID } from 'crypto';
+import { TreeViewFinderProps } from '../TreeViewFinder/TreeViewFinder';
 import { FunctionComponent } from 'react';
 
-interface DirectoryItemSelectorProps {
+interface DirectoryItemSelectorProps extends TreeViewFinderProps {
     open: boolean;
-    onClose: any;
     types: string[];
     equipmentTypes?: string[];
-    title: string;
     itemFilter?: any;
     fetchDirectoryContent: (directoryUuid: UUID, elementTypes: string[]) => Promise<any>;
     fetchRootFolders: (types: string[]) => Promise<any>;
     fetchElementsInfos: (ids: UUID[], elementTypes: string[], equipmentTypes: string[]) => Promise<any>;
-    classes?: any;
-    contentText?: string;
-    defaultExpanded?: string[];
-    defaultSelected?: string[];
-    validationButtonText?: string;
-    className?: string;
-    cancelButtonProps?: any;
-    onlyLeaves?: boolean;
-    multiselect?: boolean;
+    expanded?: UUID[];
 }
 declare const DirectoryItemSelector: FunctionComponent<DirectoryItemSelectorProps>;
 export default DirectoryItemSelector;

package/dist/components/DirectoryItemSelector/directory-item-selector.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { getFileIcon } from "../../utils/ElementIcon.js";
 import { ElementType } from "../../utils/ElementType.js";
@@ -13,23 +13,14 @@ const styles = {
 };
 const DirectoryItemSelector = ({
   open,
-  onClose,
   types,
   equipmentTypes,
-  title,
   itemFilter,
   fetchDirectoryContent,
   fetchRootFolders,
   fetchElementsInfos,
-  classes,
-  contentText,
-  defaultExpanded,
-  defaultSelected,
-  validationButtonText,
-  className,
-  cancelButtonProps,
-  onlyLeaves = true,
-  multiselect = true
+  expanded,
+  ...otherTreeViewFinderProps
 }) => {
   const [data, setData] = useState([]);
   const [rootDirectories, setRootDirectories] = useState([]);
@@ -39,8 +30,6 @@ const DirectoryItemSelector = ({
   const rootsRef = useRef([]);
   rootsRef.current = rootDirectories;
   const { snackError } = useSnackMessage();
-  const openRef = useRef();
-  openRef.current = open;
   const contentFilter = useCallback(
     () => /* @__PURE__ */ new Set([ElementType.DIRECTORY, ...types]),
     [types]
@@ -105,11 +94,6 @@ const DirectoryItemSelector = ({
       });
     });
   }, [convertRoots, types, snackError, fetchRootFolders]);
-  useEffect(() => {
-    if (open) {
-      updateRootDirectories();
-    }
-  }, [open, updateRootDirectories]);
   const fetchDirectory = useCallback(
     (nodeId) => {
       fetchDirectoryContent(nodeId, types).then((children) => {
@@ -149,6 +133,16 @@ const DirectoryItemSelector = ({
       fetchElementsInfos
     ]
   );
+  useEffect(() => {
+    if (open) {
+      updateRootDirectories();
+      if (expanded) {
+        expanded.forEach((nodeId) => {
+          fetchDirectory(nodeId);
+        });
+      }
+    }
+  }, [open, updateRootDirectories, expanded, fetchDirectory]);
   function sortHandlingDirectories(a, b) {
     if (a.children && !b.children) {
       return -1;
@@ -157,26 +151,19 @@ const DirectoryItemSelector = ({
     }
     return a.name.localeCompare(b.name);
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     TreeViewFinder,
     {
-      multiselect,
       onTreeBrowse: fetchDirectory,
-      data,
-      onlyLeaves,
       sortMethod: sortHandlingDirectories,
-      title,
-      onClose,
+      multiSelect: true,
       open,
-      classes,
-      contentText,
-      defaultExpanded,
-      defaultSelected,
-      validationButtonText,
-      className,
-      cancelButtonProps
+      expanded,
+      onlyLeaves: true,
+      ...otherTreeViewFinderProps,
+      data
     }
-  ) });
+  );
 };
 function updatedTree(prevRoots, prevMap, nodeId, children) {
   var _a;

package/dist/components/FlatParameters/FlatParameters.js

@@ -159,6 +159,9 @@ const FlatParameters = ({
     if (param.name === inEditionParam && uncommitted !== null) {
       return uncommitted;
     } else if (initValues && initValues.hasOwnProperty(param.name)) {
+      if (param.type === "BOOLEAN") {
+        return initValues[param.name] === "false" ? false : initValues[param.name];
+      }
       if (param.type !== "STRING_LIST") {
         return initValues[param.name];
       }

package/dist/components/ReportViewer/log-report.d.ts

@@ -1,12 +1,12 @@
 export default class LogReport {
     constructor(jsonReporter: any, parentReportId: any);
-    id: any;
+    id: string;
     key: any;
     title: any;
     subReports: any[];
     logs: any[];
     parentReportId: any;
-    getId(): any;
+    getId(): string;
     getTitle(): any;
     getSubReports(): any[];
     getLogs(): any[];

package/dist/components/TreeViewFinder/TreeViewFinder.d.ts

@@ -1,59 +1,33 @@
-import { default as PropTypes } from 'prop-types';
-export function generateTreeViewFinderClass(className: any): string;
-declare const _default: import('@emotion/styled').StyledComponent<Pick<PropTypes.InferProps<{
-    open: PropTypes.Validator<boolean>;
-    onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    data: PropTypes.Validator<(PropTypes.InferProps<{
-        id: PropTypes.Validator<string>;
-        name: PropTypes.Validator<string>;
-        children: PropTypes.Requireable<any[]>;
-    }> | null | undefined)[]>;
-    onTreeBrowse: PropTypes.Requireable<(...args: any[]) => any>;
-    classes: PropTypes.Requireable<object>;
-    title: PropTypes.Requireable<string>;
-    contentText: PropTypes.Requireable<string>;
-    validationButtonText: PropTypes.Requireable<string>;
-    defaultSelected: PropTypes.Requireable<(string | null | undefined)[]>;
-    defaultExpanded: PropTypes.Requireable<(string | null | undefined)[]>;
-    onlyLeaves: PropTypes.Requireable<boolean>;
-    multiselect: PropTypes.Requireable<boolean>;
-    sortMethod: PropTypes.Requireable<(...args: any[]) => any>;
-    cancelButtonProps: PropTypes.Requireable<object>;
-    className: PropTypes.Requireable<string>;
-}>, "className" | "title" | "onClose" | "onTreeBrowse" | "contentText" | "validationButtonText" | "cancelButtonProps" | PropTypes.RequiredKeys<{
-    open: PropTypes.Validator<boolean>;
-    onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    data: PropTypes.Validator<(PropTypes.InferProps<{
-        id: PropTypes.Validator<string>;
-        name: PropTypes.Validator<string>;
-        children: PropTypes.Requireable<any[]>;
-    }> | null | undefined)[]>;
-    onTreeBrowse: PropTypes.Requireable<(...args: any[]) => any>;
-    classes: PropTypes.Requireable<object>;
-    title: PropTypes.Requireable<string>;
-    contentText: PropTypes.Requireable<string>;
-    validationButtonText: PropTypes.Requireable<string>;
-    defaultSelected: PropTypes.Requireable<(string | null | undefined)[]>;
-    defaultExpanded: PropTypes.Requireable<(string | null | undefined)[]>;
-    onlyLeaves: PropTypes.Requireable<boolean>;
-    multiselect: PropTypes.Requireable<boolean>;
-    sortMethod: PropTypes.Requireable<(...args: any[]) => any>;
-    cancelButtonProps: PropTypes.Requireable<object>;
-    className: PropTypes.Requireable<string>;
-}>> & {
-    classes?: object | null | undefined;
-    defaultSelected?: (string | null | undefined)[] | null | undefined;
-    defaultExpanded?: (string | null | undefined)[] | null | undefined;
-    onlyLeaves?: boolean | null | undefined;
-    multiselect?: boolean | null | undefined;
-    sortMethod?: ((...args: any[]) => any) | null | undefined;
-} & {} & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+import { TreeViewClasses } from '@mui/x-tree-view';
+import { ButtonProps, ModalProps } from '@mui/material';
+import { ReactElement } from 'react';
+
+export declare const generateTreeViewFinderClass: (className: string) => string;
+export interface TreeViewFinderNodeProps {
+    id: string;
+    name: string;
+    icon?: ReactElement;
+    childrenCount?: number;
+    children?: TreeViewFinderNodeProps[];
+}
+export interface TreeViewFinderProps {
+    defaultExpanded?: string[];
+    defaultSelected?: string[];
+    selected?: string[];
+    expanded?: string[];
+    multiSelect?: boolean;
+    classes?: Partial<TreeViewClasses>;
+    className?: string;
+    contentText?: string;
+    open: ModalProps['open'];
+    onClose: (nodes: TreeViewFinderNodeProps[]) => void;
+    validationButtonText?: string;
+    cancelButtonProps?: ButtonProps;
+    title?: string;
+    onlyLeaves?: boolean;
+    data?: TreeViewFinderNodeProps[];
+    onTreeBrowse?: (nodeId: string) => void;
+    sortMethod?: (a: TreeViewFinderNodeProps, b: TreeViewFinderNodeProps) => number;
+}
+declare const _default: import('@emotion/styled').StyledComponent<TreeViewFinderProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
 export default _default;
-/**
- * This callback type is called `onTreeBrowseCallback` and is displayed as a global symbol.
- */
-export type onTreeBrowseCallback = (nodeId: string) => any;
-/**
- * - callback to update data prop when walk into Tree
- */
-export type onTreeBrowse = (defaultSelected?: any[] | undefined, defaultExpanded?: any[] | undefined, validationButtonText?: string | undefined, onlyLeaves?: boolean | undefined, multiselect?: boolean | undefined, cancelButtonProps?: Object | undefined) => any;

package/dist/components/TreeViewFinder/TreeViewFinder.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
-import PropTypes from "prop-types";
 import { toNestedGlobalSelectors, makeComposeClasses } from "../../utils/styles.js";
 import { styled } from "@mui/system";
 import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Typography } from "@mui/material";
@@ -39,7 +38,7 @@ const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
 const TreeViewFinder = (props) => {
   const intl = useIntl();
   const {
-    classes,
+    classes = {},
     title,
     contentText,
     open,
@@ -49,52 +48,63 @@ const TreeViewFinder = (props) => {
     onClose,
     onTreeBrowse,
     validationButtonText,
-    onlyLeaves,
-    multiselect,
+    onlyLeaves = true,
+    multiSelect = false,
     sortMethod,
     className,
-    cancelButtonProps
+    cancelButtonProps,
+    selected: selectedProp,
+    expanded: expandedProp
   } = props;
   const [mapPrintedNodes, setMapPrintedNodes] = useState({});
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [selected, setSelected] = useState(defaultSelected);
+  const [expanded, setExpanded] = useState(
+    defaultExpanded ?? []
+  );
+  const [selected, setSelected] = useState(
+    defaultSelected ?? []
+  );
+  const scrollRef = useRef([]);
+  const [autoScrollAllowed, setAutoScrollAllowed] = useState(true);
   const isSelectable = (node) => {
     return onlyLeaves ? isLeaf(node) : true;
   };
   const isLeaf = (node) => {
     return node && node.children === void 0;
   };
-  const computeMapPrintedNodes = useCallback((nodes) => {
-    let newMapPrintedNodes = {};
-    nodes.forEach((node) => {
-      newMapPrintedNodes[node.id] = node;
-      if (!isLeaf(node)) {
-        Object.assign(
-          newMapPrintedNodes,
-          computeMapPrintedNodes(node.children)
-        );
-      }
-    });
-    return newMapPrintedNodes;
-  }, []);
+  const isValidationDisabled = () => {
+    return (selected == null ? void 0 : selected.length) === 0 || (selected == null ? void 0 : selected.length) === (selectedProp == null ? void 0 : selectedProp.length) && (selected == null ? void 0 : selected.every((nodeId) => selectedProp == null ? void 0 : selectedProp.includes(nodeId)));
+  };
+  const computeMapPrintedNodes = useCallback(
+    (nodes) => {
+      let newMapPrintedNodes = {};
+      nodes == null ? void 0 : nodes.forEach((node) => {
+        newMapPrintedNodes[node.id] = node;
+        if (!isLeaf(node)) {
+          Object.assign(
+            newMapPrintedNodes,
+            computeMapPrintedNodes(node.children)
+          );
+        }
+      });
+      return newMapPrintedNodes;
+    },
+    []
+  );
   useEffect(() => {
     let newMapPrintedNodes = computeMapPrintedNodes(data);
-    console.debug(
-      "data updated, new mapPrintedNodes (nbNodes = ",
-      Object.keys(newMapPrintedNodes).length,
-      ") : ",
-      newMapPrintedNodes
-    );
     setMapPrintedNodes(newMapPrintedNodes);
   }, [data, computeMapPrintedNodes]);
   const computeSelectedNodes = () => {
-    return selected.map((nodeId) => {
+    if (!selected) {
+      return [];
+    }
+    return selected == null ? void 0 : selected.map((nodeId) => {
       return mapPrintedNodes[nodeId];
     });
   };
-  const handleNodeToggle = (e, nodeIds) => {
+  const handleNodeToggle = (_e, nodeIds) => {
     nodeIds.every((nodeId) => {
-      if (!expanded.includes(nodeId)) {
+      if (!(expanded == null ? void 0 : expanded.includes(nodeId))) {
         onTreeBrowse && onTreeBrowse(nodeId);
         return false;
       }
@@ -102,18 +112,61 @@ const TreeViewFinder = (props) => {
     });
     setExpanded(nodeIds);
   };
-  const handleNodeSelect = (e, values) => {
-    if (multiselect) {
+  useEffect(() => {
+    if (!selectedProp) {
+      return;
+    }
+    if (selectedProp.length > 0) {
+      setSelected((oldSelectedNodes) => [
+        ...oldSelectedNodes ? oldSelectedNodes : [],
+        ...selectedProp
+      ]);
+    }
+  }, [selectedProp]);
+  useEffect(() => {
+    if (!expandedProp || expandedProp.length === 0) {
+      return;
+    }
+    if (expandedProp.length > 0) {
+      setExpanded((oldExpandedNodes) => [
+        ...oldExpandedNodes ? oldExpandedNodes : [],
+        ...expandedProp
+      ]);
+    }
+  }, [expandedProp]);
+  useEffect(() => {
+    if (!selectedProp) {
+      return;
+    }
+    if (selectedProp.length > 0 && autoScrollAllowed) {
+      const isNodeExpanded = expandedProp == null ? void 0 : expandedProp.every(
+        (nodeId) => expanded == null ? void 0 : expanded.includes(nodeId)
+      );
+      const lastScrollRef = scrollRef.current[scrollRef.current.length - 1];
+      if (isNodeExpanded && lastScrollRef) {
+        lastScrollRef.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center"
+        });
+        setAutoScrollAllowed(false);
+      }
+    }
+  }, [expanded, selectedProp, expandedProp, data, autoScrollAllowed]);
+  const handleNodeSelect = (_e, values) => {
+    if (multiSelect && Array.isArray(values)) {
       setSelected(
         values.filter((nodeId) => isSelectable(mapPrintedNodes[nodeId]))
       );
     } else {
-      if (selected.includes(values)) {
-        setSelected([]);
-      } else {
-        setSelected(
-          isSelectable(mapPrintedNodes[values]) ? [values] : []
-        );
+      if (!Array.isArray(values)) {
+        if (selected == null ? void 0 : selected.includes(values)) {
+          setSelected([]);
+        } else {
+          setSelected(
+            isSelectable(mapPrintedNodes[values]) ? [values] : []
+          );
+        }
       }
     }
   };
@@ -121,10 +174,16 @@ const TreeViewFinder = (props) => {
     if (validationButtonText) {
       return validationButtonText;
     } else {
+      let buttonLabelId = "";
+      if (Array.isArray(selectedProp)) {
+        buttonLabelId = (selectedProp == null ? void 0 : selectedProp.length) > 0 ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+      } else {
+        buttonLabelId = selectedProp ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+      }
       return intl.formatMessage(
-        { id: "treeview_finder/addElementsValidation" },
+        { id: buttonLabelId },
         {
-          nbElements: selected.length
+          nbElements: selected == null ? void 0 : selected.length
         }
       );
     }
@@ -133,7 +192,7 @@ const TreeViewFinder = (props) => {
     if (!node) {
       return null;
     }
-    if (isSelectable(node) && selected.find((nodeId) => nodeId === node.id)) {
+    if (isSelectable(node) && (selected == null ? void 0 : selected.find((nodeId) => nodeId === node.id))) {
       return /* @__PURE__ */ jsx(Check, { className: composeClasses(classes, cssLabelIcon) });
     } else {
       if (node.icon) {
@@ -173,18 +232,35 @@ const TreeViewFinder = (props) => {
             className: composeClasses(classes, cssIcon)
           }
         ) : null,
+        ref: (element) => {
+          if (selectedProp == null ? void 0 : selectedProp.includes(node.id)) {
+            scrollRef.current.push(element);
+          }
+        },
         children: Array.isArray(node.children) ? node.children.length ? node.children.sort(sortMethod).map((child) => renderTree(child)) : [false] : null
       },
       node.id
     );
   };
+  const getTreeViewSelectionProps = () => {
+    if (!multiSelect) {
+      return {
+        multiSelect: false,
+        selected: selected && selected.length > 0 ? selected.at(0) : ""
+      };
+    }
+    return {
+      multiSelect: true,
+      selected: selected ?? []
+    };
+  };
   return /* @__PURE__ */ jsxs(
     Dialog,
     {
       open,
       onClose: (e, r) => {
         if (r === "escapeKeyDown" || r === "backdropClick") {
-          onClose([]);
+          onClose && onClose([]);
           setSelected([]);
         }
       },
@@ -196,21 +272,20 @@ const TreeViewFinder = (props) => {
       children: [
         /* @__PURE__ */ jsx(DialogTitle, { id: "TreeViewFindertitle", children: title ? title : intl.formatMessage(
           { id: "treeview_finder/finderTitle" },
-          { multiselect }
+          { multiSelect }
         ) }),
         /* @__PURE__ */ jsxs(DialogContent, { children: [
           /* @__PURE__ */ jsx(DialogContentText, { children: contentText ? contentText : intl.formatMessage(
             { id: "treeview_finder/contentText" },
-            { multiselect }
+            { multiSelect }
           ) }),
           /* @__PURE__ */ jsx(
             TreeView,
             {
               expanded,
-              selected,
               onNodeToggle: handleNodeToggle,
               onNodeSelect: handleNodeSelect,
-              multiSelect: multiselect,
+              ...getTreeViewSelectionProps(),
               children: data && Array.isArray(data) ? data.sort(sortMethod).map((child) => renderTree(child)) : null
             }
           )
@@ -221,8 +296,9 @@ const TreeViewFinder = (props) => {
             {
               style: { float: "left", margin: "5px" },
               onClick: () => {
-                onClose([]);
+                onClose && onClose([]);
                 setSelected([]);
+                setAutoScrollAllowed(true);
               },
               ...cancelButtonProps
             }
@@ -233,10 +309,11 @@ const TreeViewFinder = (props) => {
               variant: "outlined",
               style: { float: "left", margin: "5px" },
               onClick: () => {
-                onClose(computeSelectedNodes());
+                onClose && onClose(computeSelectedNodes());
                 setSelected([]);
+                setAutoScrollAllowed(true);
               },
-              disabled: selected.length === 0,
+              disabled: isValidationDisabled(),
               children: getValidationButtonText()
             }
           )
@@ -245,39 +322,6 @@ const TreeViewFinder = (props) => {
     }
   );
 };
-TreeViewFinder.propTypes = {
-  // Controlled
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func,
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      children: PropTypes.array
-    })
-  ).isRequired,
-  onTreeBrowse: PropTypes.func,
-  //uncontrolled
-  classes: PropTypes.object,
-  title: PropTypes.string,
-  contentText: PropTypes.string,
-  validationButtonText: PropTypes.string,
-  defaultSelected: PropTypes.arrayOf(PropTypes.string),
-  defaultExpanded: PropTypes.arrayOf(PropTypes.string),
-  onlyLeaves: PropTypes.bool,
-  multiselect: PropTypes.bool,
-  sortMethod: PropTypes.func,
-  cancelButtonProps: PropTypes.object,
-  className: PropTypes.string
-};
-TreeViewFinder.defaultProps = {
-  defaultSelected: [],
-  defaultExpanded: [],
-  onlyLeaves: true,
-  multiselect: false,
-  sortMethod: void 0,
-  classes: {}
-};
 const nestedGlobalSelectorsStyles = toNestedGlobalSelectors(
   defaultStyles,
   generateTreeViewFinderClass

package/dist/components/react-hook-form/directory-items-input.d.ts

@@ -2,7 +2,7 @@ import { UUID } from 'crypto';
 import { FunctionComponent } from 'react';
 
 export declare const NAME = "name";
-interface DirectoryItemsInputProps {
+export interface DirectoryItemsInputProps {
     label: string | undefined;
     name: string;
     elementType: string;
@@ -17,6 +17,7 @@ interface DirectoryItemsInputProps {
     fetchRootFolders: (types: string[]) => Promise<any>;
     fetchElementsInfos: (ids: UUID[], elementTypes: string[], equipmentTypes?: string[]) => Promise<any>;
     labelRequiredFromContext?: boolean;
+    fetchDirectoryElementPath?: (id: UUID) => Promise<any[]>;
 }
 declare const DirectoryItemsInput: FunctionComponent<DirectoryItemsInputProps>;
 export default DirectoryItemsInput;

package/dist/components/react-hook-form/directory-items-input.js

@@ -4,7 +4,7 @@ import { OverflowableText } from "../OverflowableText/overflowable-text.js";
 import { useSnackMessage } from "../../hooks/useSnackMessage.js";
 import FieldLabel from "./utils/field-label.js";
 import FolderIcon from "@mui/icons-material/Folder";
-import { useMemo, useState, useCallback } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { useFieldArray, useController } from "react-hook-form";
 import { useIntl } from "react-intl";
 import ErrorInput from "./error-management/error-input.js";
@@ -60,10 +60,14 @@ const DirectoryItemsInput = ({
   fetchDirectoryContent,
   fetchRootFolders,
   fetchElementsInfos,
-  labelRequiredFromContext = true
+  labelRequiredFromContext = true,
+  fetchDirectoryElementPath
 }) => {
   const { snackError } = useSnackMessage();
   const intl = useIntl();
+  const [selected, setSelected] = useState([]);
+  const [expanded, setExpanded] = useState([]);
+  const [multiSelect, setMultiSelect] = useState(true);
   const types = useMemo(() => [elementType], [elementType]);
   const [directoryItemSelectorOpen, setDirectoryItemSelectorOpen] = useState(false);
   const {
@@ -82,6 +86,18 @@ const DirectoryItemsInput = ({
   });
   const addElements = useCallback(
     (values) => {
+      if (!values) {
+        return;
+      }
+      if ((selected == null ? void 0 : selected.length) > 0 && (values == null ? void 0 : values.length) > 0) {
+        selected.forEach((chip) => {
+          remove(
+            getValues(name).findIndex(
+              (item) => item.id === chip
+            )
+          );
+        });
+      }
       values.forEach((value) => {
         const { icon, children, ...otherElementAttributes } = value;
         if (getValues(name).find(
@@ -98,8 +114,18 @@ const DirectoryItemsInput = ({
         }
       });
       setDirectoryItemSelectorOpen(false);
+      setSelected([]);
     },
-    [append, getValues, snackError, name, onRowChanged, onChange]
+    [
+      append,
+      getValues,
+      snackError,
+      name,
+      onRowChanged,
+      onChange,
+      selected,
+      remove
+    ]
   );
   const removeElements = useCallback(
     (index) => {
@@ -109,6 +135,23 @@ const DirectoryItemsInput = ({
     },
     [onRowChanged, remove, getValues, name, onChange]
   );
+  const handleChipClick = useCallback(
+    (index) => {
+      var _a;
+      const chips = getValues(name);
+      const chip = (_a = chips.at(index)) == null ? void 0 : _a.id;
+      if (chip && fetchDirectoryElementPath) {
+        fetchDirectoryElementPath(chip).then((response) => {
+          const path = response.reverse().filter((e) => e.elementUuid !== chip).map((e) => e.elementUuid);
+          setExpanded(path);
+          setSelected([chip]);
+          setDirectoryItemSelectorOpen(true);
+          setMultiSelect(false);
+        });
+      }
+    },
+    [getValues, name, fetchDirectoryElementPath]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       FormControl,
@@ -135,6 +178,7 @@ const DirectoryItemsInput = ({
             {
               size: "small",
               onDelete: () => removeElements(index),
+              onClick: () => handleChipClick(index),
               label: /* @__PURE__ */ jsx(
                 OverflowableText,
                 {
@@ -150,16 +194,19 @@ const DirectoryItemsInput = ({
             },
             item.id
           )) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row-reverse", children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row-reverse", children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
             IconButton,
             {
               sx: styles.addDirectoryElements,
               size: "small",
               disabled: disable,
-              onClick: () => setDirectoryItemSelectorOpen(true),
+              onClick: () => {
+                setDirectoryItemSelectorOpen(true);
+                setMultiSelect(true);
+              },
               children: /* @__PURE__ */ jsx(FolderIcon, {})
             }
-          ) }) }) })
+          ) }) }) }) })
         ]
       }
     ),
@@ -175,7 +222,10 @@ const DirectoryItemsInput = ({
         itemFilter,
         fetchDirectoryContent,
         fetchRootFolders,
-        fetchElementsInfos
+        fetchElementsInfos,
+        selected,
+        expanded,
+        multiSelect
       }
     )
   ] });

package/dist/components/translations/treeview-finder-en.d.ts

@@ -13,4 +13,5 @@ declare const treeview_finder_en: {
     'treeview_finder/contentText': string;
     'treeview_finder/finderTitle': string;
     'treeview_finder/addElementsValidation': string;
+    'treeview_finder/replaceElementsValidation': string;
 };

package/dist/components/translations/treeview-finder-en.js

@@ -3,9 +3,10 @@ const treeview_finder_en = {
   "treeview_finder/validate": "Validate",
   "treeview_finder/add": "Add...",
   "treeview_finder/deleteSelection": "Delete selection",
-  "treeview_finder/contentText": "{multiselect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
-  "treeview_finder/finderTitle": "{multiselect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
-  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Add this element} other{Add # elements}}"
+  "treeview_finder/contentText": "{multiSelect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
+  "treeview_finder/finderTitle": "{multiSelect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
+  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Add this element} other{Add # elements}}",
+  "treeview_finder/replaceElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Replace with this element} other{Replace with # elements}}"
 };
 export {
   treeview_finder_en as default

package/dist/components/translations/treeview-finder-fr.d.ts

@@ -13,4 +13,5 @@ declare const treeview_finder_fr: {
     'treeview_finder/contentText': string;
     'treeview_finder/finderTitle': string;
     'treeview_finder/addElementsValidation': string;
+    'treeview_finder/replaceElementsValidation': string;
 };

package/dist/components/translations/treeview-finder-fr.js

@@ -3,9 +3,10 @@ const treeview_finder_fr = {
   "treeview_finder/validate": "Valider",
   "treeview_finder/add": "Ajouter...",
   "treeview_finder/deleteSelection": "Supprimer la selection",
-  "treeview_finder/contentText": "{multiselect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
-  "treeview_finder/finderTitle": "{multiselect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
-  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Ajouter cet élément} other {Ajouter # éléments}}"
+  "treeview_finder/contentText": "{multiSelect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
+  "treeview_finder/finderTitle": "{multiSelect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
+  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Ajouter cet élément} other {Ajouter # éléments}}",
+  "treeview_finder/replaceElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Remplacer par cet élément} other {Remplacer par # éléments}}"
 };
 export {
   treeview_finder_fr as default

package/dist/index.d.ts

@@ -7,7 +7,11 @@ import { FunctionComponent, ReactElement } from 'react';
  * Section to export generated type declarations
  */
 
-export { default as TreeViewFinder } from './components/TreeViewFinder';
+export {
+    default as TreeViewFinder,
+    TreeViewFinderProps,
+    TreeViewFinderNodeProps,
+} from './components/TreeViewFinder';
 export { default as AboutDialog } from './components/TopBar/AboutDialog';
 export { default as AuthenticationRouter } from './components/AuthenticationRouter';
 export { default as MuiVirtualizedTable } from './components/MuiVirtualizedTable';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.54.0",
+    "version": "0.55.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",
@@ -68,8 +68,18 @@
         "@mui/material": "^5.15.14",
         "@mui/x-tree-view": "^6.17.0",
         "@react-hook/window-size": "^3.1.1",
-        "@types/react": "^18.2.73",
-        "@types/react-dom": "^18.2.23",
+        "@types/autosuggest-highlight": "^3.2.3",
+        "@types/eslint": "^8.56.7",
+        "@types/eslint-config-prettier": "^6.11.3",
+        "@types/license-checker": "^25.0.6",
+        "@types/node": "^18.19.31",
+        "@types/prop-types": "^15.7.12",
+        "@types/react": "^18.2.75",
+        "@types/react-dom": "^18.2.24",
+        "@types/react-resizable": "^3.0.7",
+        "@types/react-virtualized": "^9.21.29",
+        "@types/utf-8-validate": "^5.0.2",
+        "@types/uuid": "^9.0.8",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-react": "^4.2.1",