@gridsuite/commons-ui 0.136.1 → 0.138.0

package/README.md

@@ -46,7 +46,7 @@ Only in this case, you need to follow the steps below:
 - [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
 - In the 'run workflow' combobox select, let the branch on main
 - Enter the type of evolution (major | minor | patch)
-- Enter your NPM access token (it must be an **automation** access token to bypass 2FA, see the [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
+- Enter your NPM access token (check the **Bypass two-factor authentication** checkbox to bypass 2FA, see the [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
 - Click 'run workflow'
 
 Otherwise ask someone who has the permission.

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

@@ -5,6 +5,7 @@ import { Grid, Button, Typography, Box, CircularProgress } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import "../../../utils/yupConfig.js";
+import "../../overflowableText/OverflowableText.js";
 import "../../../utils/types/equipmentType.js";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { MAX_CHAR_DESCRIPTION } from "../../../utils/constants/uiConstants.js";
@@ -17,11 +18,7 @@ import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
 import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import * as yup from "yup";
-import "../../overflowableText/OverflowableText.js";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
-import "react-querybuilder";
-import "uuid";
-import "../../filter/expert/expertFilterConstants.js";
 import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
 import "../../customAGGrid/customAggrid.js";
 import "ag-grid-community";
@@ -32,8 +29,11 @@ import "../../inputs/reactHookForm/numbers/RangeInput.js";
 import { DescriptionField } from "../../inputs/reactHookForm/text/DescriptionField.js";
 import { UniqueNameInput } from "../../inputs/reactHookForm/text/UniqueNameInput.js";
 import "@react-querybuilder/material";
+import "../../filter/expert/expertFilterConstants.js";
 import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
 import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
 import { CustomMuiDialog } from "../customMuiDialog/CustomMuiDialog.js";
 import { initializeDirectory } from "./utils.js";
 var OperationType = /* @__PURE__ */ ((OperationType2) => {

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useState } from "react";
+import "../overflowableText/OverflowableText.js";
 import "react-hook-form";
 import "../../utils/types/equipmentType.js";
 import "../../utils/conversionUtils.js";
@@ -14,11 +15,7 @@ import "notistack";
 import "../inputs/reactHookForm/provider/CustomFormProvider.js";
 import { CancelButton } from "../inputs/reactHookForm/utils/CancelButton.js";
 import "yup";
-import "../overflowableText/OverflowableText.js";
 import "../treeViewFinder/TreeViewFinder.js";
-import "react-querybuilder";
-import "uuid";
-import "../filter/expert/expertFilterConstants.js";
 import "../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
 import "../customAGGrid/customAggrid.js";
 import "ag-grid-community";
@@ -26,8 +23,11 @@ import "react-papaparse";
 import "react-csv-downloader";
 import "../inputs/reactHookForm/numbers/RangeInput.js";
 import "@react-querybuilder/material";
+import "../filter/expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
 import "../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
 function DndTableAddRowsDialog({ open, handleAddButton, onClose }) {
   const [rowNumber, setRowNumber] = useState(1);
   const handleClose = () => {

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

@@ -9,6 +9,7 @@ import { MAX_ROWS_NUMBER, SELECTED, DndColumnType } from "./dnd-table.type.js";
 import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
 import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
 import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
+import "../overflowableText/OverflowableText.js";
 import { ChipItemsInput } from "../inputs/reactHookForm/chip-items-input.js";
 import { DirectoryItemsInput } from "../inputs/reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "../inputs/reactHookForm/RawReadOnlyInput.js";

package/dist/components/elementSearch/elementItem/EquipmentItem.js

@@ -4,7 +4,7 @@ import parse from "autosuggest-highlight/parse";
 import clsx from "clsx";
 import { FormattedMessage } from "react-intl";
 import { Box } from "@mui/material";
-import { EQUIPMENT_TYPE } from "../../../utils/types/equipmentType.js";
+import { ALL_EQUIPMENTS } from "../../../utils/types/equipmentType.js";
 import { TagRenderer } from "../tagRenderer/TagRenderer.js";
 import { OverflowableText } from "../../overflowableText/OverflowableText.js";
 import { mergeSx } from "../../../utils/styles.js";
@@ -27,7 +27,7 @@ function EquipmentItem({
         component: "span",
         className: clsx(props.classes?.equipmentTag, props.classes?.equipmentTypeTag),
         sx: mergeSx(props.styles?.equipmentTag, props.styles?.equipmentTypeTag),
-        children: /* @__PURE__ */ jsx(FormattedMessage, { id: EQUIPMENT_TYPE[element.type]?.tagLabel })
+        children: /* @__PURE__ */ jsx(FormattedMessage, { id: ALL_EQUIPMENTS[element.type]?.tagLabel })
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/components/elementSearch/tagRenderer/TagRenderer.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { OverflowableText } from "../../overflowableText/OverflowableText.js";
-import { EQUIPMENT_TYPE } from "../../../utils/types/equipmentType.js";
+import { EquipmentType } from "../../../utils/types/equipmentType.js";
 import { mergeSx } from "../../../utils/styles.js";
 function TagRenderer({ element, ...props }) {
-  if (element.type !== EQUIPMENT_TYPE.SUBSTATION?.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL?.name) {
+  if (element.type !== EquipmentType.SUBSTATION && element.type !== EquipmentType.VOLTAGE_LEVEL) {
     return /* @__PURE__ */ jsx(
       OverflowableText,
       {

package/dist/components/filter/HeaderFilterForm.js

@@ -8,6 +8,7 @@ import { ElementType } from "../../utils/types/elementType.js";
 import "../../utils/types/equipmentType.js";
 import "../../utils/yupConfig.js";
 import "react-intl";
+import "../overflowableText/OverflowableText.js";
 import "react";
 import "react-hook-form";
 import "localized-countries";
@@ -16,11 +17,7 @@ import "localized-countries/data/en";
 import "notistack";
 import "../inputs/reactHookForm/provider/CustomFormProvider.js";
 import * as yup from "yup";
-import "../overflowableText/OverflowableText.js";
 import "../treeViewFinder/TreeViewFinder.js";
-import "react-querybuilder";
-import "uuid";
-import "./expert/expertFilterConstants.js";
 import "../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
 import "../customAGGrid/customAggrid.js";
 import "ag-grid-community";
@@ -30,8 +27,11 @@ import "../inputs/reactHookForm/numbers/RangeInput.js";
 import { DescriptionField } from "../inputs/reactHookForm/text/DescriptionField.js";
 import { UniqueNameInput } from "../inputs/reactHookForm/text/UniqueNameInput.js";
 import "@react-querybuilder/material";
+import "./expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
 import "../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
 const filterStyles = {
   textField: {
     minWidth: "250px",

package/dist/components/filter/expert/expertFilterConstants.d.ts

@@ -1,7 +1,7 @@
 import { Field } from 'react-querybuilder';
 import { CombinatorType, DataType, OperatorType } from './expertFilter.type';
 import { FieldType } from '../../../utils/types/fieldType';
-import { EquipmentType } from '../../../utils';
+import { ALL_EQUIPMENTS } from '../../../utils';
 export declare enum RULES {
     EMPTY_RULE = "emptyRule",
     EMPTY_GROUP = "emptyGroup",
@@ -9,56 +9,7 @@ export declare enum RULES {
     BETWEEN_RULE = "betweenRule"
 }
 export declare const EXPERT_FILTER_QUERY = "rules";
-export declare const EXPERT_FILTER_EQUIPMENTS: {
-    SUBSTATION: {
-        id: EquipmentType;
-        label: string;
-    };
-    VOLTAGE_LEVEL: {
-        id: EquipmentType;
-        label: string;
-    };
-    LINE: {
-        id: EquipmentType;
-        label: string;
-    };
-    TWO_WINDINGS_TRANSFORMER: {
-        id: EquipmentType;
-        label: string;
-    };
-    THREE_WINDINGS_TRANSFORMER: {
-        id: EquipmentType;
-        label: string;
-    };
-    GENERATOR: {
-        id: EquipmentType;
-        label: string;
-    };
-    BATTERY: {
-        id: EquipmentType;
-        label: string;
-    };
-    LOAD: {
-        id: EquipmentType;
-        label: string;
-    };
-    SHUNT_COMPENSATOR: {
-        id: EquipmentType;
-        label: string;
-    };
-    STATIC_VAR_COMPENSATOR: {
-        id: EquipmentType;
-        label: string;
-    };
-    HVDC_LINE: {
-        id: EquipmentType;
-        label: string;
-    };
-    DANGLING_LINE: {
-        id: EquipmentType;
-        label: string;
-    };
-};
+export declare const EXPERT_FILTER_EQUIPMENTS: typeof ALL_EQUIPMENTS;
 export declare const ENERGY_SOURCE_OPTIONS: {
     name: string;
     label: string;

package/dist/components/filter/utils/filterFormUtils.d.ts

@@ -1,10 +1,7 @@
-import { EquipmentType } from '../../../utils';
+import { ALL_EQUIPMENTS, EquipmentType } from '../../../utils';
 export type ContingencyListEquipment = {
     id: string;
     label: string;
 };
 export declare const CONTINGENCY_LIST_EQUIPMENTS: Record<EquipmentType.BUSBAR_SECTION | EquipmentType.LINE | EquipmentType.TWO_WINDINGS_TRANSFORMER | EquipmentType.THREE_WINDINGS_TRANSFORMER | EquipmentType.GENERATOR | EquipmentType.BATTERY | EquipmentType.LOAD | EquipmentType.SHUNT_COMPENSATOR | EquipmentType.STATIC_VAR_COMPENSATOR | EquipmentType.HVDC_LINE | EquipmentType.DANGLING_LINE, ContingencyListEquipment>;
-export declare const FILTER_EQUIPMENTS: Partial<Record<EquipmentType, {
-    id: EquipmentType;
-    label: string;
-}>>;
+export declare const FILTER_EQUIPMENTS: typeof ALL_EQUIPMENTS;

package/dist/components/filter/utils/filterFormUtils.js

@@ -1,7 +1,7 @@
 import "../../../utils/conversionUtils.js";
 import "react/jsx-runtime";
 import "@mui/icons-material";
-import { EquipmentType, BASE_EQUIPMENTS } from "../../../utils/types/equipmentType.js";
+import { EquipmentType, ALL_EQUIPMENTS, BASE_EQUIPMENTS } from "../../../utils/types/equipmentType.js";
 import "../../../utils/yupConfig.js";
 const CONTINGENCY_LIST_EQUIPMENTS = {
   BUSBAR_SECTION: {
@@ -51,10 +51,7 @@ const CONTINGENCY_LIST_EQUIPMENTS = {
 };
 const FILTER_EQUIPMENTS = {
   ...BASE_EQUIPMENTS,
-  [EquipmentType.HVDC_LINE]: {
-    id: EquipmentType.HVDC_LINE,
-    label: "Hvdc"
-  }
+  [EquipmentType.HVDC_LINE]: ALL_EQUIPMENTS[EquipmentType.HVDC_LINE]
 };
 export {
   CONTINGENCY_LIST_EQUIPMENTS,

package/dist/components/index.js

@@ -54,6 +54,8 @@ import "react/jsx-runtime";
 import "@mui/material";
 import "react-intl";
 import { SelectClearable } from "./inputs/SelectClearable.js";
+import { OverflowableChip } from "./inputs/reactHookForm/OverflowableChip.js";
+import { OverflowableChipWithHelperText } from "./inputs/reactHookForm/OverflowableChipWithHelperText.js";
 import { ChipItemsInput } from "./inputs/reactHookForm/chip-items-input.js";
 import { DirectoryItemsInput } from "./inputs/reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./inputs/reactHookForm/RawReadOnlyInput.js";
@@ -158,10 +160,11 @@ import { LoadFlowParametersEditionDialog } from "./parameters/loadflow/load-flow
 import { InitialVoltage, PredefinedParameters, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, SHORT_CIRCUIT_PREDEFINED_PARAMS, SHORT_CIRCUIT_WITH_FEEDER_RESULT, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, intlInitialVoltageProfileMode, intlPredefinedParametersOptions } from "./parameters/short-circuit/constants.js";
 import { ShortCircuitParametersInLine } from "./parameters/short-circuit/short-circuit-parameters-inline.js";
 import { ShortCircuitParametersEditionDialog } from "./parameters/short-circuit/short-circuit-parameters-dialog.js";
-import { DEFAULT_GENERAL_APPLY_MODIFICATIONS, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_UPDATE_BUS_VOLTAGE, FILTERS, FILTER_ID, FILTER_NAME, GENERAL, GENERAL_APPLY_MODIFICATIONS, GENERATORS_SELECTION_TYPE, HIGH_VOLTAGE_LIMIT, ID, LEG_SIDE, LOW_VOLTAGE_LIMIT, PRIORITY, RATIO_TAP_CHANGER_POSITION, RATIO_TAP_CHANGER_TARGET_V, REACTIVE_SLACKS_THRESHOLD, SELECTION_TYPE, SHUNT_COMPENSATORS_SELECTION_TYPE, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, TRANSFORMERS_SELECTION_TYPE, UPDATE_BUS_VOLTAGE, VARIABLE_Q_GENERATORS, VARIABLE_SHUNT_COMPENSATORS, VARIABLE_TRANSFORMERS, VOLTAGE_LIMITS_DEFAULT, VOLTAGE_LIMITS_MODIFICATION, VoltageInitTabValues } from "./parameters/voltage-init/constants.js";
+import { DEFAULT_GENERAL_APPLY_MODIFICATIONS, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_UPDATE_BUS_VOLTAGE, GENERAL, GENERAL_APPLY_MODIFICATIONS, GENERATORS_SELECTION_TYPE, HIGH_VOLTAGE_LIMIT, LEG_SIDE, LOW_VOLTAGE_LIMIT, PRIORITY, RATIO_TAP_CHANGER_POSITION, RATIO_TAP_CHANGER_TARGET_V, REACTIVE_SLACKS_THRESHOLD, SELECTION_TYPE, SHUNT_COMPENSATORS_SELECTION_TYPE, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, TRANSFORMERS_SELECTION_TYPE, UPDATE_BUS_VOLTAGE, VARIABLE_Q_GENERATORS, VARIABLE_SHUNT_COMPENSATORS, VARIABLE_TRANSFORMERS, VOLTAGE_LIMITS_DEFAULT, VOLTAGE_LIMITS_MODIFICATION, VoltageInitTabValues } from "./parameters/voltage-init/constants.js";
 import { EquipmentsSelectionType } from "./parameters/voltage-init/voltage-init.type.js";
 import { VoltageInitParametersEditionDialog } from "./parameters/voltage-init/voltage-init-parameters-dialog.js";
 import { VoltageInitParametersInLine } from "./parameters/voltage-init/voltage-init-parameters-inline.js";
+import { PccMinParametersInLine } from "./parameters/pcc-min/pcc-min-parameters-inline.js";
 import { SecurityAnalysisParametersInline } from "./parameters/security-analysis/security-analysis-parameters-inline.js";
 import { SecurityAnalysisParametersDialog } from "./parameters/security-analysis/security-analysis-parameters-dialog.js";
 import { SensitivityAnalysisParametersInline } from "./parameters/sensi/sensitivity-analysis-parameters-inline.js";
@@ -268,11 +271,8 @@ export {
   ExplicitNamingFilterForm,
   ExportCsvButton,
   FIELDS_OPTIONS,
-  FILTERS,
   FILTER_EQUIPMENTS,
   FILTER_EQUIPMENTS_ATTRIBUTES,
-  FILTER_ID,
-  FILTER_NAME,
   FieldErrorAlert,
   FieldLabel,
   FilterCreationDialog,
@@ -289,7 +289,6 @@ export {
   HVDC_AC_EMULATION,
   HVDC_EQUIPMENT_TYPES,
   HelperPreviousValue,
-  ID,
   INJECTIONS_EQUIPMENT_TYPES,
   INJECTION_DISTRIBUTION_TYPES,
   INTL_LINE_FLOW_MODE_OPTIONS,
@@ -347,6 +346,8 @@ export {
   NumericEditor,
   OPERATOR_OPTIONS,
   OperatorType,
+  OverflowableChip,
+  OverflowableChipWithHelperText,
   OverflowableText,
   PARAM_CENTER_LABEL,
   PARAM_COMPONENT_LIBRARY,
@@ -376,6 +377,7 @@ export {
   ParameterLineDirectoryItemsInput,
   ParameterLineSlider,
   ParameterSwitch,
+  PccMinParametersInLine,
   PhotoLibraryIcon,
   PopupConfirmationDialog,
   PredefinedParameters,

package/dist/components/inputs/index.js

@@ -1,4 +1,6 @@
 import { SelectClearable } from "./SelectClearable.js";
+import { OverflowableChip } from "./reactHookForm/OverflowableChip.js";
+import { OverflowableChipWithHelperText } from "./reactHookForm/OverflowableChipWithHelperText.js";
 import { ChipItemsInput } from "./reactHookForm/chip-items-input.js";
 import { DirectoryItemsInput } from "./reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./reactHookForm/RawReadOnlyInput.js";
@@ -93,6 +95,8 @@ export {
   MultipleAutocompleteInput,
   NAME,
   NumericEditor,
+  OverflowableChip,
+  OverflowableChipWithHelperText,
   PropertyValueEditor,
   RadioInput,
   RangeInput,

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

@@ -1,5 +1,7 @@
+import { ComponentType } from 'react';
 import { ArrayAction, ElementAttributes } from '../../../utils';
-export interface DirectoryItemsInputProps {
+import { OverflowableChipProps } from './OverflowableChip';
+export interface DirectoryItemsInputProps<CP extends OverflowableChipProps = OverflowableChipProps> {
     label: string | undefined;
     name: string;
     elementType: string;
@@ -12,10 +14,11 @@ export interface DirectoryItemsInputProps {
     disable?: boolean;
     allowMultiSelect?: boolean;
     labelRequiredFromContext?: boolean;
-    equipmentColorsMap?: Map<string, string>;
+    ChipComponent?: ComponentType<CP>;
+    chipProps?: Partial<CP>;
 }
-export declare function DirectoryItemsInput({ label, name, elementType, // Used to specify type of element (Filter, Contingency list, ...)
+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, equipmentColorsMap, }: Readonly<DirectoryItemsInputProps>): import("react/jsx-runtime").JSX.Element;
+hideErrorMessage, onRowChanged, onChange, disable, allowMultiSelect, labelRequiredFromContext, ChipComponent, chipProps, }: Readonly<DirectoryItemsInputProps<CP>>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,30 +1,29 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { FormControl, Box, Chip, FormHelperText, Grid, Tooltip, IconButton } from "@mui/material";
+import { FormControl, Grid, 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";
-import { useIntl, FormattedMessage } from "react-intl";
-import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
+import { useIntl } from "react-intl";
 import { FieldLabel } from "./utils/FieldLabel.js";
 import { isFieldRequired } from "./utils/functions.js";
 import "./provider/CustomFormProvider.js";
 import { useCustomFormContext } from "./provider/useCustomFormContext.js";
 import { ErrorInput } from "./errorManagement/ErrorInput.js";
 import { MidFormError } from "./errorManagement/MidFormError.js";
-import "../../../utils/types/equipmentType.js";
+import { ALL_EQUIPMENTS } from "../../../utils/types/equipmentType.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 { OverflowableText } from "../../overflowableText/OverflowableText.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 "../../../utils/yupConfig.js";
 import { NAME } from "./constants.js";
-import { getFilterEquipmentTypeLabel } from "../../filter/expert/expertFilterUtils.js";
+import { OverflowableChip } from "./OverflowableChip.js";
+import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 const styles = {
   formDirectoryElements1: {
     display: "flex",
@@ -69,7 +68,8 @@ function DirectoryItemsInput({
   disable = false,
   allowMultiSelect = true,
   labelRequiredFromContext = true,
-  equipmentColorsMap
+  ChipComponent = OverflowableChip,
+  chipProps
 }) {
   const { snackError } = useSnackMessage();
   const intl = useIntl();
@@ -187,45 +187,28 @@ function DirectoryItemsInput({
           ),
           elements?.length > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => {
             const elementName = watchedElements?.[index]?.[NAME] ?? getValues(`${name}.${index}.${NAME}`) ?? item?.[NAME];
-            return /* @__PURE__ */ jsxs(
-              Box,
+            const equipmentTypeTagLabel = item?.specificMetadata?.equipmentType && ALL_EQUIPMENTS[item.specificMetadata.equipmentType]?.shortLabel || "";
+            const { sx: chipSx, ...otherChipProps } = chipProps ?? {};
+            return /* @__PURE__ */ jsx(
+              ChipComponent,
               {
-                sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Chip,
-                    {
-                      size: "small",
-                      sx: mergeSx(
-                        {
-                          backgroundColor: item?.specificMetadata?.equipmentType && equipmentColorsMap?.get(item?.specificMetadata?.equipmentType)
-                        },
-                        !elementName ? (theme) => ({
-                          backgroundColor: theme.palette.error.light,
-                          borderColor: theme.palette.error.main,
-                          color: theme.palette.error.contrastText
-                        }) : void 0
-                      ),
-                      onDelete: () => removeElements(index),
-                      onClick: () => handleChipClick(index),
-                      label: /* @__PURE__ */ jsx(
-                        OverflowableText,
-                        {
-                          text: elementName ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
-                          sx: { width: "100%" }
-                        }
-                      )
-                    }
-                  ),
-                  equipmentColorsMap && /* @__PURE__ */ jsx(FormHelperText, { children: item?.specificMetadata?.equipmentType ? /* @__PURE__ */ jsx(
-                    FormattedMessage,
-                    {
-                      id: getFilterEquipmentTypeLabel(
-                        item.specificMetadata.equipmentType
-                      )
-                    }
-                  ) : "" })
-                ]
+                onDelete: () => removeElements(index),
+                onClick: () => handleChipClick(index),
+                label: elementName ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
+                ...equipmentTypeTagLabel && {
+                  helperText: intl.formatMessage({
+                    id: equipmentTypeTagLabel
+                  })
+                },
+                sx: mergeSx(
+                  !elementName ? (theme) => ({
+                    backgroundColor: theme.palette.error.light,
+                    borderColor: theme.palette.error.main,
+                    color: theme.palette.error.contrastText
+                  }) : void 0,
+                  chipSx
+                ),
+                ...otherChipProps
               },
               item.id
             );

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

@@ -0,0 +1,4 @@
+import { ChipProps } from '@mui/material';
+export interface OverflowableChipProps extends ChipProps {
+}
+export declare function OverflowableChip({ label, ...otherProps }: Readonly<OverflowableChipProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Chip, Box } from "@mui/material";
+import { OverflowableText } from "../../overflowableText/OverflowableText.js";
+function OverflowableChip({ label, ...otherProps }) {
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "small",
+      label: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: /* @__PURE__ */ jsx(
+        OverflowableText,
+        {
+          text: label,
+          sx: {
+            maxWidth: "20ch",
+            mx: "auto"
+          }
+        }
+      ) }),
+      ...otherProps
+    }
+  );
+}
+export {
+  OverflowableChip
+};

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

@@ -0,0 +1,5 @@
+import { OverflowableChipProps } from './OverflowableChip';
+export interface OverflowableChipWithHelperTextProps extends OverflowableChipProps {
+    helperText?: string;
+}
+export declare function OverflowableChipWithHelperText({ helperText, ...otherProps }: Readonly<OverflowableChipWithHelperTextProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box, FormHelperText } from "@mui/material";
+import { OverflowableChip } from "./OverflowableChip.js";
+function OverflowableChipWithHelperText({
+  helperText,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "left", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(OverflowableChip, { ...otherProps }),
+    helperText && /* @__PURE__ */ jsx(FormHelperText, { sx: { paddingLeft: 1.5, fontSize: "x-small" }, children: helperText })
+  ] });
+}
+export {
+  OverflowableChipWithHelperText
+};

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

@@ -4,6 +4,8 @@
  * 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 * from './OverflowableChip';
+export * from './OverflowableChipWithHelperText';
 export * from './chip-items-input';
 export * from './DirectoryItemsInput';
 export * from './RawReadOnlyInput';

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

@@ -1,3 +1,5 @@
+import { OverflowableChip } from "./OverflowableChip.js";
+import { OverflowableChipWithHelperText } from "./OverflowableChipWithHelperText.js";
 import { ChipItemsInput } from "./chip-items-input.js";
 import { DirectoryItemsInput } from "./DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
@@ -67,6 +69,8 @@ export {
   MultipleAutocompleteInput,
   NAME,
   NumericEditor,
+  OverflowableChip,
+  OverflowableChipWithHelperText,
   RadioInput,
   RangeInput,
   RangeType,

package/dist/components/menus/custom-nested-menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { NestedMenuItem } from "mui-nested-menu";
 import { Box, MenuItem } from "@mui/material";
 import { mergeSx } from "../../utils/styles.js";
@@ -19,11 +19,35 @@ const styles = {
 };
 function CustomNestedMenuItem({ sx, children, ...other }) {
   const [subMenuActive, setSubMenuActive] = useState(false);
+  const [shouldLiftLeft, setShouldLiftLeft] = useState(false);
+  const containerRef = useRef(null);
+  const calculatePosition = () => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const estimatedWidth = rect.width;
+    const spaceRight = window.innerWidth - rect.right;
+    setShouldLiftLeft(estimatedWidth > spaceRight);
+  };
+  const handleMouseEnter = () => {
+    calculatePosition();
+  };
   return /* @__PURE__ */ jsx(
     NestedMenuItem,
     {
       ...other,
       parentMenuOpen: true,
+      ref: containerRef,
+      onMouseEnter: handleMouseEnter,
+      MenuProps: {
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: shouldLiftLeft ? "left" : "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: shouldLiftLeft ? "right" : "left"
+        }
+      },
       sx: mergeSx(subMenuActive ? styles.highlightedParentLine : styles.highlightedLine, sx),
       children: /* @__PURE__ */ jsx(Box, { onMouseEnter: () => setSubMenuActive(true), onMouseLeave: () => setSubMenuActive(false), children })
     }

package/dist/components/overflowableText/OverflowableText.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { BoxProps } from '@mui/material';
 import { Style } from 'node:util';
-import { SxStyle } from '../../utils/styles';
+import { SxStyle } from '../../utils';
 export interface OverflowableTextProps extends BoxProps {
     text?: ReactNode;
     maxLineCount?: number;

package/dist/components/overflowableText/OverflowableText.js

@@ -1,6 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
 import { styled, Tooltip, Box } from "@mui/material";
+import "../../utils/conversionUtils.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
 const overflowStyle = {
   overflow: {
     display: "inline-block",
@@ -32,6 +37,7 @@ const OverflowableText = styled(
     tooltipSx,
     className,
     children,
+    sx,
     ...props
   }) => {
     const element = useRef();
@@ -65,22 +71,14 @@ const OverflowableText = styled(
         slotProps: { tooltip: { sx: finalTooltipSx } }
       }
     };
+    const boxSx = mergeSx(isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow, sx);
     return /* @__PURE__ */ jsx(
       Tooltip,
       {
         title: text || "",
         disableHoverListener: !overflowed,
         ...tooltipStyleProps,
-        children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            ...props,
-            ref: element,
-            className,
-            sx: isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow,
-            children: children || text
-          }
-        )
+        children: /* @__PURE__ */ jsx(Box, { ref: element, className, sx: boxSx, ...props, children: children || text })
       }
     );
   }