@gridsuite/commons-ui 0.214.0 → 0.216.0

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

@@ -0,0 +1,435 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useState, useRef, useCallback, useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, TableBody, Checkbox } from "@mui/material";
+import { DragIndicator } from "@mui/icons-material";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
+import { MAX_ROWS_NUMBER, SELECTED, DndColumnType } from "./dnd-table.type.js";
+import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
+import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
+import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
+import "../../ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
+import { ChipItemsInput } from "../../ui/reactHookForm/chip-items-input.js";
+import { DirectoryItemsInput } from "../../ui/reactHookForm/DirectoryItemsInput.js";
+import { RawReadOnlyInput } from "../../ui/reactHookForm/RawReadOnlyInput.js";
+import { AutocompleteInput } from "../../ui/reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import { CheckboxInput } from "../../ui/reactHookForm/booleans/CheckboxInput.js";
+import { SwitchInput } from "../../ui/reactHookForm/booleans/SwitchInput.js";
+import { ErrorInput } from "../../ui/reactHookForm/errorManagement/ErrorInput.js";
+import { FieldErrorAlert } from "../../ui/reactHookForm/errorManagement/FieldErrorAlert.js";
+import "yup";
+import "../../ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../ui/reactHookForm/numbers/RangeInput.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { TableNumericalInput } from "../../ui/reactHookForm/tableInputs/table-numerical-input.js";
+import { TableTextInput } from "../../ui/reactHookForm/tableInputs/table-text-input.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "notistack";
+import "../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../ui/treeViewFinder/TreeViewFinder.js";
+import "../../ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+const styles = {
+  columnsStyle: {
+    display: "inline-flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: 1,
+    textTransform: "none"
+  }
+};
+function MultiCheckbox({
+  arrayFormName,
+  handleClickCheck,
+  handleClickUncheck,
+  ...props
+}) {
+  const arrayToWatch = useWatch({
+    name: arrayFormName
+  });
+  const allRowSelected = useMemo(
+    () => arrayToWatch ? arrayToWatch?.every((row) => row[SELECTED]) : false,
+    [arrayToWatch]
+  );
+  const someRowSelected = useMemo(
+    () => arrayToWatch ? arrayToWatch?.some((row) => row[SELECTED]) : false,
+    [arrayToWatch]
+  );
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: arrayToWatch?.length > 0 && allRowSelected,
+      indeterminate: someRowSelected && !allRowSelected,
+      onChange: (event) => {
+        if (event.target.checked) {
+          handleClickCheck();
+        } else {
+          handleClickUncheck();
+        }
+      },
+      ...props
+    }
+  );
+}
+function DefaultTableCell({ arrayFormName, rowIndex, column, width, ...props }) {
+  return /* @__PURE__ */ jsx(TableCell, { sx: mergeSx({ padding: 1 }, width), children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, ...props }) }, column.dataKey);
+}
+function EditableTableCell({
+  arrayFormName,
+  rowIndex,
+  column,
+  width,
+  previousValue,
+  valueModified,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(TableCell, { sx: mergeSx({ padding: 0.5, maxWidth: column.maxWidth }, width), children: [
+    column.type === DndColumnType.NUMERIC && /* @__PURE__ */ jsx(
+      TableNumericalInput,
+      {
+        ...props,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        previousValue,
+        valueModified,
+        adornment: column?.adornment,
+        isClearable: column?.clearable,
+        style: {
+          textAlign: column?.textAlign
+        }
+      }
+    ),
+    column.type === DndColumnType.TEXT && /* @__PURE__ */ jsx(
+      TableTextInput,
+      {
+        ...props,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        showErrorMsg: column.showErrorMsg
+      }
+    ),
+    column.type === DndColumnType.AUTOCOMPLETE && /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        forcePopupIcon: true,
+        freeSolo: true,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        options: column.options,
+        inputTransform: (value) => value ?? "",
+        outputTransform: (value) => value,
+        size: "small"
+      }
+    ),
+    column.type === DndColumnType.DIRECTORY_ITEMS && /* @__PURE__ */ jsx(
+      DirectoryItemsInput,
+      {
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        equipmentTypes: column.equipmentTypes,
+        elementType: column.elementType,
+        titleId: column.titleId,
+        hideErrorMessage: true,
+        label: void 0
+      }
+    ),
+    column.type === DndColumnType.CHIP_ITEMS && /* @__PURE__ */ jsx(ChipItemsInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, hideErrorMessage: true }),
+    column.type === DndColumnType.SWITCH && /* @__PURE__ */ jsx(SwitchInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}` }),
+    column.type === DndColumnType.CUSTOM && column.component(rowIndex)
+  ] }, column.dataKey);
+}
+function DndTable(props) {
+  const {
+    arrayFormName,
+    useFieldArrayOutput,
+    columnsDefinition,
+    tableHeight,
+    allowedToAddRows = () => Promise.resolve(true),
+    createRows,
+    disabled = false,
+    withResetButton = false,
+    withAddRowsDialog = true,
+    previousValues,
+    disableTableCell,
+    getPreviousValue,
+    isValueModified,
+    disableAddingRows = false,
+    showMoveArrow = true,
+    disableDragAndDrop = false,
+    handleUploadButton = void 0,
+    uploadButtonMessageId = void 0,
+    handleResetButton = void 0,
+    resetButtonMessageId = void 0,
+    maxRows = MAX_ROWS_NUMBER
+  } = props;
+  const intl = useIntl();
+  const { getValues, setValue, setError, clearErrors } = useFormContext();
+  const {
+    fields: currentRows,
+    // don't use it to access form data ! check doc
+    move,
+    swap,
+    append,
+    remove
+  } = useFieldArrayOutput;
+  const [openAddRowsDialog, setOpenAddRowsDialog] = useState(false);
+  function renderTableCell(rowId, rowIndex, column, width) {
+    const CustomTableCell = column.editable ? EditableTableCell : DefaultTableCell;
+    return /* @__PURE__ */ jsx(
+      CustomTableCell,
+      {
+        arrayFormName,
+        rowIndex,
+        column,
+        disabled: disableTableCell ? disableTableCell(rowIndex, column, arrayFormName, previousValues) : disabled,
+        previousValue: getPreviousValue ? getPreviousValue(rowIndex, column, arrayFormName, previousValues) : void 0,
+        valueModified: isValueModified ? isValueModified(rowIndex, arrayFormName) : false,
+        width
+      },
+      rowId + column.dataKey
+    );
+  }
+  const addNewRows = (numberOfRows) => {
+    if (currentRows.length + numberOfRows > maxRows) {
+      setError(arrayFormName, {
+        type: "custom",
+        message: intl.formatMessage(
+          {
+            id: "MaximumRowNumberError"
+          },
+          {
+            value: maxRows
+          }
+        )
+      });
+      return;
+    }
+    clearErrors(arrayFormName);
+    const rowsToAdd = createRows?.(numberOfRows).map((row) => {
+      return { ...row, [SELECTED]: false };
+    });
+    append(rowsToAdd);
+  };
+  const handleAddRowsButton = () => {
+    allowedToAddRows().then((isAllowed) => {
+      if (isAllowed) {
+        if (withAddRowsDialog) {
+          setOpenAddRowsDialog(true);
+        } else {
+          addNewRows(1);
+        }
+      }
+    });
+  };
+  const handleCloseAddRowsDialog = () => {
+    setOpenAddRowsDialog(false);
+  };
+  const deleteSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    const rowsToDelete = [];
+    for (let i = 0; i < currentRowsValues.length; i++) {
+      if (currentRowsValues[i][SELECTED]) {
+        rowsToDelete.push(i);
+      }
+    }
+    remove(rowsToDelete);
+  };
+  const selectAllRows = () => {
+    for (let i = 0; i < currentRows.length; i++) {
+      setValue(`${arrayFormName}[${i}].${SELECTED}`, true);
+    }
+  };
+  const unselectAllRows = () => {
+    for (let i = 0; i < currentRows.length; i++) {
+      setValue(`${arrayFormName}[${i}].${SELECTED}`, false);
+    }
+  };
+  const moveUpSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    if (currentRowsValues[0][SELECTED]) {
+      return;
+    }
+    for (let i = 1; i < currentRowsValues.length; i++) {
+      if (currentRowsValues[i][SELECTED]) {
+        swap(i - 1, i);
+      }
+    }
+  };
+  const moveDownSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    if (currentRowsValues[currentRowsValues.length - 1][SELECTED]) {
+      return;
+    }
+    for (let i = currentRowsValues.length - 2; i >= 0; i--) {
+      if (currentRowsValues[i][SELECTED]) {
+        swap(i, i + 1);
+      }
+    }
+  };
+  const dragCellWidthsRef = useRef([]);
+  const cellIdxRef = useRef(0);
+  const onBeforeDragStart = useCallback((start) => {
+    const row = document.querySelector(`[data-rfd-draggable-id="${start.draggableId}"]`);
+    if (row) {
+      dragCellWidthsRef.current = Array.from(row.cells, (cell) => cell.offsetWidth);
+    }
+  }, []);
+  const nextLockedWidthSx = useCallback((isDragging) => {
+    const cellWidths = dragCellWidthsRef.current;
+    const cellIdx = cellIdxRef.current;
+    if (!isDragging || cellWidths[cellIdx] == null) {
+      return void 0;
+    }
+    cellIdxRef.current += 1;
+    return { width: cellWidths[cellIdx], boxSizing: "border-box" };
+  }, []);
+  const onDragEnd = (result) => {
+    dragCellWidthsRef.current = [];
+    if (!result.destination) {
+      return;
+    }
+    move(result.source.index, result.destination.index);
+  };
+  function renderTableHead() {
+    return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      !disableDragAndDrop && /* @__PURE__ */ jsx(TableCell, { sx: { width: "3%" } }),
+      /* @__PURE__ */ jsx(TableCell, { sx: { width: "5%", textAlign: "center" }, children: /* @__PURE__ */ jsx(
+        MultiCheckbox,
+        {
+          arrayFormName,
+          handleClickCheck: selectAllRows,
+          handleClickUncheck: unselectAllRows,
+          disabled: disabled || currentRows.length === 0
+        }
+      ) }),
+      columnsDefinition.map((column) => /* @__PURE__ */ jsx(TableCell, { sx: { width: column.width, maxWidth: column.maxWidth }, children: /* @__PURE__ */ jsxs(Box, { sx: styles.columnsStyle, children: [
+        column.label,
+        column.extra
+      ] }) }, column.dataKey))
+    ] }) });
+  }
+  function renderTableBody(providedDroppable) {
+    return /* @__PURE__ */ jsxs(TableBody, { children: [
+      currentRows.map((row, index) => /* @__PURE__ */ jsx(
+        Draggable,
+        {
+          draggableId: row.id.toString(),
+          index,
+          isDragDisabled: disableDragAndDrop,
+          children: (provided, snapshot) => {
+            cellIdxRef.current = 0;
+            const tableRow = /* @__PURE__ */ jsxs(TableRow, { ref: provided.innerRef, ...provided.draggableProps, children: [
+              !disableDragAndDrop && /* @__PURE__ */ jsx(
+                CustomTooltip,
+                {
+                  title: intl.formatMessage({
+                    id: "DragAndDrop"
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      sx: mergeSx(
+                        { textAlign: "center" },
+                        nextLockedWidthSx(snapshot.isDragging)
+                      ),
+                      ...disabled ? {} : { ...provided.dragHandleProps },
+                      children: /* @__PURE__ */ jsx(DragIndicator, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  sx: mergeSx({ textAlign: "center" }, nextLockedWidthSx(snapshot.isDragging)),
+                  children: /* @__PURE__ */ jsx(
+                    CheckboxInput,
+                    {
+                      name: `${arrayFormName}[${index}].${SELECTED}`,
+                      formProps: { disabled }
+                    }
+                  )
+                }
+              ),
+              columnsDefinition.map(
+                (column) => renderTableCell(row.id, index, column, nextLockedWidthSx(snapshot.isDragging))
+              )
+            ] });
+            return snapshot.isDragging ? createPortal(tableRow, document.body) : tableRow;
+          }
+        },
+        row.id
+      )),
+      providedDroppable.placeholder
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, children: [
+    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, children: [
+      /* @__PURE__ */ jsx(DragDropContext, { onBeforeDragStart, onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
+        TableContainer,
+        {
+          ref: provided.innerRef,
+          ...provided.droppableProps,
+          sx: {
+            height: tableHeight,
+            border: "solid 1px rgba(0,0,0,0.1)"
+          },
+          children: /* @__PURE__ */ jsxs(Table, { stickyHeader: true, size: "small", padding: "none", children: [
+            renderTableHead(),
+            renderTableBody(provided)
+          ] })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(ErrorInput, { name: arrayFormName, InputField: FieldErrorAlert })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+      handleResetButton && handleUploadButton && resetButtonMessageId && uploadButtonMessageId ? /* @__PURE__ */ jsx(
+        DndTableBottomLeftButtons,
+        {
+          withResetButton,
+          disableUploadButton: disableAddingRows,
+          disabled,
+          handleUploadButton,
+          uploadButtonMessageId,
+          handleResetButton,
+          resetButtonMessageId
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        DndTableBottomRightButtons,
+        {
+          arrayFormName,
+          handleAddButton: handleAddRowsButton,
+          handleDeleteButton: deleteSelectedRows,
+          handleMoveUpButton: moveUpSelectedRows,
+          handleMoveDownButton: moveDownSelectedRows,
+          disableAddingRows,
+          showMoveArrow,
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      DndTableAddRowsDialog,
+      {
+        open: openAddRowsDialog,
+        handleAddButton: addNewRows,
+        onClose: handleCloseAddRowsDialog
+      }
+    )
+  ] });
+}
+export {
+  DndTable
+};

package/dist/components/composite/dnd-table/dnd-table.type.d.ts

@@ -0,0 +1,56 @@
+import { JSX, ReactNode } from 'react';
+import { ElementType, EquipmentType } from '../../../utils';
+export declare const SELECTED = "selected";
+export declare const MAX_ROWS_NUMBER = 100;
+export declare enum DndColumnType {
+    TEXT = "TEXT",
+    NUMERIC = "NUMERIC",
+    AUTOCOMPLETE = "AUTOCOMPLETE",
+    CHIP_ITEMS = "CHIP_ITEMS",
+    DIRECTORY_ITEMS = "DIRECTORY_ITEMS",
+    SWITCH = "SWITCH",
+    CUSTOM = "CUSTOM"
+}
+export interface ColumnBase {
+    dataKey: string;
+    maxWidth?: number | string;
+    width?: number | string;
+    label?: string;
+    extra?: JSX.Element;
+    editable?: boolean;
+    type: DndColumnType;
+    initialValue?: any;
+}
+export interface ColumnText extends ColumnBase {
+    type: DndColumnType.TEXT;
+    showErrorMsg?: boolean;
+}
+export interface ColumnNumeric extends ColumnBase {
+    type: DndColumnType.NUMERIC;
+    adornment?: {
+        text: string;
+    };
+    clearable?: boolean;
+    textAlign?: 'right' | 'left';
+}
+export interface ColumnAutocomplete extends ColumnBase {
+    type: DndColumnType.AUTOCOMPLETE;
+    options: string[];
+}
+export interface ColumnDirectoryItem extends ColumnBase {
+    type: DndColumnType.DIRECTORY_ITEMS;
+    equipmentTypes: EquipmentType[];
+    elementType: ElementType;
+    titleId: string;
+}
+export interface ColumnChipsItem extends ColumnBase {
+    type: DndColumnType.CHIP_ITEMS;
+}
+export interface ColumnSwitchItem extends ColumnBase {
+    type: DndColumnType.SWITCH;
+}
+export interface ColumnCustom extends ColumnBase {
+    type: DndColumnType.CUSTOM;
+    component: (rowIndex: number) => ReactNode;
+}
+export type DndColumn = ColumnNumeric | ColumnAutocomplete | ColumnText | ColumnDirectoryItem | ColumnChipsItem | ColumnSwitchItem | ColumnCustom;

package/dist/components/composite/dnd-table-v2/deletable-table-row.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { TableRow, TableCell, IconButton } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
+function DeletableTableRow({
+  onClick,
+  disabledDeletion,
+  children,
+  ...otherProps
+}) {
+  const intl = useIntl();
+  const [isMouseHover, setIsMouseHover] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      ...otherProps,
+      onMouseEnter: () => setIsMouseHover(true),
+      onMouseLeave: () => setIsMouseHover(false),
+      children: [
+        children,
+        !disabledDeletion && /* @__PURE__ */ jsx(TableCell, { sx: { width: "5rem", textAlign: "center" }, children: isMouseHover && /* @__PURE__ */ jsx(
+          CustomTooltip,
+          {
+            title: intl.formatMessage({
+              id: "DeleteRows"
+            }),
+            children: /* @__PURE__ */ jsx(IconButton, { onClick, children: /* @__PURE__ */ jsx(Delete, {}) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  DeletableTableRow
+};

package/dist/components/composite/dnd-table-v2/dnd-table-add-rows-dialog.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { useState } from "react";
+import "@mui/icons-material";
+import "../../ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../ui/reactHookForm/provider/CustomFormProvider.js";
+import { CancelButton } from "../../ui/reactHookForm/utils/CancelButton.js";
+import "yup";
+import "../../ui/treeViewFinder/TreeViewFinder.js";
+import "../../ui/reactHookForm/numbers/RangeInput.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "@hello-pangea/dnd";
+import "../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+function DndTableAddRowsDialog({ open, handleAddButton, onClose }) {
+  const [rowNumber, setRowNumber] = useState(1);
+  const handleClose = () => {
+    setRowNumber(1);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "AddRowsDialogTitle" }) }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        autoFocus: true,
+        type: "Number",
+        value: rowNumber,
+        onChange: (event) => {
+          setRowNumber(!event.target.value ? 0 : parseInt(event.target.value, 10));
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(CancelButton, { onClick: handleClose }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            handleAddButton(rowNumber);
+            handleClose();
+          },
+          variant: "outlined",
+          disabled: rowNumber <= 0,
+          children: /* @__PURE__ */ jsx(FormattedMessage, { id: "AddRowsButton" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  DndTableAddRowsDialog
+};

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

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid, IconButton } from "@mui/material";
+import { Upload, Replay } from "@mui/icons-material";
+import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
+function DndTableBottomLeftButtons({
+  handleUploadButton,
+  uploadButtonMessageId,
+  handleResetButton,
+  resetButtonMessageId,
+  withResetButton,
+  disableUploadButton,
+  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(
+      CustomTooltip,
+      {
+        title: intl.formatMessage({
+          id: uploadButtonMessageId
+        }),
+        children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            color: "primary",
+            onClick: () => handleUploadButton(),
+            disabled: disabled || disableUploadButton,
+            children: /* @__PURE__ */ jsx(Upload, {})
+          }
+        ) })
+      }
+    ) }),
+    withResetButton && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      CustomTooltip,
+      {
+        title: intl.formatMessage({
+          id: resetButtonMessageId
+        }),
+        children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => handleResetButton(), disabled, children: /* @__PURE__ */ jsx(Replay, {}) }) })
+      }
+    ) })
+  ] });
+}
+export {
+  DndTableBottomLeftButtons
+};