@gridsuite/commons-ui 0.189.0 → 0.191.0

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Checkbox, Box, Tooltip } from "@mui/material";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { isBlankOrEmpty } from "../../utils/conversionUtils.js";
 import "../../utils/types/equipmentType.js";
@@ -118,25 +118,15 @@ function MessageLogCellRenderer({
 }) {
   const marginLeft = (param.data?.depth ?? 0) * 2;
   const textRef = useRef(null);
-  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
-  const checkEllipsis = () => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const handleMouseEnter = () => {
     if (textRef.current) {
-      const zoomLevel = window.devicePixelRatio;
-      const adjustedScrollWidth = textRef.current.scrollWidth / zoomLevel;
-      const adjustedClientWidth = textRef.current.clientWidth / zoomLevel;
-      setIsEllipsisActive(adjustedScrollWidth > adjustedClientWidth);
+      setShowTooltip(textRef.current.scrollWidth > textRef.current.clientWidth);
     }
   };
-  useEffect(() => {
-    checkEllipsis();
-    const resizeObserver = new ResizeObserver(() => checkEllipsis());
-    if (textRef.current) {
-      resizeObserver.observe(textRef.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [param.value]);
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
   const escapeRegExp = (string) => {
     return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   };
@@ -166,17 +156,29 @@ function MessageLogCellRenderer({
       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,
+  return /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.tableCell), children: /* @__PURE__ */ jsx(
+    Tooltip,
     {
-      ref: textRef,
-      sx: {
-        ...styles.overflow,
-        marginLeft
-      },
-      children: renderHighlightedText(param.value)
+      disableFocusListener: true,
+      disableTouchListener: true,
+      disableHoverListener: true,
+      open: showTooltip,
+      title: param.value,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: textRef,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          sx: {
+            ...styles.overflow,
+            marginLeft
+          },
+          children: renderHighlightedText(param.value)
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 function ContingencyCellRenderer({
   value

package/dist/components/dialogs/elementSaveDialog/ElementSaveDialog.js

@@ -33,6 +33,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../filter/expert/expertFilterConstants.js";
 import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

package/dist/components/dnd-table/dnd-table-add-rows-dialog.js

@@ -27,6 +27,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../filter/expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

package/dist/components/dnd-table/dnd-table.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { useState, useRef, useCallback, useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, TableBody, Tooltip, Checkbox } from "@mui/material";
 import { DragIndicator } from "@mui/icons-material";
@@ -12,6 +13,7 @@ import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
 import "../overflowableText/OverflowableText.js";
 import "../../utils/conversionUtils.js";
 import "../../utils/types/equipmentType.js";
+import { mergeSx } from "../../utils/styles.js";
 import "../../utils/yupConfig.js";
 import { ChipItemsInput } from "../inputs/reactHookForm/chip-items-input.js";
 import { DirectoryItemsInput } from "../inputs/reactHookForm/DirectoryItemsInput.js";
@@ -39,6 +41,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "notistack";
 import "@react-querybuilder/material";
 import "../filter/expert/expertFilterConstants.js";
@@ -88,18 +91,19 @@ function MultiCheckbox({
     }
   );
 }
-function DefaultTableCell({ arrayFormName, rowIndex, column, ...props }) {
-  return /* @__PURE__ */ jsx(TableCell, { sx: { padding: 1 }, children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, ...props }) }, column.dataKey);
+function DefaultTableCell({ arrayFormName, rowIndex, column, width, ...props }) {
+  return /* @__PURE__ */ jsx(TableCell, { sx: mergeSx({ padding: 1 }, width), children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, ...props }) }, column.dataKey);
 }
 function EditableTableCell({
   arrayFormName,
   rowIndex,
   column,
+  width,
   previousValue,
   valueModified,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(TableCell, { sx: { padding: 0.5, maxWidth: column.maxWidth }, children: [
+  return /* @__PURE__ */ jsxs(TableCell, { sx: mergeSx({ padding: 0.5, maxWidth: column.maxWidth }, width), children: [
     column.type === DndColumnType.NUMERIC && /* @__PURE__ */ jsx(
       TableNumericalInput,
       {
@@ -185,7 +189,7 @@ function DndTable(props) {
     remove
   } = useFieldArrayOutput;
   const [openAddRowsDialog, setOpenAddRowsDialog] = useState(false);
-  function renderTableCell(rowId, rowIndex, column) {
+  function renderTableCell(rowId, rowIndex, column, width) {
     const CustomTableCell = column.editable ? EditableTableCell : DefaultTableCell;
     return /* @__PURE__ */ jsx(
       CustomTableCell,
@@ -195,7 +199,8 @@ function DndTable(props) {
         column,
         disabled: disableTableCell ? disableTableCell(rowIndex, column, arrayFormName, previousValues) : disabled,
         previousValue: getPreviousValue ? getPreviousValue(rowIndex, column, arrayFormName, previousValues) : void 0,
-        valueModified: isValueModified ? isValueModified(rowIndex, arrayFormName) : false
+        valueModified: isValueModified ? isValueModified(rowIndex, arrayFormName) : false,
+        width
       },
       rowId + column.dataKey
     );
@@ -277,7 +282,25 @@ function DndTable(props) {
       }
     }
   };
+  const dragCellWidthsRef = useRef([]);
+  const cellIdxRef = useRef(0);
+  const onBeforeDragStart = useCallback((start) => {
+    const row = document.querySelector(`[data-rfd-draggable-id="${start.draggableId}"]`);
+    if (row) {
+      dragCellWidthsRef.current = Array.from(row.cells, (cell) => cell.offsetWidth);
+    }
+  }, []);
+  const nextLockedWidthSx = useCallback((isDragging) => {
+    const cellWidths = dragCellWidthsRef.current;
+    const cellIdx = cellIdxRef.current;
+    if (!isDragging || cellWidths[cellIdx] == null) {
+      return void 0;
+    }
+    cellIdxRef.current += 1;
+    return { width: cellWidths[cellIdx], boxSizing: "border-box" };
+  }, []);
   const onDragEnd = (result) => {
+    dragCellWidthsRef.current = [];
     if (!result.destination) {
       return;
     }
@@ -309,33 +332,48 @@ function DndTable(props) {
           draggableId: row.id.toString(),
           index,
           isDragDisabled: disableDragAndDrop,
-          children: (provided) => /* @__PURE__ */ jsxs(TableRow, { ref: provided.innerRef, ...provided.draggableProps, children: [
-            !disableDragAndDrop && /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                title: intl.formatMessage({
-                  id: "DragAndDrop"
-                }),
-                placement: "right",
-                children: /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    sx: { textAlign: "center" },
-                    ...disabled ? {} : { ...provided.dragHandleProps },
-                    children: /* @__PURE__ */ jsx(DragIndicator, {})
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(TableCell, { sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
-              CheckboxInput,
-              {
-                name: `${arrayFormName}[${index}].${SELECTED}`,
-                formProps: { disabled }
-              }
-            ) }),
-            columnsDefinition.map((column) => renderTableCell(row.id, index, column))
-          ] })
+          children: (provided, snapshot) => {
+            cellIdxRef.current = 0;
+            const tableRow = /* @__PURE__ */ jsxs(TableRow, { ref: provided.innerRef, ...provided.draggableProps, children: [
+              !disableDragAndDrop && /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  title: intl.formatMessage({
+                    id: "DragAndDrop"
+                  }),
+                  placement: "right",
+                  children: /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      sx: mergeSx(
+                        { textAlign: "center" },
+                        nextLockedWidthSx(snapshot.isDragging)
+                      ),
+                      ...disabled ? {} : { ...provided.dragHandleProps },
+                      children: /* @__PURE__ */ jsx(DragIndicator, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  sx: mergeSx({ textAlign: "center" }, nextLockedWidthSx(snapshot.isDragging)),
+                  children: /* @__PURE__ */ jsx(
+                    CheckboxInput,
+                    {
+                      name: `${arrayFormName}[${index}].${SELECTED}`,
+                      formProps: { disabled }
+                    }
+                  )
+                }
+              ),
+              columnsDefinition.map(
+                (column) => renderTableCell(row.id, index, column, nextLockedWidthSx(snapshot.isDragging))
+              )
+            ] });
+            return snapshot.isDragging ? createPortal(tableRow, document.body) : tableRow;
+          }
         },
         row.id
       )),
@@ -344,7 +382,7 @@ function DndTable(props) {
   }
   return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, children: [
     /* @__PURE__ */ jsxs(Grid, { item: true, container: true, children: [
-      /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(DragDropContext, { onBeforeDragStart, onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
         TableContainer,
         {
           ref: provided.innerRef,

package/dist/components/filter/HeaderFilterForm.js

@@ -31,6 +31,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "./expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

package/dist/components/filter/expert/ExpertFilterForm.js

@@ -40,6 +40,7 @@ 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/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 yup.setLocale({

package/dist/components/filter/explicitNaming/ExplicitNamingFilterForm.js

@@ -42,6 +42,7 @@ 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/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../expert/expertFilterConstants.js";
 import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

package/dist/components/index.js

@@ -87,6 +87,7 @@ import { CountriesInput } from "./inputs/reactHookForm/selectInputs/CountriesInp
 import { InputWithPopupConfirmation } from "./inputs/reactHookForm/selectInputs/InputWithPopupConfirmation.js";
 import { MuiSelectInput } from "./inputs/reactHookForm/selectInputs/MuiSelectInput.js";
 import { SelectInput } from "./inputs/reactHookForm/selectInputs/SelectInput.js";
+import { SelectWithConfirmationInput } from "./inputs/reactHookForm/selectInputs/SelectWithConfirmationInput.js";
 import { EnumInput } from "./inputs/reactHookForm/selectInputs/EnumInput.js";
 import { TableNumericalInput } from "./inputs/reactHookForm/tableInputs/table-numerical-input.js";
 import { TableTextInput } from "./inputs/reactHookForm/tableInputs/table-text-input.js";
@@ -209,6 +210,7 @@ import { useHvdcLccDeletion } from "./network-modifications/equipmentDeletion/hv
 import { HvdcLccDeletionSpecificForm } from "./network-modifications/equipmentDeletion/hvdcLccDeletion/HvdcLccDeletionSpecificForm.js";
 import { equipmentDeletionDtoToForm, equipmentDeletionEmptyFormData, equipmentDeletionFormSchema, equipmentDeletionFormToDto, newEquipmentDeletionDto } from "./network-modifications/equipmentDeletion/equipmentDeletion.utils.js";
 import { EquipmentDeletionForm } from "./network-modifications/equipmentDeletion/EquipmentDeletionForm.js";
+import { useTabsWithError } from "./network-modifications/hooks/useTabsWithError.js";
 import { SubstationCreationForm } from "./network-modifications/substation/creation/SubstationCreationForm.js";
 import { substationCreationDtoToForm, substationCreationEmptyFormData, substationCreationFormSchema, substationCreationFormToDto } from "./network-modifications/substation/creation/substationCreation.utils.js";
 import { SubstationModificationForm } from "./network-modifications/substation/modification/SubstationModificationForm.js";
@@ -221,11 +223,11 @@ import "@mui/icons-material";
 import "../utils/yupConfig.js";
 import "react";
 import { VoltageLevelCreationForm } from "./network-modifications/voltageLevel/creation/VoltageLevelCreationForm.js";
-import { SWITCH_TYPE, buildNewBusbarSections, getCreateSwitchesEmptyFormData, getCreateSwitchesValidationSchema, isAdditionalInformationTabError, isCharacteristicsTabError, isStructureTabError, isSubstationTabError, translateSwitchKinds, voltageLevelCreationDtoToForm, voltageLevelCreationEmptyFormData, voltageLevelCreationFormSchema, voltageLevelCreationFormToDto } from "./network-modifications/voltageLevel/creation/voltageLevelCreation.utils.js";
+import { SWITCH_TYPE, buildNewBusbarSections, getCreateSwitchesEmptyFormData, getCreateSwitchesValidationSchema, translateSwitchKinds, voltageLevelCreationDtoToForm, voltageLevelCreationEmptyFormData, voltageLevelCreationFormSchema, voltageLevelCreationFormToDto } from "./network-modifications/voltageLevel/creation/voltageLevelCreation.utils.js";
 import { SwitchKind } from "./network-modifications/voltageLevel/creation/voltageLevelCreation.types.js";
 import { VoltageLevelModificationForm } from "./network-modifications/voltageLevel/modification/VoltageLevelModificationForm.js";
 import { voltageLevelModificationDtoToForm, voltageLevelModificationEmptyFormData, voltageLevelModificationFormSchema, voltageLevelModificationFormToDto } from "./network-modifications/voltageLevel/modification/voltageLevelModification.utils.js";
-import { LoadDialogTab } from "./network-modifications/load/common/load.utils.js";
+import { LOAD_TAB_FIELDS, LoadDialogTab } from "./network-modifications/load/common/load.utils.js";
 import { LoadDialogTabs } from "./network-modifications/load/common/LoadDialogTabs.js";
 import { LoadDialogTabsContent } from "./network-modifications/load/common/LoadDialogTabsContent.js";
 import { LoadDialogHeader } from "./network-modifications/load/common/LoadDialogHeader.js";
@@ -234,6 +236,9 @@ import { loadCreationDtoToForm, loadCreationEmptyFormData, loadCreationFormSchem
 import { loadModificationDtoToForm, loadModificationEmptyFormData, loadModificationFormSchema, loadModificationFormToDto } from "./network-modifications/load/modification/loadModification.utils.js";
 import { ByFilterDeletionForm } from "./network-modifications/by-filter/deletion/ByFilterDeletionForm.js";
 import { EQUIPMENT_TYPE_ORDER, byFilterDeletionDtoToForm, byFilterDeletionFormSchema, byFilterDeletionFormToDto, emptyFormData } from "./network-modifications/by-filter/deletion/byFilterDeletion.utils.js";
+import { ModificationByAssignmentForm } from "./network-modifications/by-filter/assignment/modification-by-assignment-form.js";
+import { emptyModificationByAssignmentFormData, modificationByAssignmentDtoToForm, modificationByAssignmentFormSchema, modificationByAssignmentFormToDto } from "./network-modifications/by-filter/assignment/modificationByAssignment.utils.js";
+import { DataType as DataType2 } from "./network-modifications/by-filter/assignment/assignment/assignment.type.js";
 import { BuildStatusChip } from "./node/build-status-chip.js";
 import { BuildStatus } from "./node/constant.js";
 export {
@@ -245,6 +250,7 @@ export {
   AnnouncementBanner,
   AnnouncementNotification,
   ArrowsOutputIcon,
+  DataType2 as AssignmentDataType,
   AuthenticationRouter,
   default2 as AuthenticationRouterErrorDisplay,
   AutocompleteInput,
@@ -402,6 +408,7 @@ export {
   LOAD_INCREASE_START_TIME,
   LOAD_INCREASE_STOP_TIME,
   LOAD_MODELS_RULE,
+  LOAD_TAB_FIELDS,
   LOAD_TYPE_OPTIONS,
   LOW_VOLTAGE_LIMIT,
   LabelledButton,
@@ -436,6 +443,7 @@ export {
   MONITORED_VOLTAGE_LEVELS_EQUIPMENT_TYPES,
   MessageLogCellRenderer,
   MidFormError,
+  ModificationByAssignmentForm,
   ModifyElementSelection,
   MuiSelectInput,
   MultipleAutocompleteInput,
@@ -549,6 +557,7 @@ export {
   SecurityAnalysisParametersInline,
   SelectClearable,
   SelectInput,
+  SelectWithConfirmationInput,
   SensiBranchesTabValues,
   SensiHvdcs,
   SensiInjection,
@@ -625,6 +634,7 @@ export {
   dispatchUser,
   doesNodeHasChildren,
   emptyFormData,
+  emptyModificationByAssignmentFormData,
   emptyProperties,
   equipmentDeletionDtoToForm,
   equipmentDeletionEmptyFormData,
@@ -702,13 +712,9 @@ export {
   initializedProperty,
   intlInitialVoltageProfileMode,
   intlPredefinedParametersOptions,
-  isAdditionalInformationTabError,
-  isCharacteristicsTabError,
   isFieldRequired,
   isFloatNumber,
   isIntegerNumber,
-  isStructureTabError,
-  isSubstationTabError,
   isValidComputingType,
   italicFontTextField,
   loadCreationDtoToForm,
@@ -722,6 +728,9 @@ export {
   login,
   logout,
   mergeModificationAndEquipmentProperties,
+  modificationByAssignmentDtoToForm,
+  modificationByAssignmentFormSchema,
+  modificationByAssignmentFormToDto,
   modificationPropertiesSchema,
   newEquipmentDeletionDto,
   onlyStartedGeneratorsOptions,
@@ -756,6 +765,7 @@ export {
   useHvdcLccDeletion,
   useListenerManager,
   useNotificationsListener,
+  useTabsWithError,
   useValid,
   voltageLevelCreationDtoToForm,
   voltageLevelCreationEmptyFormData,

package/dist/components/inputs/index.js

@@ -30,6 +30,7 @@ import { CountriesInput } from "./reactHookForm/selectInputs/CountriesInput.js";
 import { InputWithPopupConfirmation } from "./reactHookForm/selectInputs/InputWithPopupConfirmation.js";
 import { MuiSelectInput } from "./reactHookForm/selectInputs/MuiSelectInput.js";
 import { SelectInput } from "./reactHookForm/selectInputs/SelectInput.js";
+import { SelectWithConfirmationInput } from "./reactHookForm/selectInputs/SelectWithConfirmationInput.js";
 import { EnumInput } from "./reactHookForm/selectInputs/EnumInput.js";
 import { TableNumericalInput } from "./reactHookForm/tableInputs/table-numerical-input.js";
 import { TableTextInput } from "./reactHookForm/tableInputs/table-text-input.js";
@@ -120,6 +121,7 @@ export {
   RuleValueEditor,
   SelectClearable,
   SelectInput,
+  SelectWithConfirmationInput,
   SliderInput,
   SubmitButton,
   SwitchInput,

package/dist/components/inputs/reactHookForm/expandableInput/ExpandableInput.d.ts

@@ -4,6 +4,10 @@
  * 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 type ExpandableInputHandle = {
+    replaceItems: (newItems: any[]) => void;
+    appendItem: (newItem: any) => void;
+};
 export interface ExpandableInputProps {
     name: string;
     Field: React.ComponentType<any>;
@@ -17,8 +21,4 @@ export interface ExpandableInputProps {
     disabled?: boolean;
     disabledDeletion?: (idx: number) => boolean;
 }
-export declare function ExpandableInput({ name, Field, // Used to display each object of an array
-fieldProps, // Props to pass to Field
-addButtonLabel, initialValue, // Initial value to display when we add a new entry to array
-getDeletionMark, deleteCallback, alignItems, // default value for a flex container
-watchProps, disabled, disabledDeletion, }: Readonly<ExpandableInputProps>): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableInput: import('react').ForwardRefExoticComponent<Readonly<ExpandableInputProps> & import('react').RefAttributes<unknown>>;

package/dist/components/inputs/reactHookForm/expandableInput/ExpandableInput.js

@@ -3,6 +3,7 @@ import { useFieldArray } from "react-hook-form";
 import { Grid, Button } from "@mui/material";
 import { ControlPoint } from "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
+import { forwardRef, useImperativeHandle } from "react";
 import { DeletableRow } from "./DeletableRow.js";
 import { ErrorInput } from "../errorManagement/ErrorInput.js";
 import { MidFormError } from "../errorManagement/MidFormError.js";
@@ -20,61 +21,72 @@ const styles = {
     paddingLeft: theme.spacing(2)
   })
 };
-function ExpandableInput({
-  name,
-  Field,
-  // Used to display each object of an array
-  fieldProps,
-  // Props to pass to Field
-  addButtonLabel,
-  initialValue,
-  // Initial value to display when we add a new entry to array
-  getDeletionMark,
-  deleteCallback,
-  alignItems = "stretch",
-  // default value for a flex container
-  watchProps = true,
-  disabled = false,
-  disabledDeletion
-}) {
-  const {
-    fields: values,
-    append,
-    remove
-  } = useFieldArray({
-    name
-  });
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
-    watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
-      DeletableRow,
-      {
-        alignItems,
-        onClick: () => {
-          const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
-          if (shouldRemove) {
-            remove(idx);
-          }
+const ExpandableInput = forwardRef(
+  ({
+    name,
+    Field,
+    // Used to display each object of an array
+    fieldProps,
+    // Props to pass to Field
+    addButtonLabel,
+    initialValue,
+    // Initial value to display when we add a new entry to array
+    getDeletionMark,
+    deleteCallback,
+    alignItems = "stretch",
+    // default value for a flex container
+    watchProps = true,
+    disabled = false,
+    disabledDeletion
+  }, ref) => {
+    const {
+      fields: values,
+      append,
+      remove,
+      replace
+    } = useFieldArray({
+      name
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        replaceItems: (newItems) => replace(newItems),
+        appendItem: (newItem) => append(newItem)
+      }),
+      [append, replace]
+    );
+    return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
+      watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
+        DeletableRow,
+        {
+          alignItems,
+          onClick: () => {
+            const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
+            if (shouldRemove) {
+              remove(idx);
+            }
+          },
+          deletionMark: getDeletionMark?.(idx),
+          disabledDeletion: disabledDeletion?.(idx),
+          children: /* @__PURE__ */ jsx(Field, { name, index: idx, ...fieldProps })
         },
-        deletionMark: getDeletionMark?.(idx),
-        disabledDeletion: disabledDeletion?.(idx),
-        children: /* @__PURE__ */ jsx(Field, { name, index: idx, ...fieldProps })
-      },
-      value.id
-    )),
-    /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled,
-        fullWidth: true,
-        sx: mergeSx(styles.button, styles.paddingButton),
-        startIcon: /* @__PURE__ */ jsx(ControlPoint, {}),
-        onClick: () => append(initialValue),
-        children: addButtonLabel && /* @__PURE__ */ jsx(FormattedMessage, { id: addButtonLabel })
-      }
-    ) })
-  ] });
-}
+        value.id
+      )),
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          fullWidth: true,
+          sx: mergeSx(styles.button, styles.paddingButton),
+          startIcon: /* @__PURE__ */ jsx(ControlPoint, {}),
+          onClick: () => append(initialValue),
+          children: addButtonLabel && /* @__PURE__ */ jsx(FormattedMessage, { id: addButtonLabel })
+        }
+      ) })
+    ] });
+  }
+);
 export {
   ExpandableInput
 };

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

@@ -29,6 +29,7 @@ import { CountriesInput } from "./selectInputs/CountriesInput.js";
 import { InputWithPopupConfirmation } from "./selectInputs/InputWithPopupConfirmation.js";
 import { MuiSelectInput } from "./selectInputs/MuiSelectInput.js";
 import { SelectInput } from "./selectInputs/SelectInput.js";
+import { SelectWithConfirmationInput } from "./selectInputs/SelectWithConfirmationInput.js";
 import { EnumInput } from "./selectInputs/EnumInput.js";
 import { TableNumericalInput } from "./tableInputs/table-numerical-input.js";
 import { TableTextInput } from "./tableInputs/table-text-input.js";
@@ -90,6 +91,7 @@ export {
   RawReadOnlyInput,
   ReadOnlyInput,
   SelectInput,
+  SelectWithConfirmationInput,
   SliderInput,
   SubmitButton,
   SwitchInput,

package/dist/components/inputs/reactHookForm/selectInputs/SelectWithConfirmationInput.d.ts

@@ -0,0 +1,9 @@
+interface SelectWithConfirmationInputProps {
+    name: string;
+    options: string[];
+    onValidate: () => void;
+    getOptionLabel?: (option: string) => string;
+    label: string;
+}
+export declare function SelectWithConfirmationInput({ name, options, onValidate, getOptionLabel, label, }: Readonly<SelectWithConfirmationInputProps>): import("react/jsx-runtime").JSX.Element;
+export {};