@gridsuite/commons-ui 0.140.0 → 0.142.0

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

@@ -22,6 +22,6 @@ export declare class CardErrorBoundary extends Component<PropsWithChildren<{}>,
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleExpandClick;
     private handleReloadClick;
-    render(): string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/dist/components/csvDownloader/csv-export.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from 'react';
 import { CsvExportProps } from './csv-export.type';
 export declare function CsvExport({ columns, tableNamePrefix, tableName, disabled, skipColumnHeaders, skipPinnedBottom, language, getData, }: CsvExportProps): JSX.Element;

package/dist/components/customAGGrid/cell-renderers.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ICellRendererParams } from 'ag-grid-community';
+import { CustomCellRendererProps } from 'ag-grid-react';
+export declare function BooleanCellRenderer({ value }: Readonly<any>): import("react/jsx-runtime").JSX.Element;
+export declare function BooleanNullableCellRenderer({ value }: Readonly<any>): import("react/jsx-runtime").JSX.Element;
+export interface NumericCellRendererProps extends CustomCellRendererProps {
+    fractionDigits?: number;
+}
+export declare function NumericCellRenderer({ value, fractionDigits }: Readonly<NumericCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorCellRenderer({ value }: Readonly<CustomCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultCellRenderer(props: Readonly<CustomCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export declare function NetworkModificationNameCellRenderer({ value }: Readonly<CustomCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export declare function MessageLogCellRenderer({ param, highlightColor, currentHighlightColor, searchTerm, currentResultIndex, searchResults, }: Readonly<{
+    param: ICellRendererParams;
+    highlightColor?: string;
+    currentHighlightColor?: string;
+    searchTerm?: string;
+    currentResultIndex?: number;
+    searchResults?: number[];
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function ContingencyCellRenderer({ value, }: Readonly<{
+    value: {
+        cellValue: ReactNode;
+        tooltipValue: ReactNode;
+    };
+}>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/customAGGrid/cell-renderers.js

@@ -0,0 +1,199 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox, Box, Tooltip } from "@mui/material";
+import { useRef, useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { isBlankOrEmpty } from "../../utils/conversionUtils.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+const styles = {
+  tableCell: (theme) => ({
+    fontSize: "small",
+    cursor: "inherit",
+    display: "flex",
+    "&:before": {
+      content: '""',
+      position: "absolute",
+      left: theme.spacing(0.5),
+      right: theme.spacing(0.5),
+      bottom: 0
+    }
+  }),
+  overflow: {
+    whiteSpace: "pre",
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  }
+};
+const FORMULA_ERROR_KEY = "spreadsheet/formula/error";
+function BooleanCellRenderer({ value }) {
+  const isChecked = value;
+  return /* @__PURE__ */ jsx("div", { children: value !== void 0 && /* @__PURE__ */ jsx(Checkbox, { style: { padding: 0 }, color: "default", checked: isChecked, disableRipple: true }) });
+}
+function BooleanNullableCellRenderer({ value }) {
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      style: { padding: 0 },
+      color: "default",
+      checked: value === true,
+      indeterminate: isBlankOrEmpty(value),
+      disableRipple: true
+    }
+  ) });
+}
+const formatNumericCell = (value, fractionDigits) => {
+  if (value === null || Number.isNaN(value)) {
+    return { value: null };
+  }
+  return { value: value.toFixed(fractionDigits ?? 2), tooltip: value?.toString() };
+};
+const formatCell = (props) => {
+  let value = props?.valueFormatted || props.value;
+  let tooltipValue;
+  if (!value && props.colDef.valueGetter) {
+    props.colDef.valueGetter(props);
+  }
+  if (value != null && props.colDef.context?.numeric && props.colDef.context?.fractionDigits) {
+    tooltipValue = value;
+    value = Number.parseFloat(value).toFixed(props.colDef.context.fractionDigits);
+  }
+  if (props.colDef.context?.numeric && Number.isNaN(value)) {
+    value = null;
+  }
+  return { value, tooltip: tooltipValue };
+};
+function NumericCellRenderer({ value, fractionDigits }) {
+  const numericalValue = typeof value === "number" ? value : Number.parseFloat(value);
+  const cellValue = formatNumericCell(numericalValue, fractionDigits);
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: cellValue.tooltip ? cellValue.tooltip : cellValue.value?.toString(),
+      children: /* @__PURE__ */ jsx(Box, { sx: styles.overflow, children: cellValue.value })
+    }
+  ) });
+}
+function BaseCellRenderer({ value, tooltip }) {
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(Tooltip, { disableFocusListener: true, disableTouchListener: true, title: tooltip || value || "", children: /* @__PURE__ */ jsx(Box, { sx: styles.overflow, children: value }) }) });
+}
+function ErrorCellRenderer({ value }) {
+  const intl = useIntl();
+  const errorMessage = intl.formatMessage({ id: value?.error });
+  const errorValue = intl.formatMessage({ id: FORMULA_ERROR_KEY });
+  return /* @__PURE__ */ jsx(BaseCellRenderer, { value: errorValue, tooltip: errorMessage });
+}
+function DefaultCellRenderer(props) {
+  const cellValue = formatCell(props).value?.toString();
+  return /* @__PURE__ */ jsx(BaseCellRenderer, { value: cellValue });
+}
+function NetworkModificationNameCellRenderer({ value }) {
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: value,
+      componentsProps: {
+        tooltip: {
+          sx: {
+            maxWidth: "none"
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsx(Box, { sx: styles.overflow, children: value })
+    }
+  ) });
+}
+function MessageLogCellRenderer({
+  param,
+  highlightColor,
+  currentHighlightColor,
+  searchTerm,
+  currentResultIndex,
+  searchResults
+}) {
+  const marginLeft = (param.data?.depth ?? 0) * 2;
+  const textRef = useRef(null);
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+  const checkEllipsis = () => {
+    if (textRef.current) {
+      const zoomLevel = window.devicePixelRatio;
+      const adjustedScrollWidth = textRef.current.scrollWidth / zoomLevel;
+      const adjustedClientWidth = textRef.current.clientWidth / zoomLevel;
+      setIsEllipsisActive(adjustedScrollWidth > adjustedClientWidth);
+    }
+  };
+  useEffect(() => {
+    checkEllipsis();
+    const resizeObserver = new ResizeObserver(() => checkEllipsis());
+    if (textRef.current) {
+      resizeObserver.observe(textRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [param.value]);
+  const escapeRegExp = (string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  };
+  const renderHighlightedText = (value) => {
+    if (!searchTerm || searchTerm === "") {
+      return value;
+    }
+    const escapedSearchTerm = escapeRegExp(searchTerm);
+    const parts = value.split(new RegExp(`(${escapedSearchTerm})`, "gi"));
+    let count = 0;
+    return /* @__PURE__ */ jsx("span", { children: parts.map((part) => {
+      count += 1;
+      const key = `${param.node.rowIndex}-${count}`;
+      const isMatch = part.toLowerCase() === searchTerm.toLowerCase();
+      if (isMatch) {
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              backgroundColor: searchResults && currentResultIndex !== void 0 && searchResults[currentResultIndex] === param.node.rowIndex ? currentHighlightColor : highlightColor
+            },
+            children: part
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsx("span", { children: part }, key);
+    }) });
+  };
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(Tooltip, { disableFocusListener: true, disableTouchListener: true, title: isEllipsisActive ? param.value : "", children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: textRef,
+      sx: {
+        ...styles.overflow,
+        marginLeft
+      },
+      children: renderHighlightedText(param.value)
+    }
+  ) }) });
+}
+function ContingencyCellRenderer({
+  value
+}) {
+  const { cellValue, tooltipValue } = value ?? {};
+  if (cellValue == null || tooltipValue == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx("div", { style: { whiteSpace: "pre-line" }, children: tooltipValue }), children: /* @__PURE__ */ jsx(Box, { sx: styles.overflow, children: cellValue }) }) });
+}
+export {
+  BooleanCellRenderer,
+  BooleanNullableCellRenderer,
+  ContingencyCellRenderer,
+  DefaultCellRenderer,
+  ErrorCellRenderer,
+  MessageLogCellRenderer,
+  NetworkModificationNameCellRenderer,
+  NumericCellRenderer
+};

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

@@ -7,3 +7,4 @@
 export * from './customAggrid.style';
 export * from './customAggrid';
 export * from './separatorCellRenderer';
+export * from './cell-renderers';

package/dist/components/customAGGrid/index.js

@@ -1,9 +1,18 @@
 import { CUSTOM_AGGRID_THEME, styles } from "./customAggrid.style.js";
 import { CustomAGGrid } from "./customAggrid.js";
 import { SeparatorCellRenderer } from "./separatorCellRenderer.js";
+import { BooleanCellRenderer, BooleanNullableCellRenderer, ContingencyCellRenderer, DefaultCellRenderer, ErrorCellRenderer, MessageLogCellRenderer, NetworkModificationNameCellRenderer, NumericCellRenderer } from "./cell-renderers.js";
 export {
+  BooleanCellRenderer,
+  BooleanNullableCellRenderer,
   CUSTOM_AGGRID_THEME,
+  ContingencyCellRenderer,
   CustomAGGrid,
+  DefaultCellRenderer,
+  ErrorCellRenderer,
+  MessageLogCellRenderer,
+  NetworkModificationNameCellRenderer,
+  NumericCellRenderer,
   SeparatorCellRenderer,
   styles
 };

package/dist/components/dialogs/customMuiDialog/CustomMuiDialog.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Dialog, LinearProgress, DialogTitle, Grid, DialogContent, DialogActions } from "@mui/material";
+import { Dialog, LinearProgress, DialogTitle, DialogContent, DialogActions } from "@mui/material";
 import { SubmitButton } from "../../inputs/reactHookForm/utils/SubmitButton.js";
 import { CancelButton } from "../../inputs/reactHookForm/utils/CancelButton.js";
 import { CustomFormProvider } from "../../inputs/reactHookForm/provider/CustomFormProvider.js";
@@ -120,7 +120,7 @@ function CustomMuiDialog({
             ...dialogProps,
             children: [
               isDataFetching && /* @__PURE__ */ jsx(LinearProgress, {}),
-              /* @__PURE__ */ jsx(DialogTitle, { "data-testid": "DialogTitle", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsx(FormattedMessage, { id: titleId }) }) }),
+              /* @__PURE__ */ jsx(DialogTitle, { "data-testid": "DialogTitle", children: /* @__PURE__ */ jsx(FormattedMessage, { id: titleId }) }),
               /* @__PURE__ */ jsx(DialogContent, { sx: unscrollableFullHeight ? unscrollableDialogStyles.unscrollableContainer : null, children }),
               /* @__PURE__ */ jsxs(DialogActions, { children: [
                 /* @__PURE__ */ jsx(CancelButton, { onClick: handleCancel, "data-testid": "CancelButton" }),

package/dist/components/dialogs/descriptionModificationDialog/DescriptionModificationDialog.d.ts

@@ -4,6 +4,6 @@ export interface DescriptionModificationDialogProps {
     description: string;
     open: boolean;
     onClose: () => void;
-    updateElement: (uuid: UUID, data: Record<string, string>) => Promise<void>;
+    updateElement: (uuid: UUID, data: Record<string, string>) => Promise<Response>;
 }
 export declare function DescriptionModificationDialog({ elementUuid, description, open, onClose, updateElement, }: Readonly<DescriptionModificationDialogProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dialogs/modifyElementSelection/ModifyElementSelection.js

@@ -7,6 +7,9 @@ import { FolderOutlined } from "@mui/icons-material";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
 import { ElementType } from "../../../utils/types/elementType.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "../../../utils/yupConfig.js";
 import { fetchDirectoryElementPath } from "../../../services/directory.js";
 function ModifyElementSelection(props) {
   const intl = useIntl();

package/dist/components/directoryItemSelector/DirectoryItemSelector.js

@@ -4,10 +4,13 @@ import { getFileIcon } from "../../utils/mapper/getFileIcon.js";
 import { ElementType } from "../../utils/types/elementType.js";
 import { TreeViewFinder } from "../treeViewFinder/TreeViewFinder.js";
 import { useSnackMessage } from "../../hooks/useSnackMessage.js";
-import { fetchElementsInfos } from "../../services/explore.js";
+import "../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../utils/error.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
 import { fetchRootFolders, fetchDirectoryContent } from "../../services/directory.js";
+import { fetchElementsInfos } from "../../services/explore.js";
 import { getExpansionPathsForSelected, fetchChildrenForExpandedNodes, initializeFromLastSelected, saveLastSelectedDirectoryFromNode } from "./utils.js";
-import { snackWithFallback } from "../../utils/error.js";
 const styles = {
   icon: (theme) => ({
     marginRight: theme.spacing(1),

package/dist/components/directoryItemSelector/utils.js

@@ -5,7 +5,8 @@ import "@mui/icons-material";
 import { ElementType } from "../../utils/types/elementType.js";
 import "../../utils/types/equipmentType.js";
 import "../../utils/yupConfig.js";
-import { updateConfigParameter, fetchDirectoryElementPath } from "../../services/directory.js";
+import { updateConfigParameter } from "../../services/config.js";
+import { fetchDirectoryElementPath } from "../../services/directory.js";
 function getLastSelectedDirectoryId() {
   const lastSelectedDirId = localStorage.getItem(LAST_SELECTED_DIRECTORY);
   if (!lastSelectedDirId || lastSelectedDirId === "null") {

package/dist/components/dnd-table/dnd-table.type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 import { ElementType, EquipmentType } from '../../utils';
 export declare const SELECTED = "selected";
 export declare const MAX_ROWS_NUMBER = 100;

package/dist/components/index.d.ts

@@ -27,3 +27,5 @@ export * from './notifications';
 export * from './icons';
 export * from './parameters';
 export * from './menus';
+export * from './muiTable';
+export * from './resizablePanels';

package/dist/components/index.js

@@ -20,6 +20,7 @@ import { useCsvExport } from "./csvDownloader/use-csv-export.js";
 import { CUSTOM_AGGRID_THEME, styles } from "./customAGGrid/customAggrid.style.js";
 import { CustomAGGrid } from "./customAGGrid/customAggrid.js";
 import { SeparatorCellRenderer } from "./customAGGrid/separatorCellRenderer.js";
+import { BooleanCellRenderer, BooleanNullableCellRenderer, ContingencyCellRenderer, DefaultCellRenderer, ErrorCellRenderer, MessageLogCellRenderer, NetworkModificationNameCellRenderer, NumericCellRenderer } from "./customAGGrid/cell-renderers.js";
 import { CustomMuiDialog, unscrollableDialogStyles } from "./dialogs/customMuiDialog/CustomMuiDialog.js";
 import { DescriptionModificationDialog } from "./dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import { ElementSaveDialog } from "./dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -172,6 +173,9 @@ import { SensitivityAnalysisParametersDialog } from "./parameters/sensi/sensitiv
 import { COLUMNS_DEFINITIONS_HVDCS, COLUMNS_DEFINITIONS_INJECTIONS, COLUMNS_DEFINITIONS_INJECTIONS_SET, COLUMNS_DEFINITIONS_NODES, COLUMNS_DEFINITIONS_PSTS, EQUIPMENTS_IN_VOLTAGE_REGULATION_TYPES, HVDC_EQUIPMENT_TYPES, INJECTIONS_EQUIPMENT_TYPES, INJECTION_DISTRIBUTION_TYPES, MONITORED_BRANCHES_EQUIPMENT_TYPES, MONITORED_VOLTAGE_LEVELS_EQUIPMENT_TYPES, PSTS_EQUIPMENT_TYPES, SENSITIVITY_TYPES, SensiBranchesTabValues, SensiHvdcs, SensiInjection, SensiInjectionsSet, SensiNodes, SensiPsts, SensiTabValues } from "./parameters/sensi/columns-definitions.js";
 import { SensitivityTable } from "./parameters/sensi/sensitivity-table.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./menus/custom-nested-menu.js";
+import { OverflowableTableCell } from "./muiTable/OverflowableTableCell.js";
+import { OverflowableTableCellWithCheckbox } from "./muiTable/OverflowableTableCellWithCheckbox.js";
+import { ResizeHandle } from "./resizablePanels/ResizeHandle.js";
 export {
   AboutDialog,
   ActivableChip,
@@ -184,7 +188,9 @@ export {
   AutocompleteInput,
   AutocompleteWithFavorites,
   BALANCE_TYPE,
+  BooleanCellRenderer,
   BooleanInput,
+  BooleanNullableCellRenderer,
   BottomRightButtons,
   CENTER_LABEL,
   COLUMNS_DEFINITIONS_HVDCS,
@@ -209,6 +215,7 @@ export {
   CombinatorSelector,
   CombinatorType,
   ComputingType,
+  ContingencyCellRenderer,
   CountriesInput,
   CountryValueEditor,
   CreateParameterDialog,
@@ -239,6 +246,7 @@ export {
   DISTRIBUTED_SLACK,
   DISTRIBUTION_KEY,
   DataType,
+  DefaultCellRenderer,
   DescriptionField,
   DescriptionModificationDialog,
   DevModeBanner,
@@ -261,6 +269,7 @@ export {
   ElementValueEditor,
   EquipmentItem,
   EquipmentsSelectionType,
+  ErrorCellRenderer,
   ErrorInLogoutAlert,
   ErrorInUserValidationAlert,
   ErrorInput,
@@ -328,6 +337,7 @@ export {
   MIN_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,
   MONITORED_BRANCHES_EQUIPMENT_TYPES,
   MONITORED_VOLTAGE_LEVELS_EQUIPMENT_TYPES,
+  MessageLogCellRenderer,
   MidFormError,
   ModifyElementSelection,
   MuiSelectInput,
@@ -338,16 +348,20 @@ export {
   NAME,
   NO_ITEM_SELECTION_FOR_COPY,
   NadPositionsGenerationMode,
+  NetworkModificationNameCellRenderer,
   NetworkVisualizationParametersInline,
   NetworkVisualizationTabValues,
   NetworkVisualizationsParametersEditionDialog,
   NotificationsContext,
   NotificationsProvider,
+  NumericCellRenderer,
   NumericEditor,
   OPERATOR_OPTIONS,
   OperatorType,
   OverflowableChip,
   OverflowableChipWithHelperText,
+  OverflowableTableCell,
+  OverflowableTableCellWithCheckbox,
   OverflowableText,
   PARAM_CENTER_LABEL,
   PARAM_COMPONENT_LIBRARY,
@@ -396,6 +410,7 @@ export {
   RawReadOnlyInput,
   ReactivePowerAdornment,
   RemoveButton,
+  ResizeHandle,
   RuleValueEditor,
   SELECTED,
   SELECTION_TYPE,

package/dist/components/inputs/reactHookForm/DirectoryItemsInput.d.ts

@@ -16,9 +16,10 @@ export interface DirectoryItemsInputProps<CP extends OverflowableChipProps = Ove
     labelRequiredFromContext?: boolean;
     ChipComponent?: ComponentType<CP>;
     chipProps?: Partial<CP>;
+    fullHeight?: boolean;
 }
 export declare function DirectoryItemsInput<CP extends OverflowableChipProps = OverflowableChipProps>({ label, name, elementType, // Used to specify type of element (Filter, Contingency list, ...)
 equipmentTypes, // Mostly used for filters, it allows the user to get elements of specific equipment only
 itemFilter, // Used to further filter the results displayed according to specific requirement
 titleId, // title of directory item selector dialogue
-hideErrorMessage, onRowChanged, onChange, disable, allowMultiSelect, labelRequiredFromContext, ChipComponent, chipProps, }: Readonly<DirectoryItemsInputProps<CP>>): import("react/jsx-runtime").JSX.Element;
+hideErrorMessage, onRowChanged, onChange, disable, allowMultiSelect, labelRequiredFromContext, ChipComponent, chipProps, fullHeight, }: Readonly<DirectoryItemsInputProps<CP>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/DirectoryItemsInput.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { FormControl, Grid, Tooltip, IconButton } from "@mui/material";
+import { FormControl, Tooltip, IconButton } from "@mui/material";
 import { Folder } from "@mui/icons-material";
 import { useState, useMemo, useCallback, useEffect } from "react";
 import { useFieldArray, useWatch, useController } from "react-hook-form";
@@ -11,46 +11,35 @@ import { useCustomFormContext } from "./provider/useCustomFormContext.js";
 import { ErrorInput } from "./errorManagement/ErrorInput.js";
 import { MidFormError } from "./errorManagement/MidFormError.js";
 import "../../../utils/types/equipmentType.js";
+import "../../../utils/conversionUtils.js";
+import { mergeSx } from "../../../utils/styles.js";
+import { ArrayAction } from "../../../utils/types/types.js";
+import { getEquipmentTypeShortLabel } from "../../../utils/labelUtils.js";
+import "../../../utils/yupConfig.js";
 import { fetchDirectoryElementPath } from "../../../services/directory.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
-import "../../../utils/conversionUtils.js";
-import { mergeSx } from "../../../utils/styles.js";
-import { ArrayAction } from "../../../utils/types/types.js";
-import { getEquipmentTypeShortLabel } from "../../../utils/labelUtils.js";
-import "../../../utils/yupConfig.js";
 import { NAME } from "./constants.js";
 import { OverflowableChip } from "./OverflowableChip.js";
-import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 const styles = {
-  formDirectoryElements1: {
+  formDirectoryElements: {
     display: "flex",
     gap: "8px",
     flexWrap: "wrap",
     flexDirection: "row",
+    alignContent: "flex-start",
+    alignItems: "center",
     border: "2px solid lightgray",
-    padding: "4px",
+    padding: "2px 8px",
     borderRadius: "4px",
     overflow: "hidden"
   },
   formDirectoryElementsError: (theme) => ({
     borderColor: theme.palette.error.main
-  }),
-  formDirectoryElements2: {
-    display: "flex",
-    gap: "8px",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    marginTop: 0,
-    padding: "4px",
-    overflow: "hidden"
-  },
-  addDirectoryElements: {
-    marginTop: "-5px"
-  }
+  })
 };
 function DirectoryItemsInput({
   label,
@@ -70,7 +59,8 @@ function DirectoryItemsInput({
   allowMultiSelect = true,
   labelRequiredFromContext = true,
   ChipComponent = OverflowableChip,
-  chipProps
+  chipProps,
+  fullHeight
 }) {
   const { snackError } = useSnackMessage();
   const intl = useIntl();
@@ -124,10 +114,11 @@ function DirectoryItemsInput({
   );
   const removeElements = useCallback(
     (index) => {
-      const currentValues = getValues(name);
+      const elemToRemove = getValues(name)[index];
       remove(index);
+      const newElems = getValues(name);
       onRowChanged?.(true);
-      onChange?.(currentValues, ArrayAction.REMOVE, currentValues[index]);
+      onChange?.(newElems, ArrayAction.REMOVE, elemToRemove);
     },
     [onRowChanged, remove, getValues, name, onChange]
   );
@@ -173,31 +164,41 @@ function DirectoryItemsInput({
       FormControl,
       {
         sx: mergeSx(
-          styles.formDirectoryElements1,
+          styles.formDirectoryElements,
           // @ts-expect-error
-          error?.message && styles.formDirectoryElementsError
+          error?.message && styles.formDirectoryElementsError,
+          fullHeight && { height: "100%" }
         ),
         error: !!error?.message,
         children: [
-          elements?.length === 0 && label && /* @__PURE__ */ jsx(
-            FieldLabel,
+          /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+            IconButton,
             {
-              label,
-              optional: labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())
+              size: "small",
+              disabled: disable,
+              onClick: () => {
+                if (shouldReplaceElement) {
+                  handleChipClick(0);
+                } else {
+                  setDirectoryItemSelectorOpen(true);
+                  if (allowMultiSelect) {
+                    setMultiSelect(true);
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsx(Folder, {})
             }
-          ),
-          elements?.length > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => {
+          ) }) }),
+          elements?.map((item, index) => {
             const elementName = watchedElements?.[index]?.[NAME] ?? getValues(`${name}.${index}.${NAME}`) ?? item?.[NAME];
-            const equipmentTypeShortLabel = getEquipmentTypeShortLabel(
-              item?.specificMetadata?.equipmentType
-            );
+            const equipmentTypeShortLabel = getEquipmentTypeShortLabel(item?.specificMetadata?.equipmentType);
             const { sx: chipSx, ...otherChipProps } = chipProps ?? {};
             return /* @__PURE__ */ jsx(
               ChipComponent,
               {
                 onDelete: () => removeElements(index),
                 onClick: () => handleChipClick(index),
-                label: elementName ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
+                label: elementName || intl.formatMessage({ id: "elementNotFound" }),
                 ...equipmentTypeShortLabel && {
                   helperText: intl.formatMessage({
                     id: equipmentTypeShortLabel
@@ -215,26 +216,14 @@ function DirectoryItemsInput({
               },
               item.id
             );
-          }) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row-reverse", children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-            IconButton,
+          }),
+          elements?.length === 0 && label && /* @__PURE__ */ jsx(
+            FieldLabel,
             {
-              sx: styles.addDirectoryElements,
-              size: "small",
-              disabled: disable,
-              onClick: () => {
-                if (shouldReplaceElement) {
-                  handleChipClick(0);
-                } else {
-                  setDirectoryItemSelectorOpen(true);
-                  if (allowMultiSelect) {
-                    setMultiSelect(true);
-                  }
-                }
-              },
-              children: /* @__PURE__ */ jsx(Folder, {})
+              label,
+              optional: labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())
             }
-          ) }) }) }) })
+          )
         ]
       }
     ),

package/dist/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.js

@@ -9,6 +9,7 @@ import "../../../../utils/conversionUtils.js";
 import "@mui/icons-material";
 import "../../../../utils/types/equipmentType.js";
 import "../../../../utils/yupConfig.js";
+import "react-intl";
 const style = (customProps) => ({
   grid: (theme) => ({
     width: "auto",

package/dist/components/inputs/reactQueryBuilder/ElementValueEditor.js

@@ -2,11 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { validate } from "uuid";
 import { useEffect } from "react";
 import { useCustomFormContext } from "../reactHookForm/provider/useCustomFormContext.js";
-import { fetchElementsInfos } from "../../../services/explore.js";
 import "../../../utils/conversionUtils.js";
 import "@mui/icons-material";
 import "../../../utils/types/equipmentType.js";
 import "../../../utils/yupConfig.js";
+import { fetchElementsInfos } from "../../../services/explore.js";
 import { DirectoryItemsInput } from "../reactHookForm/DirectoryItemsInput.js";
 function ElementValueEditor(props) {
   const { defaultValue, name, elementType, equipmentTypes, titleId, hideErrorMessage, itemFilter, onChange } = props;

package/dist/components/muiTable/OverflowableTableCell.d.ts

@@ -0,0 +1,3 @@
+import { OverflowableTextProps } from '../overflowableText';
+export declare function OverflowableTableCell(overflowableTextProps: Readonly<OverflowableTextProps>): import("react/jsx-runtime").JSX.Element;
+export default OverflowableTableCell;