@gridsuite/commons-ui 0.213.0 → 0.215.0

package/dist/components/ui/inputs/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export * from './SelectClearable';
+export * from './ActivableChip';

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

@@ -0,0 +1,6 @@
+import { SelectClearable } from "./SelectClearable.js";
+import { ActivableChip } from "./ActivableChip.js";
+export {
+  ActivableChip,
+  SelectClearable
+};

package/dist/components/ui/menus/custom-nested-menu.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { NestedMenuItemProps } from 'mui-nested-menu';
+import { MenuItemProps } from '@mui/material';
+import { SxStyle } from '../../../utils/styles';
+interface CustomNestedMenuItemProps extends PropsWithChildren, Omit<NestedMenuItemProps, 'parentMenuOpen'> {
+    sx?: SxStyle;
+}
+export declare function CustomNestedMenuItem({ sx, children, ...other }: Readonly<CustomNestedMenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare function CustomMenuItem({ sx, ...other }: Readonly<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/menus/custom-nested-menu.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { NestedMenuItem } from "mui-nested-menu";
+import { Box, MenuItem } from "@mui/material";
+import { mergeSx } from "../../../utils/styles.js";
+const styles = {
+  highlightedParentLine: {
+    backgroundColor: "action.hover",
+    color: "primary.main",
+    transition: "all 300ms ease"
+  },
+  highlightedLine: {
+    transition: "all 300ms ease",
+    "&:hover": {
+      backgroundColor: "action.hover",
+      color: "primary.main"
+    }
+  }
+};
+function CustomNestedMenuItem({ sx, children, ...other }) {
+  const [subMenuActive, setSubMenuActive] = useState(false);
+  const [shouldLiftLeft, setShouldLiftLeft] = useState(false);
+  const containerRef = useRef(null);
+  const calculatePosition = () => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const estimatedWidth = rect.width;
+    const spaceRight = window.innerWidth - rect.right;
+    setShouldLiftLeft(estimatedWidth > spaceRight);
+  };
+  const handleMouseEnter = () => {
+    calculatePosition();
+  };
+  return /* @__PURE__ */ jsx(
+    NestedMenuItem,
+    {
+      ...other,
+      parentMenuOpen: true,
+      ref: containerRef,
+      onMouseEnter: handleMouseEnter,
+      MenuProps: {
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: shouldLiftLeft ? "left" : "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: shouldLiftLeft ? "right" : "left"
+        }
+      },
+      sx: mergeSx(subMenuActive ? styles.highlightedParentLine : styles.highlightedLine, sx),
+      children: /* @__PURE__ */ jsx(Box, { onMouseEnter: () => setSubMenuActive(true), onMouseLeave: () => setSubMenuActive(false), children })
+    }
+  );
+}
+function CustomMenuItem({ sx, ...other }) {
+  return /* @__PURE__ */ jsx(MenuItem, { sx: mergeSx(styles.highlightedLine, sx), ...other });
+}
+export {
+  CustomMenuItem,
+  CustomNestedMenuItem
+};

package/dist/components/ui/overflowableText/OverflowableText.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '@mui/material';
+import { Style } from 'node:util';
+import { SxStyle } from '../../../utils';
+export interface OverflowableTextProps extends BoxProps {
+    text?: ReactNode;
+    maxLineCount?: number;
+    tooltipStyle?: Style;
+    tooltipSx?: SxStyle;
+}
+export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/dist/components/ui/overflowableText/OverflowableText.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
+import { styled, Box } from "@mui/material";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../../utils/styles.js";
+import "../../../utils/yupConfig.js";
+const overflowStyle = {
+  overflow: {
+    display: "inline-block",
+    whiteSpace: "pre",
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  tooltip: {
+    whiteSpace: "pre",
+    width: "fit-content",
+    maxWidth: "fit-content"
+  }
+};
+const multilineOverflowStyle = (numberOfLinesToDisplay) => ({
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: numberOfLinesToDisplay,
+  lineClamp: numberOfLinesToDisplay,
+  WebkitBoxOrient: "vertical",
+  wordWrap: "break-word"
+  // prevent bug when writing a very long word
+});
+const OverflowableText = styled(
+  ({
+    text,
+    maxLineCount,
+    // overflowable text can be displayed on several lines if this is set to a number > 1 tooltipStyle,
+    tooltipStyle,
+    tooltipSx,
+    className,
+    children,
+    sx,
+    ...props
+  }) => {
+    const element = useRef(void 0);
+    const isMultiLine = useMemo(() => maxLineCount && maxLineCount > 1, [maxLineCount]);
+    const [overflowed, setOverflowed] = useState(false);
+    const checkOverflow = useCallback(() => {
+      if (!element.current) {
+        return;
+      }
+      if (isMultiLine) {
+        setOverflowed(element.current.scrollHeight > element.current.clientHeight);
+      } else {
+        setOverflowed(element.current.scrollWidth > element.current.clientWidth);
+      }
+    }, [isMultiLine, setOverflowed, element]);
+    useLayoutEffect(() => {
+      checkOverflow();
+    }, [
+      checkOverflow,
+      text,
+      element.current?.scrollWidth,
+      element.current?.clientWidth,
+      element.current?.scrollHeight,
+      element.current?.clientHeight
+    ]);
+    const defaultTooltipSx = !tooltipStyle ? overflowStyle.tooltip : false;
+    const finalTooltipSx = tooltipSx || defaultTooltipSx;
+    const tooltipStyleProps = {
+      ...tooltipStyle && { classes: { tooltip: tooltipStyle } },
+      ...finalTooltipSx && {
+        slotProps: {
+          tooltip: {
+            onClick: (e) => e.stopPropagation(),
+            sx: finalTooltipSx
+          },
+          popper: {
+            onClick: (e) => e.stopPropagation()
+          }
+        }
+      }
+    };
+    const boxSx = mergeSx(isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow, sx);
+    return /* @__PURE__ */ jsx(
+      CustomTooltip,
+      {
+        title: text || "",
+        disableHoverListener: !overflowed,
+        ...tooltipStyleProps,
+        children: /* @__PURE__ */ jsx(Box, { ref: element, className, sx: boxSx, ...props, children: children || text })
+      }
+    );
+  }
+)({});
+export {
+  OverflowableText
+};

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

@@ -0,0 +1,290 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, FormControl, InputLabel, Select, IconButton, OutlinedInput } from "@mui/material";
+import { DriveFolderUpload } from "@mui/icons-material";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useFieldArray, useWatch, useController } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
+import "./provider/CustomFormProvider.js";
+import { useCustomFormContext } from "./provider/useCustomFormContext.js";
+import { ErrorInput } from "./errorManagement/ErrorInput.js";
+import { MidFormError } from "./errorManagement/MidFormError.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import { ArrayAction } from "../../../utils/types/types.js";
+import { fetchDirectoryElementPath } from "../../../services/directory.js";
+import { getEquipmentTypeShortLabel } from "../../../utils/labelUtils.js";
+import { mergeSx } from "../../../utils/styles.js";
+import "../../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import { DirectoryItemSelector } from "../directoryItemSelector/DirectoryItemSelector.js";
+import { NAME } from "./constants.js";
+import { OverflowableChip } from "./OverflowableChip.js";
+import { FieldLabel } from "./utils/FieldLabel.js";
+import { isFieldRequired } from "./utils/functions.js";
+const styles = {
+  selectDirectoryElements: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignContent: "flex-start",
+    cursor: "pointer",
+    "& .MuiSelect-select": {
+      paddingY: "3px",
+      paddingX: "8px !important"
+      // because of the hidden select icon at right, we force a smaller padding
+    },
+    "& .MuiSelect-icon": {
+      display: "none"
+    }
+  },
+  renderDirectoryElements: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center"
+  },
+  inputLabel: {
+    left: "30px",
+    "&.MuiInputLabel-shrink": {
+      transform: "translate(-16px, -9px) scale(0.75)"
+    }
+  }
+};
+function DirectoryItemsInput({
+  label,
+  name,
+  elementType,
+  // Used to specify type of element (Filter, Contingency list, ...)
+  equipmentTypes,
+  // Mostly used for filters, it allows the user to get elements of specific equipment only
+  itemFilter,
+  // Used to further filter the results displayed according to specific requirement
+  titleId,
+  // title of directory item selector dialogue
+  hideErrorMessage,
+  onChange,
+  disable = false,
+  allowMultiSelect = true,
+  labelRequiredFromContext = true,
+  ChipComponent = OverflowableChip,
+  chipProps,
+  fullHeight = false,
+  fullWidth = true
+}) {
+  const { snackError } = useSnackMessage();
+  const intl = useIntl();
+  const [selected, setSelected] = useState([]);
+  const [expanded, setExpanded] = useState([]);
+  const [multiSelect, setMultiSelect] = useState(allowMultiSelect);
+  const types = useMemo(() => [elementType], [elementType]);
+  const [directoryItemSelectorOpen, setDirectoryItemSelectorOpen] = useState(false);
+  const {
+    fields: elements,
+    append,
+    remove
+  } = useFieldArray({
+    name
+  });
+  const formContext = useCustomFormContext();
+  const { getValues, validationSchema, setError, clearErrors, getFieldState } = formContext;
+  const watchedElements = useWatch({ name });
+  const {
+    fieldState: { error }
+  } = useController({
+    name
+  });
+  const addElements = useCallback(
+    (values) => {
+      if (!values) {
+        return;
+      }
+      if (selected?.length > 0 && values?.length > 0) {
+        selected.forEach((chip) => {
+          remove(getValues(name).findIndex((item) => item.id === chip));
+        });
+      }
+      values.forEach((value) => {
+        const { icon, children, ...otherElementAttributes } = value;
+        if (getValues(name).find((v) => v?.id === otherElementAttributes.id) !== void 0) {
+          snackError({
+            messageTxt: "",
+            headerId: "directory_items_input/ElementAlreadyUsed"
+          });
+        } else {
+          append(otherElementAttributes);
+          onChange?.(getValues(name), ArrayAction.ADD, otherElementAttributes);
+        }
+      });
+      setDirectoryItemSelectorOpen(false);
+      setSelected([]);
+    },
+    [append, getValues, snackError, name, onChange, selected, remove]
+  );
+  const handleDeleteChip = useCallback(
+    (event, index) => {
+      event.stopPropagation();
+      const elemToRemove = getValues(name)[index];
+      remove(index);
+      const newElems = getValues(name);
+      onChange?.(newElems, ArrayAction.REMOVE, elemToRemove);
+    },
+    [remove, getValues, name, onChange]
+  );
+  const openItemsSelector = useCallback(
+    (index) => {
+      const chips = getValues(name);
+      const chip = chips.at(index)?.id;
+      if (chip) {
+        fetchDirectoryElementPath(chip).then((response) => {
+          const path = response.filter((e) => e.elementUuid !== chip).map((e) => e.elementUuid);
+          setExpanded(path);
+          setSelected([chip]);
+          setDirectoryItemSelectorOpen(true);
+          setMultiSelect(false);
+        });
+      }
+    },
+    [getValues, name]
+  );
+  const handleClickChip = useCallback(
+    (event, index) => {
+      event.stopPropagation();
+      openItemsSelector(index);
+    },
+    [openItemsSelector]
+  );
+  const shouldReplaceElement = useMemo(() => {
+    return allowMultiSelect === false && elements?.length === 1;
+  }, [allowMultiSelect, elements]);
+  const handleClickInput = useCallback(() => {
+    if (disable) {
+      return;
+    }
+    if (shouldReplaceElement) {
+      openItemsSelector(0);
+    } else {
+      setDirectoryItemSelectorOpen(true);
+      if (allowMultiSelect) {
+        setMultiSelect(true);
+      }
+    }
+  }, [shouldReplaceElement, openItemsSelector, allowMultiSelect, disable]);
+  const hasElementsWithoutName = useMemo(() => {
+    const elementsToCheck = watchedElements ?? elements;
+    return (elementsToCheck ?? []).some((item) => !item?.[NAME]);
+  }, [elements, watchedElements]);
+  useEffect(() => {
+    const errorMessage = intl.formatMessage({ id: "elementNotFound" });
+    const fieldState = getFieldState(name);
+    if (hasElementsWithoutName) {
+      if (fieldState.error?.message !== errorMessage) {
+        setError(name, {
+          type: "manual",
+          message: errorMessage
+        });
+      }
+    } else if (fieldState.error?.type === "manual" && fieldState.error?.message === errorMessage) {
+      clearErrors(name);
+    }
+  }, [clearErrors, getFieldState, hasElementsWithoutName, intl, name, setError]);
+  const inputId = `directory-items-input-${name}`;
+  const fullLabel = label && /* @__PURE__ */ jsx(
+    FieldLabel,
+    {
+      label,
+      optional: labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())
+    }
+  );
+  const hasElements = elements && elements.length > 0;
+  const fullHeightSx = fullHeight ? { height: "100%" } : void 0;
+  const selectWidth = label ? `${6 + label.length * 0.8}ch` : "auto";
+  return /* @__PURE__ */ jsxs(Box, { sx: fullHeightSx, children: [
+    /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        size: "small",
+        fullWidth,
+        sx: fullHeightSx,
+        disabled: disable,
+        error: !!error?.message,
+        children: [
+          label && /* @__PURE__ */ jsx(InputLabel, { htmlFor: inputId, shrink: hasElements, sx: styles.inputLabel, children: fullLabel }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: elements,
+              multiple: true,
+              displayEmpty: true,
+              notched: hasElements,
+              open: false,
+              onClick: handleClickInput,
+              sx: mergeSx(styles.selectDirectoryElements, { minWidth: selectWidth }, fullHeightSx),
+              input: /* @__PURE__ */ jsx(
+                OutlinedInput,
+                {
+                  id: inputId,
+                  ...label && {
+                    label: fullLabel
+                  }
+                }
+              ),
+              renderValue: (directoryElements) => /* @__PURE__ */ jsxs(Box, { sx: styles.renderDirectoryElements, children: [
+                /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disable, children: /* @__PURE__ */ jsx(DriveFolderUpload, {}) }) }) }),
+                directoryElements?.map((item, index) => {
+                  const elementName = watchedElements?.[index]?.[NAME] ?? getValues(`${name}.${index}.${NAME}`) ?? item?.[NAME];
+                  const equipmentTypeShortLabel = getEquipmentTypeShortLabel(
+                    item?.specificMetadata?.equipmentType
+                  );
+                  const { sx: chipSx, ...otherChipProps } = chipProps ?? {};
+                  return /* @__PURE__ */ jsx(
+                    ChipComponent,
+                    {
+                      onDelete: (e) => handleDeleteChip(e, index),
+                      onClick: (e) => handleClickChip(e, index),
+                      label: elementName || intl.formatMessage({ id: "elementNotFound" }),
+                      ...equipmentTypeShortLabel && {
+                        helperText: intl.formatMessage({
+                          id: equipmentTypeShortLabel
+                        })
+                      },
+                      sx: mergeSx(
+                        !elementName ? (theme) => ({
+                          backgroundColor: theme.palette.error.light,
+                          borderColor: theme.palette.error.main,
+                          color: theme.palette.error.contrastText
+                        }) : void 0,
+                        chipSx
+                      ),
+                      ...otherChipProps
+                    },
+                    item.id
+                  );
+                })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    !hideErrorMessage && /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }),
+    /* @__PURE__ */ jsx(
+      DirectoryItemSelector,
+      {
+        open: directoryItemSelectorOpen,
+        onClose: addElements,
+        types,
+        equipmentTypes,
+        title: intl.formatMessage({ id: titleId }),
+        itemFilter,
+        selected,
+        expanded,
+        multiSelect
+      }
+    )
+  ] });
+}
+export {
+  DirectoryItemsInput
+};

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

@@ -0,0 +1,25 @@
+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,
+    {
+      size: "small",
+      label: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: /* @__PURE__ */ jsx(
+        OverflowableText,
+        {
+          text: label,
+          sx: {
+            maxWidth: "20ch",
+            marginX: "auto"
+          }
+        }
+      ) }),
+      ...otherProps
+    }
+  ) });
+}
+export {
+  OverflowableChip
+};

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

@@ -0,0 +1,135 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { FormControl, Chip, TextField } from "@mui/material";
+import { useState, useCallback, useMemo } from "react";
+import { useFieldArray, useController } from "react-hook-form";
+import "react-intl";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import "./provider/CustomFormProvider.js";
+import { useCustomFormContext } from "./provider/useCustomFormContext.js";
+import { FieldLabel } from "./utils/FieldLabel.js";
+import { isFieldRequired } from "./utils/functions.js";
+import { OverflowableText } from "../overflowableText/OverflowableText.js";
+import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
+import { ErrorInput } from "./errorManagement/ErrorInput.js";
+import { MidFormError } from "./errorManagement/MidFormError.js";
+const styles = {
+  chipContainer: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    border: "2px solid lightgray",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  chipItem: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    marginTop: 0,
+    padding: 1,
+    overflow: "hidden"
+  }
+};
+function ChipItemsInput({ label, name, hideErrorMessage }) {
+  const [textEntered, setTextEntered] = useState("");
+  const { snackError } = useSnackMessage();
+  const {
+    fields: elements,
+    append,
+    remove
+  } = useFieldArray({
+    name
+  });
+  const { validationSchema, getValues } = useCustomFormContext();
+  const {
+    fieldState: { error }
+  } = useController({
+    name
+  });
+  const addItem = useCallback(
+    (value) => {
+      if (getValues(name).find((v) => v === value) !== void 0) {
+        snackError({
+          messageTxt: "",
+          headerId: "directory_items_input/ElementAlreadyUsed"
+        });
+      } else {
+        append(value);
+      }
+    },
+    [append, getValues, snackError, name]
+  );
+  const keyPress = (e) => {
+    if (e.key === "Enter" && textEntered.length > 0) {
+      addItem(textEntered);
+      setTextEntered("");
+    }
+  };
+  const onBlur = () => {
+    if (textEntered.length > 0) {
+      addItem(textEntered);
+      setTextEntered("");
+    }
+  };
+  const handleChange = (e) => {
+    setTextEntered(e.target.value);
+  };
+  const hasError = !!error?.message;
+  const containerStyle = useMemo(
+    () => ({ ...styles.chipContainer, borderColor: hasError ? "error.main" : null }),
+    [hasError]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FormControl, { sx: containerStyle, error: hasError, children: [
+      elements?.length === 0 && label && /* @__PURE__ */ jsx(FieldLabel, { label, optional: !isFieldRequired(name, validationSchema, getValues()) }),
+      elements?.length > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.chipItem, children: elements.map((item, index) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          size: "small",
+          onDelete: () => {
+            remove(index);
+          },
+          label: /* @__PURE__ */ jsx(
+            OverflowableText,
+            {
+              text: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}` }),
+              sx: { width: "100%" }
+            }
+          )
+        },
+        item.id
+      )) }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          variant: "standard",
+          InputProps: {
+            disableUnderline: true,
+            style: {
+              marginTop: "5px",
+              height: "30px",
+              marginLeft: "10px"
+            }
+          },
+          value: textEntered,
+          onKeyDown: keyPress,
+          onChange: handleChange,
+          onBlur
+        }
+      )
+    ] }),
+    !hideErrorMessage && /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError })
+  ] });
+}
+export {
+  ChipItemsInput
+};

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

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { Grid, IconButton } from "@mui/material";
+import { RestoreFromTrash, Delete } from "@mui/icons-material";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
+function DeletableRow({
+  alignItems,
+  onClick,
+  deletionMark,
+  disabledDeletion,
+  children
+}) {
+  const intl = useIntl();
+  const [isMouseHover, setIsMouseHover] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      spacing: 2,
+      item: true,
+      alignItems,
+      onMouseEnter: () => setIsMouseHover(true),
+      onMouseLeave: () => setIsMouseHover(false),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
+          CustomTooltip,
+          {
+            title: intl.formatMessage({
+              id: deletionMark ? "button.restore" : "DeleteRows"
+            }),
+            children: /* @__PURE__ */ jsx(IconButton, { onClick, children: deletionMark ? /* @__PURE__ */ jsx(RestoreFromTrash, {}) : /* @__PURE__ */ jsx(Delete, {}) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  DeletableRow
+};