@gridsuite/commons-ui 0.296.0 → 0.297.0

package/dist/components/composite/agGridTable/BottomTableButtons.js

@@ -25,50 +25,62 @@ function BottomTableButtons({
   csvProps
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, paddingLeft: 1, alignItems: "center", spacing: 1, children: [
-      csvProps?.getTableData && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-        CsvDownloadButton,
-        {
-          data: csvProps.getTableData,
-          fileName: csvProps.fileName,
-          language: csvProps.language,
-          labelId: "DownloadCSV",
-          disabled: !csvProps.hasTableData,
-          withExportButton: true
-        }
-      ) }),
-      csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid, { children: csvProps.extraButtons }),
-      /* @__PURE__ */ jsxs(Grid, { sx: { marginLeft: "auto" }, children: [
-        /* @__PURE__ */ jsx(InnerColoredButton, { onClick: handleAddRow, "aria-label": "Add row", children: /* @__PURE__ */ jsx(ControlPoint, { "data-testid": "ControlPointIcon" }) }),
-        /* @__PURE__ */ jsx(
-          InnerColoredButton,
-          {
-            onClick: handleDeleteRows,
-            disabled: disableDelete,
-            "aria-label": "Delete selected rows",
-            children: /* @__PURE__ */ jsx(Delete, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InnerColoredButton,
-          {
-            disabled: disableUp,
-            onClick: handleMoveRowUp,
-            "aria-label": "Move selected rows up",
-            children: /* @__PURE__ */ jsx(ArrowCircleUp, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InnerColoredButton,
-          {
-            disabled: disableDown,
-            onClick: handleMoveRowDown,
-            "aria-label": "Move selected rows down",
-            children: /* @__PURE__ */ jsx(ArrowCircleDown, {})
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        container: true,
+        spacing: 1,
+        sx: {
+          paddingTop: 1,
+          paddingLeft: 1,
+          alignItems: "center"
+        },
+        children: [
+          csvProps?.getTableData && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+            CsvDownloadButton,
+            {
+              data: csvProps.getTableData,
+              fileName: csvProps.fileName,
+              language: csvProps.language,
+              labelId: "DownloadCSV",
+              disabled: !csvProps.hasTableData,
+              withExportButton: true
+            }
+          ) }),
+          csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid, { children: csvProps.extraButtons }),
+          /* @__PURE__ */ jsxs(Grid, { sx: { marginLeft: "auto" }, children: [
+            /* @__PURE__ */ jsx(InnerColoredButton, { onClick: handleAddRow, "aria-label": "Add row", children: /* @__PURE__ */ jsx(ControlPoint, { "data-testid": "ControlPointIcon" }) }),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                onClick: handleDeleteRows,
+                disabled: disableDelete,
+                "aria-label": "Delete selected rows",
+                children: /* @__PURE__ */ jsx(Delete, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                disabled: disableUp,
+                onClick: handleMoveRowUp,
+                "aria-label": "Move selected rows up",
+                children: /* @__PURE__ */ jsx(ArrowCircleUp, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                disabled: disableDown,
+                onClick: handleMoveRowDown,
+                "aria-label": "Move selected rows down",
+                children: /* @__PURE__ */ jsx(ArrowCircleDown, {})
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert }) })
   ] });
 }

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

@@ -23,29 +23,38 @@ 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(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,
-        {
-          value: selectedFilterComparator,
-          onChange: handleFilterComparatorChange,
-          options: comparators
-        }
-      ) }),
-      isComparatorWithoutValue && selectedFilterData !== void 0 && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearFilter, children: /* @__PURE__ */ jsx(Close, {}) })
-    ] }),
-    !isComparatorWithoutValue && /* @__PURE__ */ jsx(
-      CustomAggridTextFilter,
-      {
-        value: selectedFilterData,
-        onChange: handleFilterTextChange,
-        onClear: handleClearFilter,
-        isNumberInput,
-        decimalAfterDot
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      sx: {
+        gap: 0.8,
+        padding: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+            CustomAggridComparatorSelector,
+            {
+              value: selectedFilterComparator,
+              onChange: handleFilterComparatorChange,
+              options: comparators
+            }
+          ) }),
+          isComparatorWithoutValue && selectedFilterData !== void 0 && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearFilter, children: /* @__PURE__ */ jsx(Close, {}) })
+        ] }),
+        !isComparatorWithoutValue && /* @__PURE__ */ jsx(
+          CustomAggridTextFilter,
+          {
+            value: selectedFilterData,
+            onChange: handleFilterTextChange,
+            onClear: handleClearFilter,
+            isNumberInput,
+            decimalAfterDot
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   CustomAggridComparatorFilter

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

@@ -31,30 +31,38 @@ function CustomAggridTextFilter({
 }) {
   const intl = useIntl();
   const isRoundingDisplayed = useMemo(() => !!(isNumberInput && value), [isNumberInput, value]);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 0.2, children: [
-    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-      TextField,
-      {
-        size: "small",
-        fullWidth: true,
-        value: value || "",
-        onChange,
-        placeholder: intl.formatMessage({
-          id: "filter.filterOoo"
-        }),
-        sx: mergeSx(styles.input, isNumberInput ? styles.noArrows : void 0),
-        slotProps: {
-          input: {
-            endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "clear filter", onClick: onClear, edge: "end", size: "small", children: /* @__PURE__ */ jsx(Clear, {}) }) }) : null
-          },
-          htmlInput: {
-            type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      sx: {
+        gap: 0.2
+      },
+      children: [
+        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            value: value || "",
+            onChange,
+            placeholder: intl.formatMessage({
+              id: "filter.filterOoo"
+            }),
+            sx: mergeSx(styles.input, isNumberInput ? styles.noArrows : void 0),
+            slotProps: {
+              input: {
+                endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "clear filter", onClick: onClear, edge: "end", size: "small", children: /* @__PURE__ */ jsx(Clear, {}) }) }) : null
+              },
+              htmlInput: {
+                type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT
+              }
+            }
           }
-        }
-      }
-    ) }),
-    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
-  ] });
+        ) }),
+        isRoundingDisplayed && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
+      ]
+    }
+  );
 }
 export {
   CustomAggridTextFilter

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

@@ -54,55 +54,79 @@ function CustomHeaderComponent({
   const handleMouseLeave = useCallback(() => {
     setIsHoveringColumnHeader(false);
   }, []);
-  return /* @__PURE__ */ jsx(Grid, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", wrap: "nowrap", sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx(
-      Grid,
-      {
-        container: true,
-        sx: {
-          cursor: isSortable ? "pointer" : "default",
-          ...styles.titleContainer,
-          flex: forceDisplayFilterIcon ? "0 1 auto" : void 0
-        },
-        flexBasis: forceDisplayFilterIcon ? "auto" : "100%",
-        children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      wrap: "nowrap",
+      sx: {
+        alignItems: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
           Grid,
           {
             container: true,
             sx: {
-              overflow: "hidden",
-              minWidth: 0
+              flexBasis: forceDisplayFilterIcon ? "auto" : "100%",
+              cursor: isSortable ? "pointer" : "default",
+              ...styles.titleContainer,
+              flex: forceDisplayFilterIcon ? "0 1 auto" : void 0
             },
-            onClick: handleClickHeader,
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(Grid, { children: displayName }),
-              isInvalid && /* @__PURE__ */ jsx(Grid, { 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, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
-            ] })
+            children: /* @__PURE__ */ jsx(
+              Grid,
+              {
+                container: true,
+                sx: {
+                  overflow: "hidden",
+                  minWidth: 0
+                },
+                onClick: handleClickHeader,
+                children: /* @__PURE__ */ jsxs(
+                  Grid,
+                  {
+                    container: true,
+                    wrap: "nowrap",
+                    sx: [
+                      {
+                        alignItems: "center"
+                      },
+                      styles.displayName
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsx(Grid, { children: displayName }),
+                      isInvalid && /* @__PURE__ */ jsx(Grid, { 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, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
+                    ]
+                  }
+                )
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.actions, children: [
-      filterComponent && /* @__PURE__ */ jsx(
-        CustomAggridFilter,
-        {
-          filterComponent,
-          filterComponentParams: { ...filterComponentParams, colId: column.getId(), api },
-          isHoveringColumnHeader,
-          forceDisplayFilterIcon,
-          handleCloseFilter
-        }
-      ),
-      menu && /* @__PURE__ */ jsx(CustomMenu, { ...menu })
-    ] })
-  ] }) });
+        ),
+        /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.actions, children: [
+          filterComponent && /* @__PURE__ */ jsx(
+            CustomAggridFilter,
+            {
+              filterComponent,
+              filterComponentParams: { ...filterComponentParams, colId: column.getId(), api },
+              isHoveringColumnHeader,
+              forceDisplayFilterIcon,
+              handleCloseFilter
+            }
+          ),
+          menu && /* @__PURE__ */ jsx(CustomMenu, { ...menu })
+        ] })
+      ]
+    }
+  ) });
 }
 export {
   CustomHeaderComponent

package/dist/components/composite/elementSearch/elementSearchInput/ElementSearchInput.d.ts

@@ -1,10 +1,11 @@
-import { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
+import { AutocompleteProps, AutocompleteRenderInputParams, AutocompleteSlots } from '@mui/material';
 import { HTMLAttributes, ReactNode } from 'react';
 export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
     element: T;
     inputValue: string;
 };
-export interface ElementSearchInputProps<T> extends Pick<AutocompleteProps<T, false, boolean, true>, 'sx' | 'size' | 'loadingText' | 'loading' | 'disableClearable' | 'getOptionDisabled' | 'PaperComponent'> {
+export interface ElementSearchInputProps<T> extends Pick<AutocompleteProps<T, false, boolean, true>, 'sx' | 'size' | 'loadingText' | 'loading' | 'disableClearable' | 'getOptionDisabled'> {
+    PaperComponent?: AutocompleteSlots['paper'];
     searchTerm: string;
     onSearchTermChange: (searchTerm: string) => void;
     onSelectionChange: (selection: T) => void;

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

@@ -182,8 +182,12 @@ function ExplicitNamingFilterForm({
     Stack,
     {
       spacing: 2,
-      padding: 1,
-      sx: { flexGrow: 1, flexWrap: "nowrap", minHeight: 0 },
+      sx: {
+        padding: 1,
+        flexGrow: 1,
+        flexWrap: "nowrap",
+        minHeight: 0
+      },
       children: [
         /* @__PURE__ */ jsxs(Grid, { children: [
           /* @__PURE__ */ jsx(
@@ -215,32 +219,43 @@ function ExplicitNamingFilterForm({
           )
         ] }),
         watchEquipmentType && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, justifyContent: "space-between", alignItems: "center", children: [
-            /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-              CsvDownloadButton,
-              {
-                data: getTemplateData,
-                fileName: intl.formatMessage({ id: "filterCsvFileName" }),
-                language,
-                labelId: "GenerateCSV",
-                variant: "contained"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
-              CsvPicker,
-              {
-                label: "UploadCSV",
-                requiredColumns: csvFileHeaders,
-                language: language ?? LANG_SYSTEM,
-                selectedFile,
-                onFileChange: setSelectedFile,
-                onFileError: setFileErrorMessage,
-                getTableData: () => getValues(FILTER_EQUIPMENTS_ATTRIBUTES),
-                onAppend: (results) => tableRef.current?.append(getDataFromCsvFile(results.data)),
-                onReplace: (results) => tableRef.current?.replace(getDataFromCsvFile(results.data))
-              }
-            ) })
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              container: true,
+              spacing: 2,
+              sx: {
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+                  CsvDownloadButton,
+                  {
+                    data: getTemplateData,
+                    fileName: intl.formatMessage({ id: "filterCsvFileName" }),
+                    language,
+                    labelId: "GenerateCSV",
+                    variant: "contained"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+                  CsvPicker,
+                  {
+                    label: "UploadCSV",
+                    requiredColumns: csvFileHeaders,
+                    language: language ?? LANG_SYSTEM,
+                    selectedFile,
+                    onFileChange: setSelectedFile,
+                    onFileError: setFileErrorMessage,
+                    getTableData: () => getValues(FILTER_EQUIPMENTS_ATTRIBUTES),
+                    onAppend: (results) => tableRef.current?.append(getDataFromCsvFile(results.data)),
+                    onReplace: (results) => tableRef.current?.replace(getDataFromCsvFile(results.data))
+                  }
+                ) })
+              ]
+            }
+          ),
           fileErrorMessage && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
           /* @__PURE__ */ jsx(Grid, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
             CustomAgGridTable,

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

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import { createReactDnDAdapter, QueryBuilderDnD } from "@react-querybuilder/dnd";
+import { QueryBuilderDnD } from "@react-querybuilder/dnd";
 import * as ReactDnD from "react-dnd";
 import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
 import { QueryBuilderMaterial } from "@react-querybuilder/material";
@@ -8,7 +8,7 @@ import { defaultTranslations, QueryBuilder } from "react-querybuilder";
 import { formatQuery } from "react-querybuilder/formatQuery";
 import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
-import { useCallback, useState, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { CombinatorSelector } from "./CombinatorSelector.js";
 import { AddButton } from "./AddButton.js";
 import { ValueEditor } from "./ValueEditor.js";
@@ -38,6 +38,7 @@ const customTranslations = {
   value: { title: "" },
   combinators: { title: "" }
 };
+const dnd = { ...ReactDnD, ...ReactDndHtml5Backend };
 const controlElements = {
   addRuleAction: RuleAddButton,
   addGroupAction: GroupAddButton,
@@ -77,10 +78,6 @@ function CustomReactQueryBuilder(props) {
     },
     [getValues, setValue, isSubmitted, name]
   );
-  const [dnd, setDnd] = useState(() => createReactDnDAdapter({ ...ReactDnD, ...ReactDndHtml5Backend }));
-  const resetDnd = useCallback(() => {
-    setDnd(createReactDnDAdapter({ ...ReactDnD, ...ReactDndHtml5Backend }));
-  }, [setDnd]);
   const combinators = useMemo(() => {
     return Object.values(COMBINATOR_OPTIONS).map((c) => ({
       name: c.name,
@@ -88,7 +85,7 @@ function CustomReactQueryBuilder(props) {
     }));
   }, [intl]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(QueryBuilderMaterial, { children: /* @__PURE__ */ jsx(QueryBuilderDnD, { dnd, onRuleDrop: resetDnd, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(QueryBuilderMaterial, { children: /* @__PURE__ */ jsx(QueryBuilderDnD, { dnd, children: /* @__PURE__ */ jsx(
       QueryBuilder,
       {
         fields,

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

@@ -5,9 +5,11 @@ const ITEM_HEIGHT = 32;
 const ITEM_PADDING = 4;
 const ITEMS_COUNT = 10;
 const MenuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: (ITEM_HEIGHT + ITEM_PADDING) * ITEMS_COUNT + ITEM_PADDING
+  slotProps: {
+    paper: {
+      style: {
+        maxHeight: (ITEM_HEIGHT + ITEM_PADDING) * ITEMS_COUNT + ITEM_PADDING
+      }
     }
   }
 };

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

@@ -46,61 +46,72 @@ function PropertyValueEditor(props) {
     },
     [valueEditorProps]
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, width: "100%", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
-      Autocomplete,
-      {
-        value: propertyName ?? "",
-        options: predefinedNames,
-        freeSolo: true,
-        autoSelect: true,
-        forcePopupIcon: true,
-        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
-        onChange: (event, value) => {
-          onChange(FieldConstants.PROPERTY_NAME, value);
-        },
-        size: "small",
-        filterOptions: createCustomFilterOptions
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
-      Select,
-      {
-        value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
-        size: "small",
-        title: valueEditorProps?.title,
-        error: !valid,
-        onChange: (event) => {
-          onChange(FieldConstants.PROPERTY_OPERATOR, event.target.value);
-        },
-        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, { size: "grow", children: /* @__PURE__ */ jsx(
-      Autocomplete,
-      {
-        value: propertyValues ?? [],
-        options: predefinedValues ?? [],
-        title: valueEditorProps?.title,
-        multiple: true,
-        renderInput: (params) => /* @__PURE__ */ jsx(
-          TextField,
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      spacing: 1,
+      sx: {
+        width: "100%",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
+          Autocomplete,
           {
-            ...params,
+            value: propertyName ?? "",
+            options: predefinedNames,
+            freeSolo: true,
+            autoSelect: true,
+            forcePopupIcon: true,
+            renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
+            onChange: (event, value) => {
+              onChange(FieldConstants.PROPERTY_NAME, value);
+            },
+            size: "small",
+            filterOptions: createCustomFilterOptions
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
+            size: "small",
+            title: valueEditorProps?.title,
             error: !valid,
-            placeholder: propertyValues?.length > 0 ? "" : intl.formatMessage({ id: "valuesList" })
+            onChange: (event) => {
+              onChange(FieldConstants.PROPERTY_OPERATOR, event.target.value);
+            },
+            children: PROPERTY_VALUE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, { value: operator.customName, children: intl.formatMessage({ id: operator.label }) }, operator.customName))
           }
-        ),
-        freeSolo: true,
-        autoSelect: true,
-        onChange: (event, value) => {
-          onChange(FieldConstants.PROPERTY_VALUES, value);
-        },
-        size: "small",
-        filterOptions: createCustomFilterOptions
-      }
-    ) })
-  ] });
+        ) }) }),
+        valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.EXISTS.customName && valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.NOT_EXISTS.customName && /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            value: propertyValues ?? [],
+            options: predefinedValues ?? [],
+            title: valueEditorProps?.title,
+            multiple: true,
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                error: !valid,
+                placeholder: propertyValues?.length > 0 ? "" : intl.formatMessage({ id: "valuesList" })
+              }
+            ),
+            freeSolo: true,
+            autoSelect: true,
+            onChange: (event, value) => {
+              onChange(FieldConstants.PROPERTY_VALUES, value);
+            },
+            size: "small",
+            filterOptions: createCustomFilterOptions
+          }
+        ) })
+      ]
+    }
+  );
 }
 export {
   PropertyValueEditor