@gridsuite/commons-ui 0.239.0 → 0.241.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/customAGGrid/custom-aggrid-filters/custom-aggrid-comparator-filter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Stack, IconButton } from "@mui/material";
 import { Close } from "@mui/icons-material";
 import { CustomAggridComparatorSelector } from "./custom-aggrid-comparator-selector.js";
 import { CustomAggridTextFilter } from "./custom-aggrid-text-filter.js";
@@ -23,7 +23,7 @@ function CustomAggridComparatorFilter({ colId, filterParams }) {
     // used for text filter as a UI type (examples: contains, startsWith..)
   } = filterParams;
   const isComparatorWithoutValue = selectedFilterComparator === FilterTextComparators.IS_EMPTY || selectedFilterComparator === FilterTextComparators.IS_NOT_EMPTY;
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", gap: 0.8, sx: { padding: "8px" }, children: [
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0.8, sx: { padding: "8px" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
       /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
         CustomAggridComparatorSelector,

package/dist/components/composite/customAGGrid/custom-aggrid-filters/custom-aggrid-text-filter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Grid, TextField, InputAdornment, IconButton } from "@mui/material";
+import { Stack, Grid2, TextField, InputAdornment, IconButton } from "@mui/material";
 import { Clear } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import "../../../../utils/conversionUtils.js";
@@ -31,8 +31,8 @@ function CustomAggridTextFilter({
 }) {
   const intl = useIntl();
   const isRoundingDisplayed = useMemo(() => !!(isNumberInput && value), [isNumberInput, value]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", gap: 0.2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0.2, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
@@ -51,7 +51,7 @@ function CustomAggridTextFilter({
         }
       }
     ) }),
-    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
+    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
   ] });
 }
 export {

package/dist/components/composite/customAGGrid/custom-aggrid-filters/custom-filter-icon.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, IconButton, Badge } from "@mui/material";
+import { Grid2, IconButton, Badge } from "@mui/material";
 import { FilterAlt } from "@mui/icons-material";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -15,7 +15,7 @@ function CustomFilterIcon({
   selectedFilterComparator
 }) {
   const isFilterActive = selectedFilterData !== void 0 && selectedFilterData !== null && (isNonEmptyStringOrArray(selectedFilterData) || selectedFilterComparator === FilterTextComparators.IS_EMPTY || selectedFilterComparator === FilterTextComparators.IS_NOT_EMPTY);
-  return /* @__PURE__ */ jsx(Grid, { item: true, sx: styles.gridRoot, children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleShowFilter, children: /* @__PURE__ */ jsx(Badge, { color: "secondary", variant: isFilterActive ? "dot" : void 0, invisible: !isFilterActive, children: /* @__PURE__ */ jsx(FilterAlt, { sx: styles.iconSize }) }) }) }) });
+  return /* @__PURE__ */ jsx(Grid2, { sx: styles.gridRoot, children: /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleShowFilter, children: /* @__PURE__ */ jsx(Badge, { color: "secondary", variant: isFilterActive ? "dot" : void 0, invisible: !isFilterActive, children: /* @__PURE__ */ jsx(FilterAlt, { sx: styles.iconSize }) }) }) }) });
 }
 export {
   CustomFilterIcon

package/dist/components/composite/customAGGrid/custom-aggrid-header.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid, Tooltip } from "@mui/material";
+import { Grid2, Tooltip } from "@mui/material";
 import { WarningAmber } from "@mui/icons-material";
 import { CustomAggridSort } from "./custom-aggrid-sort.js";
 import { CustomMenu } from "./custom-aggrid-menu.js";
@@ -9,13 +9,23 @@ import { useCustomAggridSort } from "./hooks/use-custom-aggrid-sort.js";
 import { CustomAggridFilter } from "./custom-aggrid-filters/custom-aggrid-filter.js";
 const styles = {
   displayName: {
+    minWidth: 0,
     overflow: "hidden",
-    textOverflow: "ellipsis"
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
   invalidIcon: {
     display: "flex",
     alignItems: "center",
     ml: 0.5
+  },
+  titleContainer: {
+    minWidth: 0
+  },
+  actions: {
+    flex: "0 0 auto",
+    flexWrap: "nowrap",
+    alignItems: "center"
   }
 };
 function CustomHeaderComponent({
@@ -44,39 +54,42 @@ function CustomHeaderComponent({
   const handleMouseLeave = useCallback(() => {
     setIsHoveringColumnHeader(false);
   }, []);
-  return /* @__PURE__ */ jsx(Grid, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", wrap: "nowrap", children: [
+  return /* @__PURE__ */ jsx(Grid2, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", wrap: "nowrap", sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(
-      Grid,
+      Grid2,
       {
         container: true,
         sx: {
-          cursor: isSortable ? "pointer" : "default"
+          cursor: isSortable ? "pointer" : "default",
+          ...styles.titleContainer,
+          flex: forceDisplayFilterIcon ? "0 1 auto" : void 0
         },
-        flexBasis: forceDisplayFilterIcon ? "0%" : "100%",
+        flexBasis: forceDisplayFilterIcon ? "auto" : "100%",
         children: /* @__PURE__ */ jsx(
-          Grid,
+          Grid2,
           {
             container: true,
             sx: {
-              overflow: "hidden"
+              overflow: "hidden",
+              minWidth: 0
             },
             onClick: handleClickHeader,
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(Grid, { item: true, children: displayName }),
-              isInvalid && /* @__PURE__ */ jsx(Grid, { item: true, sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(Grid2, { children: displayName }),
+              isInvalid && /* @__PURE__ */ jsx(Grid2, { sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
                 Tooltip,
                 {
                   title: /* @__PURE__ */ jsx(FormattedMessage, { id: "spreadsheet/column/invalid-without-loadflow" }),
                   children: /* @__PURE__ */ jsx(WarningAmber, { fontSize: "small", color: "warning" })
                 }
               ) }),
-              sortParams && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
+              sortParams && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
             ] })
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, flex: "1", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.actions, children: [
       filterComponent && /* @__PURE__ */ jsx(
         CustomAggridFilter,
         {

package/dist/components/composite/customAGGrid/custom-aggrid-menu.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Grid, IconButton, Badge } from "@mui/material";
+import { Grid2, IconButton, Badge } from "@mui/material";
 import { MoreVert } from "@mui/icons-material";
 const styles = {
   iconSize: {
@@ -11,7 +11,7 @@ function CustomMenu({ Menu, menuParams }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const menuButtonRef = useRef(null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, direction: "row", children: /* @__PURE__ */ jsx(IconButton, { ref: menuButtonRef, size: "small", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Badge, { color: "secondary", children: /* @__PURE__ */ jsx(MoreVert, { sx: styles.iconSize }) }) }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, direction: "row", children: /* @__PURE__ */ jsx(IconButton, { ref: menuButtonRef, size: "small", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Badge, { color: "secondary", children: /* @__PURE__ */ jsx(MoreVert, { sx: styles.iconSize }) }) }) }),
     /* @__PURE__ */ jsx(Menu, { open: menuOpen, onClose: () => setMenuOpen(false), anchorEl: menuButtonRef.current, ...menuParams })
   ] });
 }

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, sx: { width: "100%" }, 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,