@gridsuite/commons-ui 0.58.0 → 0.59.1

package/dist/chunks/{criteria-based-filter-edition-dialog.CbhgOSRk.js → criteria-based-filter-edition-dialog.DcXcQOoT.js}

@@ -1,6 +1,6 @@
 import '../assets/criteria-based-filter-edition-dialog.css';
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useState, useMemo, useEffect, useCallback, useContext } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { FieldConstants } from "../utils/field-constants.js";
 import { backToFrontTweak, frontToBackTweak } from "../components/filter/criteria-based/criteria-based-filter-utils.js";
 import CustomMuiDialog from "../components/dialogs/custom-mui-dialog.js";
@@ -30,9 +30,8 @@ import CsvDownloader from "react-csv-downloader";
 import Alert from "@mui/material/Alert";
 import "../components/TreeViewFinder/TreeViewFinder.js";
 import "../components/TopBar/TopBar.js";
-import "../components/TopBar/GridLogo.js";
-import "../components/TopBar/AboutDialog.js";
-import "../components/SnackbarProvider/SnackbarProvider.js";
+import "@mui/lab";
+import "notistack";
 import "react-router-dom";
 import "../utils/AuthService.js";
 import "../components/MuiVirtualizedTable/MuiVirtualizedTable.js";
@@ -42,24 +41,18 @@ import "../components/ReportViewer/log-table.js";
 import "../components/ReportViewer/report-tree-view-context.js";
 import "@mui/x-tree-view";
 import "../components/OverflowableText/overflowable-text.js";
-import "../components/ElementSearchDialog/tag-renderer.js";
+import "clsx";
 import "../components/inputs/react-hook-form/utils/submit-button.js";
 import CancelButton from "../components/inputs/react-hook-form/utils/cancel-button.js";
 import "../components/inputs/react-hook-form/provider/custom-form-provider.js";
 import "../components/dialogs/description-modification-dialog.js";
-import { FilterContext } from "../components/filter/filter-context.js";
-import "notistack";
 import * as yup from "yup";
 import "../components/dialogs/popup-confirmation-dialog.js";
 import "autosuggest-highlight/match";
 import "autosuggest-highlight/parse";
-import "clsx";
 import "../components/CardErrorBoundary/card-error-boundary.js";
-import "../components/inputs/react-hook-form/slider-input.js";
-import "../components/inputs/react-hook-form/numbers/integer-input.js";
-import "../components/inputs/react-hook-form/booleans/checkbox-input.js";
-import "../components/inputs/react-hook-form/booleans/switch-input.js";
 import "@mui/icons-material/Folder";
+import "../components/CustomAGGrid/custom-aggrid.js";
 import { saveExplicitNamingFilter, saveCriteriaBasedFilter, saveExpertFilter } from "../components/filter/utils/filter-api.js";
 import { formatQuery, QueryBuilder } from "react-querybuilder";
 import { getNumberOfSiblings, recursiveRemove, countRules, getOperators, queryValidator, testQuery, importExpertRules } from "../components/filter/expert/expert-filter-utils.js";
@@ -76,12 +69,12 @@ import TranslatedValueEditor from "../components/inputs/react-query-builder/tran
 import TextValueEditor from "../components/inputs/react-query-builder/text-value-editor.js";
 import Box from "@mui/material/Box";
 import { Generator, Load, VoltageLevel, Substation, noSelectionForCopy as noSelectionForCopy$1 } from "../utils/equipment-types.js";
+import { fetchElementsInfos, saveFilter } from "../services/explore.js";
 import { useCustomFormContext } from "../components/inputs/react-hook-form/provider/use-custom-form-context.js";
 import DirectoryItemsInput from "../components/inputs/react-hook-form/directory-items-input.js";
 import { DISTRIBUTION_KEY, FilterType } from "../components/filter/constants/filter-constants.js";
 import { FetchStatus } from "../utils/FetchStatus.js";
 import PropTypes from "prop-types";
-import { saveFilter } from "../services/explore.js";
 import "./filter-properties.B7-q_yPf.js";
 import "../components/inputs/react-hook-form/range-input.js";
 import "../components/inputs/react-hook-form/select-inputs/mui-select-input.js";
@@ -833,10 +826,9 @@ const RemoveButton = (props) => {
 };
 const ElementValueEditor = (props) => {
   const { setValue } = useCustomFormContext();
-  const { fetchElementsInfos } = useContext(FilterContext);
   useEffect(() => {
     if (props.defaultValue && Array.isArray(props.defaultValue) && props.defaultValue.length > 0 && props.defaultValue[0].length > 0 && validate(props.defaultValue[0])) {
-      fetchElementsInfos && fetchElementsInfos(props.defaultValue).then(
+      fetchElementsInfos(props.defaultValue).then(
         (childrenWithMetadata) => {
           setValue(
             props.name,
@@ -851,13 +843,7 @@ const ElementValueEditor = (props) => {
         }
       );
     }
-  }, [
-    props.name,
-    props.defaultValue,
-    props.elementType,
-    setValue,
-    fetchElementsInfos
-  ]);
+  }, [props.name, props.defaultValue, props.elementType, setValue]);
   return /* @__PURE__ */ jsx(
     DirectoryItemsInput,
     {
@@ -935,10 +921,12 @@ const ValueEditor = (props) => {
     );
   } else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
     return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
-  } else if (props.field === FieldType.PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2) {
+  } else if (props.field === FieldType.PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_1 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_2) {
     let equipmentType;
     if (props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2) {
       equipmentType = Substation.type;
+    } else if (props.field === FieldType.VOLTAGE_LEVEL_PROPERTY || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_1 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_2) {
+      equipmentType = VoltageLevel.type;
     } else {
       equipmentType = getValues(FieldConstants.EQUIPMENT_TYPE);
     }
@@ -1218,13 +1206,8 @@ const FilterCreationDialog = ({
   open,
   onClose,
   activeDirectory,
-  fetchAppsAndUrls,
   elementExists,
   language,
-  fetchDirectoryContent,
-  fetchRootFolders,
-  fetchElementsInfos,
-  fetchPath,
   sourceFilterForExplicitNamingConversion = void 0
 }) => {
   var _a;
@@ -1300,24 +1283,12 @@ const FilterCreationDialog = ({
       disabledSave: !!nameError || !!isValidating,
       language,
       children: /* @__PURE__ */ jsx(
-        FilterContext.Provider,
+        FilterForm,
         {
-          value: {
-            fetchDirectoryContent,
-            fetchRootFolders,
-            fetchElementsInfos,
-            fetchAppsAndUrls,
-            fetchPath
-          },
-          children: /* @__PURE__ */ jsx(
-            FilterForm,
-            {
-              creation: true,
-              activeDirectory,
-              elementExists,
-              sourceFilterForExplicitNamingConversion
-            }
-          )
+          creation: true,
+          activeDirectory,
+          elementExists,
+          sourceFilterForExplicitNamingConversion
         }
       )
     }
@@ -1341,11 +1312,7 @@ const ExpertFilterEditionDialog = ({
   setSelectionForCopy,
   activeDirectory,
   elementExists,
-  language,
-  fetchDirectoryContent,
-  fetchRootFolders,
-  fetchElementsInfos,
-  fetchAppsAndUrls
+  language
 }) => {
   var _a;
   const { snackError } = useSnackMessage();
@@ -1429,22 +1396,11 @@ const ExpertFilterEditionDialog = ({
       disabledSave: !!nameError || !!isValidating,
       isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
       language,
-      children: /* @__PURE__ */ jsx(
-        FilterContext.Provider,
+      children: isDataReady && /* @__PURE__ */ jsx(
+        FilterForm,
         {
-          value: {
-            fetchDirectoryContent,
-            fetchRootFolders,
-            fetchElementsInfos,
-            fetchAppsAndUrls
-          },
-          children: isDataReady && /* @__PURE__ */ jsx(
-            FilterForm,
-            {
-              activeDirectory,
-              elementExists
-            }
-          )
+          activeDirectory,
+          elementExists
         }
       )
     }

package/dist/components/AuthenticationRouter/AuthenticationRouter.d.ts

@@ -1,10 +1,29 @@
+import { UserManager } from 'oidc-client';
+import { Dispatch } from 'react';
+
+export interface AuthenticationRouterProps {
+    userManager: {
+        instance: UserManager;
+        error: string;
+    };
+    signInCallbackError: {
+        message: string;
+    };
+    authenticationRouterError: {
+        userName: string;
+        userValidationError?: {
+            error: Error;
+        };
+        logoutError?: {
+            error: Error;
+        };
+        unauthorizedUserInfo?: string;
+        error: string;
+    };
+    showAuthenticationRouterLogin: boolean;
+    dispatch: Dispatch<unknown>;
+    navigate: () => void;
+    location: Location;
+}
+declare const AuthenticationRouter: ({ userManager, signInCallbackError, authenticationRouterError, showAuthenticationRouterLogin, dispatch, navigate, location, }: AuthenticationRouterProps) => import("react/jsx-runtime").JSX.Element;
 export default AuthenticationRouter;
-declare function AuthenticationRouter({ userManager, signInCallbackError, authenticationRouterError, showAuthenticationRouterLogin, dispatch, navigate, location, }: {
-    userManager: any;
-    signInCallbackError: any;
-    authenticationRouterError: any;
-    showAuthenticationRouterLogin: any;
-    dispatch: any;
-    navigate: any;
-    location: any;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthenticationRouter/AuthenticationRouter.js

@@ -88,7 +88,7 @@ const AuthenticationRouter = ({
             Logout,
             {
               disabled: userManager.instance === null,
-              onLogoutClick: () => logout(location, userManager.instance)
+              onLogoutClick: () => logout(dispatch, userManager.instance)
             }
           ) }),
           /* @__PURE__ */ jsxs(Grid, { item: true, xs: 4, children: [

package/dist/components/AuthenticationRouter/index.d.ts

@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2020, 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/.
+ */
 export { default } from './AuthenticationRouter';

package/dist/components/CardErrorBoundary/card-error-boundary.d.ts

@@ -1,18 +1,32 @@
-import { Component } from 'react';
-export default CardErrorBoundary;
-declare class CardErrorBoundary extends Component<any, any, any> {
-    static getDerivedStateFromError(error: any): {
-        hasError: boolean;
-        error: any;
-    };
-    constructor(props: any);
-    state: {
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { IconButtonProps } from '@mui/material';
+
+export interface ExpandMoreProps extends IconButtonProps {
+    expand: boolean;
+}
+interface Props {
+    children?: ReactNode;
+}
+type CardErrorBoundaryStateError = {
+    hasError: true;
+    error: Error;
+};
+type CardErrorBoundaryStateSuccess = {
+    hasError: false;
+};
+type CardErrorBoundaryState = (CardErrorBoundaryStateError | CardErrorBoundaryStateSuccess) & {
+    expanded: boolean;
+};
+declare class CardErrorBoundary extends Component<Props, CardErrorBoundaryState> {
+    state: CardErrorBoundaryState;
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): {
         hasError: boolean;
-        expanded: boolean;
-        error: undefined;
+        error: Error;
     };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     handleExpandClick(): void;
     handleReloadClick(): void;
-    componentDidCatch(error: any, errorInfo: any): void;
-    render(): any;
+    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
+export default CardErrorBoundary;

package/dist/components/CardErrorBoundary/card-error-boundary.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Component } from "react";
-import { styled, IconButton, Box, Card, CardHeader, CardContent, Typography, CardActions, Collapse } from "@mui/material";
 import { Replay, ExpandMore as ExpandMore$1 } from "@mui/icons-material";
+import { styled, IconButton, Box, Card, CardHeader, CardContent, Typography, CardActions, Collapse } from "@mui/material";
+import { Component } from "react";
 import { FormattedMessage } from "react-intl";
 const ExpandMore = styled((props) => {
   const { expand, ...other } = props;
@@ -18,8 +18,7 @@ class CardErrorBoundary extends Component {
     super(props);
     this.state = {
       hasError: false,
-      expanded: false,
-      error: void 0
+      expanded: false
     };
     this.handleExpandClick = this.handleExpandClick.bind(this);
     this.handleReloadClick = this.handleReloadClick.bind(this);
@@ -31,10 +30,12 @@ class CardErrorBoundary extends Component {
     console.error("CardErrorBoundary caught: ", error, errorInfo);
   }
   handleExpandClick() {
-    this.setState((state) => ({ expanded: !state.expanded }));
+    this.setState((state) => ({
+      expanded: !state.expanded
+    }));
   }
   handleReloadClick() {
-    this.setState((state) => ({
+    this.setState((_) => ({
       hasError: false,
       expanded: false,
       error: void 0

package/dist/components/CardErrorBoundary/index.d.ts

@@ -1 +1,7 @@
+/**
+ * Copyright (c) 2022, 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/.
+ */
 export { default } from './card-error-boundary';

package/dist/components/CustomAGGrid/custom-aggrid.d.ts

@@ -0,0 +1,11 @@
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import { default as React } from 'react';
+
+interface CustomAGGGridStyleProps {
+    shouldHidePinnedHeaderRightBorder?: boolean;
+    showOverlay?: boolean;
+}
+interface CustomAGGridProps extends AgGridReactProps, CustomAGGGridStyleProps {
+}
+declare const CustomAGGrid: React.ForwardRefExoticComponent<CustomAGGridProps & React.RefAttributes<AgGridReact<any>>>;
+export default CustomAGGrid;

package/dist/components/CustomAGGrid/custom-aggrid.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { AgGridReact } from "ag-grid-react";
+import { useIntl } from "react-intl";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import { Box } from "@mui/system";
+import { mergeSx } from "../../utils/styles.js";
+import { useTheme } from "@mui/material";
+import { CUSTOM_AGGRID_THEME, styles } from "./custom-aggrid.style.js";
+const onColumnResized = (params) => {
+  var _a;
+  const { column, finished } = params;
+  const colDefinedMinWidth = (_a = column == null ? void 0 : column.getColDef()) == null ? void 0 : _a.minWidth;
+  if (column && colDefinedMinWidth && finished) {
+    const newWidth = column == null ? void 0 : column.getActualWidth();
+    if (newWidth < colDefinedMinWidth) {
+      column == null ? void 0 : column.setActualWidth(colDefinedMinWidth, params.source);
+    }
+  }
+};
+const CustomAGGrid = React.forwardRef(
+  (props, ref) => {
+    const {
+      shouldHidePinnedHeaderRightBorder = false,
+      overlayNoRowsTemplate,
+      loadingOverlayComponent,
+      loadingOverlayComponentParams,
+      showOverlay = false
+    } = props;
+    const theme = useTheme();
+    const intl = useIntl();
+    const GRID_PREFIX = "grid.";
+    const getLocaleText = useCallback(
+      (params) => {
+        const key = GRID_PREFIX + params.key;
+        return intl.formatMessage({
+          id: key,
+          defaultMessage: params.defaultValue
+        });
+      },
+      [intl]
+    );
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: mergeSx(
+          styles.grid,
+          shouldHidePinnedHeaderRightBorder ? styles.noBorderRight : void 0,
+          showOverlay ? styles.overlayBackground : void 0
+        ),
+        className: `${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`,
+        children: /* @__PURE__ */ jsx(
+          AgGridReact,
+          {
+            ref,
+            getLocaleText,
+            suppressPropertyNamesCheck: true,
+            loadingOverlayComponent,
+            loadingOverlayComponentParams,
+            overlayNoRowsTemplate,
+            onColumnResized,
+            enableCellTextSelection: true,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  CustomAGGrid as default
+};

package/dist/components/CustomAGGrid/custom-aggrid.style.d.ts

@@ -0,0 +1,20 @@
+import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+import { Theme } from '@mui/material/styles/createTheme';
+
+export declare const CUSTOM_AGGRID_THEME = "custom-aggrid-theme";
+export declare const styles: {
+    grid: (theme: Theme) => SystemStyleObject<Theme>;
+    noBorderRight: {
+        '& .ag-pinned-left-header': {
+            borderRight: string;
+        };
+    };
+    overlayBackground: (theme: Theme) => {
+        '& .ag-overlay-loading-wrapper': {
+            background: string;
+        };
+        '& .ag-overlay-no-rows-wrapper': {
+            background: string;
+        };
+    };
+};

package/dist/components/CustomAGGrid/custom-aggrid.style.js

@@ -0,0 +1,47 @@
+const CUSTOM_AGGRID_THEME = "custom-aggrid-theme";
+const styles = {
+  grid: (theme) => ({
+    width: "auto",
+    height: "100%",
+    position: "relative",
+    [`&.${CUSTOM_AGGRID_THEME}`]: {
+      "--ag-value-change-value-highlight-background-color": theme.aggrid.valueChangeHighlightBackgroundColor,
+      "--ag-selected-row-background-color": theme.aggrid.highlightColor,
+      "--ag-row-hover-color": theme.aggrid.highlightColor
+    },
+    "& .ag-checkbox-input": {
+      cursor: "pointer"
+    },
+    //overrides the default computed max height for ag grid default selector editor to make it more usable
+    //can be removed if a custom selector editor is implemented
+    "& .ag-select-list": {
+      maxHeight: "300px !important"
+    },
+    //allows to hide the scrollbar in the pinned rows section as it is unecessary to our implementation
+    "& .ag-body-horizontal-scroll:not(.ag-scrollbar-invisible) .ag-horizontal-left-spacer:not(.ag-scroller-corner)": {
+      visibility: "hidden"
+    },
+    //removes border on focused cell - using "suppressCellFocus" Aggrid option causes side effects and breaks field edition
+    "& .ag-cell-focus, .ag-cell": {
+      border: "none !important"
+    }
+  }),
+  noBorderRight: {
+    // hides right border for header of "Edit" column due to column being pinned
+    "& .ag-pinned-left-header": {
+      borderRight: "none"
+    }
+  },
+  overlayBackground: (theme) => ({
+    "& .ag-overlay-loading-wrapper": {
+      background: theme.aggrid.overlay.background
+    },
+    "& .ag-overlay-no-rows-wrapper": {
+      background: "none"
+    }
+  })
+};
+export {
+  CUSTOM_AGGRID_THEME,
+  styles
+};

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

@@ -1,4 +1,3 @@
-import { ElementAttributes } from '../../utils/types.ts';
 import { UUID } from 'crypto';
 import { TreeViewFinderProps } from '../TreeViewFinder/TreeViewFinder';
 import { FunctionComponent } from 'react';
@@ -8,9 +7,6 @@ interface DirectoryItemSelectorProps extends TreeViewFinderProps {
     types: string[];
     equipmentTypes?: string[];
     itemFilter?: any;
-    fetchDirectoryContent?: (directoryUuid: UUID, elementTypes: string[]) => Promise<ElementAttributes[]>;
-    fetchRootFolders?: (types: string[]) => Promise<ElementAttributes[]>;
-    fetchElementsInfos?: (ids: UUID[], elementTypes: string[], equipmentTypes: string[]) => Promise<ElementAttributes[]>;
     classes?: any;
     contentText?: string;
     defaultExpanded?: string[];

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

@@ -4,6 +4,8 @@ import { getFileIcon } from "../../utils/ElementIcon.js";
 import { ElementType } from "../../utils/ElementType.js";
 import TreeViewFinder from "../TreeViewFinder/TreeViewFinder.js";
 import { useSnackMessage } from "../../hooks/useSnackMessage.js";
+import { fetchElementsInfos } from "../../services/explore.js";
+import { fetchRootFolders, fetchDirectoryContent } from "../../services/directory.js";
 const styles = {
   icon: (theme) => ({
     marginRight: theme.spacing(1),
@@ -16,9 +18,6 @@ const DirectoryItemSelector = ({
   types,
   equipmentTypes,
   itemFilter,
-  fetchDirectoryContent,
-  fetchRootFolders,
-  fetchElementsInfos,
   expanded,
   ...otherTreeViewFinderProps
 }) => {
@@ -77,7 +76,7 @@ const DirectoryItemSelector = ({
     [convertRoots]
   );
   const updateRootDirectories = useCallback(() => {
-    fetchRootFolders && fetchRootFolders(types).then((data2) => {
+    fetchRootFolders(types).then((data2) => {
       let [nrs, mdr] = updatedTree(
         rootsRef.current,
         nodeMap.current,
@@ -93,30 +92,26 @@ const DirectoryItemSelector = ({
         headerId: "DirectoryItemSelector"
       });
     });
-  }, [convertRoots, types, snackError, fetchRootFolders]);
+  }, [convertRoots, types, snackError]);
   const fetchDirectory = useCallback(
     (nodeId) => {
       const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
-      fetchDirectoryContent && fetchDirectoryContent(nodeId, typeList).then((children) => {
+      fetchDirectoryContent(nodeId, typeList).then((children) => {
         const childrenMatchedTypes = children.filter(
           (item) => contentFilter().has(item.type)
         );
         if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
-          fetchElementsInfos && fetchElementsInfos(
-            childrenMatchedTypes.map(
-              (e) => e.elementUuid
-            ),
+          fetchElementsInfos(
+            childrenMatchedTypes.map((e) => e.elementUuid),
             types,
             equipmentTypes
           ).then((childrenWithMetadata) => {
-            const children2 = itemFilter ? childrenWithMetadata.filter(
-              (val) => {
-                if (val.type === ElementType.DIRECTORY) {
-                  return true;
-                }
-                return itemFilter(val);
+            const children2 = itemFilter ? childrenWithMetadata.filter((val) => {
+              if (val.type === ElementType.DIRECTORY) {
+                return true;
               }
-            ) : childrenWithMetadata;
+              return itemFilter(val);
+            }) : childrenWithMetadata;
             addToDirectory(nodeId, children2);
           });
         } else {
@@ -128,15 +123,7 @@ const DirectoryItemSelector = ({
         );
       });
     },
-    [
-      types,
-      equipmentTypes,
-      itemFilter,
-      contentFilter,
-      addToDirectory,
-      fetchDirectoryContent,
-      fetchElementsInfos
-    ]
+    [types, equipmentTypes, itemFilter, contentFilter, addToDirectory]
   );
   useEffect(() => {
     if (open) {

package/dist/components/ElementSearchDialog/equipment-item.d.ts

@@ -1,16 +1,25 @@
-export function EquipmentItem({ inputValue, suffixRenderer, element, showsJustText, ...props }: {
-    [x: string]: any;
-    inputValue: any;
-    suffixRenderer?: {
-        ({ props, element }: {
-            props: any;
-            element: any;
-        }): import("react/jsx-runtime").JSX.Element;
-        propTypes: {
-            element: import('prop-types').Requireable<object>;
-            props: import('prop-types').Requireable<object>;
-        };
-    } | undefined;
-    element: any;
-    showsJustText?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { SxProps } from '@mui/material';
+import { EquipmentInfos } from '../../utils/EquipmentType';
+import { TagRenderer } from './index';
+
+export interface EquipmentItemProps {
+    inputValue: string;
+    suffixRenderer: typeof TagRenderer;
+    element: EquipmentInfos;
+    showsJustText: boolean;
+    classes?: {
+        result?: string;
+        equipmentOption?: string;
+        equipmentTag?: string;
+        equipmentTypeTag?: string;
+        equipmentVlTag?: string;
+    };
+    styles?: {
+        result?: SxProps;
+        equipmentOption?: SxProps;
+        equipmentTag?: SxProps;
+        equipmentTypeTag?: SxProps;
+        equipmentVlTag?: SxProps;
+    };
+}
+export declare const EquipmentItem: ({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ElementSearchDialog/equipment-item.js

@@ -7,8 +7,8 @@ import { TagRenderer } from "./tag-renderer.js";
 import match from "autosuggest-highlight/match";
 import parse from "autosuggest-highlight/parse";
 import clsx from "clsx";
-import { OverflowableText } from "../OverflowableText/overflowable-text.js";
 import { EQUIPMENT_TYPE } from "../../utils/EquipmentType.js";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
 import { mergeSx } from "../../utils/styles.js";
 const EquipmentItem = ({
   inputValue,
@@ -17,7 +17,7 @@ const EquipmentItem = ({
   showsJustText = false,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   let matches = match(element.label, inputValue, {
     insideWords: true,
     findAllOccurrences: true
@@ -44,7 +44,7 @@ const EquipmentItem = ({
             children: /* @__PURE__ */ jsx(
               FormattedMessage,
               {
-                id: EQUIPMENT_TYPE[element.type].tagLabel
+                id: (_g = EQUIPMENT_TYPE[element.type]) == null ? void 0 : _g.tagLabel
               }
             )
           }
@@ -53,8 +53,8 @@ const EquipmentItem = ({
           OverflowableText,
           {
             text: parts.map((e) => e.text).join(),
-            className: (_g = props.classes) == null ? void 0 : _g.result,
-            sx: (_h = props.styles) == null ? void 0 : _h.result,
+            className: (_h = props.classes) == null ? void 0 : _h.result,
+            sx: (_i = props.styles) == null ? void 0 : _i.result,
             children: parts.map((part, index) => /* @__PURE__ */ jsx(
               "span",
               {