@gridsuite/commons-ui 0.228.0 → 0.229.0

package/dist/components/composite/agGridTable/BottomTableButtons.d.ts

@@ -0,0 +1,13 @@
+import { CsvProps } from './agGridTable-utils';
+export interface BottomTableButtonsProps {
+    name: string;
+    disableUp: boolean;
+    disableDown: boolean;
+    disableDelete: boolean;
+    handleAddRow: () => void;
+    handleDeleteRows: () => void;
+    handleMoveRowUp: () => void;
+    handleMoveRowDown: () => void;
+    csvProps?: CsvProps;
+}
+export declare function BottomTableButtons({ name, disableUp, disableDown, disableDelete, handleAddRow, handleDeleteRows, handleMoveRowUp, handleMoveRowDown, csvProps, }: BottomTableButtonsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { styled, IconButton, Grid2, Box, Button } 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 "../../../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,
+  disableDown,
+  disableDelete,
+  handleAddRow,
+  handleDeleteRows,
+  handleMoveRowUp,
+  handleMoveRowDown,
+  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"
+        }
+      ) }),
+      csvProps?.getTableData && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+        CsvDownloadButton,
+        {
+          data: csvProps.getTableData,
+          fileName: csvProps.fileName,
+          delimiter: getCsvDelimiter(csvProps.language),
+          labelId: "DownloadCSV",
+          disabled: !csvProps.hasTableData
+        }
+      ) }),
+      csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid2, { children: csvProps.extraButtons }),
+      /* @__PURE__ */ jsxs(Grid2, { sx: { marginLeft: "auto" }, children: [
+        /* @__PURE__ */ jsx(InnerColoredButton, { onClick: handleAddRow, "aria-label": "Add row", children: /* @__PURE__ */ jsx(ControlPoint, {}) }),
+        /* @__PURE__ */ jsx(
+          InnerColoredButton,
+          {
+            onClick: handleDeleteRows,
+            disabled: disableDelete,
+            "aria-label": "Delete selected rows",
+            children: /* @__PURE__ */ jsx(Delete, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InnerColoredButton,
+          {
+            disabled: disableUp,
+            onClick: handleMoveRowUp,
+            "aria-label": "Move selected rows up",
+            children: /* @__PURE__ */ jsx(ArrowCircleUp, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InnerColoredButton,
+          {
+            disabled: disableDown,
+            onClick: handleMoveRowDown,
+            "aria-label": "Move selected rows down",
+            children: /* @__PURE__ */ jsx(ArrowCircleDown, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert }) })
+  ] });
+}
+export {
+  BottomTableButtons
+};

package/dist/components/composite/agGridTable/CustomAgGridTable.d.ts

@@ -1,9 +1,10 @@
 import { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
+import { CsvProps } from './agGridTable-utils';
 import { CustomAGGridProps } from '../customAGGrid';
 export type CustomAgGridTableProps = Required<Pick<CustomAGGridProps, 'columnDefs'>> & Pick<CustomAGGridProps, 'defaultColDef' | 'pagination' | 'paginationPageSize' | 'alwaysShowVerticalScroll' | 'stopEditingWhenCellsLoseFocus' | 'rowSelection' | 'overrideLocales' | 'loading'> & {
     name: string;
     makeDefaultRowData: any;
-    csvProps: unknown;
-    cssProps: unknown;
+    csvProps?: CsvProps;
+    cssProps?: unknown;
 };
 export declare const CustomAgGridTable: import('react').ForwardRefExoticComponent<Readonly<CustomAgGridTableProps> & import('react').RefAttributes<UseFieldArrayReturn<FieldValues, string>>>;

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

@@ -2,37 +2,22 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useImperativeHandle, useCallback, useEffect } from "react";
 import { useFormContext, useFieldArray } from "react-hook-form";
 import { useTheme, Box } from "@mui/material";
-import { BottomRightButtons } from "./BottomRightButtons.js";
+import { BottomTableButtons } from "./BottomTableButtons.js";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
+import { hasNonEmptyRows } from "../../../utils/functions.js";
 import "@mui/icons-material";
 import { CustomAGGrid } from "../customAGGrid/customAggrid.js";
 import "react-intl";
 const style = (customProps) => ({
   grid: (theme) => ({
-    width: "auto",
     height: "100%",
-    position: "relative",
-    // - AG Grid colors override -
-    // It shouldn't be exactly like this, but I couldn't make it works otherwise
-    // https://www.ag-grid.com/react-data-grid/global-style-customisation/
-    "--ag-alpine-active-color": `${theme.palette.primary.main} !important`,
-    "--ag-checkbox-indeterminate-color": `${theme.palette.primary.main} !important`,
-    "--ag-background-color": `${theme.agGridBackground.color} !important`,
-    "--ag-header-background-color": `${theme.agGridBackground.color} !important`,
-    "--ag-odd-row-background-color": `${theme.agGridBackground.color} !important`,
-    "--ag-modal-overlay-background-color": `${theme.agGridBackground.color} !important`,
-    "--ag-selected-row-background-color": "transparent !important",
-    "--ag-range-selection-border-color": "transparent !important",
     // overrides the default computed max height for ag grid default selector editor to make it more usable
     // can be removed if a custom selector editor is implemented
     "& .ag-select-list": {
       maxHeight: "300px !important"
     },
-    "& .ag-root-wrapper-body": {
-      maxHeight: "500px"
-    },
     "& .ag-cell": {
       boxShadow: "none"
     },
@@ -46,14 +31,9 @@ const style = (customProps) => ({
       border: "none",
       boxShadow: "none"
     },
-    "& .numeric-input": {
-      fontSize: "calc(var(--ag-font-size) + 1px)",
-      paddingLeft: "calc(var(--ag-cell-horizontal-padding) - 1px)",
-      width: "100%",
-      height: "100%",
-      border: "inherit",
-      outline: "inherit",
-      backgroundColor: theme.agGridBackground.color
+    // Color the checkbox (checked & indeterminate) grey instead of AG Grid's default accent (blue).
+    "& .ag-checkbox-input-wrapper.ag-checked::after, & .ag-checkbox-input-wrapper.ag-indeterminate::after": {
+      color: `${theme.palette.text.secondary}`
     },
     "& .Mui-focused .MuiOutlinedInput-root": {
       // borders moves row height
@@ -87,6 +67,7 @@ const CustomAgGridTable = forwardRef(
     const { append, remove, update, swap, move } = useFieldArrayOutput;
     useImperativeHandle(ref, () => useFieldArrayOutput, [useFieldArrayOutput]);
     const rowData = watch(name);
+    const hasTableData = hasNonEmptyRows(rowData);
     const isFirstSelected = Boolean(
       rowData?.length && gridApi?.api.getRowNode(rowData[0][FieldConstants.AG_GRID_ROW_UUID])?.isSelected()
     );
@@ -136,13 +117,11 @@ const CustomAgGridTable = forwardRef(
     const onGridReady = (params) => {
       setGridApi(params);
     };
-    const onRowDataUpdated = () => {
+    const onRowDataUpdated = (event) => {
       setNewRowAdded(false);
-      if (gridApi?.api) {
-        const lastIndex = rowData.length - 1;
-        gridApi.api.paginationGoToLastPage();
-        gridApi.api.ensureIndexVisible(lastIndex, "bottom");
-      }
+      const lastIndex = rowData.length - 1;
+      event.api.paginationGoToLastPage();
+      event.api.ensureIndexVisible(lastIndex, "bottom");
     };
     const onCellEditingStopped = useCallback(
       (event) => {
@@ -165,12 +144,12 @@ const CustomAgGridTable = forwardRef(
           rowData,
           onGridReady,
           cacheOverflowSize: 10,
-          rowSelection: rowSelection ?? "multiple",
+          rowSelection: rowSelection ?? { mode: "multiRow" },
           selectionColumnDef: { rowDrag: true, width: 80, pinned: "left" },
-          onRowDragMove: (e) => move(getIndex(e.node.data), e.overIndex),
+          onRowDragMove: (event) => move(getIndex(event.node.data), event.overIndex),
           detailRowAutoHeight: true,
-          onSelectionChanged: () => {
-            setSelectedRows(gridApi.api.getSelectedRows());
+          onSelectionChanged: (event) => {
+            setSelectedRows(event.api.getSelectedRows());
           },
           onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
           onCellEditingStopped,
@@ -182,7 +161,7 @@ const CustomAgGridTable = forwardRef(
         }
       ) }),
       /* @__PURE__ */ jsx(
-        BottomRightButtons,
+        BottomTableButtons,
         {
           name,
           handleAddRow,
@@ -192,8 +171,7 @@ const CustomAgGridTable = forwardRef(
           disableUp: noRowSelected || isFirstSelected || isSortApplied,
           disableDown: noRowSelected || isLastSelected || isSortApplied,
           disableDelete: noRowSelected,
-          csvProps,
-          useFieldArrayOutput
+          csvProps: csvProps && { ...csvProps, hasTableData }
         }
       )
     ] });

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

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

package/dist/components/composite/agGridTable/agGridTable-utils.js

@@ -0,0 +1 @@
+

package/dist/components/composite/agGridTable/cellEditors/index.js

@@ -1,4 +1,5 @@
-import { NumericEditor } from "./numericEditor.js";
+import { NumericEditor, suppressNonNumericKeyboardEvent } from "./numericEditor.js";
 export {
-  NumericEditor
+  NumericEditor,
+  suppressNonNumericKeyboardEvent
 };

package/dist/components/composite/agGridTable/cellEditors/numericEditor.d.ts

@@ -1,21 +1,23 @@
-import { ICellEditorComp, ICellEditorParams } from 'ag-grid-community';
+import { CustomCellEditorProps } from 'ag-grid-react';
+import { SuppressKeyboardEventParams } from 'ag-grid-community';
 /**
- * This is a modified version of the cell editor proposed by AGGrid itself :
- * https://www.ag-grid.com/javascript-data-grid/component-cell-editor/#cell-editor-example
- * I use this JS version instead of the React version because it's simpler and lighter.
- * React version if you want to check, with forwardRef, useEffect and useImperativeHandle :
- * https://www.ag-grid.com/react-data-grid/component-cell-editor/#cell-editor-example
+ * `suppressKeyboardEvent` callback to put on any column using {@link NumericEditor}.
+ * Prevents ag-grid from starting an edit when a non-numeric printable key is pressed on a focused cell.
+ * Numeric keys still start editing; keys pressed while already editing are left to the input's own onKeyDown handling.
  */
-export declare class NumericEditor implements ICellEditorComp {
-    private eInput;
-    private cancelBeforeStart;
-    init(params: ICellEditorParams): void;
-    private static isBackspace;
-    private static isNavigationKey;
-    getGui(): HTMLInputElement;
-    afterGuiAttached(): void;
-    isCancelBeforeStart(): boolean;
-    getValue(): number | null;
-    private static isCharNumeric;
-    private static isNumericKey;
-}
+export declare const suppressNonNumericKeyboardEvent: (params: SuppressKeyboardEventParams) => boolean;
+/**
+ * Custom numeric cell editor (see ag-grid custom cell editor docs:
+ * https://www.ag-grid.com/react-data-grid/cell-editors/#custom-components).
+ * Restricts typing to digits and decimal separators while keeping the raw text in the input,
+ * and commits the value as a number (or null) via onValueChange.
+ *
+ * NB: the `eventKey`-driven logic below (seeding the initial value from the triggering key in the
+ * useState/useEffect) only matters when editing is started by typing a character on a focused cell,
+ * i.e. when the column uses `singleClickEdit: false`. With `singleClickEdit: true` (what we mostly
+ * use), editing starts on click, `eventKey` is null, and those branches are effectively inert.
+ *
+ * Columns using this editor should also set `suppressKeyboardEvent: suppressNonNumericKeyboardEvent`
+ * so that a non-numeric key on a focused cell doesn't start an edit.
+ */
+export declare function NumericEditor({ value, onValueChange, eventKey }: CustomCellEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/composite/agGridTable/cellEditors/numericEditor.js

@@ -1,62 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
 import { KeyCode } from "ag-grid-community";
-class NumericEditor {
-  // gets called once before the renderer is used
-  init(params) {
-    this.eInput = document.createElement("input");
-    this.eInput.classList.add("numeric-input");
-    if (params.eventKey === KeyCode.BACKSPACE) {
-      this.eInput.value = "";
-    } else if (NumericEditor.isCharNumeric(params.eventKey)) {
-      this.eInput.value = params.eventKey;
-    } else if (params.value !== void 0 && params.value !== null) {
-      this.eInput.value = params.value;
+const isCharNumeric = (charStr) => !!charStr && /\d|,|\./.test(charStr);
+const suppressNonNumericKeyboardEvent = (params) => !params.editing && params.event.key.length === 1 && !isCharNumeric(params.event.key);
+const toNumber = (text) => {
+  const result = Number.parseFloat(text.replace(",", "."));
+  return Number.isNaN(result) ? null : result;
+};
+function NumericEditor({ value, onValueChange, eventKey }) {
+  const refInput = useRef(null);
+  const [text, setText] = useState(() => {
+    if (eventKey === KeyCode.BACKSPACE) {
+      return "";
+    }
+    if (eventKey?.length === 1 && isCharNumeric(eventKey)) {
+      return eventKey;
+    }
+    return value == null ? "" : String(value);
+  });
+  useEffect(() => {
+    onValueChange(toNumber(text));
+    refInput.current?.select();
+  }, []);
+  const handleChange = (event) => {
+    setText(event.target.value);
+    onValueChange(toNumber(event.target.value));
+  };
+  const handleKeyDown = (event) => {
+    if (event.key.length === 1 && !isCharNumeric(event.key)) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "ag-cell-editor ag-text-field ag-input-field", role: "presentation", children: /* @__PURE__ */ jsx("div", { className: "ag-wrapper ag-input-wrapper ag-text-field-input-wrapper", role: "presentation", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: refInput,
+      className: "ag-input-field-input ag-text-field-input",
+      type: "text",
+      value: text,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
     }
-    this.eInput.addEventListener("keydown", (event) => {
-      if (!event.key || event.key.length !== 1) {
-        return;
-      }
-      if (!NumericEditor.isNumericKey(event)) {
-        this.eInput.focus();
-        if (event.preventDefault) {
-          event.preventDefault();
-        }
-      } else if (NumericEditor.isNavigationKey(event) || NumericEditor.isBackspace(event)) {
-        event.stopPropagation();
-      }
-    });
-    const isNotANumber = params.eventKey && params.eventKey.length === 1 && "1234567890,.".indexOf(params.eventKey) < 0;
-    this.cancelBeforeStart = !!isNotANumber;
-  }
-  static isBackspace(event) {
-    return event.key === KeyCode.BACKSPACE;
-  }
-  static isNavigationKey(event) {
-    return event.key === "ArrowLeft" || event.key === "ArrowRight";
-  }
-  // gets called once when grid ready to insert the element
-  getGui() {
-    return this.eInput;
-  }
-  // focus and select can be done after the gui is attached
-  afterGuiAttached() {
-    this.eInput.focus();
-  }
-  // returns the new value after editing
-  isCancelBeforeStart() {
-    return this.cancelBeforeStart;
-  }
-  // returns the new value after editing
-  getValue() {
-    const result = parseFloat(this.eInput.value.replace(",", "."));
-    return Number.isNaN(result) ? null : result;
-  }
-  static isCharNumeric(charStr) {
-    return charStr && /\d|,|\./.test(charStr);
-  }
-  static isNumericKey(event) {
-    return NumericEditor.isCharNumeric(event.key);
-  }
+  ) }) });
 }
 export {
-  NumericEditor
+  NumericEditor,
+  suppressNonNumericKeyboardEvent
 };

package/dist/components/composite/agGridTable/index.d.ts

@@ -4,7 +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 './BottomRightButtons';
+export * from './BottomTableButtons';
 export * from './CustomAgGridTable';
+export * from './agGridTable-utils';
 export * from './cellEditors';
-export * from './csvUploader';

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

@@ -1,10 +1,9 @@
-import { BottomRightButtons } from "./BottomRightButtons.js";
+import { BottomTableButtons } from "./BottomTableButtons.js";
 import { CustomAgGridTable } from "./CustomAgGridTable.js";
-import { NumericEditor } from "./cellEditors/numericEditor.js";
-import { CsvUploader } from "./csvUploader/CsvUploader.js";
+import { NumericEditor, suppressNonNumericKeyboardEvent } from "./cellEditors/numericEditor.js";
 export {
-  BottomRightButtons,
-  CsvUploader,
+  BottomTableButtons,
   CustomAgGridTable,
-  NumericEditor
+  NumericEditor,
+  suppressNonNumericKeyboardEvent
 };

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

@@ -28,6 +28,7 @@ import "../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import "react-papaparse";
 function DndTableAddRowsDialog({ open, handleAddButton, onClose }) {
   const [rowNumber, setRowNumber] = useState(1);
   const handleClose = () => {

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

@@ -40,6 +40,7 @@ import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import "react-papaparse";
 import { DeletableTableRow } from "./deletable-table-row.js";
 function DefaultTableCell({ name, rowIndex, column, width, ...props }) {
   return /* @__PURE__ */ jsx(TableCell, { sx: mergeSx({ padding: 1 }, width), children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name, ...props }) }, column.dataKey);

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

@@ -36,6 +36,7 @@ import "../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import "react-papaparse";
 import { DndTableRow } from "./dnd-table-row.js";
 const styles = {
   columnsStyle: {

package/dist/components/composite/filter/HeaderFilterForm.js

@@ -32,6 +32,7 @@ import "../../ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import "react-papaparse";
 const filterStyles = {
   textField: {
     minWidth: "250px",

package/dist/components/composite/filter/expert/ExpertFilterForm.js

@@ -40,6 +40,7 @@ import "../../../ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
+import "react-papaparse";
 import '../../../../assets/ExpertFilterForm.css';function isSupportedEquipmentType(equipmentType) {
   return Object.values(EXPERT_FILTER_EQUIPMENTS).map((equipments) => equipments.id).includes(equipmentType);
 }