@gridsuite/commons-ui 0.296.0 → 0.297.0

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

@@ -29,17 +29,30 @@ function GroupValueEditor(props) {
     },
     [handleOnChange, combinator, value]
   );
-  return /* @__PURE__ */ jsx(Stack, { sx: styles.group, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, children: children && Object.values(children).map((fieldData) => /* @__PURE__ */ createElement(
-    RuleValueEditor,
+  return /* @__PURE__ */ jsx(
+    Stack,
     {
-      ...props,
-      key: fieldData.name,
-      field: fieldData.name,
-      fieldData,
-      rule: value?.rules?.[fieldData.name],
-      handleOnChangeRule: generateOnChangeRuleHandler(fieldData.name)
+      sx: [
+        {
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingBottom: 1
+        },
+        styles.group
+      ],
+      children: children && Object.values(children).map((fieldData) => /* @__PURE__ */ createElement(
+        RuleValueEditor,
+        {
+          ...props,
+          key: fieldData.name,
+          field: fieldData.name,
+          fieldData,
+          rule: value?.rules?.[fieldData.name],
+          handleOnChangeRule: generateOnChangeRuleHandler(fieldData.name)
+        }
+      ))
     }
-  )) });
+  );
 }
 export {
   GroupValueEditor

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

@@ -32,30 +32,65 @@ function RuleValueEditor(props) {
       operator
     });
   };
-  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, size: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
-      Select,
-      {
-        value: operator,
-        size: "small",
-        onChange: (event) => {
-          handleOnChangeOperator(event.target.value);
-        },
-        variant: "standard",
-        children: fieldData.operators?.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name))
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, size: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
-      ValueEditorControlElement,
-      {
-        ...props,
-        operator,
-        handleOnChange: handleOnChangeValue,
-        value: rule?.value
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      sx: {
+        paddingTop: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            container: true,
+            size: 2.5,
+            sx: [
+              {
+                paddingLeft: 1
+              },
+              styles.gridItem
+            ],
+            children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: operator,
+                size: "small",
+                onChange: (event) => {
+                  handleOnChangeOperator(event.target.value);
+                },
+                variant: "standard",
+                children: fieldData.operators?.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            container: true,
+            size: 5.5,
+            sx: [
+              {
+                paddingLeft: 1
+              },
+              styles.gridItem
+            ],
+            children: /* @__PURE__ */ jsx(
+              ValueEditorControlElement,
+              {
+                ...props,
+                operator,
+                handleOnChange: handleOnChangeValue,
+                value: rule?.value
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   RuleValueEditor

package/dist/components/ui/csvPicker/csv-picker.js

@@ -74,18 +74,30 @@ function CsvPicker({
           ...parseConfig
         },
         onUploadAccepted: handleUploadAccepted,
-        children: ({ getRootProps }) => /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "center", justifyContent: "right", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Tooltip, { title: selectedFile?.name, children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", overflow: "hidden", textOverflow: "ellipsis" }, children: selectedFile ? selectedFile.name : /* @__PURE__ */ jsx(FormattedMessage, { id: "uploadMessage" }) }) }) }),
-          /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              ...getRootProps(),
-              variant: selectedFile ? "contained" : "text",
-              disabled,
-              children: /* @__PURE__ */ jsx(FormattedMessage, { id: label })
-            }
-          ) })
-        ] })
+        children: ({ getRootProps }) => /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            container: true,
+            spacing: 1,
+            wrap: "nowrap",
+            sx: {
+              alignItems: "center",
+              justifyContent: "right"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Tooltip, { title: selectedFile?.name, children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", overflow: "hidden", textOverflow: "ellipsis" }, children: selectedFile ? selectedFile.name : /* @__PURE__ */ jsx(FormattedMessage, { id: "uploadMessage" }) }) }) }),
+              /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...getRootProps(),
+                  variant: selectedFile ? "contained" : "text",
+                  disabled,
+                  children: /* @__PURE__ */ jsx(FormattedMessage, { id: label })
+                }
+              ) })
+            ]
+          }
+        )
       }
     ),
     onAppend && onReplace && /* @__PURE__ */ jsx(

package/dist/components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js

@@ -57,15 +57,23 @@ function DescriptionModificationDialog({
       onSave: onSubmit,
       formContext: { ...methods, validationSchema: schema, removeOptional: true },
       titleId: "description",
-      children: /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
-        ExpandingTextField,
+      children: /* @__PURE__ */ jsx(
+        Box,
         {
-          name: FieldConstants.DESCRIPTION,
-          label: "descriptionProperty",
-          minRows: 3,
-          rows: 3
+          sx: {
+            paddingTop: 1
+          },
+          children: /* @__PURE__ */ jsx(
+            ExpandingTextField,
+            {
+              name: FieldConstants.DESCRIPTION,
+              label: "descriptionProperty",
+              minRows: 3,
+              rows: 3
+            }
+          )
         }
-      ) })
+      )
     }
   );
 }

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

@@ -201,12 +201,46 @@ function ElementSaveDialog({
     if (isCreateMode) {
       return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
         /* @__PURE__ */ jsx(Grid, { 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, {}) }) })
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              m: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  fontWeight: "fontWeightBold"
+                },
+                children: destinationFolder ? destinationFolder.name : /* @__PURE__ */ jsx(CircularProgress, {})
+              }
+            )
+          }
+        )
       ] });
     }
     return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
       /* @__PURE__ */ jsx(Grid, { 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 }) })
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "span",
+          sx: {
+            m: 1
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                fontWeight: "fontWeightBold"
+              },
+              children: selectedItem ? selectedItem.fullPath : null
+            }
+          )
+        }
+      )
     ] });
   };
   return /* @__PURE__ */ jsxs(
@@ -219,45 +253,54 @@ function ElementSaveDialog({
       disabledSave: disableSave,
       formContext: { ...formMethods, validationSchema: schema },
       children: [
-        /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginTop: "auto", children: [
-          !createOnlyMode && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-            RadioInput,
-            {
-              name: FieldConstants.OPERATION_TYPE,
-              options: [
-                { id: "CREATE", label: createLabelId ?? "createLabelId" },
-                ...onSaveShared ? [
-                  {
-                    id: "CREATE_SHARED",
-                    label: createSharedLabelId ?? "createSharedLabelId",
-                    disabled: createSharedDisabled
-                  }
-                ] : [],
-                { id: "UPDATE", label: updateLabelId ?? "updateLabelId" }
-              ],
-              formProps: {
-                sx: {
-                  "& .MuiFormControlLabel-root": {
-                    marginRight: onSaveShared ? 4 : 15
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            spacing: 2,
+            sx: {
+              marginTop: "auto"
+            },
+            children: [
+              !createOnlyMode && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+                RadioInput,
+                {
+                  name: FieldConstants.OPERATION_TYPE,
+                  options: [
+                    { id: "CREATE", label: createLabelId ?? "createLabelId" },
+                    ...onSaveShared ? [
+                      {
+                        id: "CREATE_SHARED",
+                        label: createSharedLabelId ?? "createSharedLabelId",
+                        disabled: createSharedDisabled
+                      }
+                    ] : [],
+                    { id: "UPDATE", label: updateLabelId ?? "updateLabelId" }
+                  ],
+                  formProps: {
+                    sx: {
+                      "& .MuiFormControlLabel-root": {
+                        marginRight: onSaveShared ? 4 : 15
+                      }
+                    }
                   }
                 }
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-            UniqueNameInput,
-            {
-              name: FieldConstants.NAME,
-              label: "name",
-              elementType: type,
-              currentName: !isCreateMode ? selectedItem?.name : void 0,
-              activeDirectory: isCreateMode ? destinationFolder?.id : selectedItem?.parentFolderId,
-              autoFocus: true
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
-          renderChooser()
-        ] }),
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+                UniqueNameInput,
+                {
+                  name: FieldConstants.NAME,
+                  label: "name",
+                  elementType: type,
+                  currentName: !isCreateMode ? selectedItem?.name : void 0,
+                  activeDirectory: isCreateMode ? destinationFolder?.id : selectedItem?.parentFolderId,
+                  autoFocus: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
+              renderChooser()
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           DirectoryItemSelector,
           {

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

@@ -55,15 +55,35 @@ function ModifyElementSelection(props) {
       },
       children: [
         /* @__PURE__ */ jsxs(Grid, { 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: [
-              " ",
-              activeDirectoryName || (props?.noElementMessageLabel ? intl.formatMessage({
-                id: noElementMessageLabel
-              }) : "")
-            ] })
-          ] }) }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: {
+                m: 1
+              },
+              children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    fontWeight: "fontWeightBold",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(FolderOutlined, {}),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      " ",
+                      activeDirectoryName || (props?.noElementMessageLabel ? intl.formatMessage({
+                        id: noElementMessageLabel
+                      }) : "")
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsx(Button, { onClick: handleSelectFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: dialogOpeningButtonLabel }) })
         ] }),
         /* @__PURE__ */ jsx(

package/dist/components/ui/dialogs/name-element-editor/name-element-editor-form.js

@@ -12,21 +12,30 @@ function NameElementEditorForm({
   activeDirectory,
   elementType
 }) {
-  return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginBottom: "8px", children: [
-    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
-      UniqueNameInput,
-      {
-        name: FieldConstants.NAME,
-        currentName: initialElementName,
-        label: "nameProperty",
-        elementType,
-        activeDirectory,
-        sx: elementEditionStyles.textField,
-        fullWidth: false
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: elementEditionStyles.description }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: 2,
+      sx: {
+        marginBottom: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+          UniqueNameInput,
+          {
+            name: FieldConstants.NAME,
+            currentName: initialElementName,
+            label: "nameProperty",
+            elementType,
+            activeDirectory,
+            sx: elementEditionStyles.textField,
+            fullWidth: false
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: elementEditionStyles.description }) })
+      ]
+    }
+  ) });
 }
 export {
   NameElementEditorForm

package/dist/components/ui/inputs/ActivableChip.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Chip } from "@mui/material";
-import { CheckCircleOutline, Cancel } from "@mui/icons-material";
+import { CheckCircleOutlined, Cancel } from "@mui/icons-material";
 import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 function ActivableChip(props) {
   const { isActivated, label, tooltipMessage, onClick, isDisabled } = props;
@@ -8,7 +8,7 @@ function ActivableChip(props) {
     Chip,
     {
       label,
-      deleteIcon: isActivated ? /* @__PURE__ */ jsx(CheckCircleOutline, {}) : /* @__PURE__ */ jsx(Cancel, {}),
+      deleteIcon: isActivated ? /* @__PURE__ */ jsx(CheckCircleOutlined, {}) : /* @__PURE__ */ jsx(Cancel, {}),
       color: "primary",
       size: "small",
       variant: isActivated ? "filled" : "outlined",

package/dist/components/ui/inputs/SelectClearable.js

@@ -19,17 +19,18 @@ function SelectClearable(props) {
       getOptionLabel: (option) => {
         return option.label ? intl.formatMessage({ id: option.label }) : option.id;
       },
-      renderInput: ({ inputProps, ...otherParams }) => /* @__PURE__ */ jsx(
+      renderInput: (params) => /* @__PURE__ */ jsx(
         TextField,
         {
-          ...otherParams,
+          ...params,
           ...label && {
             label: FieldLabel({
               label
             })
           },
           slotProps: {
-            htmlInput: { ...inputProps, readOnly: true }
+            ...params.slotProps,
+            htmlInput: { ...params.slotProps.htmlInput, readOnly: true }
           }
         }
       ),

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

@@ -236,8 +236,8 @@ function DirectoryItemsInput({
                   Typography,
                   {
                     variant: "body2",
-                    color: "text.secondary",
                     sx: {
+                      color: "text.secondary",
                       whiteSpace: "nowrap"
                     },
                     children: intl.formatMessage({ id: "importElements" })

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

@@ -2,23 +2,34 @@ import { jsx } from "react/jsx-runtime";
 import { Box, Chip } from "@mui/material";
 import { OverflowableText } from "../overflowableText/OverflowableText.js";
 function OverflowableChip({ label, boxSx, ...otherProps }) {
-  return /* @__PURE__ */ jsx(Box, { padding: "3px", sx: { cursor: "default", ...boxSx }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-    Chip,
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      size: "small",
-      label: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: /* @__PURE__ */ jsx(
-        OverflowableText,
+      onClick: (e) => e.stopPropagation(),
+      sx: {
+        padding: "3px",
+        cursor: "default",
+        ...boxSx
+      },
+      children: /* @__PURE__ */ jsx(
+        Chip,
         {
-          text: label,
-          sx: {
-            maxWidth: "20ch",
-            marginX: "auto"
-          }
+          size: "small",
+          label: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: /* @__PURE__ */ jsx(
+            OverflowableText,
+            {
+              text: label,
+              sx: {
+                maxWidth: "20ch",
+                marginX: "auto"
+              }
+            }
+          ) }),
+          ...otherProps
         }
-      ) }),
-      ...otherProps
+      )
     }
-  ) });
+  );
 }
 export {
   OverflowableChip

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

@@ -13,11 +13,16 @@ function OverflowableChipWithHelperText({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      display: "flex",
-      alignItems: "left",
-      flexDirection: "column",
-      sx: mergeSx({ cursor: "default" }, boxSx),
       onClick: (e) => e.stopPropagation(),
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "left",
+          flexDirection: "column"
+        },
+        { cursor: "default" },
+        boxSx
+      ),
       children: [
         /* @__PURE__ */ jsx(OverflowableChip, { boxSx: { paddingBottom: "2px" }, ...otherProps }),
         helperText && /* @__PURE__ */ jsx(FormHelperText, { sx: { fontSize: "x-small", margin: 0, marginLeft: 2 }, children: helperText })

package/dist/components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js

@@ -70,7 +70,7 @@ function AutocompleteInput({
         }
       },
       options,
-      renderInput: ({ inputProps, ...rest }) => /* @__PURE__ */ jsx(
+      renderInput: (params) => /* @__PURE__ */ jsx(
         TextField,
         {
           ...label && {
@@ -80,9 +80,6 @@ function AutocompleteInput({
             })
           },
           inputRef: ref,
-          slotProps: {
-            htmlInput: { ...inputProps, readOnly }
-          },
           helperText: previousValue && /* @__PURE__ */ jsx(
             HelperPreviousValue,
             {
@@ -93,7 +90,16 @@ function AutocompleteInput({
           ),
           ...genHelperError(error?.message),
           ...formProps,
-          ...rest
+          ...params,
+          slotProps: {
+            ...formProps?.slotProps,
+            ...params.slotProps,
+            htmlInput: {
+              ...formProps?.slotProps?.htmlInput,
+              ...params.slotProps.htmlInput,
+              readOnly
+            }
+          }
         }
       ),
       ...props

package/dist/components/ui/reactHookForm/directory-item-input/directory-item-input.js

@@ -44,8 +44,8 @@ function DirectoryItemInput({ name, types, ...props }) {
     return lastSeparatorIndex === -1 ? [path, ""] : [path.slice(0, lastSeparatorIndex), path.slice(lastSeparatorIndex)];
   }, [path]);
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", sx: { flex: 1, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: { alignItems: "center", flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsx(
           Grid,
           {
@@ -83,7 +83,16 @@ function DirectoryItemInput({ name, types, ...props }) {
             ] }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: getAbsenceLabelKeyFromType(types?.[0]) }) })
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid, { paddingTop: 1, paddingLeft: 1, children: error?.message && /* @__PURE__ */ jsx(FormHelperText, { error: true, children: intl.formatMessage({ id: error.message }) }) })
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            sx: {
+              paddingTop: 1,
+              paddingLeft: 1
+            },
+            children: error?.message && /* @__PURE__ */ jsx(FormHelperText, { error: true, children: intl.formatMessage({ id: error.message }) })
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(
         Button,
@@ -95,6 +104,7 @@ function DirectoryItemInput({ name, types, ...props }) {
             textTransform: "none",
             whiteSpace: "nowrap"
           },
+          size: "small",
           children: /* @__PURE__ */ jsx(FormattedMessage, { id: path ? "edit" : "Select" })
         }
       )

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

@@ -20,10 +20,12 @@ function DeletableRow({
       container: true,
       spacing: 2,
       size: 12,
-      alignItems,
       onMouseEnter: () => setIsMouseHover(true),
       onMouseLeave: () => setIsMouseHover(false),
       "data-testid": dataTestId,
+      sx: {
+        alignItems
+      },
       children: [
         children,
         /* @__PURE__ */ jsx(Grid, { size: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(