@gridsuite/commons-ui 0.238.0 → 0.240.0

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Select, MenuItem } from "@mui/material";
+import { Grid2, Typography, Select, MenuItem } from "@mui/material";
 import { useIntl } from "react-intl";
 const styles = {
   gridItem: {
@@ -32,9 +32,9 @@ function RuleValueEditor(props) {
       operator
     });
   };
-  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       Select,
       {
         value: operator,
@@ -46,7 +46,7 @@ function RuleValueEditor(props) {
         children: fieldData.operators?.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name))
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       ValueEditorControlElement,
       {
         ...props,

package/dist/components/composite/report/QuickSearch.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { SxStyle } from '../../../utils';
+interface QuickSearchProps {
+    currentResultIndex: number;
+    onSearch: (searchTerm: string) => void;
+    onNavigate: (direction: 'next' | 'previous') => void;
+    resultCount: number;
+    resetSearch: () => void;
+    placeholder?: string;
+    inputRef: RefObject<HTMLDivElement | null>;
+    sx?: SxStyle;
+}
+export declare function QuickSearch({ currentResultIndex, onSearch, onNavigate, resultCount, resetSearch, placeholder, inputRef, sx, }: Readonly<QuickSearchProps>): import("react").JSX.Element;
+export {};

package/dist/components/composite/report/QuickSearch.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { TextField, InputAdornment, IconButton, Box } from "@mui/material";
+import { Clear, KeyboardArrowUp, KeyboardArrowDown } from "@mui/icons-material";
+import { useIntl } from "react-intl";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import { useDebounce } from "../../../hooks/useDebounce.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+const styles = {
+  adornmentItem: {
+    padding: "2px"
+  }
+};
+function QuickSearch({
+  currentResultIndex,
+  onSearch,
+  onNavigate,
+  resultCount,
+  resetSearch,
+  placeholder,
+  inputRef,
+  sx
+}) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [resultsCountDisplay, setResultsCountDisplay] = useState(false);
+  const intl = useIntl();
+  const debounceSearch = useDebounce(onSearch, 300);
+  const handleSearch = useCallback(() => {
+    debounceSearch(searchTerm);
+    setResultsCountDisplay(true);
+  }, [searchTerm, debounceSearch]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" && searchTerm) {
+        if (resultsCountDisplay && resultCount > 0) {
+          onNavigate("next");
+        } else {
+          handleSearch();
+        }
+      }
+    },
+    [handleSearch, onNavigate, resultCount, resultsCountDisplay, searchTerm]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      if (value === "") {
+        resetSearch();
+        setResultsCountDisplay(false);
+      }
+      setSearchTerm(value);
+      debounceSearch(value);
+      if (value.length > 0) {
+        setResultsCountDisplay(true);
+      }
+    },
+    [debounceSearch, resetSearch]
+  );
+  const handleClear = useCallback(() => {
+    setSearchTerm("");
+    resetSearch();
+    setResultsCountDisplay(false);
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef, resetSearch]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      inputRef,
+      value: searchTerm,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: placeholder ? intl.formatMessage({ id: placeholder }) : "",
+      sx: { maxWidth: "500px", ...sx },
+      size: "small",
+      InputProps: {
+        endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { sx: { padding: 0.2 }, position: "end", children: [
+          searchTerm && /* @__PURE__ */ jsx(IconButton, { sx: styles.adornmentItem, onClick: handleClear, children: /* @__PURE__ */ jsx(Clear, {}) }),
+          resultsCountDisplay && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { sx: styles.adornmentItem, children: /* @__PURE__ */ jsxs("span", { children: [
+              currentResultIndex + 1,
+              "/",
+              resultCount
+            ] }) }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  sx: styles.adornmentItem,
+                  onClick: () => onNavigate("previous"),
+                  disabled: resultCount === 0,
+                  children: /* @__PURE__ */ jsx(KeyboardArrowUp, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  sx: styles.adornmentItem,
+                  onClick: () => onNavigate("next"),
+                  disabled: resultCount === 0,
+                  children: /* @__PURE__ */ jsx(KeyboardArrowDown, {})
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    }
+  );
+}
+export {
+  QuickSearch
+};

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2026, 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 './report-viewer';
+export * from './report-severity';
+export * from './report-log.mapper';
+export * from './report.type';
+export * from './report.constant';
+export * from './QuickSearch';

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

@@ -0,0 +1,25 @@
+import { ReportViewer } from "./report-viewer/report-viewer.js";
+import { ReportFetcherContext, ReportFilterContext, useReportFetcherContext, useReportFilterContext } from "./report-viewer/context/report-viewer-context.js";
+import { default as default2 } from "./report-viewer/log-table/log-table.js";
+import { REPORT_SEVERITY, getContainerDefaultSeverityList, getDefaultSeverityFilter, sortSeverityList } from "./report-severity.js";
+import { mapReportLogs } from "./report-log.mapper.js";
+import { ReportType } from "./report.type.js";
+import { GLOBAL_REPORT_NODE_LABEL, NETWORK_MODIFICATION } from "./report.constant.js";
+import { QuickSearch } from "./QuickSearch.js";
+export {
+  GLOBAL_REPORT_NODE_LABEL,
+  default2 as LogTable,
+  NETWORK_MODIFICATION,
+  QuickSearch,
+  REPORT_SEVERITY,
+  ReportFetcherContext,
+  ReportFilterContext,
+  ReportType,
+  ReportViewer,
+  getContainerDefaultSeverityList,
+  getDefaultSeverityFilter,
+  mapReportLogs,
+  sortSeverityList,
+  useReportFetcherContext,
+  useReportFilterContext
+};

package/dist/components/composite/report/report-log.mapper.d.ts

@@ -0,0 +1,2 @@
+import { Log, ReportLog } from './report.type';
+export declare const mapReportLogs: (reportLogs: ReportLog[]) => Log[];

package/dist/components/composite/report/report-log.mapper.js

@@ -0,0 +1,22 @@
+import { REPORT_SEVERITY } from "./report-severity.js";
+const formatLog = (minDepth, reportLog, formattedLogs) => {
+  const severity = Object.values(REPORT_SEVERITY).find((s) => reportLog.severity === s.name) ?? REPORT_SEVERITY.UNKNOWN;
+  formattedLogs.push({
+    message: reportLog.message,
+    severity: severity.name,
+    backgroundColor: severity.colorName,
+    depth: (reportLog.depth ?? 0) - minDepth,
+    parentId: reportLog.parentId
+  });
+};
+const mapReportLogs = (reportLogs) => {
+  const formattedLogs = [];
+  const minDepth = Math.min(...reportLogs.map((log) => log.depth ?? 0));
+  reportLogs.forEach((reportLog) => {
+    formatLog(minDepth, reportLog, formattedLogs);
+  });
+  return formattedLogs;
+};
+export {
+  mapReportLogs
+};

package/dist/components/composite/report/report-severity.d.ts

@@ -0,0 +1,5 @@
+import { ReportSeverity, SeverityLevel } from './report.type';
+export declare const REPORT_SEVERITY: Record<SeverityLevel, ReportSeverity>;
+export declare const getDefaultSeverityFilter: (severityList: string[]) => string[];
+export declare function sortSeverityList(severityList: SeverityLevel[]): SeverityLevel[];
+export declare function getContainerDefaultSeverityList(): string[];

package/dist/components/composite/report/report-severity.js

@@ -0,0 +1,89 @@
+const REPORT_SEVERITY = {
+  UNKNOWN: {
+    name: "UNKNOWN",
+    level: 0,
+    colorName: "cornflowerblue",
+    colorHexCode: "#6495ED",
+    displayedByDefault: false,
+    displayedByDefaultForReportContainer: false
+  },
+  TRACE: {
+    name: "TRACE",
+    level: 1,
+    colorName: "SlateGray",
+    colorHexCode: "#708090",
+    displayedByDefault: false,
+    displayedByDefaultForReportContainer: true
+  },
+  DEBUG: {
+    name: "DEBUG",
+    level: 2,
+    colorName: "DarkCyan",
+    colorHexCode: "#008B8B",
+    displayedByDefault: false,
+    displayedByDefaultForReportContainer: true
+  },
+  DETAIL: {
+    name: "DETAIL",
+    level: 3,
+    colorName: "MediumPurple",
+    colorHexCode: "#9370DB",
+    displayedByDefault: false,
+    displayedByDefaultForReportContainer: true
+  },
+  INFO: {
+    name: "INFO",
+    level: 4,
+    colorName: "mediumseagreen",
+    colorHexCode: "#3CB371",
+    displayedByDefault: true,
+    displayedByDefaultForReportContainer: true
+  },
+  WARN: {
+    name: "WARN",
+    level: 5,
+    colorName: "orange",
+    colorHexCode: "#FFA500",
+    displayedByDefault: true,
+    displayedByDefaultForReportContainer: true
+  },
+  ERROR: {
+    name: "ERROR",
+    level: 6,
+    colorName: "crimson",
+    colorHexCode: "#DC143C",
+    displayedByDefault: true,
+    displayedByDefaultForReportContainer: true
+  },
+  FATAL: {
+    name: "FATAL",
+    level: 7,
+    colorName: "mediumorchid",
+    colorHexCode: "#BA55D3",
+    displayedByDefault: true,
+    displayedByDefaultForReportContainer: true
+  }
+};
+const getDefaultSeverityFilter = (severityList) => {
+  const severityFilter = [];
+  if (severityList?.length) {
+    Object.values(REPORT_SEVERITY).filter((s) => severityList.includes(s.name)).forEach((s) => {
+      if (s.displayedByDefault) {
+        severityFilter.push(s.name);
+      }
+    });
+  }
+  return severityFilter;
+};
+function sortSeverityList(severityList) {
+  return severityList.sort((a, b) => REPORT_SEVERITY[b].level - REPORT_SEVERITY[a].level);
+}
+function getContainerDefaultSeverityList() {
+  return Object.values(REPORT_SEVERITY).filter((s) => s.displayedByDefaultForReportContainer).map((s) => s.name);
+}
+export {
+  REPORT_SEVERITY,
+  getContainerDefaultSeverityList,
+  getDefaultSeverityFilter,
+  sortSeverityList
+};

package/dist/components/composite/report/report-treeview/hooks/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2026, 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 './use-treeview-scroll';

package/dist/components/composite/report/report-treeview/hooks/index.js

@@ -0,0 +1,4 @@
+import { useTreeViewScroll } from "./use-treeview-scroll.js";
+export {
+  useTreeViewScroll
+};

package/dist/components/composite/report/report-treeview/hooks/use-treeview-scroll.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import { ListImperativeAPI } from 'react-window';
+import { ReportItem } from '../treeview-item';
+export declare const useTreeViewScroll: (highlightedReportId: string | undefined, nodes: ReportItem[], listRef: RefObject<ListImperativeAPI | null>) => void;

package/dist/components/composite/report/report-treeview/hooks/use-treeview-scroll.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from "react";
+const useTreeViewScroll = (highlightedReportId, nodes, listRef) => {
+  const scrollLocked = useRef(false);
+  useEffect(() => {
+    scrollLocked.current = false;
+  }, [highlightedReportId]);
+  useEffect(() => {
+    if (listRef.current && highlightedReportId && !scrollLocked.current) {
+      listRef.current.scrollToRow({
+        index: nodes.map((node) => node.id).indexOf(highlightedReportId),
+        align: "center"
+      });
+      scrollLocked.current = true;
+    }
+  }, [highlightedReportId, listRef, nodes]);
+};
+export {
+  useTreeViewScroll
+};

package/dist/components/composite/report/report-treeview/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2026, 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 './report-tree.mapper';
+export * from './treeview-item';
+export * from './virtualized-treeview';
+export * from './hooks';

package/dist/components/composite/report/report-treeview/index.js

@@ -0,0 +1,10 @@
+import { mapReportsTree } from "./report-tree.mapper.js";
+import { TreeviewItem } from "./treeview-item.js";
+import { VirtualizedTreeview } from "./virtualized-treeview.js";
+import { useTreeViewScroll } from "./hooks/use-treeview-scroll.js";
+export {
+  TreeviewItem,
+  VirtualizedTreeview,
+  mapReportsTree,
+  useTreeViewScroll
+};

package/dist/components/composite/report/report-treeview/report-tree.mapper.d.ts

@@ -0,0 +1,2 @@
+import { Report, ReportTree, ReportType } from '../report.type';
+export declare function mapReportsTree(report: Report, reportType?: ReportType): ReportTree;

package/dist/components/composite/report/report-treeview/report-tree.mapper.js

@@ -0,0 +1,16 @@
+import { ReportType } from "../report.type.js";
+import { GLOBAL_REPORT_NODE_LABEL } from "../report.constant.js";
+import { REPORT_SEVERITY } from "../report-severity.js";
+function mapReportsTree(report, reportType) {
+  return {
+    type: reportType ?? (report.message === GLOBAL_REPORT_NODE_LABEL ? ReportType.GLOBAL : ReportType.NODE),
+    id: report.id,
+    message: report.message,
+    parentId: report.parentId,
+    severity: Object.values(REPORT_SEVERITY).find((s) => report.severity === s.name) ?? REPORT_SEVERITY.UNKNOWN,
+    subReports: report.subReports.filter((subReport) => subReport.subReports.length > 0 || subReport.id).map((subReport) => mapReportsTree(subReport, ReportType.NODE))
+  };
+}
+export {
+  mapReportsTree
+};

package/dist/components/composite/report/report-treeview/treeview-item.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { RowComponentProps } from 'react-window';
+/**
+ * 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/.
+ */
+import * as React from 'react';
+export interface ReportItem {
+    id: string;
+    icon?: ReactNode;
+    label: string;
+    depth: number;
+    collapsed?: boolean;
+    isCollapsable?: boolean;
+    isLeaf?: boolean;
+    isSelected?: boolean;
+}
+export declare function TreeviewItem({ index, nodes, onSelectedItem, onExpandItem, highlightedReportId, searchTerm, currentResultIndex, searchResults, style, }: RowComponentProps<{
+    nodes: ReportItem[];
+    onSelectedItem: (node: ReportItem) => void;
+    onExpandItem: (node: ReportItem) => void;
+    highlightedReportId?: string;
+    searchTerm: string;
+    currentResultIndex: number;
+    searchResults: number[];
+}>): React.JSX.Element;

package/dist/components/composite/report/report-treeview/treeview-item.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { styled, Stack, useTheme, Box, Typography } from "@mui/material";
+import { ArrowRight, ArrowDropDown } from "@mui/icons-material";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../../utils/styles.js";
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const styles = {
+  content: (theme) => ({
+    color: theme.palette.text.secondary,
+    borderRadius: theme.spacing(2),
+    width: "fit-content",
+    paddingRight: theme.spacing(1),
+    fontWeight: theme.typography.fontWeightMedium
+  }),
+  labelText: (theme) => ({
+    fontWeight: "inherit",
+    marginRight: theme.spacing(2)
+  }),
+  labelRoot: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0)
+  }),
+  root: (theme) => ({
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  }),
+  highlighted: (theme) => ({
+    backgroundColor: theme.palette.action.hover
+  })
+};
+const TreeViewItemBox = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  userSelect: "none",
+  cursor: "pointer"
+}));
+const TreeViewItemStack = styled(Stack)((props) => {
+  const { left, theme, node } = props;
+  return {
+    position: "absolute",
+    left: `${left}px`,
+    width: "fit-content",
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: node.isSelected ? `var(--tree-view-bg-color, ${theme.palette.action.selected})` : void 0,
+    color: "var(--tree-view-color)",
+    padding: theme.spacing(0.5, 0, 0.5, 2),
+    borderRadius: theme.spacing(2),
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  };
+});
+const ITEM_DEPTH_OFFSET = 12;
+function TreeviewItem({
+  index,
+  nodes,
+  onSelectedItem,
+  onExpandItem,
+  highlightedReportId,
+  searchTerm,
+  currentResultIndex,
+  searchResults,
+  style
+}) {
+  const currentNode = nodes[index];
+  const left = currentNode.depth * ITEM_DEPTH_OFFSET;
+  const isCollapsable = currentNode.isCollapsable ?? true;
+  const theme = useTheme();
+  const handleClick = useCallback(() => {
+    onSelectedItem(currentNode);
+  }, [onSelectedItem, currentNode]);
+  const handleExpand = useCallback(() => {
+    onExpandItem(currentNode);
+  }, [onExpandItem, currentNode]);
+  const highlightText = useMemo(
+    () => (text, highlight) => {
+      if (!highlight) {
+        return text;
+      }
+      const safeInput = escapeRegExp(highlight);
+      const parts = text.split(new RegExp(`(${safeInput})`, "gi"));
+      return parts.map((part, partIndex) => {
+        if (part.toLowerCase() === safeInput.toLowerCase()) {
+          const isCurrentOccurrence = searchResults[currentResultIndex] === index;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                backgroundColor: isCurrentOccurrence ? theme.searchedText.currentHighlightColor : theme.searchedText.highlightColor
+              },
+              children: part
+            },
+            `${part}-${partIndex}`
+          );
+        }
+        return part;
+      });
+    },
+    [searchResults, currentResultIndex, index, theme]
+  );
+  return /* @__PURE__ */ jsx(TreeViewItemBox, { sx: mergeSx(styles.content, styles.labelRoot), style, children: /* @__PURE__ */ jsxs(
+    TreeViewItemStack,
+    {
+      direction: "row",
+      left,
+      node: currentNode,
+      sx: mergeSx(styles.root, highlightedReportId === currentNode.id ? styles.highlighted : void 0),
+      children: [
+        isCollapsable && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: currentNode.collapsed ? ArrowRight : ArrowDropDown,
+            sx: { visibility: currentNode.isLeaf ? "hidden" : "visible", fontSize: "18px" },
+            onClick: handleExpand
+          }
+        ),
+        currentNode.icon,
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: styles.labelText, onClick: handleClick, children: highlightText(currentNode.label, searchTerm) })
+      ]
+    }
+  ) });
+}
+export {
+  TreeviewItem
+};

package/dist/components/composite/report/report-treeview/virtualized-treeview.d.ts

@@ -0,0 +1,11 @@
+import { ReportItem } from './treeview-item';
+import { ReportTree } from '../report.type';
+export interface TreeViewProps {
+    expandedTreeReports: string[];
+    setExpandedTreeReports: (reportIds: string[]) => void;
+    selectedReportId: string;
+    reportTree: ReportTree;
+    onSelectedItem: (node: ReportItem) => void;
+    highlightedReportId?: string;
+}
+export declare function VirtualizedTreeview({ expandedTreeReports, setExpandedTreeReports, selectedReportId, onSelectedItem, highlightedReportId, reportTree, }: TreeViewProps): import("react").JSX.Element;