@gridsuite/commons-ui 0.59.2 → 0.60.1

package/dist/chunks/{criteria-based-filter-edition-dialog.CszM47bS.js → criteria-based-filter-edition-dialog.g-QT74FD.js}

@@ -56,8 +56,8 @@ 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";
-import { COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, OPERATOR_OPTIONS, fields } from "../components/filter/expert/expert-filter-constants.js";
-import { FieldType, OperatorType, DataType } from "../components/filter/expert/expert-filter.type.js";
+import { OPERATOR_OPTIONS, COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, fields } from "../components/filter/expert/expert-filter-constants.js";
+import { FieldType, DataType } from "../components/filter/expert/expert-filter.type.js";
 import { QueryBuilderDnD } from "@react-querybuilder/dnd";
 import * as ReactDnD from "react-dnd";
 import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
@@ -81,12 +81,14 @@ import "../components/inputs/react-hook-form/select-inputs/mui-select-input.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
+import { RECORD_SEP, UNIT_SEP } from "papaparse";
 import "@mui/icons-material/Check";
 import "@mui/material/CircularProgress";
 import "@mui/material/TextField";
 import { FILTER_EQUIPMENTS } from "../components/filter/utils/filter-form-utils.js";
 import { ElementType } from "../utils/ElementType.js";
 import PropertyValueEditor from "../components/inputs/react-query-builder/property-value-editor.js";
+import GroupValueEditor from "../components/inputs/react-query-builder/composite-rule-editor/group-value-editor.js";
 import ValueSelector from "../components/inputs/react-query-builder/value-selector.js";
 import ErrorInput from "../components/inputs/react-hook-form/error-management/error-input.js";
 import FieldErrorAlert from "../components/inputs/react-hook-form/error-management/field-error-alert.js";
@@ -248,6 +250,16 @@ const CsvUploader = ({
                 setImportedData([...results.data]);
                 setCreateError("");
               },
+              config: {
+                // We use | for multi values in one cell, then we remove it from the default value for this config, to avoid delimiter autodetection
+                delimitersToGuess: [
+                  ",",
+                  "	",
+                  ";",
+                  RECORD_SEP,
+                  UNIT_SEP
+                ]
+              },
               children: ({ getRootProps, acceptedFile }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { item: true, children: [
                 /* @__PURE__ */ jsx(
                   Button,
@@ -469,6 +481,7 @@ const CustomAgGridTable = ({
   const [gridApi, setGridApi] = useState(null);
   const [selectedRows, setSelectedRows] = useState([]);
   const [newRowAdded, setNewRowAdded] = useState(false);
+  const [isSortApplied, setIsSortApplied] = useState(false);
   const { control, getValues, watch } = useFormContext();
   const useFieldArrayOutput = useFieldArray({
     control,
@@ -516,11 +529,14 @@ const CustomAgGridTable = ({
     append(makeDefaultRowData2());
     setNewRowAdded(true);
   };
-  const getIndex = (val) => {
-    return getValues(name).findIndex(
-      (row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
-    );
-  };
+  const getIndex = useCallback(
+    (val) => {
+      return getValues(name).findIndex(
+        (row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
+      );
+    },
+    [getValues, name]
+  );
   useEffect(() => {
     if (gridApi) {
       gridApi.api.sizeColumnsToFit();
@@ -545,6 +561,20 @@ const CustomAgGridTable = ({
       gridApi.api.ensureIndexVisible(lastIndex, "bottom");
     }
   };
+  const onCellEditingStopped = useCallback(
+    (event) => {
+      const rowIndex = getIndex(event.data);
+      if (rowIndex === -1) {
+        return;
+      }
+      update(rowIndex, event.data);
+    },
+    [getIndex, update]
+  );
+  const onSortChanged = useCallback((event) => {
+    const isAnycolumnhasSort = event.api.getColumnState().some((col) => col.sort);
+    setIsSortApplied(isAnycolumnhasSort);
+  }, []);
   return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
     /* @__PURE__ */ jsx(
       Grid$1,
@@ -572,9 +602,8 @@ const CustomAgGridTable = ({
               setSelectedRows(gridApi.api.getSelectedRows());
             },
             onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
-            onCellEditingStopped: (event) => {
-              update(event.rowIndex, event.data);
-            },
+            onCellEditingStopped,
+            onSortChanged,
             getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
             pagination,
             paginationPageSize,
@@ -594,8 +623,8 @@ const CustomAgGridTable = ({
         handleDeleteRows,
         handleMoveRowDown,
         handleMoveRowUp,
-        disableUp: noRowSelected || isFirstSelected,
-        disableDown: noRowSelected || isLastSelected,
+        disableUp: noRowSelected || isFirstSelected || isSortApplied,
+        disableDown: noRowSelected || isLastSelected || isSortApplied,
         disableDelete: noRowSelected,
         csvProps,
         useFieldArrayOutput
@@ -890,7 +919,7 @@ const ValueEditor = (props) => {
     },
     [props.field, getValues]
   );
-  if (props.operator === OperatorType.EXISTS || props.operator === OperatorType.NOT_EXISTS) {
+  if (props.operator === OPERATOR_OPTIONS.EXISTS.name || props.operator === OPERATOR_OPTIONS.NOT_EXISTS.name) {
     return null;
   }
   if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(
@@ -898,10 +927,10 @@ const ValueEditor = (props) => {
   )) {
     return /* @__PURE__ */ jsx(CountryValueEditor, { ...props });
   }
-  if (props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
+  if (props.field === FieldType.REGULATION_TYPE || props.field === FieldType.SVAR_REGULATION_MODE || props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
     return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
   }
-  if (props.operator === OperatorType.IS_PART_OF || props.operator === OperatorType.IS_NOT_PART_OF) {
+  if (props.operator === OPERATOR_OPTIONS.IS_PART_OF.name || props.operator === OPERATOR_OPTIONS.IS_NOT_PART_OF.name) {
     let equipmentTypes;
     if (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
       equipmentTypes = [VoltageLevel.type];
@@ -923,7 +952,7 @@ const ValueEditor = (props) => {
         defaultValue: props.value
       }
     );
-  } 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) {
+  } else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.REGULATING_TERMINAL_VL_ID || props.field === FieldType.REGULATING_TERMINAL_CONNECTABLE_ID || 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 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_1 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_2) {
     let equipmentType;
@@ -941,6 +970,8 @@ const ValueEditor = (props) => {
         valueEditorProps: props
       }
     );
+  } else if (props.fieldData.dataType === DataType.COMBINATOR) {
+    return /* @__PURE__ */ jsx(GroupValueEditor, { ...props });
   }
   return /* @__PURE__ */ jsx(Box, { sx: props.inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(
     MaterialValueEditor,

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

@@ -10,7 +10,9 @@ const styles = {
       "--ag-row-hover-color": theme.aggrid.highlightColor
     },
     "& .ag-checkbox-input": {
-      cursor: "pointer"
+      cursor: "pointer",
+      //Enlarge checkbox area to be more permissive when selecting it
+      scale: "2.5"
     },
     //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

package/dist/components/ElementSearchDialog/element-search-dialog.d.ts

@@ -1,19 +1,8 @@
-import { EquipmentInfos } from '../../index';
-import { ReactNode } from 'react';
+import { ElementSearchInputProps } from './element-search-input';
 
-interface ElementSearchDialogProps {
+export interface ElementSearchDialogProps<T> extends ElementSearchInputProps<T> {
+    onClose?: () => void;
     open: boolean;
-    onClose: () => void;
-    searchingLabel?: string;
-    searchTerm: string;
-    onSearchTermChange: (searchTerm: string) => void;
-    onSelectionChange: (selection: EquipmentInfos) => void;
-    elementsFound: EquipmentInfos[];
-    renderElement: (props: any) => ReactNode;
-    searchTermDisabled?: boolean;
-    searchTermDisableReason?: string;
-    isLoading: boolean;
-    loadingText?: string;
 }
-declare const ElementSearchDialog: (props: ElementSearchDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementSearchDialog: <T>(props: ElementSearchDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ElementSearchDialog;

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

@@ -1,30 +1,12 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { Dialog, DialogContent, Autocomplete, TextField } from "@mui/material";
-import { SearchOff, Search } from "@mui/icons-material";
-import { useIntl } from "react-intl";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Dialog, DialogContent } from "@mui/material";
+import { ElementSearchInput } from "./element-search-input.js";
 const ElementSearchDialog = (props) => {
-  const intl = useIntl();
-  const {
-    open,
-    onClose,
-    searchingLabel,
-    searchTerm,
-    onSearchTermChange,
-    onSelectionChange,
-    elementsFound,
-    renderElement,
-    searchTermDisabled,
-    searchTermDisableReason,
-    isLoading,
-    loadingText
-  } = props;
-  const displayedValue = useMemo(() => {
-    return searchTermDisabled || searchTermDisableReason ? searchTermDisableReason : searchTerm;
-  }, [searchTerm, searchTermDisabled, searchTermDisableReason]);
+  const { open, onClose, onSearchTermChange, ...rest } = props;
   const handleClose = useCallback(() => {
     onSearchTermChange("");
-    onClose();
+    onClose == null ? void 0 : onClose();
   }, [onSearchTermChange, onClose]);
   return /* @__PURE__ */ jsx(
     Dialog,
@@ -35,68 +17,16 @@ const ElementSearchDialog = (props) => {
       "aria-labelledby": "dialog-title-search",
       fullWidth: true,
       children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
-        Autocomplete,
+        ElementSearchInput,
         {
-          open: isLoading || (elementsFound == null ? void 0 : elementsFound.length) > 0,
-          id: "element-search",
-          forcePopupIcon: false,
-          fullWidth: true,
-          freeSolo: true,
-          onInputChange: (_event, value, reason) => {
-            if (!searchTermDisabled && reason !== "reset") {
-              onSearchTermChange(value);
-            }
-          },
-          onChange: (_event, newValue, reason) => {
-            if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
-              onSelectionChange(newValue);
-            }
-          },
-          getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-          isOptionEqualToValue: (option, value) => {
-            if (typeof option === "string" || typeof value === "string") {
-              return option === value;
-            } else {
-              return option.id === value.id;
-            }
-          },
-          options: isLoading ? [] : elementsFound,
-          loading: isLoading,
-          loadingText,
-          autoHighlight: true,
-          noOptionsText: intl.formatMessage({
-            id: "element_search/noResult"
-          }),
-          renderOption: (optionProps, element, { inputValue }) => renderElement({
-            ...optionProps,
-            element,
-            inputValue,
-            onClose: handleClose
-          }),
-          renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
-            {
-              autoFocus: true,
-              ...params,
-              label: searchingLabel ?? intl.formatMessage({
-                id: "element_search/label"
-              }),
-              InputProps: {
-                ...params.InputProps,
-                startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  searchTermDisabled ? /* @__PURE__ */ jsx(SearchOff, { color: "disabled" }) : /* @__PURE__ */ jsx(Search, { color: "disabled" }),
-                  params.InputProps.startAdornment
-                ] })
-              },
-              value: displayedValue ?? ""
-            }
-          ),
-          disabled: searchTermDisabled
+          onSearchTermChange,
+          ...rest
         }
       ) })
     }
   );
 };
 export {
+  ElementSearchDialog,
   ElementSearchDialog as default
 };

package/dist/components/ElementSearchDialog/element-search-input.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
+
+export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
+    element: T;
+    inputValue: string;
+};
+export interface ElementSearchInputProps<T> extends Pick<AutocompleteProps<T, false, false, true>, 'sx' | 'size' | 'loadingText' | 'loading'> {
+    searchTerm: string;
+    onSearchTermChange: (searchTerm: string) => void;
+    onSelectionChange: (selection: T) => void;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option1: T, option2: T) => boolean;
+    elementsFound: T[];
+    renderElement: (props: RenderElementProps<T>) => ReactNode;
+    renderInput: (searchTerm: string, props: AutocompleteRenderInputParams) => ReactNode;
+    searchTermDisabled?: boolean;
+    searchTermDisableReason?: string;
+    showResults?: boolean;
+}
+export declare const ElementSearchInput: <T>(props: ElementSearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ElementSearchDialog/element-search-input.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@mui/material";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+const ElementSearchInput = (props) => {
+  const {
+    elementsFound,
+    loading,
+    onSearchTermChange,
+    onSelectionChange,
+    renderElement,
+    renderInput,
+    getOptionLabel,
+    isOptionEqualToValue,
+    showResults,
+    searchTerm,
+    loadingText,
+    searchTermDisableReason,
+    searchTermDisabled,
+    size,
+    sx
+  } = props;
+  const intl = useIntl();
+  const displayedValue = useMemo(() => {
+    if (searchTermDisabled || searchTermDisableReason) {
+      return searchTermDisableReason ?? intl.formatMessage({
+        id: "element_search/searchDisabled"
+      });
+    } else {
+      return searchTerm ?? "";
+    }
+  }, [searchTerm, searchTermDisabled, searchTermDisableReason, intl]);
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      sx,
+      open: showResults,
+      freeSolo: true,
+      size,
+      id: "element-search",
+      forcePopupIcon: false,
+      fullWidth: true,
+      onInputChange: (_event, value, reason) => {
+        if (!searchTermDisabled && reason !== "reset") {
+          onSearchTermChange(value);
+        }
+      },
+      onChange: (_event, newValue, reason) => {
+        if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
+          onSelectionChange(newValue);
+        }
+      },
+      options: loading ? [] : elementsFound,
+      loading,
+      loadingText,
+      autoHighlight: true,
+      noOptionsText: intl.formatMessage({
+        id: "element_search/noResult"
+      }),
+      renderOption: (optionProps, element, { inputValue }) => renderElement({
+        ...optionProps,
+        element,
+        inputValue
+      }),
+      renderInput: (params) => renderInput(displayedValue, params),
+      getOptionLabel: (option) => {
+        if (typeof option === "string") {
+          return option;
+        }
+        return getOptionLabel(option);
+      },
+      isOptionEqualToValue: (option, value) => {
+        if (typeof option !== "string" && typeof value !== "string") {
+          return isOptionEqualToValue(option, value);
+        } else {
+          return option === value;
+        }
+      },
+      disabled: searchTermDisabled
+    }
+  );
+};
+export {
+  ElementSearchInput
+};

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

@@ -1,12 +1,12 @@
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { EquipmentInfos } from '../../utils/EquipmentType';
 import { TagRenderer } from './index';
 
 export interface EquipmentItemProps {
     inputValue: string;
-    suffixRenderer: typeof TagRenderer;
+    suffixRenderer?: typeof TagRenderer;
     element: EquipmentInfos;
-    showsJustText: boolean;
+    showsJustText?: boolean;
     classes?: {
         result?: string;
         equipmentOption?: string;
@@ -15,11 +15,11 @@ export interface EquipmentItemProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        result?: SxProps;
-        equipmentOption?: SxProps;
-        equipmentTag?: SxProps;
-        equipmentTypeTag?: SxProps;
-        equipmentVlTag?: SxProps;
+        result?: SxProps<Theme>;
+        equipmentOption?: SxProps<Theme>;
+        equipmentTag?: SxProps<Theme>;
+        equipmentTypeTag?: SxProps<Theme>;
+        equipmentVlTag?: SxProps<Theme>;
     };
 }
 export declare const EquipmentItem: ({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Box } from "@mui/material";
-import "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
 import { TagRenderer } from "./tag-renderer.js";
+import "notistack";
 import match from "autosuggest-highlight/match";
 import parse from "autosuggest-highlight/parse";
 import clsx from "clsx";

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

@@ -6,3 +6,5 @@
  */
 export { default } from './element-search-dialog';
 export { TagRenderer } from './tag-renderer';
+export { ElementSearchInput } from './element-search-input';
+export { useElementSearch } from './use-element-search';

package/dist/components/ElementSearchDialog/index.js

@@ -1,6 +1,10 @@
-import { default as default2 } from "./element-search-dialog.js";
+import { ElementSearchDialog } from "./element-search-dialog.js";
 import { TagRenderer } from "./tag-renderer.js";
+import { ElementSearchInput } from "./element-search-input.js";
+import { useElementSearch } from "./use-element-search.js";
 export {
+  ElementSearchInput,
   TagRenderer,
-  default2 as default
+  ElementSearchDialog as default,
+  useElementSearch
 };

package/dist/components/ElementSearchDialog/tag-renderer.d.ts

@@ -1,4 +1,4 @@
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { EquipmentType } from '../../utils/EquipmentType';
 
 interface TagRendererProps {
@@ -8,8 +8,8 @@ interface TagRendererProps {
             equipmentVlTag?: string;
         };
         styles?: {
-            equipmentTag?: SxProps;
-            equipmentVlTag?: SxProps;
+            equipmentTag?: SxProps<Theme>;
+            equipmentVlTag?: SxProps<Theme>;
         };
     };
     element: {

package/dist/components/ElementSearchDialog/use-element-search.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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/.
+ */
+interface UseElementSearch<T> {
+    fetchElements: (newSearchTerm: string) => Promise<T[]>;
+}
+export declare const useElementSearch: <T>(props: UseElementSearch<T>) => {
+    searchTerm: string;
+    updateSearchTerm: (newSearchTerm: string) => void;
+    elementsFound: T[];
+    isLoading: boolean;
+};
+export {};

package/dist/components/ElementSearchDialog/use-element-search.js

@@ -0,0 +1,57 @@
+import { useState, useRef, useCallback } from "react";
+import { useDebounce } from "../../hooks/useDebounce.js";
+import { useSnackMessage } from "../../hooks/useSnackMessage.js";
+const SEARCH_FETCH_TIMEOUT_MILLIS = 1e3;
+const useElementSearch = (props) => {
+  const { fetchElements } = props;
+  const { snackError } = useSnackMessage();
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [elementsFound, setElementsFound] = useState([]);
+  const lastSearchTermRef = useRef("");
+  const searchMatchingElements = useCallback(
+    (newSearchTerm) => {
+      if (newSearchTerm.length === 0) {
+        return;
+      }
+      lastSearchTermRef.current = newSearchTerm;
+      fetchElements(newSearchTerm).then((infos) => {
+        if (newSearchTerm === lastSearchTermRef.current) {
+          setElementsFound(infos);
+          setIsLoading(false);
+        }
+      }).catch((error) => {
+        if (newSearchTerm === lastSearchTermRef.current) {
+          setElementsFound([]);
+          setIsLoading(false);
+          snackError({
+            messageTxt: error.message,
+            headerId: "equipmentsSearchingError"
+          });
+        }
+      });
+    },
+    [snackError, fetchElements]
+  );
+  const debouncedSearchMatchingElements = useDebounce(
+    searchMatchingElements,
+    SEARCH_FETCH_TIMEOUT_MILLIS
+  );
+  const updateSearchTerm = useCallback(
+    (newSearchTerm) => {
+      setSearchTerm(newSearchTerm);
+      if (newSearchTerm.length === 0) {
+        setElementsFound([]);
+        setIsLoading(false);
+      } else {
+        setIsLoading(true);
+      }
+      debouncedSearchMatchingElements(newSearchTerm);
+    },
+    [debouncedSearchMatchingElements]
+  );
+  return { searchTerm, updateSearchTerm, elementsFound, isLoading };
+};
+export {
+  useElementSearch
+};

package/dist/components/MuiVirtualizedTable/MuiVirtualizedTable.d.ts

@@ -100,7 +100,7 @@ declare class MuiVirtualizedTable extends PureComponent<MuiVirtualizedTableProps
     }[]>;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "className" | "style" | "label" | "id" | "aria-label" | "name" | "rows" | "sort" | "numeric" | "tooltipSx" | "defersFilterChanges" | "onRowClick" | "onCellClick" | "exportCSVDataKeys" | "sortable" | "indexer" | "clickable" | "fractionDigits" | "unit" | "extra" | "nostat" | "cellDataGetter" | "cellRenderer" | "columnData" | "dataKey" | "defaultSortDirection" | "disableSort" | "headerClassName" | "headerRenderer" | "headerStyle"> & {
+declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "style" | "className" | "label" | "id" | "aria-label" | "name" | "rows" | "sort" | "numeric" | "tooltipSx" | "defersFilterChanges" | "onRowClick" | "onCellClick" | "exportCSVDataKeys" | "sortable" | "indexer" | "clickable" | "fractionDigits" | "unit" | "extra" | "nostat" | "cellDataGetter" | "cellRenderer" | "columnData" | "dataKey" | "defaultSortDirection" | "disableSort" | "headerClassName" | "headerRenderer" | "headerStyle"> & {
     classes?: Record<string, string> | undefined;
     headerHeight?: number | undefined;
     rowHeight?: number | undefined;

package/dist/components/OverflowableText/overflowable-text.d.ts

@@ -1,12 +1,12 @@
 import { Style } from 'node:util';
-import { BoxProps, SxProps } from '@mui/material';
+import { BoxProps, SxProps, Theme } from '@mui/material';
 import { ReactElement } from 'react';
 
 export interface OverflowableTextProps extends BoxProps {
     text?: ReactElement | string;
     maxLineCount?: number;
     tooltipStyle?: Style;
-    tooltipSx?: SxProps;
+    tooltipSx?: SxProps<Theme>;
 }
-export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export default OverflowableText;

package/dist/components/OverflowableText/overflowable-text.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
-import { Tooltip, Box } from "@mui/material";
-import { styled } from "@mui/system";
+import { styled, Tooltip, Box } from "@mui/material";
 const overflowStyle = {
   overflow: {
     display: "inline-block",

package/dist/components/dialogs/modify-element-selection.js

@@ -20,7 +20,7 @@ const ModifyElementSelection = (props) => {
     if (directory) {
       fetchDirectoryElementPath(directory).then((res) => {
         setActiveDirectoryName(
-          res.map((element) => element.elementName.trim()).reverse().join("/")
+          res.map((element) => element.elementName.trim()).join("/")
         );
       });
     }

package/dist/components/filter/criteria-based/criteria-based-filter-edition-dialog.js

@@ -8,7 +8,7 @@ import "react-hook-form";
 import "@hookform/resolvers/yup";
 import "./criteria-based-filter-form.js";
 import "../../../utils/yup-config.js";
-import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.CszM47bS.js";
+import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.g-QT74FD.js";
 import "../constants/filter-constants.js";
 import "../../../utils/FetchStatus.js";
 import "../../../services/explore.js";