@gridsuite/commons-ui 0.239.0 → 0.240.0

package/README.md

@@ -25,11 +25,15 @@ The `npm start` command install the library's dependencies then launches the dem
 
 ##### Development Scripts
 
-- **`npm run type-check`** - Runs TypeScript type checking without emitting files. This ensures all developers use the project's local TypeScript version from `node_modules` rather than a potentially different globally-installed version. Run this to verify your code has no type errors before committing.
+Developers can use these scripts to perform check actions instead of executing local tsc, eslint, etc...
+This ensures all developers use the project's local tools version from `node_modules` rather than a potentially different globally-installed version.
 
+- **`npm run type-check`** - Runs TypeScript type checking without emitting files on the whole sources. Run this to check that your current dev is mainly correct.
+
+- **`npm run type-check:build`** - Runs TypeScript type checking with emitting files and only on the exported sources. This is what is executed by the CI, so you can use it before committing.
 - **`npm run build`** - Builds the library. Note: This automatically runs `npm run prebuild` first.
 
-- **`npm run prebuild`** - Runs linting and type checking before the build. This script is executed automatically by npm before `npm run build` and ensures that the build is not executed if linting or type checking fails. You don't need to call this manually unless you want to verify code quality without building.
+- **`npm run prebuild`** - Runs linting and type checking before the build (`npm run lint && npm run type-check:build`). This script is executed automatically by npm before `npm run build` and ensures that the build is not executed if linting or type checking fails. You don't need to call this manually unless you want to verify code quality without building.
 
 ##### Local Testing
 

package/dist/components/composite/agGridTable/cellEditors/numericEditor.d.ts

@@ -1,16 +1,21 @@
 import { CustomCellEditorProps } from 'ag-grid-react';
 import { SuppressKeyboardEventParams } from 'ag-grid-community';
+type NumericEditorProps = {
+    allowNegativeValues?: boolean;
+};
 /**
  * `suppressKeyboardEvent` callback to put on any column using {@link NumericEditor}.
  * Prevents ag-grid from starting an edit when a non-numeric printable key is pressed on a focused cell.
- * Numeric keys still start editing; keys pressed while already editing are left to the input's own onKeyDown handling.
+ * Numeric keys and decimal separators still start editing; if `allowNegativeValues` is true, the minus sign does too.
+ * Keys pressed while already editing are left to the input's own onKeyDown handling.
  */
 export declare const suppressNonNumericKeyboardEvent: (params: SuppressKeyboardEventParams) => boolean;
 /**
  * Custom numeric cell editor (see ag-grid custom cell editor docs:
  * https://www.ag-grid.com/react-data-grid/cell-editors/#custom-components).
  * Restricts typing to digits and decimal separators while keeping the raw text in the input,
- * and commits the value as a number (or null) via onValueChange.
+ * and commits the value as a number (or null) via onValueChange. The minus sign is accepted when
+ * `allowNegativeValues` is true.
  *
  * NB: the `eventKey`-driven logic below (seeding the initial value from the triggering key in the
  * useState/useEffect) only matters when editing is started by typing a character on a focused cell,
@@ -20,4 +25,5 @@ export declare const suppressNonNumericKeyboardEvent: (params: SuppressKeyboardE
  * Columns using this editor should also set `suppressKeyboardEvent: suppressNonNumericKeyboardEvent`
  * so that a non-numeric key on a focused cell doesn't start an edit.
  */
-export declare function NumericEditor({ value, onValueChange, eventKey }: CustomCellEditorProps): import("react").JSX.Element;
+export declare function NumericEditor({ value, onValueChange, eventKey, allowNegativeValues, }: CustomCellEditorProps & NumericEditorProps): import("react").JSX.Element;
+export {};

package/dist/components/composite/agGridTable/cellEditors/numericEditor.js

@@ -1,19 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { KeyCode } from "ag-grid-community";
-const isCharNumeric = (charStr) => !!charStr && /\d|,|\./.test(charStr);
-const suppressNonNumericKeyboardEvent = (params) => !params.editing && params.event.key.length === 1 && !isCharNumeric(params.event.key);
+const isCharNumeric = (charStr, allowNegativeValues = false) => !!charStr && (allowNegativeValues ? /^[\d,.-]$/.test(charStr) : /^[\d,.]$/.test(charStr));
+const suppressNonNumericKeyboardEvent = (params) => {
+  const allowNegativeValues = params.colDef.cellEditorParams?.allowNegativeValues === true;
+  return !params.editing && params.event.key.length === 1 && !isCharNumeric(params.event.key, allowNegativeValues);
+};
 const toNumber = (text) => {
   const result = Number.parseFloat(text.replace(",", "."));
   return Number.isNaN(result) ? null : result;
 };
-function NumericEditor({ value, onValueChange, eventKey }) {
+function NumericEditor({
+  value,
+  onValueChange,
+  eventKey,
+  allowNegativeValues = false
+}) {
   const refInput = useRef(null);
   const [text, setText] = useState(() => {
     if (eventKey === KeyCode.BACKSPACE) {
       return "";
     }
-    if (eventKey?.length === 1 && isCharNumeric(eventKey)) {
+    if (eventKey?.length === 1 && isCharNumeric(eventKey, allowNegativeValues)) {
       return eventKey;
     }
     return value == null ? "" : String(value);
@@ -27,7 +35,18 @@ function NumericEditor({ value, onValueChange, eventKey }) {
     onValueChange(toNumber(event.target.value));
   };
   const handleKeyDown = (event) => {
-    if (event.key.length === 1 && !isCharNumeric(event.key)) {
+    if (event.key === "-" && allowNegativeValues) {
+      const input = event.currentTarget;
+      const selectionStart = input.selectionStart ?? 0;
+      const selectionEnd = input.selectionEnd ?? 0;
+      const atStart = selectionStart === 0;
+      const keepsExistingMinus = input.value.includes("-") && !input.value.slice(selectionStart, selectionEnd).includes("-");
+      if (!atStart || keepsExistingMinus) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (event.key.length === 1 && !isCharNumeric(event.key, allowNegativeValues)) {
       event.preventDefault();
     }
   };

package/dist/components/composite/dnd-table/dnd-table-bottom-left-buttons.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { Upload, Replay } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
@@ -13,8 +13,8 @@ function DndTableBottomLeftButtons({
   disabled
 }) {
   const intl = useIntl();
-  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, xs: true, spacing: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, size: "grow", spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -31,7 +31,7 @@ function DndTableBottomLeftButtons({
         ) })
       }
     ) }),
-    withResetButton && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    withResetButton && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({

package/dist/components/composite/dnd-table/dnd-table-bottom-right-buttons.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { AddCircle, Delete, ArrowUpward, ArrowDownward } from "@mui/icons-material";
 import { useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
@@ -22,8 +22,8 @@ function DndTableBottomRightButtons({
   const noRowsSelected = currentRows ? !currentRows.some((row) => row[SELECTED]) : true;
   const firstRowSelected = noRowsSelected ? void 0 : currentRows[0]?.[SELECTED];
   const lastRowSelected = noRowsSelected ? void 0 : currentRows[currentRows.length - 1]?.[SELECTED];
-  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, xs: true, spacing: 1, sx: { justifyContent: "flex-end" }, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, size: "grow", spacing: 1, sx: { justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -40,7 +40,7 @@ function DndTableBottomRightButtons({
         ) })
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -58,7 +58,7 @@ function DndTableBottomRightButtons({
       }
     ) }),
     showMoveArrow && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         CustomTooltip,
         {
           title: intl.formatMessage({
@@ -75,7 +75,7 @@ function DndTableBottomRightButtons({
           ) })
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         CustomTooltip,
         {
           title: intl.formatMessage({

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { useState, useCallback, useRef, useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
-import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, IconButton, TableBody, Checkbox } from "@mui/material";
+import { Grid2, TableContainer, Table, TableHead, TableRow, TableCell, Box, IconButton, TableBody, Checkbox } from "@mui/material";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { useIntl } from "react-intl";
 import { AddCircle } from "@mui/icons-material";
@@ -316,8 +316,8 @@ function DndTable(props) {
       providedDroppable.placeholder
     ] });
   }
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, children: [
-    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, size: 12, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, children: [
       /* @__PURE__ */ jsx(DragDropContext, { onBeforeDragStart, onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
         TableContainer,
         {
@@ -335,7 +335,7 @@ function DndTable(props) {
       ) }) }),
       /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert })
     ] }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, children: [
       handleResetButton && handleUploadButton && resetButtonMessageId && uploadButtonMessageId ? /* @__PURE__ */ jsx(
         DndTableBottomLeftButtons,
         {

package/dist/components/composite/filter/HeaderFilterForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import * as yup from "yup";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { MAX_CHAR_DESCRIPTION } from "../../../utils/constants/uiConstants.js";
@@ -50,8 +50,8 @@ const HeaderFilterSchema = {
   [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, "descriptionLimitError")
 };
 function HeaderFilterForm({ creation, activeDirectory }) {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
       UniqueNameInput,
       {
         name: FieldConstants.NAME,
@@ -63,7 +63,7 @@ function HeaderFilterForm({ creation, activeDirectory }) {
         fullWidth: false
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) })
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) })
   ] });
 }
 export {

package/dist/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.d.ts

@@ -4,8 +4,8 @@ import { DISTRIBUTION_KEY } from '../constants/FilterConstants';
 import * as yup from 'yup';
 export declare const explicitNamingFilterSchema: {
     filterEquipmentsAttributes: yup.ArraySchema<{
-        distributionKey?: number | null | undefined;
         equipmentID?: string | null | undefined;
+        distributionKey?: number | null | undefined;
     }[] | undefined, yup.AnyObject, "", "">;
 };
 interface FilterTableRow {

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback, useState, useRef } from "react";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
-import { Grid2, Alert } from "@mui/material";
+import { Stack, Grid2, Alert } from "@mui/material";
 import { v4 } from "uuid";
 import * as yup from "yup";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -187,10 +187,8 @@ function ExplicitNamingFilterForm({
     );
   };
   return /* @__PURE__ */ jsxs(
-    Grid2,
+    Stack,
     {
-      container: true,
-      direction: "column",
       spacing: 2,
       padding: 1,
       sx: { flexGrow: 1, flexWrap: "nowrap", minHeight: 0 },

package/dist/components/composite/grid/grid-item.d.ts

@@ -1,8 +1,9 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { GridProps } from '@mui/material';
+import { Grid2Props } from '@mui/material';
 export interface GridItemProps extends PropsWithChildren {
-    size?: GridProps['xs'];
+    size?: Grid2Props['size'];
     alignItem?: string;
     tooltip?: ReactNode;
+    sx?: Grid2Props['sx'];
 }
-export default function GridItem({ children, size, alignItem, tooltip }: Readonly<GridItemProps>): import("react").JSX.Element;
+export declare function GridItem({ children, size, alignItem, tooltip, sx }: Readonly<GridItemProps>): import("react").JSX.Element;

package/dist/components/composite/grid/grid-item.js

@@ -1,9 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
-function GridItem({ children, size = 6, alignItem = "flex-start", tooltip }) {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: alignItem, children: children && (tooltip ? /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../../utils/styles.js";
+function GridItem({ children, size = 6, alignItem = "flex-start", tooltip, sx }) {
+  return /* @__PURE__ */ jsx(Grid2, { size, sx: mergeSx({ alignItems: alignItem }, sx), children: children && (tooltip ? /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
 }
 export {
-  GridItem as default
+  GridItem
 };

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

@@ -5,4 +5,4 @@ export interface GridSectionProps {
     size?: number;
     customStyle?: SxStyle;
 }
-export default function GridSection({ title, heading, size, customStyle }: Readonly<GridSectionProps>): import("react").JSX.Element;
+export declare function GridSection({ title, heading, size, customStyle }: Readonly<GridSectionProps>): import("react").JSX.Element;

package/dist/components/composite/grid/grid-section.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, Box } from "@mui/material";
+import { Grid2, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 function GridSection({ title, heading = 3, size = 12, customStyle }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: size, children: /* @__PURE__ */ jsx(Box, { sx: customStyle, component: `h${heading}`, children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }) });
+  return /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, size: 12, children: /* @__PURE__ */ jsx(Grid2, { size, children: /* @__PURE__ */ jsx(Box, { sx: customStyle, component: `h${heading}`, children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }) });
 }
 export {
-  GridSection as default
+  GridSection
 };

package/dist/components/composite/grid/index.js

@@ -1,3 +1,6 @@
-import "react/jsx-runtime";
-import "@mui/material";
-import "react-intl";
+import { GridItem } from "./grid-item.js";
+import { GridSection } from "./grid-section.js";
+export {
+  GridItem,
+  GridSection
+};

package/dist/components/composite/index.js

@@ -23,9 +23,8 @@ import { ExplicitNamingFilterForm, explicitNamingFilterSchema, getExplicitNaming
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./filter/explicitNaming/ExplicitNamingFilterConstants.js";
 import { saveExpertFilter, saveExplicitNamingFilter } from "./filter/utils/filterApi.js";
 import { CONTINGENCY_LIST_EQUIPMENTS, FILTER_EQUIPMENTS } from "./filter/utils/filterFormUtils.js";
-import "react/jsx-runtime";
-import "@mui/material";
-import "react-intl";
+import { GridItem } from "./grid/grid-item.js";
+import { GridSection } from "./grid/grid-section.js";
 import { OverflowableTableCell } from "./muiTable/OverflowableTableCell.js";
 import { OverflowableTableCellWithCheckbox } from "./muiTable/OverflowableTableCellWithCheckbox.js";
 import { AutocompleteWithFavorites } from "./reactQueryBuilder/AutocompleteWithFavorites.js";
@@ -136,6 +135,8 @@ export {
   FilterType,
   FlatParameters,
   GLOBAL_REPORT_NODE_LABEL,
+  GridItem,
+  GridSection,
   GroupValueEditor,
   LOAD_TYPE_OPTIONS,
   default2 as LogTable,

package/dist/components/composite/reactQueryBuilder/PropertyValueEditor.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { Grid, Autocomplete, TextField, FormControl, Select, MenuItem } from "@mui/material";
+import { Grid2, Autocomplete, TextField, FormControl, Select, MenuItem } from "@mui/material";
 import { useIntl } from "react-intl";
 import { useValid } from "./hooks/useValid.js";
 import { OPERATOR_OPTIONS } from "../filter/expert/expertFilterConstants.js";
@@ -46,8 +46,8 @@ function PropertyValueEditor(props) {
     },
     [valueEditorProps]
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, item: true, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         value: propertyName ?? "",
@@ -63,7 +63,7 @@ function PropertyValueEditor(props) {
         filterOptions: createCustomFilterOptions
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
       Select,
       {
         value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
@@ -76,7 +76,7 @@ function PropertyValueEditor(props) {
         children: PROPERTY_VALUE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, { value: operator.customName, children: intl.formatMessage({ id: operator.label }) }, operator.customName))
       }
     ) }) }),
-    valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.EXISTS.customName && valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.NOT_EXISTS.customName && /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+    valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.EXISTS.customName && valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.NOT_EXISTS.customName && /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         value: propertyValues ?? [],

package/dist/components/composite/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, createElement } from "react";
-import { Grid } from "@mui/material";
+import { Stack } from "@mui/material";
 import { RuleValueEditor } from "./RuleValueEditor.js";
 const styles = {
   group: (theme) => ({
@@ -29,7 +29,7 @@ function GroupValueEditor(props) {
     },
     [handleOnChange, combinator, value]
   );
-  return /* @__PURE__ */ jsx(Grid, { container: true, direction: "column", sx: styles.group, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, children: children && Object.values(children).map((fieldData) => /* @__PURE__ */ createElement(
+  return /* @__PURE__ */ jsx(Stack, { sx: styles.group, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, children: children && Object.values(children).map((fieldData) => /* @__PURE__ */ createElement(
     RuleValueEditor,
     {
       ...props,

package/dist/components/composite/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Select, MenuItem } from "@mui/material";
+import { Grid2, Typography, Select, MenuItem } from "@mui/material";
 import { useIntl } from "react-intl";
 const styles = {
   gridItem: {
@@ -32,9 +32,9 @@ function RuleValueEditor(props) {
       operator
     });
   };
-  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       Select,
       {
         value: operator,
@@ -46,7 +46,7 @@ function RuleValueEditor(props) {
         children: fieldData.operators?.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name))
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       ValueEditorControlElement,
       {
         ...props,

package/dist/components/index.js

@@ -100,9 +100,8 @@ import { ExplicitNamingFilterForm, explicitNamingFilterSchema, getExplicitNaming
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./composite/filter/explicitNaming/ExplicitNamingFilterConstants.js";
 import { saveExpertFilter, saveExplicitNamingFilter } from "./composite/filter/utils/filterApi.js";
 import { CONTINGENCY_LIST_EQUIPMENTS, FILTER_EQUIPMENTS } from "./composite/filter/utils/filterFormUtils.js";
-import "react/jsx-runtime";
-import "@mui/material";
-import "react-intl";
+import { GridItem } from "./composite/grid/grid-item.js";
+import { GridSection } from "./composite/grid/grid-section.js";
 import { OverflowableTableCell } from "./composite/muiTable/OverflowableTableCell.js";
 import { OverflowableTableCellWithCheckbox } from "./composite/muiTable/OverflowableTableCellWithCheckbox.js";
 import { AutocompleteWithFavorites } from "./composite/reactQueryBuilder/AutocompleteWithFavorites.js";
@@ -258,6 +257,8 @@ export {
   FlatParameters,
   FloatInput,
   GLOBAL_REPORT_NODE_LABEL,
+  GridItem,
+  GridSection,
   GroupValueEditor,
   HelperPreviousValue,
   InputWithPopupConfirmation,

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useState, useCallback, useEffect } from "react";
-import { Grid, Button, Typography, Box, CircularProgress } from "@mui/material";
+import { Stack, Grid2, Button, Typography, Box, CircularProgress } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -186,13 +186,13 @@ function ElementSaveDialog({
   );
   const renderChooser = () => {
     if (isCreateMode) {
-      return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryDialog" }) }) }),
+      return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+        /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryDialog" }) }) }),
         /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: destinationFolder ? destinationFolder.name : /* @__PURE__ */ jsx(CircularProgress, {}) }) })
       ] });
     }
-    return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryItemDialog" }) }) }),
+    return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryItemDialog" }) }) }),
       /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: selectedItem ? selectedItem.fullPath : null }) })
     ] });
   };
@@ -206,8 +206,8 @@ function ElementSaveDialog({
       disabledSave: disableSave,
       formContext: { ...formMethods, validationSchema: schema },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, marginTop: "auto", direction: "column", children: [
-          !createOnlyMode && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginTop: "auto", children: [
+          !createOnlyMode && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
             RadioInput,
             {
               name: FieldConstants.OPERATION_TYPE,
@@ -224,7 +224,7 @@ function ElementSaveDialog({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
             UniqueNameInput,
             {
               name: FieldConstants.NAME,
@@ -235,7 +235,7 @@ function ElementSaveDialog({
               autoFocus: true
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
+          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
           renderChooser()
         ] }),
         /* @__PURE__ */ jsx(

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Grid, Typography, Box, Button } from "@mui/material";
+import { Grid2, Typography, Box, Button } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useController } from "react-hook-form";
 import { FolderOutlined } from "@mui/icons-material";
@@ -47,14 +47,14 @@ function ModifyElementSelection(props) {
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       sx: {
         marginTop: "10px",
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+        /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
           /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightBold", display: "flex", justifyContent: "center", alignItems: "center", children: [
             /* @__PURE__ */ jsx(FolderOutlined, {}),
             /* @__PURE__ */ jsxs("span", { children: [

package/dist/components/ui/reactHookForm/errorManagement/FieldErrorAlert.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, Alert } from "@mui/material";
+import { Grid2, Alert } from "@mui/material";
 function FieldErrorAlert({ message }) {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: message }) });
+  return /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: message }) });
 }
 export {
   FieldErrorAlert

package/dist/components/ui/reactHookForm/expandableInput/DeletableRow.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { RestoreFromTrash, Delete } from "@mui/icons-material";
 import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 function DeletableRow({
@@ -14,17 +14,17 @@ function DeletableRow({
   const intl = useIntl();
   const [isMouseHover, setIsMouseHover] = useState(false);
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 2,
-      item: true,
+      size: 12,
       alignItems,
       onMouseEnter: () => setIsMouseHover(true),
       onMouseLeave: () => setIsMouseHover(false),
       children: [
         children,
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid2, { size: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
           CustomTooltip,
           {
             title: intl.formatMessage({

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useFieldArray } from "react-hook-form";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { forwardRef, useImperativeHandle } from "react";
 import { DeletableRow } from "./DeletableRow.js";
 import { ErrorInput } from "../errorManagement/ErrorInput.js";
@@ -40,8 +40,8 @@ const ExpandableInput = forwardRef(
       }),
       [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 }) }),
+    return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
       watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
         DeletableRow,
         {
@@ -58,7 +58,7 @@ const ExpandableInput = forwardRef(
         },
         value.id
       )),
-      addButtonLabel && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
+      addButtonLabel && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
     ] });
   }
 );