@gridsuite/commons-ui 0.245.0 → 0.246.0

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

@@ -1,25 +1,18 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { styled, IconButton, Grid2, Box, Button } from "@mui/material";
+import { styled, IconButton, Grid2, Box } from "@mui/material";
 import { ControlPoint, Delete, ArrowCircleUp, ArrowCircleDown } from "@mui/icons-material";
-import { FormattedMessage } from "react-intl";
-import { useCSVDownloader } from "react-papaparse";
 import { ErrorInput } from "../../ui/reactHookForm/errorManagement/ErrorInput.js";
 import { FieldErrorAlert } from "../../ui/reactHookForm/errorManagement/FieldErrorAlert.js";
+import { CsvDownloadButton } from "../../ui/csvDownloader/csv-download-button.js";
+import "react";
+import "react-intl";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
-import { getCsvDelimiter } from "../../../utils/langs.js";
 const InnerColoredButton = styled(IconButton)(({ theme }) => {
   return {
     color: theme.palette.primary.main
   };
 });
-function CsvDownloadButton({ data, fileName, delimiter, labelId, disabled }) {
-  const { CSVDownloader } = useCSVDownloader();
-  if (disabled) {
-    return /* @__PURE__ */ jsx(Button, { variant: "outlined", disabled: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: labelId }) });
-  }
-  return /* @__PURE__ */ jsx(CSVDownloader, { data, filename: fileName, config: { delimiter }, children: /* @__PURE__ */ jsx(Button, { variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: labelId }) }) });
-}
 function BottomTableButtons({
   name,
   disableUp,
@@ -32,24 +25,16 @@ function BottomTableButtons({
   csvProps
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, alignItems: "center", spacing: 1, children: [
-      csvProps?.getTemplateData && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
-        CsvDownloadButton,
-        {
-          data: csvProps.getTemplateData,
-          fileName: csvProps.fileName,
-          delimiter: getCsvDelimiter(csvProps.language),
-          labelId: "GenerateCSV"
-        }
-      ) }),
+    /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, paddingLeft: 1, alignItems: "center", spacing: 1, children: [
       csvProps?.getTableData && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         CsvDownloadButton,
         {
           data: csvProps.getTableData,
           fileName: csvProps.fileName,
-          delimiter: getCsvDelimiter(csvProps.language),
+          language: csvProps.language,
           labelId: "DownloadCSV",
-          disabled: !csvProps.hasTableData
+          disabled: !csvProps.hasTableData,
+          withExportButton: true
         }
       ) }),
       csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid2, { children: csvProps.extraButtons }),

package/dist/components/composite/agGridTable/agGridTable-utils.d.ts

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 export interface CsvProps {
     fileName: string;
     language?: string;
-    getTemplateData?: () => unknown[];
     getTableData?: () => unknown[];
     extraButtons?: ReactNode;
     hasTableData?: boolean;

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback, useState, useRef } from "react";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
@@ -45,6 +45,7 @@ import "../../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import { CsvDownloadButton } from "../../../ui/csvDownloader/csv-download-button.js";
 import { CsvPicker } from "../../../ui/csvPicker/csv-picker.js";
 const explicitNamingFilterSchema = {
   [FILTER_EQUIPMENTS_ATTRIBUTES]: yup.array().of(
@@ -193,77 +194,87 @@ function ExplicitNamingFilterForm({
       padding: 1,
       sx: { flexGrow: 1, flexWrap: "nowrap", minHeight: 0 },
       children: [
-        /* @__PURE__ */ jsxs(Grid2, { container: true, justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ jsxs(Grid2, { children: [
-            /* @__PURE__ */ jsx(
-              InputWithPopupConfirmation,
+        /* @__PURE__ */ jsxs(Grid2, { children: [
+          /* @__PURE__ */ jsx(
+            InputWithPopupConfirmation,
+            {
+              Input: SelectInput,
+              name: FieldConstants.EQUIPMENT_TYPE,
+              options: Object.values(FILTER_EQUIPMENTS),
+              disabled: !!sourceFilterForExplicitNamingConversion || isEditing && !isDeveloperMode,
+              label: "equipmentType",
+              shouldOpenPopup: openConfirmationPopup,
+              resetOnConfirmation: handleResetOnConfirmation,
+              message: "changeTypeMessage",
+              validateButtonLabel: "button.changeType",
+              sx: { width: 400, maxWidth: "100%" },
+              "data-testid": "EquipmentTypeSelector"
+            }
+          ),
+          sourceFilterForExplicitNamingConversion && /* @__PURE__ */ jsx(
+            ModifyElementSelection,
+            {
+              elementType: ElementType.STUDY,
+              onElementValidated: onStudySelected,
+              dialogOpeningButtonLabel: "selectStudyDialogButton",
+              dialogTitleLabel: "selectStudyDialogTitle",
+              dialogMessageLabel: "selectStudyText",
+              noElementMessageLabel: "noSelectedStudyText"
+            }
+          )
+        ] }),
+        watchEquipmentType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+              CsvDownloadButton,
               {
-                Input: SelectInput,
-                name: FieldConstants.EQUIPMENT_TYPE,
-                options: Object.values(FILTER_EQUIPMENTS),
-                disabled: !!sourceFilterForExplicitNamingConversion || isEditing && !isDeveloperMode,
-                label: "equipmentType",
-                shouldOpenPopup: openConfirmationPopup,
-                resetOnConfirmation: handleResetOnConfirmation,
-                message: "changeTypeMessage",
-                validateButtonLabel: "button.changeType",
-                sx: { width: 400, maxWidth: "100%" },
-                "data-testid": "EquipmentTypeSelector"
+                data: getTemplateData,
+                fileName: intl.formatMessage({ id: "filterCsvFileName" }),
+                language,
+                labelId: "GenerateCSV",
+                variant: "contained"
               }
-            ),
-            sourceFilterForExplicitNamingConversion && /* @__PURE__ */ jsx(
-              ModifyElementSelection,
+            ) }),
+            /* @__PURE__ */ jsx(Grid2, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+              CsvPicker,
               {
-                elementType: ElementType.STUDY,
-                onElementValidated: onStudySelected,
-                dialogOpeningButtonLabel: "selectStudyDialogButton",
-                dialogTitleLabel: "selectStudyDialogTitle",
-                dialogMessageLabel: "selectStudyText",
-                noElementMessageLabel: "noSelectedStudyText"
+                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__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
-            CsvPicker,
+          fileErrorMessage && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
+          /* @__PURE__ */ jsx(Grid2, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+            CustomAgGridTable,
             {
-              label: "UploadCSV",
-              requiredColumns: csvFileHeaders,
-              language: language ?? LANG_SYSTEM,
-              disabled: !watchEquipmentType,
-              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))
+              ref: tableRef,
+              name: FILTER_EQUIPMENTS_ATTRIBUTES,
+              columnDefs,
+              defaultColDef,
+              makeDefaultRowData,
+              pagination: true,
+              rowSelection: {
+                mode: "multiRow",
+                enableClickSelection: false,
+                checkboxes: true,
+                headerCheckbox: true
+              },
+              alwaysShowVerticalScroll: true,
+              csvProps: {
+                fileName: intl.formatMessage({ id: "filterCsvFileName" }),
+                language,
+                getTableData
+              }
             }
           ) })
-        ] }),
-        fileErrorMessage && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
-        watchEquipmentType && /* @__PURE__ */ jsx(Grid2, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
-          CustomAgGridTable,
-          {
-            ref: tableRef,
-            name: FILTER_EQUIPMENTS_ATTRIBUTES,
-            columnDefs,
-            defaultColDef,
-            makeDefaultRowData,
-            pagination: true,
-            rowSelection: {
-              mode: "multiRow",
-              enableClickSelection: false,
-              checkboxes: true,
-              headerCheckbox: true
-            },
-            alwaysShowVerticalScroll: true,
-            csvProps: {
-              fileName: intl.formatMessage({ id: "filterCsvFileName" }),
-              language,
-              getTemplateData,
-              getTableData
-            }
-          }
-        ) })
+        ] })
       ]
     }
   );

package/dist/components/index.js

@@ -68,6 +68,7 @@ import { EditNoteIcon } from "./ui/icons/EditNoteIcon.js";
 import { VoltageUnitIcon } from "./ui/icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./ui/menus/custom-nested-menu.js";
 import { ResizeHandle } from "./ui/resizablePanels/ResizeHandle.js";
+import { CsvDownloadButton } from "./ui/csvDownloader/csv-download-button.js";
 import { CsvExport } from "./ui/csvDownloader/csv-export.js";
 import { ExportCsvButton } from "./ui/csvDownloader/export-csv-button.js";
 import { ManagedExportCsvButton } from "./ui/csvDownloader/managed-export-csv-button.js";
@@ -182,6 +183,7 @@ export {
   CountriesInput,
   CountrySelectionInput,
   CountryValueEditor,
+  CsvDownloadButton,
   CsvExport,
   CsvPicker,
   CustomAGGrid,

package/dist/components/ui/csvDownloader/csv-download-button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@mui/material';
+export interface CsvDownloadButtonProps {
+    labelId: string;
+    data: () => unknown[];
+    fileName: string;
+    language?: string;
+    withExportButton?: boolean;
+    disabled?: boolean;
+    variant?: ButtonProps['variant'];
+}
+export declare function CsvDownloadButton({ labelId, data, fileName, language, withExportButton, disabled, variant, }: Readonly<CsvDownloadButtonProps>): import("react").JSX.Element;

package/dist/components/ui/csvDownloader/csv-download-button.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { useCSVDownloader } from "react-papaparse";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import { getCsvDelimiter } from "../../../utils/langs.js";
+import "@mui/icons-material";
+import { ExportCsvButton } from "./export-csv-button.js";
+function CsvDownloadButton({
+  labelId,
+  data,
+  fileName,
+  language,
+  withExportButton = false,
+  disabled,
+  variant = "outlined"
+}) {
+  const { CSVDownloader } = useCSVDownloader();
+  const button = withExportButton ? /* @__PURE__ */ jsx(ExportCsvButton, { labelId, disabled }) : /* @__PURE__ */ jsx(Button, { variant, disabled, children: /* @__PURE__ */ jsx(FormattedMessage, { id: labelId }) });
+  if (disabled) {
+    return button;
+  }
+  return /* @__PURE__ */ jsx(CSVDownloader, { data, filename: fileName, config: { delimiter: getCsvDelimiter(language) }, children: button });
+}
+export {
+  CsvDownloadButton
+};

package/dist/components/ui/csvDownloader/export-csv-button.d.ts

@@ -1,7 +1,8 @@
 export interface ExportButtonProps {
+    labelId?: string;
     disabled?: boolean;
-    onClick: () => void;
+    onClick?: () => void;
     isDownloadLoading?: boolean;
     isDownloadSuccessful?: boolean;
 }
-export declare function ExportCsvButton({ onClick, disabled, isDownloadLoading: isCsvLoading, isDownloadSuccessful, }: Readonly<ExportButtonProps>): import("react").JSX.Element;
+export declare function ExportCsvButton({ labelId, onClick, disabled, isDownloadLoading: isCsvLoading, isDownloadSuccessful, }: Readonly<ExportButtonProps>): import("react").JSX.Element;

package/dist/components/ui/csvDownloader/export-csv-button.js

@@ -3,13 +3,14 @@ import { Box, IconButton, CircularProgress } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { Check, GetApp } from "@mui/icons-material";
 function ExportCsvButton({
+  labelId = "MuiVirtualizedTable/exportCSV",
   onClick,
   disabled = false,
   isDownloadLoading: isCsvLoading = false,
   isDownloadSuccessful = false
 }) {
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx(FormattedMessage, { id: "MuiVirtualizedTable/exportCSV" }),
+    /* @__PURE__ */ jsx(FormattedMessage, { id: labelId }),
     /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
       /* @__PURE__ */ jsx(IconButton, { disabled, "aria-label": "exportCSVButton", onClick, children: isDownloadSuccessful ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(GetApp, {}) }),
       isCsvLoading && /* @__PURE__ */ jsx(

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

@@ -4,6 +4,7 @@
  * 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 './csv-download-button';
 export * from './csv-export';
 export * from './csv-export.type';
 export * from './export-csv-button';

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

@@ -1,8 +1,10 @@
+import { CsvDownloadButton } from "./csv-download-button.js";
 import { CsvExport } from "./csv-export.js";
 import { ExportCsvButton } from "./export-csv-button.js";
 import { ManagedExportCsvButton } from "./managed-export-csv-button.js";
 import { fetchCsvSeparator, useCsvExport } from "./use-csv-export.js";
 export {
+  CsvDownloadButton,
   CsvExport,
   ExportCsvButton,
   ManagedExportCsvButton,

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

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Button } from "@mui/material";
+import { Grid2, Tooltip, Typography, Button } from "@mui/material";
 import { useCSVReader } from "react-papaparse";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -74,31 +74,17 @@ function CsvPicker({
           ...parseConfig
         },
         onUploadAccepted: handleUploadAccepted,
-        children: ({ getRootProps, ProgressBar }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
+        children: ({ getRootProps }) => /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, alignItems: "center", justifyContent: "right", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Grid2, { 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(Grid2, { size: "auto", children: /* @__PURE__ */ jsx(
+            Button,
             {
-              style: {
-                marginRight: "10px",
-                fontWeight: "bold"
-              },
-              children: selectedFile ? selectedFile.name : intl.formatMessage({ id: "uploadMessage" })
+              ...getRootProps(),
+              variant: selectedFile ? "contained" : "text",
+              disabled,
+              children: /* @__PURE__ */ jsx(FormattedMessage, { id: label })
             }
-          ),
-          /* @__PURE__ */ jsxs(Button, { ...getRootProps(), variant: "outlined", disabled, children: [
-            /* @__PURE__ */ jsx(FormattedMessage, { id: label }),
-            /* @__PURE__ */ jsx(
-              ProgressBar,
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  width: "100%",
-                  height: "100%"
-                }
-              }
-            )
-          ] })
+          ) })
         ] })
       }
     ),

package/dist/components/ui/index.js

@@ -68,6 +68,7 @@ import { EditNoteIcon } from "./icons/EditNoteIcon.js";
 import { VoltageUnitIcon } from "./icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./menus/custom-nested-menu.js";
 import { ResizeHandle } from "./resizablePanels/ResizeHandle.js";
+import { CsvDownloadButton } from "./csvDownloader/csv-download-button.js";
 import { CsvExport } from "./csvDownloader/csv-export.js";
 import { ExportCsvButton } from "./csvDownloader/export-csv-button.js";
 import { ManagedExportCsvButton } from "./csvDownloader/managed-export-csv-button.js";
@@ -93,6 +94,7 @@ export {
   ChipItemsInput,
   CountriesInput,
   CountrySelectionInput,
+  CsvDownloadButton,
   CsvExport,
   CsvPicker,
   CustomFormContext,

package/dist/index.js

@@ -69,6 +69,7 @@ import { EditNoteIcon } from "./components/ui/icons/EditNoteIcon.js";
 import { VoltageUnitIcon } from "./components/ui/icons/VoltageUnitIcon.js";
 import { CustomMenuItem, CustomNestedMenuItem } from "./components/ui/menus/custom-nested-menu.js";
 import { ResizeHandle } from "./components/ui/resizablePanels/ResizeHandle.js";
+import { CsvDownloadButton } from "./components/ui/csvDownloader/csv-download-button.js";
 import { CsvExport } from "./components/ui/csvDownloader/csv-export.js";
 import { ExportCsvButton } from "./components/ui/csvDownloader/export-csv-button.js";
 import { ManagedExportCsvButton } from "./components/ui/csvDownloader/managed-export-csv-button.js";
@@ -596,6 +597,7 @@ export {
   CountrySelectionInput,
   CountryValueEditor,
   CreateParameterDialog,
+  CsvDownloadButton,
   CsvExport,
   CsvPicker,
   CustomAGGrid,

package/dist/translations/en/csvEn.js

@@ -1,10 +1,10 @@
 const csvEn = {
   noDataInCsvFile: "No data found in file ''{filename}''",
-  wrongCsvHeadersError: "The file ''{filename}'' has the wrong headers. Use Generate CSV template button to get supported CSV format",
+  wrongCsvHeadersError: "The file ''{filename}'' has the wrong headers. Use ''Generate template'' button to get supported CSV format",
   keepCSVDataMessage: "Do you want to replace or add the new data to the current list ?",
-  GenerateCSV: "Generate CSV template",
+  GenerateCSV: "Generate template",
   DownloadCSV: "Download CSV",
-  UploadCSV: "Upload CSV",
+  UploadCSV: "Import CSV",
   uploadMessage: " No file selected",
   tooManyLinesInCsvFile: "The number of lines in file ''{filename}'' must not exceed {value}"
 };

package/dist/translations/fr/csvFr.js

@@ -1,10 +1,10 @@
 const csvFr = {
   noDataInCsvFile: 'Aucune donnée trouvée dans le fichier "{filename}"',
-  wrongCsvHeadersError: 'Les en-têtes du fichier "{filename}" sont incorrects. Utilisez le bouton Générer le modèle CSV pour obtenir le format CSV pris en charge',
+  wrongCsvHeadersError: 'Les en-têtes du fichier "{filename}" sont incorrects. Utilisez le bouton "Générer le modèle" pour obtenir le format CSV pris en charge',
   keepCSVDataMessage: "Voulez-vous remplacer la liste existante ou y ajouter les nouvelles données ?",
-  GenerateCSV: "Générer le modèle CSV",
+  GenerateCSV: "Générer le modèle",
   DownloadCSV: "Télécharger en CSV",
-  UploadCSV: "Charger un CSV",
+  UploadCSV: "Importer un CSV",
   uploadMessage: " Aucun fichier sélectionné",
   tooManyLinesInCsvFile: 'Le nombre de lignes dans le fichier "{filename}" ne doit pas dépasser {value}'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.245.0",
+    "version": "0.246.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",