@gridsuite/commons-ui 0.13.1 → 0.14.3

package/README.md

@@ -34,10 +34,10 @@ and then rerun npm install.
 If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@gridsuite/commons-ui),
 you need to follow the steps below:
 
--   Update to the new version in [package.json](https://github.com/gridsuite/commons-ui/blob/master/package.json) (example `0.6.0`)
+-   Update to the new version in [package.json](https://github.com/gridsuite/commons-ui/blob/main/package.json) (example `0.6.0`)
 -   Build it: `npm install`
--   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to master.
--   Pull and checkout master on your last commit.
+-   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to main.
+-   Pull and checkout main on your last commit.
 -   [Tag your last commit](https://semver.org/) : `git tag <tag>` (example: `v0.6.0`)
 -   Push tag : `git push origin <tag>`
 -   Checkout the tag in a fresh repo copy : `cd $(mktemp -d) && git clone https://github.com/gridsuite/commons-ui.git` then `cd commons-ui && git checkout <tag>`

package/lib/components/ElementSearchDialog/element-search-dialog.js

@@ -0,0 +1,145 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _core = require("@material-ui/core");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lab = require("@material-ui/lab");
+
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+
+var _reactIntl = require("react-intl");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var TERM_MIN_SIZE_BEFORE_SEARCH = 3;
+var useStyles = (0, _styles.makeStyles)({
+  title: {
+    padding: '0px'
+  },
+  content: {
+    display: 'flex',
+    alignItems: 'end',
+    padding: '20px',
+    paddingRight: '0px'
+  }
+});
+
+var ElementSearchDialog = function ElementSearchDialog(props) {
+  var classes = useStyles();
+  var intl = (0, _reactIntl.useIntl)();
+  var open = props.open,
+      onClose = props.onClose,
+      searchingLabel = props.searchingLabel,
+      onSearchTermChange = props.onSearchTermChange,
+      onSelectionChange = props.onSelectionChange,
+      elementsFound = props.elementsFound,
+      renderElement = props.renderElement;
+
+  var _useState = (0, _react.useState)([]),
+      elements = _useState[0],
+      setElements = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      loading = _useState3[0],
+      setLoading = _useState3[1];
+
+  (0, _react.useEffect)(function () {
+    setLoading(false);
+    setElements(elementsFound);
+  }, [elementsFound]);
+
+  var handleSearchTermChange = function handleSearchTermChange(term) {
+    if (term.length >= TERM_MIN_SIZE_BEFORE_SEARCH) {
+      setLoading(true);
+      onSearchTermChange(term);
+      setExpanded(true);
+    } else {
+      setElements([]);
+      setExpanded(false);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: open,
+    onClose: onClose,
+    "aria-labelledby": "dialog-title-search",
+    fullWidth: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, {
+    className: classes.title
+  }), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_lab.Autocomplete, {
+    id: "element-search",
+    forcePopupIcon: false,
+    open: expanded,
+    onOpen: function onOpen() {
+      setElements([]);
+    },
+    onClose: function onClose() {
+      setExpanded(false);
+    },
+    fullWidth: true,
+    onInputChange: function onInputChange(event, value) {
+      return handleSearchTermChange(value);
+    },
+    onChange: function onChange(event, newValue) {
+      return onSelectionChange(newValue);
+    },
+    getOptionLabel: function getOptionLabel(option) {
+      return option.label;
+    },
+    getOptionSelected: function getOptionSelected(option, value) {
+      return option.id === value.id;
+    },
+    options: elements,
+    loading: loading,
+    autoHighlight: true,
+    noOptionsText: intl.formatMessage({
+      id: 'element_search/noResult'
+    }),
+    renderOption: renderElement,
+    renderInput: function renderInput(params) {
+      return /*#__PURE__*/_react["default"].createElement(_core.TextField, _extends({
+        autoFocus: true
+      }, params, {
+        label: searchingLabel || intl.formatMessage({
+          id: 'element_search/noResult'
+        }),
+        InputProps: _extends({}, params.InputProps, {
+          startAdornment: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+            color: "disabled"
+          }), params.InputProps.startAdornment)
+        })
+      }));
+    }
+  })));
+};
+
+ElementSearchDialog.propTypes = process.env.NODE_ENV !== "production" ? {
+  open: _propTypes["default"].bool.isRequired,
+  onClose: _propTypes["default"].func.isRequired,
+  searchingLabel: _propTypes["default"].string,
+  onSearchTermChange: _propTypes["default"].func.isRequired,
+  onSelectionChange: _propTypes["default"].func.isRequired,
+  elementsFound: _propTypes["default"].array.isRequired,
+  renderElement: _propTypes["default"].func.isRequired
+} : {};
+var _default = ElementSearchDialog;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/ElementSearchDialog/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _elementSearchDialog = _interopRequireDefault(require("./element-search-dialog"));
+
+exports["default"] = _elementSearchDialog["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+module.exports = exports.default;

package/lib/components/TopBar/TopBar.js

@@ -31,6 +31,8 @@ var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemTe
 
 var _Apps = _interopRequireDefault(require("@material-ui/icons/Apps"));
 
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+
 var _FullscreenExit = _interopRequireDefault(require("@material-ui/icons/FullscreenExit"));
 
 var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
@@ -65,6 +67,10 @@ var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
 
 var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
+var _clsx3 = _interopRequireDefault(require("clsx"));
+
+var _ElementSearchDialog = _interopRequireDefault(require("../ElementSearchDialog"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -83,7 +89,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flexShrink: 0,
       width: 48,
       height: 48,
-      cursor: 'pointer',
       marginBottom: 8
     },
     menuIcon: {
@@ -91,7 +96,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       height: 24
     },
     title: {
-      marginLeft: 18,
+      marginLeft: 18
+    },
+    clickable: {
       cursor: 'pointer'
     },
     link: {
@@ -199,6 +206,8 @@ var EN = 'EN';
 var FR = 'FR';
 
 var TopBar = function TopBar(_ref) {
+  var _clsx, _clsx2;
+
   var appName = _ref.appName,
       appColor = _ref.appColor,
       appLogo = _ref.appLogo,
@@ -213,6 +222,12 @@ var TopBar = function TopBar(_ref) {
       theme = _ref.theme,
       onEquipmentLabellingClick = _ref.onEquipmentLabellingClick,
       equipmentLabelling = _ref.equipmentLabelling,
+      withElementsSearch = _ref.withElementsSearch,
+      searchingLabel = _ref.searchingLabel,
+      onSearchTermChange = _ref.onSearchTermChange,
+      _onSelectionChange = _ref.onSelectionChange,
+      elementsFound = _ref.elementsFound,
+      renderElement = _ref.renderElement,
       onLanguageClick = _ref.onLanguageClick,
       language = _ref.language;
   var classes = useStyles();
@@ -237,6 +252,14 @@ var TopBar = function TopBar(_ref) {
       isMenuOpen = _useState2[0],
       setMenuOpen = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      isDialogSearchOpen = _useState3[0],
+      setDialogSearchOpen = _useState3[1];
+
+  var handleClickElementSearch = function handleClickElementSearch() {
+    setDialogSearchOpen(true);
+  };
+
   var handleToggleSettingsMenu = function handleToggleSettingsMenu() {
     setAnchorElSettingsMenu(true);
     setMenuOpen(true);
@@ -311,6 +334,16 @@ var TopBar = function TopBar(_ref) {
     }
   };
 
+  (0, _react.useEffect)(function () {
+    if (user && withElementsSearch) {
+      document.addEventListener('keydown', function (e) {
+        if (e.ctrlKey && e.key === 'f') {
+          e.preventDefault();
+          setDialogSearchOpen(true);
+        }
+      });
+    }
+  }, [user, withElementsSearch]);
   return /*#__PURE__*/_react["default"].createElement(_AppBar["default"], {
     position: "static",
     color: "default",
@@ -322,11 +355,11 @@ var TopBar = function TopBar(_ref) {
       return console.debug('full screen error : ' + e.message);
     }
   }), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.logo,
+    className: (0, _clsx3["default"])(classes.logo, (_clsx = {}, _clsx[classes.clickable] = onLogoClick, _clsx)),
     onClick: onLogoClick
   }, appLogo), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: "h4",
-    className: classes.title,
+    className: (0, _clsx3["default"])(classes.title, (_clsx2 = {}, _clsx2[classes.clickable] = onLogoClick, _clsx2)),
     onClick: onLogoClick
   }, /*#__PURE__*/_react["default"].createElement("span", {
     style: {
@@ -338,7 +371,23 @@ var TopBar = function TopBar(_ref) {
     }
   }, appName)), /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.grow
-  }, children), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, children), user && withElementsSearch && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ElementSearchDialog["default"], {
+    open: isDialogSearchOpen,
+    onClose: function onClose() {
+      return setDialogSearchOpen(false);
+    },
+    searchingLabel: searchingLabel,
+    onSearchTermChange: onSearchTermChange,
+    onSelectionChange: function onSelectionChange(element) {
+      setDialogSearchOpen(false);
+
+      _onSelectionChange(element);
+    },
+    elementsFound: elementsFound,
+    renderElement: renderElement
+  }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleClickElementSearch
+  }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null)))), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     "aria-controls": "apps-menu",
     "aria-haspopup": "true",
     onClick: handleClickAppsMenu
@@ -348,7 +397,9 @@ var TopBar = function TopBar(_ref) {
     keepMounted: true,
     open: Boolean(anchorElAppsMenu),
     onClose: handleCloseAppsMenu
-  }, appsAndUrls && appsAndUrls.map(function (item) {
+  }, appsAndUrls && appsAndUrls.filter(function (item) {
+    return !item.hiddenInAppsMenu;
+  }).map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: item.name,
       href: item.url,
@@ -412,7 +463,8 @@ var TopBar = function TopBar(_ref) {
     style: {
       opacity: '1',
       paddingTop: '10px',
-      paddingBottom: '10px'
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.sizeLabel
@@ -443,7 +495,8 @@ var TopBar = function TopBar(_ref) {
       opacity: '1',
       // padding: '0',
       paddingTop: '10px',
-      paddingBottom: '10px'
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.sizeLabel
@@ -472,7 +525,8 @@ var TopBar = function TopBar(_ref) {
     style: {
       opacity: '1',
       paddingTop: '10px',
-      paddingBottom: '10px'
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.sizeLabel
@@ -557,13 +611,18 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   appColor: _propTypes["default"].string,
   appLogo: _propTypes["default"].object,
   user: _propTypes["default"].object,
-  children: _propTypes["default"].array,
+  children: _propTypes["default"].node,
   appsAndUrls: _propTypes["default"].array,
   onThemeClick: _propTypes["default"].func,
   theme: _propTypes["default"].string,
   onAboutClick: _propTypes["default"].func,
   onEquipmentLabellingClick: _propTypes["default"].func,
   equipmentLabelling: _propTypes["default"].bool,
+  withElementsSearch: _propTypes["default"].bool,
+  searchingLabel: _propTypes["default"].string,
+  onSearchTermChange: _propTypes["default"].func,
+  onSelectionChange: _propTypes["default"].func,
+  elementsFound: _propTypes["default"].array,
   onLanguageClick: _propTypes["default"].func.isRequired,
   language: _propTypes["default"].string.isRequired
 } : {};

package/lib/components/TreeViewFinder/TreeViewFinder.js

@@ -0,0 +1,333 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _TreeItem = _interopRequireDefault(require("@material-ui/lab/TreeItem"));
+
+var _TreeView = _interopRequireDefault(require("@material-ui/lab/TreeView"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Copyright (c) 2021, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+var defaultStyles = {
+  dialogPaper: {
+    minWidth: '50%'
+  },
+  labelRoot: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+  labelText: {
+    fontWeight: 'inherit',
+    flexGrow: 1
+  },
+  labelIcon: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    marginRight: '4px'
+  },
+  icon: {}
+};
+/**
+ * This callback type is called `onTreeBrowseCallback` and is displayed as a global symbol.
+ *
+ * @callback onTreeBrowseCallback
+ * @param {string} nodeId The id of the node clicked
+ */
+
+/**
+ * TreeViewFinder documentation :
+ * Component to choose elements in a flat list or a Tree data structure
+ * It is flexible and allow controlled props to let Parent component manage
+ * data.
+ *
+ * @param {Object}          classes - CSS classes, please use withStyles API from MaterialUI
+ * @param {String}          [title] - Title of the Dialog
+ * @param {Boolean}         open - dialog state boolean handler (Controlled)
+ * @param {EventListener}   onClose - onClose callback to call when closing dialog
+ * @param {Object[]}        data - data to feed the component (Controlled).
+ * @param {String}          data[].id - Uuid of the object in Tree
+ * @param {String}          data[].parentId - Uuid of the parent node in Tree
+ * @param {String}          data[].name - name of the node to print in Tree
+ * @param {Object[]}        [data[].children] - array of children nodes, if undefined, the node is a leaf.
+ * @param {String}          [data[].icon] - JSX of an icon to display next a node
+ * @callback                onTreeBrowse - callback to update data prop when walk into Tree
+ * @param {Array}           [defaultSelected=[]] - selected items at mount (Uncontrolled)
+ * @param {Array}           [defaultExpanded=[]] - ids of the expanded items at mount (Uncontrolled)
+ * @param {String}          [validationButtonText=default text] - Customized Validation Button text (default: Add N Elements)
+ * @param {Boolean}         [onlyLeaves=true] - Allow/Forbid selection only on leaves
+ * @param {Boolean}         [multiselect=false] - Allow/Forbid multiselection on Tree
+ */
+
+var TreeViewFinder = function TreeViewFinder(props) {
+  var intl = (0, _reactIntl.useIntl)();
+  var classes = props.classes,
+      title = props.title,
+      open = props.open,
+      data = props.data,
+      defaultExpanded = props.defaultExpanded,
+      defaultSelected = props.defaultSelected,
+      _onClose = props.onClose,
+      onTreeBrowse = props.onTreeBrowse,
+      validationButtonText = props.validationButtonText,
+      onlyLeaves = props.onlyLeaves,
+      multiselect = props.multiselect;
+
+  var _useState = (0, _react.useState)({}),
+      mapPrintedNodes = _useState[0],
+      setMapPrintedNodes = _useState[1]; // Controlled expanded for TreeView
+
+
+  var _useState2 = (0, _react.useState)(defaultExpanded),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1]; // Controlled selected for TreeView
+
+
+  var _useState3 = (0, _react.useState)(defaultSelected),
+      selected = _useState3[0],
+      setSelected = _useState3[1];
+  /* Utilities */
+
+
+  var isSelectable = function isSelectable(node) {
+    return onlyLeaves ? isLeaf(node) : true; // otherwise everything is selectable
+  };
+
+  var isLeaf = function isLeaf(node) {
+    return node && node.children === undefined;
+  };
+
+  var computeMapPrintedNodes = (0, _react.useCallback)(function (nodes) {
+    var newMapPrintedNodes = {};
+    nodes.forEach(function (node) {
+      newMapPrintedNodes[node.id] = node;
+      if (!isLeaf(node)) Object.assign(newMapPrintedNodes, computeMapPrintedNodes(node.children));
+    });
+    return newMapPrintedNodes;
+  }, []); // Effects
+
+  (0, _react.useEffect)(function () {
+    // compute all mapPrintedNodes here from data prop
+    // if data changes in current expanded nodes
+    var newMapPrintedNodes = computeMapPrintedNodes(data);
+    console.debug('data updated, new mapPrintedNodes (nbNodes = ', Object.keys(newMapPrintedNodes).length, ') : ', newMapPrintedNodes);
+    setMapPrintedNodes(newMapPrintedNodes);
+  }, [data, computeMapPrintedNodes]);
+
+  var computeSelectedNodes = function computeSelectedNodes() {
+    return selected.map(function (nodeId) {
+      return mapPrintedNodes[nodeId];
+    });
+  };
+
+  var handleNodeToggle = function handleNodeToggle(e, nodeIds) {
+    // onTreeBrowse proc only on last node clicked and only when expanded
+    nodeIds.every(function (nodeId) {
+      if (!expanded.includes(nodeId)) {
+        // proc onTreeBrowse here
+        onTreeBrowse && onTreeBrowse(nodeId);
+        return false; // break loop to call onTreeBrowse only once
+      }
+
+      return true;
+    });
+    setExpanded(nodeIds); // will proc onNodeSelect then ...
+  };
+  /* User Interaction management */
+
+
+  var handleNodeSelect = function handleNodeSelect(e, values) {
+    // Default management
+    if (multiselect) {
+      setSelected(values.filter(function (nodeId) {
+        return isSelectable(mapPrintedNodes[nodeId]);
+      }));
+    } else {
+      // Toggle selection to allow unselection
+      if (selected.includes(values)) setSelected([]);else setSelected(isSelectable(mapPrintedNodes[values]) ? [values] : []);
+    }
+  };
+  /* Render utilities */
+
+
+  var getValidationButtonText = function getValidationButtonText() {
+    if (validationButtonText) return validationButtonText;else return intl.formatMessage({
+      id: 'treeview_finder/addElementsValidation'
+    }, {
+      nbElements: selected.length
+    });
+  };
+
+  var getNodeIcon = function getNodeIcon(node) {
+    if (!node) return null;
+    if (isSelectable(node) && selected.find(function (nodeId) {
+      return nodeId === node.id;
+    })) return /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+      className: classes.labelIcon
+    });else if (node.icon) return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.labelIcon
+    }, node.icon);else return null;
+  };
+
+  var renderTreeItemLabel = function renderTreeItemLabel(node) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.labelRoot
+    }, getNodeIcon(node), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      className: classes.labelText
+    }, node.name));
+  };
+
+  var renderTree = function renderTree(node) {
+    if (!node) return;
+    return /*#__PURE__*/_react["default"].createElement(_TreeItem["default"], {
+      key: node.id,
+      nodeId: node.id,
+      label: renderTreeItemLabel(node)
+    }, Array.isArray(node.children) ? node.children.length ? node.children.map(function (child) {
+      return renderTree(child);
+    }) : [false] // Pass non empty Array here to simulate a child then this node isn't considered as a leaf.
+    : null);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    open: open,
+    onClose: function onClose(e, r) {
+      if (r === 'escapeKeyDown' || r === 'backdropClick') {
+        _onClose([]);
+
+        setSelected([]);
+      }
+    },
+    "aria-labelledby": "TreeViewFindertitle",
+    classes: {
+      paper: classes.dialogPaper
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+    id: "TreeViewFindertitle"
+  }, title ? title : intl.formatMessage({
+    id: 'treeview_finder/finderTitle'
+  }, {
+    multiselect: multiselect
+  })), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, intl.formatMessage({
+    id: 'treeview_finder/contentText'
+  }, {
+    multiselect: multiselect
+  })), /*#__PURE__*/_react["default"].createElement(_TreeView["default"] // Controlled props
+  , {
+    expanded: expanded,
+    selected: selected // events
+    ,
+    onNodeToggle: handleNodeToggle,
+    onNodeSelect: handleNodeSelect // Uncontrolled props
+    ,
+    defaultCollapseIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
+      className: classes.icon
+    }),
+    defaultExpandIcon: /*#__PURE__*/_react["default"].createElement(_ChevronRight["default"], {
+      className: classes.icon
+    }),
+    multiSelect: multiselect
+  }, data && Array.isArray(data) ? data.map(function (child) {
+    return renderTree(child);
+  }) : null)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "contained",
+    style: {
+      "float": 'left',
+      margin: '5px'
+    },
+    onClick: function onClick() {
+      _onClose([]);
+
+      setSelected([]);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
+    id: "treeview_finder/cancel"
+  })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "contained",
+    style: {
+      "float": 'left',
+      margin: '5px'
+    },
+    onClick: function onClick() {
+      _onClose(computeSelectedNodes());
+
+      setSelected([]);
+    },
+    disabled: selected.length === 0
+  }, getValidationButtonText())));
+};
+/* TreeViewFinder props list */
+
+
+TreeViewFinder.propTypes = process.env.NODE_ENV !== "production" ? {
+  // Controlled
+  open: _propTypes["default"].bool.isRequired,
+  onClose: _propTypes["default"].func,
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
+    children: _propTypes["default"].array
+  })).isRequired,
+  onTreeBrowse: _propTypes["default"].func,
+  //uncontrolled
+  classes: _propTypes["default"].object.isRequired,
+  title: _propTypes["default"].string,
+  validationButtonText: _propTypes["default"].string,
+  defaultSelected: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  defaultExpanded: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  onlyLeaves: _propTypes["default"].bool,
+  multiselect: _propTypes["default"].bool
+} : {};
+/* TreeViewFinder props default values */
+
+TreeViewFinder.defaultProps = {
+  defaultSelected: [],
+  defaultExpanded: [],
+  onlyLeaves: true,
+  multiselect: false
+};
+
+var _default = (0, _styles.withStyles)(defaultStyles)(TreeViewFinder);
+
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/TreeViewFinder/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _TreeViewFinder = _interopRequireDefault(require("./TreeViewFinder"));
+
+exports["default"] = _TreeViewFinder["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+module.exports = exports.default;

package/lib/components/translations/element-search-en.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var element_search_en = {
+  'element_search/noResult': 'No result'
+};
+var _default = element_search_en;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/translations/element-search-fr.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var element_search_fr = {
+  'element_search/noResult': 'Aucun résultat'
+};
+var _default = element_search_fr;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/translations/equipment-search-en.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var equipment_search_en = {
+  'equipment_search/label': 'Search an equipment',
+  'equipment_search/switchTag': 'SWITCH',
+  'equipment_search/busbarSectionTag': 'BBS',
+  'equipment_search/lineTag': 'LINE',
+  'equipment_search/2wtTag': '2W TRANSFO',
+  'equipment_search/3wtTag': '3W TRANSFO',
+  'equipment_search/generatorTag': 'GENERATOR',
+  'equipment_search/batteryTag': 'BATTERY',
+  'equipment_search/loadTag': 'LOAD',
+  'equipment_search/shuntTag': 'SHUNT',
+  'equipment_search/svcTag': 'SVC',
+  'equipment_search/hvdcLinkTag': 'HVDC LINK',
+  'equipment_search/hvdcStationTag': 'HVDC STATION',
+  'equipment_search/voltageLevelTag': 'VOLTAGE LEVEL',
+  'equipment_search/substationTag': 'SUBSTATION'
+};
+var _default = equipment_search_en;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/translations/equipment-search-fr.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var equipment_search_fr = {
+  'equipment_search/label': 'Rechercher un équipement',
+  'equipment_search/switchTag': 'SWITCH',
+  'equipment_search/busbarSectionTag': 'SJB',
+  'equipment_search/lineTag': 'LIGNE',
+  'equipment_search/2wtTag': 'TRANSFO 2E',
+  'equipment_search/3wtTag': 'TRANSFO 3E',
+  'equipment_search/generatorTag': 'GROUPE',
+  'equipment_search/batteryTag': 'BATTERIE',
+  'equipment_search/loadTag': 'CONSO',
+  'equipment_search/shuntTag': 'MCS',
+  'equipment_search/svcTag': 'CSPR',
+  'equipment_search/hvdcLinkTag': 'LIAISON HVDC',
+  'equipment_search/hvdcStationTag': 'STATION HVDC',
+  'equipment_search/voltageLevelTag': 'POSTE',
+  'equipment_search/substationTag': 'SITE'
+};
+var _default = equipment_search_fr;
+exports["default"] = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var treeview_finder_en = {
+  'treeview_finder/close': 'Close',
+  'treeview_finder/cancel': 'Cancel',
+  '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}}'
+};
+var _default = treeview_finder_en;
+exports["default"] = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var treeview_finder_fr = {
+  'treeview_finder/close': 'Fermer',
+  'treeview_finder/cancel': 'Annuler',
+  '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}}'
+};
+var _default = treeview_finder_fr;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/index.js

@@ -1,7 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.setSignInCallbackError = exports.SIGNIN_CALLBACK_ERROR = exports.setLoggedUser = exports.USER = exports.LANG_FRENCH = exports.LANG_ENGLISH = exports.LANG_SYSTEM = exports.LIGHT_THEME = exports.DARK_THEME = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = exports.getPreLoginPath = exports.dispatchUser = exports.logout = exports.initializeAuthenticationProd = exports.initializeAuthenticationDev = void 0;
+exports.setSignInCallbackError = exports.SIGNIN_CALLBACK_ERROR = exports.setLoggedUser = exports.USER = exports.LANG_FRENCH = exports.LANG_ENGLISH = exports.LANG_SYSTEM = exports.LIGHT_THEME = exports.DARK_THEME = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = exports.getFileIcon = exports.elementType = exports.getPreLoginPath = exports.dispatchUser = exports.logout = exports.initializeAuthenticationProd = exports.initializeAuthenticationDev = exports.equipmentStyles = exports.renderEquipmentForSearchBar = exports.getEquipmentsInfosForSearchBar = exports.EQUIPMENT_TYPE = void 0;
+
+var _TreeViewFinder2 = _interopRequireDefault(require("./components/TreeViewFinder"));
+
+exports.TreeViewFinder = _TreeViewFinder2["default"];
 
 var _TopBar2 = _interopRequireDefault(require("./components/TopBar"));
 
@@ -27,6 +31,13 @@ var _ReportViewerDialog2 = _interopRequireDefault(require("./components/ReportVi
 
 exports.ReportViewerDialog = _ReportViewerDialog2["default"];
 
+var _EquipmentType = require("./utils/EquipmentType");
+
+exports.EQUIPMENT_TYPE = _EquipmentType.EQUIPMENT_TYPE;
+exports.getEquipmentsInfosForSearchBar = _EquipmentType.getEquipmentsInfosForSearchBar;
+exports.renderEquipmentForSearchBar = _EquipmentType.renderEquipmentForSearchBar;
+exports.equipmentStyles = _EquipmentType.equipmentStyles;
+
 var _AuthService = require("./utils/AuthService");
 
 exports.initializeAuthenticationDev = _AuthService.initializeAuthenticationDev;
@@ -35,6 +46,11 @@ exports.logout = _AuthService.logout;
 exports.dispatchUser = _AuthService.dispatchUser;
 exports.getPreLoginPath = _AuthService.getPreLoginPath;
 
+var _ElementType = require("./utils/ElementType");
+
+exports.elementType = _ElementType.elementType;
+exports.getFileIcon = _ElementType.getFileIcon;
+
 var _MuiVirtualizedTable3 = require("./components/MuiVirtualizedTable/MuiVirtualizedTable");
 
 exports.DEFAULT_CELL_PADDING = _MuiVirtualizedTable3.DEFAULT_CELL_PADDING;
@@ -88,4 +104,28 @@ var _tableFr = _interopRequireDefault(require("./components/translations/table-f
 
 exports.table_fr = _tableFr["default"];
 
+var _treeviewFinderEn = _interopRequireDefault(require("./components/translations/treeview-finder-en"));
+
+exports.treeview_finder_en = _treeviewFinderEn["default"];
+
+var _treeviewFinderFr = _interopRequireDefault(require("./components/translations/treeview-finder-fr"));
+
+exports.treeview_finder_fr = _treeviewFinderFr["default"];
+
+var _elementSearchEn = _interopRequireDefault(require("./components/translations/element-search-en"));
+
+exports.element_search_en = _elementSearchEn["default"];
+
+var _elementSearchFr = _interopRequireDefault(require("./components/translations/element-search-fr"));
+
+exports.element_search_fr = _elementSearchFr["default"];
+
+var _equipmentSearchEn = _interopRequireDefault(require("./components/translations/equipment-search-en"));
+
+exports.equipment_search_en = _equipmentSearchEn["default"];
+
+var _equipmentSearchFr = _interopRequireDefault(require("./components/translations/equipment-search-fr"));
+
+exports.equipment_search_fr = _equipmentSearchFr["default"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/utils/ElementType.js

@@ -0,0 +1,71 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getFileIcon = getFileIcon;
+exports.elementType = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _LibraryBooksOutlined = _interopRequireDefault(require("@material-ui/icons/LibraryBooksOutlined"));
+
+var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));
+
+var _PanTool = _interopRequireDefault(require("@material-ui/icons/PanTool"));
+
+var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
+
+var _Filter = _interopRequireDefault(require("@material-ui/icons/Filter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Copyright (c) 2021, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+var elementType = {
+  DIRECTORY: 'DIRECTORY',
+  STUDY: 'STUDY',
+  FILTER: 'FILTER',
+  SCRIPT: 'SCRIPT',
+  SCRIPT_CONTINGENCY_LIST: 'SCRIPT_CONTINGENCY_LIST',
+  FILTERS_CONTINGENCY_LIST: 'FILTERS_CONTINGENCY_LIST'
+};
+exports.elementType = elementType;
+
+function getFileIcon(type, theme) {
+  switch (type) {
+    case elementType.STUDY:
+      return /*#__PURE__*/_react["default"].createElement(_LibraryBooksOutlined["default"], {
+        className: theme
+      });
+
+    case elementType.SCRIPT_CONTINGENCY_LIST:
+      return /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+        className: theme
+      });
+
+    case elementType.FILTERS_CONTINGENCY_LIST:
+      return /*#__PURE__*/_react["default"].createElement(_PanTool["default"], {
+        className: theme
+      });
+
+    case elementType.FILTER:
+      return /*#__PURE__*/_react["default"].createElement(_FilterList["default"], {
+        className: theme
+      });
+
+    case elementType.SCRIPT:
+      return /*#__PURE__*/_react["default"].createElement(_Filter["default"], {
+        className: theme
+      });
+
+    case elementType.DIRECTORY:
+      // to easily use in TreeView we do not give icons for directories
+      return;
+
+    default:
+      console.warn('unknown type [' + type + ']');
+  }
+}

package/lib/utils/EquipmentType.js

@@ -0,0 +1,197 @@
+"use strict";
+
+exports.__esModule = true;
+exports.renderEquipmentForSearchBar = exports.getEquipmentsInfosForSearchBar = exports.EQUIPMENT_TYPE = exports.equipmentStyles = exports.VL_TAG_MAX_SIZE = exports.TYPE_TAG_MAX_SIZE = void 0;
+
+var _match = _interopRequireDefault(require("autosuggest-highlight/match"));
+
+var _parse = _interopRequireDefault(require("autosuggest-highlight/parse"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Copyright (c) 2021, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+var TYPE_TAG_MAX_SIZE = '120px';
+exports.TYPE_TAG_MAX_SIZE = TYPE_TAG_MAX_SIZE;
+var VL_TAG_MAX_SIZE = '65px';
+exports.VL_TAG_MAX_SIZE = VL_TAG_MAX_SIZE;
+
+var equipmentStyles = function equipmentStyles(theme) {
+  return {
+    equipmentOption: {
+      display: 'flex',
+      gap: '20px',
+      width: '100%',
+      margin: '0px',
+      padding: '0px',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    equipmentTag: {
+      borderRadius: '10px',
+      padding: '4px',
+      fontSize: 'x-small',
+      textAlign: 'center'
+    },
+    equipmentTypeTag: {
+      width: TYPE_TAG_MAX_SIZE,
+      background: 'lightblue'
+    },
+    equipmentVlTag: {
+      width: VL_TAG_MAX_SIZE,
+      background: 'lightgray',
+      fontStyle: 'italic'
+    }
+  };
+}; // Must be equivalent as the back enum (Powsybl)
+
+
+exports.equipmentStyles = equipmentStyles;
+var EQUIPMENT_TYPE = {
+  SUBSTATION: {
+    name: 'SUBSTATION',
+    sortOrder: 0,
+    tagLabel: 'equipment_search/substationTag'
+  },
+  VOLTAGE_LEVEL: {
+    name: 'VOLTAGE_LEVEL',
+    sortOrder: 1,
+    tagLabel: 'equipment_search/voltageLevelTag'
+  },
+  LINE: {
+    name: 'LINE',
+    sortOrder: 2,
+    tagLabel: 'equipment_search/voltageLevelTag'
+  },
+  TWO_WINDINGS_TRANSFORMER: {
+    name: 'TWO_WINDINGS_TRANSFORMER',
+    sortOrder: 3,
+    tagLabel: 'equipment_search/2wtTag'
+  },
+  THREE_WINDINGS_TRANSFORMER: {
+    name: 'THREE_WINDINGS_TRANSFORMER',
+    sortOrder: 4,
+    tagLabel: 'equipment_search/3wtTag'
+  },
+  HVDC: {
+    name: 'HVDC',
+    sortOrder: 5,
+    tagLabel: 'equipment_search/hvdcLinkTag'
+  },
+  GENERATOR: {
+    name: 'GENERATOR',
+    sortOrder: 6,
+    tagLabel: 'equipment_search/generatorTag'
+  },
+  BATTERY: {
+    name: 'BATTERY',
+    sortOrder: 7,
+    tagLabel: 'equipment_search/batteryTag'
+  },
+  LOAD: {
+    name: 'LOAD',
+    sortOrder: 8,
+    tagLabel: 'equipment_search/loadTag'
+  },
+  SHUNT_COMPENSATOR: {
+    name: 'SHUNT_COMPENSATOR',
+    sortOrder: 9,
+    tagLabel: 'equipment_search/shuntTag'
+  },
+  DANGLING_LINE: {
+    name: 'DANGLING_LINE',
+    sortOrder: 10,
+    tagLabel: 'equipment_search/lineTag'
+  },
+  STATIC_VAR_COMPENSATOR: {
+    name: 'STATIC_VAR_COMPENSATOR',
+    sortOrder: 11,
+    tagLabel: 'equipment_search/svcTag'
+  },
+  HVDC_CONVERTER_STATION: {
+    name: 'HVDC_CONVERTER_STATION',
+    sortOrder: 12,
+    tagLabel: 'equipment_search/hvdcStationTag'
+  },
+  BUSBAR_SECTION: {
+    name: 'BUSBAR_SECTION',
+    sortOrder: 13,
+    tagLabel: 'equipment_search/busbarSectionTag'
+  },
+  BREAKER: {
+    name: 'BREAKER',
+    sortOrder: 14,
+    tagLabel: 'equipment_search/switchTag'
+  },
+  DISCONNECTOR: {
+    name: 'DISCONNECTOR',
+    sortOrder: 15,
+    tagLabel: 'equipment_search/switchTag'
+  },
+  LOAD_BREAK_SWITCH: {
+    name: 'LOAD_BREAK_SWITCH',
+    sortOrder: 16,
+    tagLabel: 'equipment_search/switchTag'
+  }
+};
+exports.EQUIPMENT_TYPE = EQUIPMENT_TYPE;
+
+var getEquipmentsInfosForSearchBar = function getEquipmentsInfosForSearchBar(equipmentsInfos, equipmentLabelling) {
+  return equipmentsInfos.flatMap(function (e) {
+    var label = equipmentLabelling ? e.name : e.id;
+    return e.type === 'SUBSTATION' ? [{
+      label: label,
+      id: e.id,
+      type: e.type
+    }] : e.voltageLevelsIds.map(function (vli) {
+      return {
+        label: label,
+        id: e.id,
+        type: e.type,
+        voltageLevelId: vli
+      };
+    });
+  }).sort(sortEquipments);
+};
+
+exports.getEquipmentsInfosForSearchBar = getEquipmentsInfosForSearchBar;
+
+var sortEquipments = function sortEquipments(a, b) {
+  return EQUIPMENT_TYPE[a.type].sortOrder < EQUIPMENT_TYPE[b.type].sortOrder ? -1 : EQUIPMENT_TYPE[a.type].sortOrder > EQUIPMENT_TYPE[b.type].sortOrder ? 1 : a.label.localeCompare(b.label);
+};
+
+var renderEquipmentForSearchBar = function renderEquipmentForSearchBar(classes, intl) {
+  return function (element, _ref) {
+    var inputValue = _ref.inputValue;
+    var matches = (0, _match["default"])(element.label, inputValue);
+    var parts = (0, _parse["default"])(element.label, matches);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.equipmentOption
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentTypeTag)
+    }, intl.formatMessage({
+      id: EQUIPMENT_TYPE[element.type].tagLabel
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.equipmentOption
+    }, /*#__PURE__*/_react["default"].createElement("span", null, parts.map(function (part, index) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: index,
+        style: {
+          fontWeight: part.highlight ? 'bold' : 'inherit'
+        }
+      }, part.text);
+    })), element.type !== EQUIPMENT_TYPE.SUBSTATION.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name && /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentVlTag)
+    }, element.voltageLevelId)));
+  };
+};
+
+exports.renderEquipmentForSearchBar = renderEquipmentForSearchBar;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.13.1",
+    "version": "0.14.3",
     "description": "common react components for gridsuite applications",
     "main": "lib/index.js",
     "files": [
@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "@svgr/webpack": "^5.4.0",
+        "autosuggest-highlight": "^3.1.1",
         "clsx": "^1.0.4",
         "jwt-decode": "^3.0.0",
         "memoize-one": "^5.1.1",
@@ -40,7 +41,6 @@
         "react-intl": "^5.0.0"
     },
     "devDependencies": {
-        "notistack": "^1.0.1",
         "@material-ui/core": "^4.9.5",
         "@material-ui/icons": "^4.5.1",
         "@material-ui/lab": "^4.0.0-alpha.56",
@@ -57,6 +57,7 @@
         "eslint-plugin-react": "^7.21.0",
         "eslint-plugin-react-hooks": "^4.1.2",
         "inferno": "^7.4.2",
+        "notistack": "^1.0.1",
         "nwb": "^0.25.x",
         "prettier": "^2.0.0",
         "puppeteer": "^10.0.0",