@gridsuite/commons-ui 0.214.0 → 0.215.0

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

@@ -9,7 +9,6 @@ export * from './OverflowableChipWithHelperText';
 export * from './chip-items-input';
 export * from './DirectoryItemsInput';
 export * from './RawReadOnlyInput';
-export * from './agGridTable';
 export * from './autocompleteInputs';
 export * from './booleans';
 export * from './errorManagement';

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

@@ -3,10 +3,6 @@ import { OverflowableChipWithHelperText } from "./OverflowableChipWithHelperText
 import { ChipItemsInput } from "./chip-items-input.js";
 import { DirectoryItemsInput } from "./DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
-import { BottomRightButtons } from "./agGridTable/BottomRightButtons.js";
-import { CustomAgGridTable } from "./agGridTable/CustomAgGridTable.js";
-import { NumericEditor } from "./agGridTable/cellEditors/numericEditor.js";
-import { CsvUploader } from "./agGridTable/csvUploader/CsvUploader.js";
 import { AutocompleteInput } from "./autocompleteInputs/AutocompleteInput.js";
 import { MultipleAutocompleteInput } from "./autocompleteInputs/MultipleAutocompleteInput.js";
 import { BooleanInput } from "./booleans/BooleanInput.js";
@@ -51,7 +47,6 @@ import { CheckboxNullableInput } from "./CheckboxNullableInput.js";
 export {
   AutocompleteInput,
   BooleanInput,
-  BottomRightButtons,
   ButtonReadOnlyInput,
   CancelButton,
   CheckboxInput,
@@ -59,8 +54,6 @@ export {
   ChipItemsInput,
   CountriesInput,
   CountrySelectionInput,
-  CsvUploader,
-  CustomAgGridTable,
   CustomFormContext,
   CustomFormProvider,
   DEFAULT_RANGE_VALUE,
@@ -82,7 +75,6 @@ export {
   MuiSelectInput,
   MultipleAutocompleteInput,
   NAME,
-  NumericEditor,
   OverflowableChip,
   OverflowableChipWithHelperText,
   RadioInput,

package/dist/components/ui/treeViewFinder/TreeViewFinder.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ModalProps } from '@mui/material';
+import { SimpleTreeViewClasses } from '@mui/x-tree-view';
+import { UUID } from 'node:crypto';
+import { ElementType } from '../../../utils';
+export declare const generateTreeViewFinderClass: (className: string) => string;
+export interface TreeViewFinderNodeProps {
+    id: UUID;
+    name: string;
+    type?: ElementType;
+    description?: string;
+    icon?: ReactElement;
+    childrenCount?: number;
+    children?: TreeViewFinderNodeProps[];
+    parents?: TreeViewFinderNodeProps[];
+    specificMetadata?: {
+        equipmentType: string;
+    };
+}
+export interface TreeViewFinderProps {
+    defaultExpanded?: string[];
+    defaultSelected?: string[];
+    selected?: string[];
+    expanded?: string[];
+    multiSelect?: boolean;
+    classes?: Partial<SimpleTreeViewClasses>;
+    className?: string;
+    contentText?: string;
+    open: ModalProps['open'];
+    onClose: (nodes: TreeViewFinderNodeProps[]) => void;
+    validationButtonText?: string;
+    cancelButtonProps?: ButtonProps;
+    title?: string;
+    onlyLeaves?: boolean;
+    data?: TreeViewFinderNodeProps[];
+    onTreeBrowse?: (itemId: string) => void;
+    sortMethod?: (a: TreeViewFinderNodeProps, b: TreeViewFinderNodeProps) => number;
+}
+export declare const TreeViewFinder: import('@emotion/styled').StyledComponent<Readonly<TreeViewFinderProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/dist/components/ui/treeViewFinder/TreeViewFinder.js

@@ -0,0 +1,343 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { styled, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Typography } from "@mui/material";
+import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
+import { ExpandMore, ChevronRight, Check } from "@mui/icons-material";
+import { toNestedGlobalSelectors, makeComposeClasses } from "../../../utils/styles.js";
+import { CancelButton } from "../reactHookForm/utils/CancelButton.js";
+import { doesNodeHasChildren } from "./TreeViewUtils.js";
+const cssDialogPaper = "dialogPaper";
+const cssLabelRoot = "labelRoot";
+const cssLabelText = "labelText";
+const cssLabelIcon = "labelIcon";
+const cssIcon = "icon";
+const defaultStyles = {
+  [cssDialogPaper]: {
+    minWidth: "50%"
+  },
+  [cssLabelRoot]: {
+    display: "flex",
+    alignContent: "center",
+    alignItems: "center"
+  },
+  [cssLabelText]: {
+    fontWeight: "inherit",
+    flexGrow: 1
+  },
+  [cssLabelIcon]: {
+    display: "flex",
+    alignContent: "center",
+    alignItems: "center",
+    marginRight: "4px"
+  },
+  [cssIcon]: {}
+};
+const generateTreeViewFinderClass = (className) => `GsiTreeViewFinder-${className}`;
+const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
+function CustomExpandIcon({ className }) {
+  return /* @__PURE__ */ jsx(ChevronRight, { className });
+}
+function CustomCollapseIcon({ className }) {
+  return /* @__PURE__ */ jsx(ExpandMore, { className });
+}
+function TreeViewFinderComponant(props) {
+  const intl = useIntl();
+  const {
+    classes = {},
+    title,
+    contentText,
+    open,
+    data,
+    defaultExpanded,
+    defaultSelected,
+    onClose,
+    onTreeBrowse,
+    validationButtonText,
+    onlyLeaves = true,
+    multiSelect = false,
+    sortMethod,
+    className,
+    cancelButtonProps,
+    selected: selectedProp,
+    expanded: expandedProp
+  } = props;
+  const [mapPrintedNodes, setMapPrintedNodes] = useState({});
+  const [expanded, setExpanded] = useState(defaultExpanded ?? []);
+  const [selected, setSelected] = useState(defaultSelected ?? []);
+  const scrollRef = useRef([]);
+  const [autoScrollAllowed, setAutoScrollAllowed] = useState(true);
+  const isLeaf = (node) => {
+    return node && node.children === void 0;
+  };
+  const isSelectable = (node) => {
+    return onlyLeaves ? isLeaf(node) : true;
+  };
+  const isValidationDisabled = () => {
+    return selected?.length === 0 || selected?.length === selectedProp?.length && selected?.every((itemId) => selectedProp?.includes(itemId));
+  };
+  const computeMapPrintedNodes = useCallback((nodes) => {
+    const newMapPrintedNodes = {};
+    nodes?.forEach((node) => {
+      newMapPrintedNodes[node.id] = node;
+      if (!isLeaf(node)) {
+        Object.assign(newMapPrintedNodes, computeMapPrintedNodes(node.children));
+      }
+    });
+    return newMapPrintedNodes;
+  }, []);
+  const findParents = (itemId, nodes, parentPath = []) => {
+    let result = null;
+    nodes.some((node) => {
+      if (node.id === itemId) {
+        result = parentPath;
+        return true;
+      }
+      if (node.children) {
+        const childResult = findParents(itemId, node.children, [...parentPath, node]);
+        if (childResult) {
+          result = childResult;
+          return true;
+        }
+      }
+      return false;
+    });
+    return result;
+  };
+  useEffect(() => {
+    const newMapPrintedNodes = computeMapPrintedNodes(data);
+    setMapPrintedNodes(newMapPrintedNodes);
+  }, [data, computeMapPrintedNodes]);
+  const computeSelectedNodes = () => {
+    if (!selected) {
+      return [];
+    }
+    return selected.map((itemId) => {
+      const selectedNode = mapPrintedNodes[itemId];
+      if (!selectedNode) {
+        return null;
+      }
+      const parents = findParents(itemId, data ?? []);
+      return {
+        ...selectedNode,
+        parents: parents ?? []
+      };
+    }).filter((node) => node !== null);
+  };
+  const handleNodeToggle = (_e, itemIds) => {
+    itemIds.every((itemId) => {
+      if (!expanded?.includes(itemId)) {
+        onTreeBrowse?.(itemId);
+        return false;
+      }
+      return true;
+    });
+    setExpanded(itemIds);
+  };
+  useEffect(() => {
+    if (!selectedProp) {
+      return;
+    }
+    if (selectedProp.length > 0) {
+      setSelected((oldSelectedNodes) => {
+        const prev = oldSelectedNodes ?? [];
+        return Array.from(/* @__PURE__ */ new Set([...prev, ...selectedProp]));
+      });
+    }
+  }, [selectedProp]);
+  useEffect(() => {
+    if (!expandedProp || expandedProp.length === 0) {
+      return;
+    }
+    if (expandedProp.length > 0) {
+      setExpanded((oldExpandedNodes) => [...oldExpandedNodes ?? [], ...expandedProp]);
+    }
+  }, [expandedProp]);
+  useEffect(() => {
+    const hasSelected = selectedProp && selectedProp.length > 0;
+    const hasExpanded = expandedProp && expandedProp.length > 0;
+    if (!hasSelected && !hasExpanded || !autoScrollAllowed) {
+      return;
+    }
+    const isNodeExpanded = expandedProp?.every((itemId) => expanded?.includes(itemId));
+    const lastScrollRef = scrollRef.current[scrollRef.current.length - 1];
+    if (isNodeExpanded && lastScrollRef) {
+      lastScrollRef.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center"
+      });
+      setAutoScrollAllowed(false);
+    }
+  }, [expanded, selectedProp, expandedProp, data, autoScrollAllowed]);
+  const handleNodeSelect = (_e, values) => {
+    if (multiSelect && Array.isArray(values)) {
+      setSelected(values.filter((itemId) => isSelectable(mapPrintedNodes[itemId])));
+    } else if (typeof values === "string") {
+      if (selected?.includes(values)) {
+        setSelected([]);
+      } else {
+        setSelected(isSelectable(mapPrintedNodes[values]) ? [values] : []);
+      }
+    }
+  };
+  const getValidationButtonText = () => {
+    if (validationButtonText) {
+      return validationButtonText;
+    }
+    let buttonLabelId = "";
+    if (Array.isArray(selectedProp)) {
+      buttonLabelId = selectedProp?.length > 0 ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+    } else {
+      buttonLabelId = selectedProp ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+    }
+    return intl.formatMessage(
+      { id: buttonLabelId },
+      {
+        nbElements: selected?.length
+      }
+    );
+  };
+  const getNodeIcon = (node) => {
+    if (!node) {
+      return null;
+    }
+    if (isSelectable(node) && selected?.find((itemId) => itemId === node.id)) {
+      return /* @__PURE__ */ jsx(Check, { className: composeClasses(classes, cssLabelIcon) });
+    }
+    if (node.icon) {
+      return /* @__PURE__ */ jsx("div", { className: composeClasses(classes, cssLabelIcon), children: node.icon });
+    }
+    return null;
+  };
+  const renderTreeItemLabel = (node) => {
+    return /* @__PURE__ */ jsxs("div", { className: composeClasses(classes, cssLabelRoot), children: [
+      getNodeIcon(node),
+      /* @__PURE__ */ jsx(Typography, { className: composeClasses(classes, cssLabelText), children: node.name })
+    ] });
+  };
+  const showChevron = (node) => {
+    return !!(node.childrenCount && node.childrenCount > 0);
+  };
+  const renderTree = (node) => {
+    if (!node) {
+      return null;
+    }
+    let childrenNodes = null;
+    const showExpandIcon = showChevron(node);
+    if (doesNodeHasChildren(node)) {
+      childrenNodes = node.children.toSorted(sortMethod).map(renderTree);
+    } else if (showExpandIcon) {
+      childrenNodes = [/* @__PURE__ */ jsx("span", { style: { display: "none" } }, "placeholder")];
+    }
+    return /* @__PURE__ */ jsx(
+      TreeItem,
+      {
+        itemId: node.id,
+        label: renderTreeItemLabel(node),
+        slots: {
+          expandIcon: CustomExpandIcon,
+          collapseIcon: CustomCollapseIcon
+        },
+        slotProps: {
+          expandIcon: {
+            className: composeClasses(classes, cssIcon)
+          },
+          collapseIcon: {
+            className: composeClasses(classes, cssIcon)
+          }
+        },
+        ref: (element) => {
+          const shouldAddToScrollRef = selectedProp && selectedProp.length > 0 ? selectedProp.includes(node.id) : expandedProp?.includes(node.id) ?? false;
+          if (shouldAddToScrollRef) {
+            scrollRef.current.push(element);
+          }
+        },
+        children: childrenNodes
+      },
+      node.id
+    );
+  };
+  const getTreeViewSelectionProps = () => {
+    if (!multiSelect) {
+      return {
+        multiSelect: false,
+        selected: selected && selected.length > 0 ? selected.at(0) : ""
+      };
+    }
+    return {
+      multiSelect: true,
+      selected: selected ?? []
+    };
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: (e, r) => {
+        if (r === "backdropClick") {
+          return;
+        }
+        if (r === "escapeKeyDown") {
+          onClose?.([]);
+          setSelected([]);
+        }
+      },
+      "aria-labelledby": "TreeViewFindertitle",
+      className,
+      classes: { paper: composeClasses(classes, cssDialogPaper) },
+      "data-testid": "Dialog",
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "TreeViewFindertitle", "data-testid": "DialogTitle", children: title ?? intl.formatMessage({ id: "treeview_finder/finderTitle" }, { multiSelect }) }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(DialogContentText, { children: contentText ?? intl.formatMessage({ id: "treeview_finder/contentText" }, { multiSelect }) }),
+          /* @__PURE__ */ jsx(
+            SimpleTreeView,
+            {
+              expandedItems: expanded,
+              onExpandedItemsChange: handleNodeToggle,
+              onSelectedItemsChange: handleNodeSelect,
+              ...getTreeViewSelectionProps(),
+              children: data && Array.isArray(data) ? data.sort(sortMethod).map((child) => renderTree(child)) : null
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(
+            CancelButton,
+            {
+              style: { float: "left", margin: "5px" },
+              onClick: () => {
+                onClose?.([]);
+                setSelected([]);
+                setAutoScrollAllowed(true);
+              },
+              ...cancelButtonProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              style: { float: "left", margin: "5px" },
+              onClick: () => {
+                onClose?.(computeSelectedNodes());
+                setSelected([]);
+                setAutoScrollAllowed(true);
+              },
+              disabled: isValidationDisabled(),
+              "data-testid": "SubmitButton",
+              children: getValidationButtonText()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const nestedGlobalSelectorsStyles = toNestedGlobalSelectors(defaultStyles, generateTreeViewFinderClass);
+const TreeViewFinder = styled(TreeViewFinderComponant)(nestedGlobalSelectorsStyles);
+export {
+  TreeViewFinder,
+  generateTreeViewFinderClass
+};

package/dist/components/ui/treeViewFinder/TreeViewUtils.d.ts

@@ -0,0 +1,2 @@
+import { ElementAttributes } from '../../../utils';
+export declare function doesNodeHasChildren(node: ElementAttributes): boolean;

package/dist/features/announcement/AnnouncementBanner.d.ts

@@ -0,0 +1,15 @@
+import { UUID } from 'node:crypto';
+import { PropsWithChildren, ReactNode } from 'react';
+import { AlertProps } from '@mui/material';
+import { UserProfile } from 'oidc-client-ts';
+import { AnnouncementSeverity } from '../../utils/types';
+export type AnnouncementBannerProps = PropsWithChildren<{
+    userProfile?: UserProfile | {};
+    /** only field used to detect if msg change */
+    id?: UUID;
+    duration?: number;
+    severity?: AnnouncementSeverity;
+    title?: ReactNode;
+    sx?: AlertProps['sx'];
+}>;
+export declare function AnnouncementBanner({ userProfile, id, severity, title, children, duration, sx, }: Readonly<AnnouncementBannerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/features/announcement/AnnouncementBanner.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTheme, Collapse, Alert, AlertTitle } from "@mui/material";
+import { Campaign } from "@mui/icons-material";
+import { CustomTooltip } from "../../components/ui/tooltip/CustomTooltip.js";
+import "../../utils/types/equipmentType.js";
+import { AnnouncementSeverity } from "../../utils/types/types.js";
+const snackbarInfo = "#2196f3";
+const snackbarWarning = "#ff9800";
+const styles = {
+  alert: (theme) => ({
+    "&.MuiAlert-colorWarning": {
+      color: theme.palette.getContrastText(snackbarWarning),
+      backgroundColor: snackbarWarning
+    },
+    "&.MuiAlert-colorInfo": {
+      color: theme.palette.getContrastText(snackbarInfo),
+      backgroundColor: snackbarInfo
+    }
+  })
+};
+const iconMapping = {
+  info: /* @__PURE__ */ jsx(Campaign, {})
+};
+function convertSeverity(severity) {
+  switch (severity) {
+    case AnnouncementSeverity.INFO:
+      return "info";
+    case AnnouncementSeverity.WARN:
+      return "warning";
+    default:
+      return void 0;
+  }
+}
+function AnnouncementBanner({
+  userProfile,
+  id,
+  severity = AnnouncementSeverity.INFO,
+  title,
+  children,
+  duration,
+  sx
+}) {
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  useEffect(
+    () => {
+      if (id) {
+        setVisible(true);
+        if (duration) {
+          const bannerTimer = setTimeout(() => {
+            setVisible(false);
+          }, duration);
+          return () => {
+            clearTimeout(bannerTimer);
+          };
+        }
+      } else {
+        setVisible(false);
+      }
+      return () => {
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- we check msg id in cas of an announcement
+    [id]
+  );
+  const handleClose = useCallback(() => setVisible(false), []);
+  return /* @__PURE__ */ jsx(Collapse, { in: userProfile !== void 0 && visible, unmountOnExit: true, sx, style: { margin: theme.spacing(1) }, children: /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      variant: "filled",
+      elevation: 0,
+      severity: convertSeverity(severity),
+      onClose: handleClose,
+      iconMapping,
+      hidden: !visible,
+      className: title ? void 0 : "no-title",
+      sx: styles.alert,
+      children: [
+        title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+        /* @__PURE__ */ jsx(CustomTooltip, { title: children, children: /* @__PURE__ */ jsx("span", { children }) })
+      ]
+    }
+  ) });
+}
+export {
+  AnnouncementBanner
+};

package/dist/features/announcement/useGlobalAnnouncement.d.ts

@@ -0,0 +1,10 @@
+import { UUID } from 'node:crypto';
+import { UserProfile } from 'oidc-client-ts';
+import { AnnouncementSeverity } from '../../utils/types';
+export type AnnouncementProps = {
+    id: UUID;
+    message: string;
+    duration: number;
+    severity: AnnouncementSeverity;
+};
+export declare function useGlobalAnnouncement(userProfile: UserProfile | null): AnnouncementProps | undefined;

package/dist/features/announcement/useGlobalAnnouncement.js

@@ -0,0 +1,48 @@
+import { v4 } from "uuid";
+import { useState, useEffect, useCallback } from "react";
+import { fetchCurrentAnnouncement } from "../../services/userAdmin.js";
+import { NotificationsUrlKeys } from "../../utils/constants/notificationsProvider.js";
+import { useNotificationsListener } from "../notifications/hooks/useNotificationsListener.js";
+function useGlobalAnnouncement(userProfile) {
+  const [announcementInfos, setAnnouncementInfos] = useState();
+  useEffect(() => {
+    if (userProfile) {
+      fetchCurrentAnnouncement().then((announcementDto) => {
+        if (announcementDto) {
+          setAnnouncementInfos({
+            id: announcementDto.id,
+            message: announcementDto.message,
+            duration: announcementDto.remainingDuration,
+            severity: announcementDto.severity
+          });
+        } else {
+          setAnnouncementInfos(void 0);
+        }
+      }).catch((error) => console.error("Failed to retrieve global announcement:", error));
+    } else {
+      setAnnouncementInfos(void 0);
+    }
+  }, [userProfile]);
+  const handleAnnouncementMessage = useCallback((event) => {
+    const eventData = JSON.parse(event.data);
+    if (eventData.headers.messageType === "announcement") {
+      const announcement = {
+        id: eventData.id ?? v4(),
+        message: eventData.payload,
+        severity: eventData.headers.severity,
+        duration: eventData.headers.duration
+      };
+      console.debug("announcement incoming:", announcement);
+      setAnnouncementInfos(announcement);
+    } else if (eventData.headers.messageType === "cancelAnnouncement") {
+      setAnnouncementInfos(void 0);
+    }
+  }, []);
+  useNotificationsListener(NotificationsUrlKeys.GLOBAL_CONFIG, {
+    listenerCallbackMessage: handleAnnouncementMessage
+  });
+  return announcementInfos;
+}
+export {
+  useGlobalAnnouncement
+};

package/dist/features/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 './authentication';
+export * from './cardErrorBoundary';
+export * from './notifications';
+export * from './topBar';
+export * from './parameters';
+export * from './network-modifications';
+export * from './node';
+export * from './network-modification-table';
+export * from './announcement';