@gridsuite/commons-ui 0.125.0 → 0.127.0

package/dist/components/checkBoxList/checkBoxList.type.d.ts

@@ -1,18 +1,18 @@
 import { ReactElement, ReactNode } from 'react';
 import { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../utils/styles';
 export type CheckBoxListItemSx = {
-    checkBoxIcon?: SxProps<Theme>;
-    listItemText?: SxProps<Theme>;
-    label?: SxProps<Theme>;
-    checkboxListItem?: SxProps<Theme>;
-    checkboxButton?: SxProps<Theme>;
-    checkbox?: SxProps<Theme>;
-    dragButton?: SxProps<Theme>;
+    checkBoxIcon?: SxStyle;
+    listItemText?: SxStyle;
+    label?: SxStyle;
+    checkboxListItem?: SxStyle;
+    checkboxButton?: SxStyle;
+    checkbox?: SxStyle;
+    dragButton?: SxStyle;
 };
 export type CheckBoxListSx = {
-    dragAndDropContainer?: SxProps<Theme>;
-    checkboxList?: SxProps<Theme>;
+    dragAndDropContainer?: SxStyle;
+    checkboxList?: SxStyle;
 };
 export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
 type CheckBoxListItemSxProps<T> = CheckBoxListSx & {

package/dist/components/customAGGrid/customAggrid.style.d.ts

@@ -1,7 +1,6 @@
-import { Theme } from '@mui/material';
 export declare const CUSTOM_AGGRID_THEME = "custom-aggrid-theme";
 export declare const styles: {
-    readonly grid: (theme: Theme) => {
+    readonly grid: (theme: import('@mui/material').Theme) => {
         width: string;
         height: string;
         position: "relative";

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

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

package/dist/components/customAGGrid/index.js

@@ -1,7 +1,9 @@
 import { CUSTOM_AGGRID_THEME, styles } from "./customAggrid.style.js";
 import { CustomAGGrid } from "./customAggrid.js";
+import { SeparatorCellRenderer } from "./separatorCellRenderer.js";
 export {
   CUSTOM_AGGRID_THEME,
   CustomAGGrid,
+  SeparatorCellRenderer,
   styles
 };

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025, 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 SeparatorCellRendererProps = {
+    value: string;
+};
+export declare function SeparatorCellRenderer({ value }: Readonly<SeparatorCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/customAGGrid/separatorCellRenderer.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+const styles = {
+  separator: (theme) => ({
+    fontWeight: "bold",
+    fontSize: "1rem",
+    width: "100%",
+    marginTop: theme.spacing(1)
+  })
+};
+function SeparatorCellRenderer({ value }) {
+  return /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", color: "primary", sx: styles.separator, children: value });
+}
+export {
+  SeparatorCellRenderer
+};

package/dist/components/dialogs/customMuiDialog/CustomMuiDialog.d.ts

@@ -30,26 +30,26 @@ export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogPr
  * </fullHeightDialog>
  */
 export declare const unscrollableDialogStyles: {
-    fullHeightDialog: {
-        '.MuiDialog-paper': {
-            minWidth: string;
-            margin: string;
-            height: string;
+    readonly fullHeightDialog: {
+        readonly '.MuiDialog-paper': {
+            readonly minWidth: "90vw";
+            readonly margin: "auto";
+            readonly height: "95vh";
         };
     };
-    unscrollableContainer: {
-        display: string;
-        flexDirection: string;
-        overflowY: string;
+    readonly unscrollableContainer: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly overflowY: "hidden";
     };
-    unscrollableHeader: {
-        flex: string;
-        padding: number;
+    readonly unscrollableHeader: {
+        readonly flex: "none";
+        readonly padding: 1;
     };
-    scrollableContent: {
-        flex: string;
-        overflowY: string;
-        padding: number;
+    readonly scrollableContent: {
+        readonly flex: "auto";
+        readonly overflowY: "auto";
+        readonly padding: 1;
     };
 };
 export declare function CustomMuiDialog<T extends FieldValues = FieldValues>({ open, formSchema, formMethods, onClose, onSave, isDataFetching, onValidationError, titleId, disabledSave, removeOptional, onCancel, children, language, confirmationMessageKey, unscrollableFullHeight, ...dialogProps }: Readonly<CustomMuiDialogProps<T>>): import("react/jsx-runtime").JSX.Element;

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

@@ -19,6 +19,9 @@ 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";
@@ -29,11 +32,8 @@ 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) => {
@@ -225,8 +225,8 @@ function ElementSaveDialog({
             {
               name: FieldConstants.OPERATION_TYPE,
               options: [
-                { id: "CREATE", label: intl.formatMessage({ id: createLabelId }) },
-                { id: "UPDATE", label: intl.formatMessage({ id: updateLabelId }) }
+                { id: "CREATE", label: createLabelId ?? "createLabelId" },
+                { id: "UPDATE", label: updateLabelId ?? "updateLabelId" }
               ],
               formProps: {
                 sx: {

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

@@ -16,6 +16,9 @@ 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";
@@ -23,11 +26,8 @@ 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/elementSearch/elementItem/EquipmentItem.d.ts

@@ -1,6 +1,6 @@
-import { SxProps, Theme } from '@mui/material';
 import { EquipmentInfos } from '../../../utils/types/equipmentType';
 import { TagRenderer } from '../tagRenderer/TagRenderer';
+import { SxStyle } from '../../../utils/styles';
 export interface EquipmentItemProps {
     inputValue: string;
     suffixRenderer?: typeof TagRenderer;
@@ -14,11 +14,11 @@ export interface EquipmentItemProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        result?: SxProps<Theme>;
-        equipmentOption?: SxProps<Theme>;
-        equipmentTag?: SxProps<Theme>;
-        equipmentTypeTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        result?: SxStyle;
+        equipmentOption?: SxStyle;
+        equipmentTag?: SxStyle;
+        equipmentTypeTag?: SxStyle;
+        equipmentVlTag?: SxStyle;
     };
 }
 export declare function EquipmentItem({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/elementSearch/tagRenderer/TagRenderer.d.ts

@@ -1,5 +1,5 @@
-import { SxProps, Theme } from '@mui/material';
 import { EquipmentInfos } from '../../../utils/types/equipmentType';
+import { SxStyle } from '../../../utils/styles';
 export interface TagRendererProps {
     element: EquipmentInfos;
     classes?: {
@@ -7,8 +7,8 @@ export interface TagRendererProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        equipmentTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        equipmentTag?: SxStyle;
+        equipmentVlTag?: SxStyle;
     };
 }
 export declare function TagRenderer({ element, ...props }: TagRendererProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/expandableGroup/ExpandableGroup.js

@@ -4,12 +4,12 @@ import { useState } from "react";
 import { ExpandCircleDown, ExpandMore } from "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
 const styles = {
-  accordion: () => ({
+  accordion: {
     "&:before": {
       display: "none"
     },
     background: "none"
-  }),
+  },
   accordionSummary: (theme) => ({
     flexDirection: "row-reverse",
     // place icon at the left
@@ -31,10 +31,10 @@ const styles = {
       transform: "rotate(0deg)"
     }
   }),
-  accordionDetails: () => ({
+  accordionDetails: {
     padding: 0
     // reset default left right space in details
-  })
+  }
 };
 function ExpandableGroup({ renderHeader, children }) {
   const [mouseHover, setMouseHover] = useState(false);

package/dist/components/filter/HeaderFilterForm.d.ts

@@ -1,13 +1,13 @@
 import { UUID } from 'crypto';
 import { default as yup } from '../../utils/yupConfig';
 export declare const filterStyles: {
-    textField: {
-        minWidth: string;
-        width: string;
+    readonly textField: {
+        readonly minWidth: "250px";
+        readonly width: "33%";
     };
-    description: {
-        minWidth: string;
-        width: string;
+    readonly description: {
+        readonly minWidth: "250px";
+        readonly width: "50%";
     };
 };
 export interface FilterFormProps {

package/dist/components/filter/HeaderFilterForm.js

@@ -18,6 +18,9 @@ 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";
@@ -27,11 +30,8 @@ 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/ExpertFilterForm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { formatQuery } from "react-querybuilder";
+import { formatQuery } from "react-querybuilder/formatQuery";
 import { useFormContext, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { v4 } from "uuid";

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

@@ -12,3 +12,4 @@ export declare const queryValidator: QueryValidator;
 export declare const testQuery: (check: string, query: RuleGroupTypeAny) => boolean;
 export declare function getNumberOfSiblings(path: number[], query: RuleGroupTypeAny): number;
 export declare function recursiveRemove(query: RuleGroupTypeAny, path: number[]): RuleGroupTypeAny;
+export declare function getFilterEquipmentTypeLabel(equipmentType: string | undefined): string;

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

@@ -1,7 +1,7 @@
 import { defaultOperators, getParentPath, findPath, remove } from "react-querybuilder";
 import { validate } from "uuid";
 import { DataType } from "./expertFilter.type.js";
-import { OPERATOR_OPTIONS, RULES, FIELDS_OPTIONS } from "./expertFilterConstants.js";
+import { OPERATOR_OPTIONS, RULES, FIELDS_OPTIONS, EXPERT_FILTER_EQUIPMENTS } from "./expertFilterConstants.js";
 import { isBlankOrEmpty, convertOutputValue, convertInputValue } from "../../../utils/conversionUtils.js";
 import { FieldType } from "../../../utils/types/fieldType.js";
 const searchTree = (tree, key, value) => {
@@ -362,9 +362,17 @@ function recursiveRemove(query, path) {
   }
   return remove(query, path);
 }
+function getFilterEquipmentTypeLabel(equipmentType) {
+  var _a;
+  if (!equipmentType) {
+    return "";
+  }
+  return ((_a = EXPERT_FILTER_EQUIPMENTS[equipmentType]) == null ? void 0 : _a.label) ?? "";
+}
 export {
   countRules,
   exportExpertRules,
+  getFilterEquipmentTypeLabel,
   getNumberOfSiblings,
   getOperators,
   importExpertRules,

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

@@ -2,7 +2,7 @@ import { ExpertFilterEditionDialog } from "./ExpertFilterEditionDialog.js";
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData, rqbQuerySchemaValidator } from "./ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./expertFilter.type.js";
 import { COMBINATOR_OPTIONS, CONVERTERS_MODE_OPTIONS, ENERGY_SOURCE_OPTIONS, EXPERT_FILTER_EQUIPMENTS, EXPERT_FILTER_FIELDS, EXPERT_FILTER_QUERY, FIELDS_OPTIONS, LOAD_TYPE_OPTIONS, OPERATOR_OPTIONS, PHASE_REGULATION_MODE_OPTIONS, RATIO_REGULATION_MODE_OPTIONS, REGULATION_TYPE_OPTIONS, RULES, SHUNT_COMPENSATOR_TYPE_OPTIONS, SVAR_REGULATION_MODE_OPTIONS } from "./expertFilterConstants.js";
-import { countRules, exportExpertRules, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./expertFilterUtils.js";
+import { countRules, exportExpertRules, getFilterEquipmentTypeLabel, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./expertFilterUtils.js";
 export {
   COMBINATOR_OPTIONS,
   CONVERTERS_MODE_OPTIONS,
@@ -28,6 +28,7 @@ export {
   expertFilterSchema,
   exportExpertRules,
   getExpertFilterEmptyFormData,
+  getFilterEquipmentTypeLabel,
   getNumberOfSiblings,
   getOperators,
   importExpertRules,

package/dist/components/filter/index.js

@@ -7,7 +7,7 @@ import { ExpertFilterEditionDialog } from "./expert/ExpertFilterEditionDialog.js
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData, rqbQuerySchemaValidator } from "./expert/ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./expert/expertFilter.type.js";
 import { COMBINATOR_OPTIONS, CONVERTERS_MODE_OPTIONS, ENERGY_SOURCE_OPTIONS, EXPERT_FILTER_EQUIPMENTS, EXPERT_FILTER_FIELDS, EXPERT_FILTER_QUERY, FIELDS_OPTIONS, LOAD_TYPE_OPTIONS, OPERATOR_OPTIONS, PHASE_REGULATION_MODE_OPTIONS, RATIO_REGULATION_MODE_OPTIONS, REGULATION_TYPE_OPTIONS, RULES, SHUNT_COMPENSATOR_TYPE_OPTIONS, SVAR_REGULATION_MODE_OPTIONS } from "./expert/expertFilterConstants.js";
-import { countRules, exportExpertRules, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./expert/expertFilterUtils.js";
+import { countRules, exportExpertRules, getFilterEquipmentTypeLabel, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./expert/expertFilterUtils.js";
 import { ExplicitNamingFilterEditionDialog } from "./explicitNaming/ExplicitNamingFilterEditionDialog.js";
 import { ExplicitNamingFilterForm, explicitNamingFilterSchema, getExplicitNamingFilterEmptyFormData } from "./explicitNaming/ExplicitNamingFilterForm.js";
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./explicitNaming/ExplicitNamingFilterConstants.js";
@@ -53,6 +53,7 @@ export {
   getCriteriaBasedSchema,
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
+  getFilterEquipmentTypeLabel,
   getNumberOfSiblings,
   getOperators,
   importExpertRules,

package/dist/components/grid/grid-section.d.ts

@@ -1,8 +1,8 @@
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../utils/styles';
 export interface GridSectionProps {
     title: string;
     heading?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: number;
-    customStyle?: SxProps<Theme>;
+    customStyle?: SxStyle;
 }
 export default function GridSection({ title, heading, size, customStyle }: Readonly<GridSectionProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.js

@@ -19,6 +19,7 @@ import { ExportCsvButton } from "./csvDownloader/export-csv-button.js";
 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 { CustomMuiDialog, unscrollableDialogStyles } from "./dialogs/customMuiDialog/CustomMuiDialog.js";
 import { DescriptionModificationDialog } from "./dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import { ElementSaveDialog } from "./dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -44,7 +45,7 @@ import { ExpertFilterEditionDialog } from "./filter/expert/ExpertFilterEditionDi
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData, rqbQuerySchemaValidator } from "./filter/expert/ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./filter/expert/expertFilter.type.js";
 import { COMBINATOR_OPTIONS, CONVERTERS_MODE_OPTIONS, ENERGY_SOURCE_OPTIONS, EXPERT_FILTER_EQUIPMENTS, EXPERT_FILTER_FIELDS, EXPERT_FILTER_QUERY, FIELDS_OPTIONS, LOAD_TYPE_OPTIONS, OPERATOR_OPTIONS, PHASE_REGULATION_MODE_OPTIONS, RATIO_REGULATION_MODE_OPTIONS, REGULATION_TYPE_OPTIONS, RULES, SHUNT_COMPENSATOR_TYPE_OPTIONS, SVAR_REGULATION_MODE_OPTIONS } from "./filter/expert/expertFilterConstants.js";
-import { countRules, exportExpertRules, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./filter/expert/expertFilterUtils.js";
+import { countRules, exportExpertRules, getFilterEquipmentTypeLabel, getNumberOfSiblings, getOperators, importExpertRules, queryValidator, recursiveRemove, testQuery } from "./filter/expert/expertFilterUtils.js";
 import { ExplicitNamingFilterEditionDialog } from "./filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
 import { ExplicitNamingFilterForm, explicitNamingFilterSchema, getExplicitNamingFilterEmptyFormData } from "./filter/explicitNaming/ExplicitNamingFilterForm.js";
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./filter/explicitNaming/ExplicitNamingFilterConstants.js";
@@ -428,6 +429,7 @@ export {
   SensitivityAnalysisParametersDialog,
   SensitivityAnalysisParametersInline,
   SensitivityTable,
+  SeparatorCellRenderer,
   ShortCircuitParametersEditionDialog,
   ShortCircuitParametersInLine,
   SignInCallbackHandler,
@@ -487,6 +489,7 @@ export {
   getCriteriaBasedSchema,
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
+  getFilterEquipmentTypeLabel,
   getLimitReductionsFormSchema,
   getNumberOfSiblings,
   getOperators,

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

@@ -12,9 +12,10 @@ export interface DirectoryItemsInputProps {
     disable?: boolean;
     allowMultiSelect?: boolean;
     labelRequiredFromContext?: boolean;
+    equipmentColorsMap?: Map<string, string>;
 }
 export declare function DirectoryItemsInput({ 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, }: Readonly<DirectoryItemsInputProps>): import("react/jsx-runtime").JSX.Element;
+hideErrorMessage, onRowChanged, onChange, disable, allowMultiSelect, labelRequiredFromContext, equipmentColorsMap, }: Readonly<DirectoryItemsInputProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,29 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { FormControl, Chip, Grid, Tooltip, IconButton } from "@mui/material";
+import { FormControl, Box, Chip, FormHelperText, Grid, Tooltip, IconButton } from "@mui/material";
 import { Folder } from "@mui/icons-material";
 import { useState, useMemo, useCallback } from "react";
 import { useFieldArray, useController } from "react-hook-form";
-import { useIntl } from "react-intl";
+import { useIntl, FormattedMessage } from "react-intl";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 import { FieldLabel } from "./utils/FieldLabel.js";
-import { useCustomFormContext } from "./provider/useCustomFormContext.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 { 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 { mergeSx } from "../../../utils/styles.js";
 import { OverflowableText } from "../../overflowableText/OverflowableText.js";
-import { MidFormError } from "./errorManagement/MidFormError.js";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
-import { fetchDirectoryElementPath } from "../../../services/directory.js";
+import "../../../utils/conversionUtils.js";
+import { mergeSx } from "../../../utils/styles.js";
+import "../../../utils/yupConfig.js";
 import { NAME } from "./constants.js";
+import { getFilterEquipmentTypeLabel } from "../../filter/expert/expertFilterUtils.js";
 const styles = {
   formDirectoryElements1: {
     display: "flex",
@@ -59,7 +67,8 @@ function DirectoryItemsInput({
   onChange,
   disable = false,
   allowMultiSelect = true,
-  labelRequiredFromContext = true
+  labelRequiredFromContext = true,
+  equipmentColorsMap
 }) {
   const { snackError } = useSnackMessage();
   const intl = useIntl();
@@ -156,22 +165,42 @@ function DirectoryItemsInput({
               optional: labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())
             }
           ),
-          (elements == null ? void 0 : elements.length) > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => /* @__PURE__ */ jsx(
-            Chip,
-            {
-              size: "small",
-              onDelete: () => removeElements(index),
-              onClick: () => handleChipClick(index),
-              label: /* @__PURE__ */ jsx(
-                OverflowableText,
-                {
-                  text: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }),
-                  sx: { width: "100%" }
-                }
-              )
-            },
-            item.id
-          )) }),
+          (elements == null ? void 0 : elements.length) > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => {
+            var _a, _b, _c;
+            return /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      size: "small",
+                      sx: {
+                        backgroundColor: ((_a = item == null ? void 0 : item.specificMetadata) == null ? void 0 : _a.equipmentType) && (equipmentColorsMap == null ? void 0 : equipmentColorsMap.get((_b = item == null ? void 0 : item.specificMetadata) == null ? void 0 : _b.equipmentType))
+                      },
+                      onDelete: () => removeElements(index),
+                      onClick: () => handleChipClick(index),
+                      label: /* @__PURE__ */ jsx(
+                        OverflowableText,
+                        {
+                          text: getValues(`${name}.${index}.${NAME}`) ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
+                          sx: { width: "100%" }
+                        }
+                      )
+                    }
+                  ),
+                  equipmentColorsMap && /* @__PURE__ */ jsx(FormHelperText, { children: ((_c = item == null ? void 0 : item.specificMetadata) == null ? void 0 : _c.equipmentType) ? /* @__PURE__ */ jsx(
+                    FormattedMessage,
+                    {
+                      id: getFilterEquipmentTypeLabel(item.specificMetadata.equipmentType)
+                    }
+                  ) : "" })
+                ]
+              },
+              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,
             {

package/dist/components/inputs/reactHookForm/chip-items-input.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { FormControl, Chip, TextField } from "@mui/material";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useFieldArray, useController } from "react-hook-form";
 import "react-intl";
 import "../../../utils/types/equipmentType.js";
@@ -19,6 +19,26 @@ import { OverflowableText } from "../../overflowableText/OverflowableText.js";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 import { ErrorInput } from "./errorManagement/ErrorInput.js";
 import { MidFormError } from "./errorManagement/MidFormError.js";
+const styles = {
+  chipContainer: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    border: "2px solid lightgray",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  chipItem: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    marginTop: 0,
+    padding: 1,
+    overflow: "hidden"
+  }
+};
 function ChipItemsInput({ label, name, hideErrorMessage }) {
   const [textEntered, setTextEntered] = useState("");
   const { snackError } = useSnackMessage();
@@ -63,29 +83,13 @@ function ChipItemsInput({ label, name, hideErrorMessage }) {
   const handleChange = (e) => {
     setTextEntered(e.target.value);
   };
-  const styles = {
-    chipContainer: {
-      display: "flex",
-      gap: "8px",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      border: "2px solid lightgray",
-      borderRadius: "4px",
-      overflow: "hidden",
-      borderColor: (error == null ? void 0 : error.message) ? "error.main" : null
-    },
-    chipItem: {
-      display: "flex",
-      gap: "8px",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      marginTop: 0,
-      padding: 1,
-      overflow: "hidden"
-    }
-  };
+  const hasError = !!(error == null ? void 0 : error.message);
+  const containerStyle = useMemo(
+    () => ({ ...styles.chipContainer, borderColor: hasError ? "error.main" : null }),
+    [hasError]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FormControl, { sx: styles.chipContainer, error: !!(error == null ? void 0 : error.message), children: [
+    /* @__PURE__ */ jsxs(FormControl, { sx: containerStyle, error: hasError, children: [
       (elements == null ? void 0 : elements.length) === 0 && label && /* @__PURE__ */ jsx(FieldLabel, { label, optional: !isFieldRequired(name, validationSchema, getValues()) }),
       (elements == null ? void 0 : elements.length) > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.chipItem, children: elements.map((item, index) => /* @__PURE__ */ jsx(
         Chip,

package/dist/components/inputs/reactHookForm/text/DescriptionField.d.ts

@@ -1,5 +1,5 @@
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../../../utils/styles';
 export interface DescriptionFieldProps {
-    expandingTextSx?: SxProps<Theme>;
+    expandingTextSx?: SxStyle;
 }
 export declare function DescriptionField({ expandingTextSx }: Readonly<DescriptionFieldProps>): import("react/jsx-runtime").JSX.Element;