@gridsuite/commons-ui 0.256.0 → 0.258.0

package/dist/features/global-filter/ui/global-filter-dropdown-panel.js

@@ -0,0 +1,251 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ClickAwayListener, Paper, Grid2, Typography, Button, List, ListItemButton, ListItemText, Box } from "@mui/material";
+import { useIntl, FormattedMessage } from "react-intl";
+import { FileUpload } from "@mui/icons-material";
+import { useState, useMemo, useCallback } from "react";
+import { RECENT_FILTER } from "../utils/global-filter-utils.js";
+import SelectedGlobalFilters from "./selected-global-filters.js";
+import { LabelWithInfoTooltip } from "./label-with-info-tooltip.js";
+import { useGlobalFilterContext } from "../context/global-filter-context.js";
+import { resultsGlobalFilterStyles, GLOBAL_FILTERS_CELL_HEIGHT, IMPORT_FILTER_HEIGHT } from "../global-filter.style.js";
+import { GlobalFilterType, isCriteriaFilterType } from "../types/global-filter.type.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import { ElementType } from "../../../utils/types/elementType.js";
+import { EquipmentType } from "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
+import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+import { DirectoryItemSelector } from "../../../components/ui/directoryItemSelector/DirectoryItemSelector.js";
+import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "react-papaparse";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "react-dom";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../../../components/composite/filter/FilterCreationDialog.js";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterEditionDialog.js";
+import "../../../components/composite/filter/expert/expertFilterConstants.js";
+import "react-querybuilder";
+import "uuid";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
+import "../../../components/composite/filter/utils/filterFormUtils.js";
+import "@react-querybuilder/material";
+import "../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
+import "../../../components/composite/agGridTable/BottomTableButtons.js";
+import "../../../components/composite/agGridTable/CustomAgGridTable.js";
+import "ag-grid-community";
+import "../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "mathjs";
+import "../../../components/composite/report/report-viewer/log-table/log-table.js";
+import "react-window";
+import "../../../components/composite/report/report-treeview/treeview-item.js";
+import "../../../components/composite/report/report-viewer/context/report-viewer-context.js";
+const XS_COLUMN1 = 3;
+const XS_COLUMN2 = 4;
+const XS_COLUMN3 = 5;
+function GlobalFilterDropdownPanel({
+  children,
+  autocompleteRef,
+  setOpenedDropdown,
+  filterGroupSelected,
+  setFilterGroupSelected,
+  substationPropertiesGlobalFilters,
+  filterCategories,
+  genericFiltersStrictMode,
+  filterableEquipmentTypes,
+  translateCountryCode
+}) {
+  const intl = useIntl();
+  const [directoryItemSelectorOpen, setDirectoryItemSelectorOpen] = useState(false);
+  const { selectedGlobalFilters, clearSelectedGlobalFilters, addFiltersToGlobalFiltersOptions } = useGlobalFilterContext();
+  const filteringOnlySubstations = useMemo(() => {
+    return filterableEquipmentTypes?.length === 1 && filterableEquipmentTypes[0] === EquipmentType.SUBSTATION;
+  }, [filterableEquipmentTypes]);
+  const standardCategories = useMemo(() => {
+    const filteredCategories = filterCategories.filter((category) => category !== GlobalFilterType.SUBSTATION_PROPERTY).filter((category) => {
+      const onlyVoltageLevels = filterableEquipmentTypes?.every(
+        (equipment) => equipment === EquipmentType.VOLTAGE_LEVEL || equipment === EquipmentType.BUS || equipment === EquipmentType.BUSBAR_SECTION
+      );
+      return !(category === GlobalFilterType.GENERIC_FILTER && onlyVoltageLevels);
+    }).filter((category) => {
+      return !(category === GlobalFilterType.SUBSTATION_OR_VL && filteringOnlySubstations);
+    });
+    return [RECENT_FILTER, ...filteredCategories];
+  }, [filterCategories, filterableEquipmentTypes, filteringOnlySubstations]);
+  const categories = useMemo(() => {
+    const sortedCategories = [
+      ...standardCategories,
+      ...substationPropertiesGlobalFilters ? Array.from(substationPropertiesGlobalFilters.keys()) : []
+    ];
+    const substationCategory = sortedCategories.splice(
+      sortedCategories.indexOf(GlobalFilterType.SUBSTATION_OR_VL),
+      1
+    );
+    if (substationCategory.length > 0) {
+      sortedCategories.push(substationCategory[0]);
+    }
+    const genericFilterCategory = sortedCategories.splice(
+      sortedCategories.indexOf(GlobalFilterType.GENERIC_FILTER),
+      1
+    );
+    if (genericFilterCategory.length > 0) {
+      sortedCategories.push(genericFilterCategory[0]);
+    }
+    return sortedCategories;
+  }, [standardCategories, substationPropertiesGlobalFilters]);
+  const filtersMsg = useMemo(
+    () => intl.formatMessage(
+      {
+        id: selectedGlobalFilters.length < 2 ? "results.globalFilter.activeFilter" : "results.globalFilter.activeFilters"
+      },
+      { filtersCount: selectedGlobalFilters.length }
+    ),
+    [intl, selectedGlobalFilters.length]
+  );
+  const addSelectedFiltersToGlobalFiltersOptions = useCallback(
+    async (values) => {
+      if (!values) {
+        return;
+      }
+      setOpenedDropdown(true);
+      await addFiltersToGlobalFiltersOptions(values.map((value) => value.id));
+      setDirectoryItemSelectorOpen(false);
+    },
+    [addFiltersToGlobalFiltersOptions, setDirectoryItemSelectorOpen, setOpenedDropdown]
+  );
+  const allowedEquipmentTypes = useMemo(() => {
+    if (filterGroupSelected === GlobalFilterType.SUBSTATION_OR_VL) {
+      return [EquipmentType.SUBSTATION, EquipmentType.VOLTAGE_LEVEL];
+    }
+    return genericFiltersStrictMode ? filterableEquipmentTypes : Object.values(EquipmentType).filter(
+      (equipmentType) => equipmentType !== EquipmentType.SUBSTATION && equipmentType !== EquipmentType.VOLTAGE_LEVEL
+    );
+  }, [filterableEquipmentTypes, genericFiltersStrictMode, filterGroupSelected]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ClickAwayListener,
+      {
+        onClickAway: (event) => {
+          const target = event.target;
+          if (autocompleteRef?.current?.contains(target)) {
+            return;
+          }
+          if (!directoryItemSelectorOpen) {
+            setOpenedDropdown(false);
+          }
+        },
+        children: /* @__PURE__ */ jsx(Paper, { sx: resultsGlobalFilterStyles.dropdown, children: /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cellHeader, children: /* @__PURE__ */ jsx(
+            LabelWithInfoTooltip,
+            {
+              text: "results.globalFilter.categories",
+              tooltipMessage: "results.globalFilter.categoriesHelp"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cellHeader }),
+          /* @__PURE__ */ jsxs(Grid2, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cellHeader, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", children: filtersMsg }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                onClick: clearSelectedGlobalFilters,
+                sx: resultsGlobalFilterStyles.miniButton,
+                "data-testid": "GlobalFilterClearAllButton",
+                children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "results.globalFilter.clearAll" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(List, { sx: resultsGlobalFilterStyles.list, children: categories.map((category) => {
+            return /* @__PURE__ */ jsx(
+              ListItemButton,
+              {
+                onClick: () => {
+                  setFilterGroupSelected(category);
+                },
+                selected: category === filterGroupSelected,
+                "data-testid": `GlobalFilterCategory${category}`,
+                children: /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    primary: category === "genericFilter" ? /* @__PURE__ */ jsx(
+                      LabelWithInfoTooltip,
+                      {
+                        text: filteringOnlySubstations ? "results.globalFilter.substationFilter" : "results.globalFilter.genericFilter",
+                        tooltipMessage: "results.globalFilter.elementsHelp"
+                      }
+                    ) : /* @__PURE__ */ jsx(FormattedMessage, { id: `results.globalFilter.${category}` })
+                  }
+                )
+              },
+              category
+            );
+          }) }) }),
+          /* @__PURE__ */ jsxs(Grid2, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cell, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: mergeSx(resultsGlobalFilterStyles.list, {
+                  height: isCriteriaFilterType(filterGroupSelected) ? `${GLOBAL_FILTERS_CELL_HEIGHT - IMPORT_FILTER_HEIGHT}px` : `${GLOBAL_FILTERS_CELL_HEIGHT}px`
+                }),
+                children
+              }
+            ),
+            isCriteriaFilterType(filterGroupSelected) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                startIcon: /* @__PURE__ */ jsx(FileUpload, {}),
+                fullWidth: true,
+                sx: resultsGlobalFilterStyles.importFilterButton,
+                onMouseDown: () => {
+                  setDirectoryItemSelectorOpen(true);
+                },
+                children: /* @__PURE__ */ jsx(FormattedMessage, { id: "results.globalFilter.loadFilter" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(SelectedGlobalFilters, { translateCountryCode }) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DirectoryItemSelector,
+      {
+        open: directoryItemSelectorOpen,
+        onClose: addSelectedFiltersToGlobalFiltersOptions,
+        types: [ElementType.FILTER],
+        equipmentTypes: allowedEquipmentTypes,
+        title: intl.formatMessage({ id: "Filters" }),
+        multiSelect: true
+      }
+    )
+  ] });
+}
+export {
+  GlobalFilterDropdownPanel as default
+};

package/dist/features/global-filter/ui/global-filter-panel.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type GlobalFilterProps = {
+    substationPropertiesGlobalFilters?: Map<string, string[]>;
+    filterCategories: string[];
+    genericFiltersStrictMode: boolean;
+    filterableEquipmentTypes: string[];
+    translateCountryCode: (countryCode: string) => string;
+};
+export declare function GlobalFilterPanel({ substationPropertiesGlobalFilters, filterCategories, genericFiltersStrictMode, filterableEquipmentTypes, translateCountryCode, }: Readonly<GlobalFilterProps>): React.JSX.Element;

package/dist/features/global-filter/ui/global-filter-panel.js

@@ -0,0 +1,391 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback, createElement } from "react";
+import { Chip, Autocomplete, Box, TextField, InputAdornment, Tooltip, Typography, ListItemButton, Checkbox, IconButton } from "@mui/material";
+import { FilterAlt, WarningAmberRounded, Delete } from "@mui/icons-material";
+import { useIntl } from "react-intl";
+import { getResultsGlobalFiltersChipStyle, resultsGlobalFilterStyles } from "../global-filter.style.js";
+import GlobalFilterDropdownPanel from "./global-filter-dropdown-panel.js";
+import { RECENT_FILTER, getOptionLabel } from "../utils/global-filter-utils.js";
+import { useGlobalFilterContext } from "../context/global-filter-context.js";
+import { GlobalFilterType } from "../types/global-filter.type.js";
+import { OverflowableChip } from "../../../components/ui/reactHookForm/OverflowableChip.js";
+import "../../../utils/conversionUtils.js";
+import { EquipmentType } from "../../../utils/types/equipmentType.js";
+import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+import { OverflowableText } from "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "react-papaparse";
+import "react-dom";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../../../components/composite/filter/FilterCreationDialog.js";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterEditionDialog.js";
+import "../../../components/composite/filter/expert/expertFilterConstants.js";
+import "react-querybuilder";
+import "uuid";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
+import "../../../components/composite/filter/utils/filterFormUtils.js";
+import "@react-querybuilder/material";
+import "../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
+import "../../../components/composite/agGridTable/BottomTableButtons.js";
+import "../../../components/composite/agGridTable/CustomAgGridTable.js";
+import "ag-grid-community";
+import "../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "mathjs";
+import "../../../components/composite/report/report-viewer/log-table/log-table.js";
+import "react-window";
+import "../../../components/composite/report/report-treeview/treeview-item.js";
+import "../../../components/composite/report/report-viewer/context/report-viewer-context.js";
+const TAG_LIMIT_NUMBER = 4;
+function RenderInput({
+  id,
+  size,
+  fullWidth,
+  inputProps,
+  disabled,
+  InputProps: { startAdornment, ...otherInputProps }
+}) {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      id,
+      size,
+      fullWidth,
+      inputProps,
+      disabled,
+      label: intl.formatMessage({
+        id: "results.globalFilter.fillerText"
+      }),
+      InputProps: {
+        ...otherInputProps,
+        startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(FilterAlt, {}) }),
+          startAdornment
+        ] })
+      }
+    }
+  );
+}
+function formatVoltageRange(option) {
+  if (option.minValue != null && option.maxValue != null) {
+    return `[${option.minValue} kV, ${option.maxValue} kV]`;
+  }
+  return "";
+}
+function RenderOption(props) {
+  const { children, option, state, translateCountryCode, ...otherProps } = props;
+  const intl = useIntl();
+  const { removeGlobalFilterOption } = useGlobalFilterContext();
+  const label = getOptionLabel(option, translateCountryCode, intl);
+  let content;
+  switch (option.filterType) {
+    case GlobalFilterType.VOLTAGE_LEVEL:
+      content = /* @__PURE__ */ jsx(Tooltip, { title: formatVoltageRange(option), placement: "right", arrow: true, children: /* @__PURE__ */ jsx(Typography, { children: label }) });
+      break;
+    case GlobalFilterType.SUBSTATION_OR_VL:
+    case GlobalFilterType.GENERIC_FILTER:
+      content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(OverflowableText, { text: label, width: "100%" }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: {
+              display: "none",
+              ".MuiListItemButton-root:hover &": {
+                display: "inline-flex"
+              }
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              removeGlobalFilterOption(option.id);
+            },
+            children: /* @__PURE__ */ jsx(Delete, { fontSize: "small" })
+          }
+        )
+      ] });
+      break;
+    default:
+      content = /* @__PURE__ */ jsx(OverflowableText, { text: label });
+  }
+  return /* @__PURE__ */ jsxs(ListItemButton, { selected: state.selected, component: "li", ...otherProps, children: [
+    /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: state.selected }),
+    content
+  ] });
+}
+function WarningTooltip({ warningEquipmentTypeMessage }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: warningEquipmentTypeMessage,
+      placement: "right",
+      arrow: true,
+      PopperProps: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, -15]
+            }
+          }
+        ]
+      },
+      children: /* @__PURE__ */ jsx(IconButton, { size: "small", sx: { cursor: "default" }, children: /* @__PURE__ */ jsx(WarningAmberRounded, { color: "warning", fontSize: "medium" }) })
+    }
+  );
+}
+function GlobalFilterPanel({
+  substationPropertiesGlobalFilters,
+  filterCategories,
+  genericFiltersStrictMode,
+  filterableEquipmentTypes,
+  translateCountryCode
+}) {
+  const {
+    globalFilterOptions,
+    selectedGlobalFilters,
+    recentGlobalFilters,
+    selectGlobalFilter,
+    unselectGlobalFilters,
+    clearSelectedGlobalFilters
+  } = useGlobalFilterContext();
+  const intl = useIntl();
+  const autocompleteRef = useRef(null);
+  const [openedDropdown, setOpenedDropdown] = useState(false);
+  const [filterGroupSelected, setFilterGroupSelected] = useState(GlobalFilterType.VOLTAGE_LEVEL);
+  const warningEquipmentTypeMessage = useMemo(() => {
+    if (!genericFiltersStrictMode) {
+      const inappropriateFilters = selectedGlobalFilters.filter(
+        (filter) => filter.equipmentType && !filterableEquipmentTypes.find((eqptType) => eqptType.toString() === filter.equipmentType)
+      ).map((filter) => filter.label);
+      if (inappropriateFilters.length > 0) {
+        if (inappropriateFilters.length > 1) {
+          return intl.formatMessage(
+            {
+              id: "results.globalFilter.nonApplicableExtra"
+            },
+            { filterName: inappropriateFilters[0], extraFiltersNum: inappropriateFilters.length - 1 }
+          );
+        }
+        return intl.formatMessage(
+          {
+            id: "results.globalFilter.nonApplicable"
+          },
+          { filterName: inappropriateFilters[0] }
+        );
+      }
+    }
+    return "";
+  }, [genericFiltersStrictMode, selectedGlobalFilters, filterableEquipmentTypes, intl]);
+  const filterOptions = useCallback(
+    (options2, state) => {
+      const filteredOptions = options2.filter((option) => {
+        const labelToMatch = option.filterType === GlobalFilterType.COUNTRY ? translateCountryCode(option.label) : option.label;
+        return labelToMatch.toLowerCase().includes(state.inputValue.toLowerCase());
+      }).filter((option) => {
+        if (filterGroupSelected === RECENT_FILTER) {
+          return recentGlobalFilters.some((r) => r.id === option.id);
+        }
+        if (option.filterSubtype) {
+          return option.filterSubtype === filterGroupSelected;
+        }
+        if (filterGroupSelected === GlobalFilterType.GENERIC_FILTER && filterableEquipmentTypes?.length === 1 && filterableEquipmentTypes[0] === EquipmentType.SUBSTATION && option.equipmentType === EquipmentType.SUBSTATION) {
+          return true;
+        }
+        return option.filterType === filterGroupSelected;
+      });
+      if (filterGroupSelected === RECENT_FILTER) {
+        filteredOptions.sort((a, b) => {
+          const indexA = recentGlobalFilters.findIndex((r) => r.id === a.id);
+          const indexB = recentGlobalFilters.findIndex((r) => r.id === b.id);
+          return indexA - indexB;
+        });
+      }
+      return filteredOptions;
+    },
+    [filterGroupSelected, translateCountryCode, filterableEquipmentTypes, recentGlobalFilters]
+  );
+  const options = useMemo(
+    () => globalFilterOptions.filter((filter) => !filter.deleted).filter(
+      (filter) => filterCategories.includes(filter.filterType) && (genericFiltersStrictMode && filter.filterType === GlobalFilterType.GENERIC_FILTER ? filterableEquipmentTypes.includes(filter.equipmentType) : true)
+    ).sort((a, b) => {
+      if (a.filterType === GlobalFilterType.COUNTRY && b.filterType === GlobalFilterType.COUNTRY) {
+        const bt = translateCountryCode(b.label);
+        const at = translateCountryCode(a.label);
+        return at.localeCompare(bt);
+      }
+      return 0;
+    }),
+    [
+      globalFilterOptions,
+      translateCountryCode,
+      filterCategories,
+      genericFiltersStrictMode,
+      filterableEquipmentTypes
+    ]
+  );
+  const inputFieldChip = useCallback(
+    (element, index, getTagsProps, filtersNumber) => {
+      const label = getOptionLabel(element, translateCountryCode, intl);
+      const key = `inputFieldChip_${element.label}`;
+      if (index < TAG_LIMIT_NUMBER) {
+        return /* @__PURE__ */ createElement(
+          OverflowableChip,
+          {
+            label,
+            ...getTagsProps({ index }),
+            key,
+            sx: getResultsGlobalFiltersChipStyle(element)
+          }
+        );
+      }
+      if (index === TAG_LIMIT_NUMBER) {
+        return /* @__PURE__ */ jsx(Chip, { size: "small", label: `+${filtersNumber - TAG_LIMIT_NUMBER}` }, key);
+      }
+      return void 0;
+    },
+    [translateCountryCode, intl]
+  );
+  const isOptionEqualToValue = useCallback((option, value) => option.id === value.id, []);
+  const PaperComponentMemo = useCallback(
+    (props) => /* @__PURE__ */ jsx(
+      GlobalFilterDropdownPanel,
+      {
+        ...props,
+        autocompleteRef,
+        setOpenedDropdown,
+        filterGroupSelected,
+        setFilterGroupSelected,
+        substationPropertiesGlobalFilters,
+        filterCategories,
+        genericFiltersStrictMode,
+        filterableEquipmentTypes,
+        translateCountryCode
+      }
+    ),
+    [
+      autocompleteRef,
+      filterGroupSelected,
+      substationPropertiesGlobalFilters,
+      filterCategories,
+      genericFiltersStrictMode,
+      filterableEquipmentTypes,
+      translateCountryCode
+    ]
+  );
+  const handleOnChange = useCallback(
+    (_event, _value, reason, details) => {
+      switch (reason) {
+        case "selectOption":
+          selectGlobalFilter(details.option.id);
+          break;
+        case "removeOption":
+          unselectGlobalFilters([details.option.id]);
+          break;
+        case "clear":
+          clearSelectedGlobalFilters();
+          break;
+      }
+    },
+    [clearSelectedGlobalFilters, selectGlobalFilter, unselectGlobalFilters]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: autocompleteRef, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: selectedGlobalFilters,
+        open: openedDropdown,
+        onOpen: () => setOpenedDropdown(true),
+        onClose: (_event, reason) => {
+          if (reason !== "selectOption" && reason !== "blur") {
+            setOpenedDropdown(false);
+          }
+        },
+        sx: resultsGlobalFilterStyles.autocomplete,
+        multiple: true,
+        id: "result-global-filter",
+        size: "small",
+        openOnFocus: true,
+        disableCloseOnSelect: true,
+        options,
+        onChange: handleOnChange,
+        renderInput: RenderInput,
+        renderTags: (filters, getTagsProps) => {
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                overflowX: "hidden",
+                flexWrap: "nowrap",
+                maxWidth: "90%"
+              },
+              children: filters.map((element, index) => {
+                return inputFieldChip(element, index, getTagsProps, filters.length);
+              })
+            }
+          );
+        },
+        renderOption: (props, option, state) => {
+          const { key, ...otherProps } = props;
+          return /* @__PURE__ */ jsx(
+            RenderOption,
+            {
+              ...otherProps,
+              option,
+              state,
+              translateCountryCode
+            },
+            key
+          );
+        },
+        isOptionEqualToValue,
+        filterOptions: (autocompleteOptions, state) => filterOptions(autocompleteOptions, state),
+        PaperComponent: PaperComponentMemo,
+        ListboxProps: {
+          sx: {
+            "& .MuiAutocomplete-option": {
+              paddingLeft: 0,
+              paddingRight: 0
+            },
+            height: "100%",
+            maxHeight: "100%",
+            overflowY: "auto"
+          }
+        },
+        noOptionsText: ""
+      }
+    ) }),
+    warningEquipmentTypeMessage && /* @__PURE__ */ jsx(WarningTooltip, { warningEquipmentTypeMessage })
+  ] });
+}
+export {
+  GlobalFilterPanel
+};

package/dist/features/global-filter/ui/label-with-info-tooltip.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2026, 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/.
+ */
+type TextWithToolTipProps = {
+    text: string;
+    tooltipMessage: string;
+};
+export declare function LabelWithInfoTooltip({ text, tooltipMessage }: Readonly<TextWithToolTipProps>): import("react").JSX.Element;
+export {};