@gridsuite/commons-ui 0.54.0 → 0.56.0

package/dist/components/react-query-builder-inputs/property-value-editor.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useCallback } from "react";
+import Grid from "@mui/material/Grid";
+import { Autocomplete, TextField, Select, MenuItem } from "@mui/material";
+import useValid from "./use-valid.js";
+import { useIntl } from "react-intl";
+import { FieldConstants } from "../filter/constants/field-constants.js";
+import { OPERATOR_OPTIONS } from "../filter/constants/expert-filter-constants.js";
+import { usePredefinedProperties } from "../../hooks/predefined-properties-hook.js";
+const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
+const PropertyValueEditor = (props) => {
+  const { equipmentType, valueEditorProps } = props;
+  const valid = useValid(valueEditorProps);
+  const intl = useIntl();
+  const { propertyName, propertyOperator, propertyValues } = (valueEditorProps == null ? void 0 : valueEditorProps.value) ?? {};
+  const [equipmentPredefinedProps, setEquipmentType] = usePredefinedProperties(equipmentType);
+  useEffect(() => {
+    setEquipmentType(equipmentType);
+  }, [equipmentType, setEquipmentType]);
+  const predefinedNames = useMemo(() => {
+    return Object.keys(equipmentPredefinedProps ?? {}).sort();
+  }, [equipmentPredefinedProps]);
+  const predefinedValues = useMemo(() => {
+    const predefinedForName = equipmentPredefinedProps == null ? void 0 : equipmentPredefinedProps[propertyName];
+    if (!predefinedForName) {
+      return [];
+    }
+    return [...new Set(predefinedForName)].sort();
+  }, [equipmentPredefinedProps, propertyName]);
+  const onChange = useCallback(
+    (field, value) => {
+      var _a, _b;
+      let updatedValue = {
+        ...valueEditorProps == null ? void 0 : valueEditorProps.value,
+        [FieldConstants.PROPERTY_OPERATOR]: ((_a = valueEditorProps == null ? void 0 : valueEditorProps.value) == null ? void 0 : _a.propertyOperator) ?? PROPERTY_VALUE_OPERATORS[0].customName,
+        [field]: value
+      };
+      if (field === FieldConstants.PROPERTY_NAME) {
+        updatedValue = {
+          ...updatedValue,
+          [FieldConstants.PROPERTY_VALUES]: []
+        };
+      }
+      (_b = valueEditorProps == null ? void 0 : valueEditorProps.handleOnChange) == null ? void 0 : _b.call(valueEditorProps, updatedValue);
+    },
+    [valueEditorProps]
+  );
+  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: propertyName ?? "",
+        options: predefinedNames,
+        freeSolo: true,
+        autoSelect: true,
+        forcePopupIcon: true,
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
+        onChange: (event, value) => {
+          onChange(FieldConstants.PROPERTY_NAME, value);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 2.5, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
+        size: "medium",
+        error: !valid,
+        onChange: (event, value) => {
+          onChange(FieldConstants.PROPERTY_OPERATOR, value);
+        },
+        children: PROPERTY_VALUE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            value: operator.customName,
+            children: intl.formatMessage({ id: operator.label })
+          },
+          operator.customName
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4.5, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: propertyValues ?? [],
+        options: predefinedValues ?? [],
+        multiple: true,
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
+        freeSolo: true,
+        autoSelect: true,
+        onChange: (event, value) => {
+          onChange(FieldConstants.PROPERTY_VALUES, value);
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  PropertyValueEditor as default
+};

package/dist/components/react-query-builder-inputs/remove-button.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ActionWithRulesProps } from 'react-querybuilder';
+
+declare const RemoveButton: FunctionComponent<ActionWithRulesProps>;
+export default RemoveButton;

package/dist/components/react-query-builder-inputs/remove-button.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "@mui/material/IconButton";
+import "@mui/icons-material/Delete";
+import "react-hook-form";
+import { h } from "../../chunks/criteria-based-filter-edition-dialog.DxqH-mLe.js";
+import "../filter/expert/expert-filter-utils.js";
+export {
+  h as default
+};

package/dist/components/react-query-builder-inputs/text-value-editor.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ValueEditorProps } from 'react-querybuilder';
+
+declare const TextValueEditor: FunctionComponent<ValueEditorProps>;
+export default TextValueEditor;

package/dist/components/react-query-builder-inputs/text-value-editor.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { MaterialValueEditor } from "@react-querybuilder/material";
+import useConvertValue from "./use-convert-value.js";
+import { Autocomplete, TextField } from "@mui/material";
+import useValid from "./use-valid.js";
+const TextValueEditor = (props) => {
+  useConvertValue(props);
+  const valid = useValid(props);
+  if (!Array.isArray(props.value)) {
+    return /* @__PURE__ */ jsx(
+      MaterialValueEditor,
+      {
+        ...props,
+        title: void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: props.value,
+        freeSolo: true,
+        options: [],
+        onChange: (event, value) => props.handleOnChange(value),
+        multiple: true,
+        fullWidth: true,
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
+      }
+    );
+  }
+};
+export {
+  TextValueEditor as default
+};

package/dist/components/react-query-builder-inputs/translated-value-editor.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ValueEditorProps } from 'react-querybuilder';
+
+declare const TranslatedValueEditor: FunctionComponent<ValueEditorProps>;
+export default TranslatedValueEditor;

package/dist/components/react-query-builder-inputs/translated-value-editor.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { MaterialValueEditor } from "@react-querybuilder/material";
+import { useIntl } from "react-intl";
+import useConvertValue from "./use-convert-value.js";
+import { Autocomplete, TextField } from "@mui/material";
+import useValid from "./use-valid.js";
+const TranslatedValueEditor = (props) => {
+  const intl = useIntl();
+  const translatedValues = useMemo(() => {
+    var _a;
+    return (_a = props.values) == null ? void 0 : _a.map((v) => {
+      return {
+        name: v.name,
+        label: intl.formatMessage({ id: v.label })
+      };
+    });
+  }, [intl, props.values]);
+  const translatedValuesAutocomplete = useMemo(() => {
+    if (!props.values) {
+      return {};
+    }
+    return Object.fromEntries(
+      props.values.map((v) => [
+        v.name,
+        intl.formatMessage({ id: v.label })
+      ])
+    );
+  }, [intl, props.values]);
+  useConvertValue(props);
+  const valid = useValid(props);
+  if (!Array.isArray(props.value)) {
+    return /* @__PURE__ */ jsx(
+      MaterialValueEditor,
+      {
+        ...props,
+        values: translatedValues,
+        title: void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: props.value,
+        options: Object.keys(translatedValuesAutocomplete),
+        getOptionLabel: (code) => translatedValuesAutocomplete[code],
+        onChange: (event, value) => props.handleOnChange(value),
+        multiple: true,
+        fullWidth: true,
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
+      }
+    );
+  }
+};
+export {
+  TranslatedValueEditor as default
+};

package/dist/components/react-query-builder-inputs/use-convert-value.d.ts

@@ -0,0 +1,9 @@
+import { ValueEditorProps } from 'react-querybuilder';
+
+/**
+ * Hook that convert a value of RQB from any to any[] and vice versa when the operator changes
+ * PS : can be extended to manage more than the IN operator
+ * PS 2 : don't use this if the operator can be another array operator (like BETWEEN) or change a bit the conditions
+ */
+declare const useConvertValue: ({ operator, value, fieldData: { defaultValue }, handleOnChange, }: ValueEditorProps) => void;
+export default useConvertValue;

package/dist/components/react-query-builder-inputs/use-convert-value.js

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { OPERATOR_OPTIONS } from "../filter/constants/expert-filter-constants.js";
+const useConvertValue = ({
+  operator,
+  value,
+  fieldData: { defaultValue },
+  handleOnChange
+}) => {
+  useEffect(
+    () => {
+      if (operator === OPERATOR_OPTIONS.IN.name && !Array.isArray(value)) {
+        handleOnChange(value ? [value] : []);
+      } else if (operator !== OPERATOR_OPTIONS.IN.name && Array.isArray(value)) {
+        handleOnChange(value.length ? value[0] : defaultValue);
+      }
+    },
+    // We want to trigger this useEffect only if the operator change
+    // eslint-disable-next-line
+    [operator]
+  );
+};
+export {
+  useConvertValue as default
+};

package/dist/components/react-query-builder-inputs/use-valid.d.ts

@@ -0,0 +1,7 @@
+import { ValueEditorProps } from 'react-querybuilder';
+
+/**
+ * Hook that return if a field of RQB is valid or not
+ */
+declare const useValid: ({ validation }: ValueEditorProps) => boolean;
+export default useValid;

package/dist/components/react-query-builder-inputs/use-valid.js

@@ -0,0 +1,13 @@
+const useValid = ({ validation }) => {
+  if (validation === void 0 || validation === null) {
+    return true;
+  }
+  if (typeof validation === "boolean") {
+    return validation;
+  }
+  const convertedValidation = validation;
+  return convertedValidation.valid;
+};
+export {
+  useValid as default
+};

package/dist/components/react-query-builder-inputs/value-editor.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ValueEditorProps } from 'react-querybuilder';
+
+declare const ValueEditor: FunctionComponent<ValueEditorProps>;
+export default ValueEditor;

package/dist/components/react-query-builder-inputs/value-editor.js

@@ -0,0 +1,18 @@
+import "react/jsx-runtime";
+import "react";
+import "@react-querybuilder/material";
+import "./country-value-editor.js";
+import "./translated-value-editor.js";
+import "./text-value-editor.js";
+import "@mui/material/Box";
+import "react-hook-form";
+import "../filter/constants/field-constants.js";
+import "../filter/expert/expert-filter.type.js";
+import "../filter/constants/equipment-types.js";
+import { V } from "../../chunks/criteria-based-filter-edition-dialog.DxqH-mLe.js";
+import "../../utils/ElementType.js";
+import "./property-value-editor.js";
+import "../filter/constants/filter-constants.js";
+export {
+  V as default
+};

package/dist/components/react-query-builder-inputs/value-selector.d.ts

@@ -0,0 +1,4 @@
+import { ValueSelectorProps } from 'react-querybuilder';
+
+declare const ValueSelector: (props: ValueSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default ValueSelector;

package/dist/components/react-query-builder-inputs/value-selector.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { MaterialValueSelector } from "@react-querybuilder/material";
+const ValueSelector = (props) => {
+  return /* @__PURE__ */ jsx(
+    MaterialValueSelector,
+    {
+      ...props,
+      title: void 0
+    }
+  );
+};
+export {
+  ValueSelector as default
+};

package/dist/components/translations/treeview-finder-en.d.ts

@@ -13,4 +13,5 @@ declare const treeview_finder_en: {
     'treeview_finder/contentText': string;
     'treeview_finder/finderTitle': string;
     'treeview_finder/addElementsValidation': string;
+    'treeview_finder/replaceElementsValidation': string;
 };

package/dist/components/translations/treeview-finder-en.js

@@ -3,9 +3,10 @@ const treeview_finder_en = {
   "treeview_finder/validate": "Validate",
   "treeview_finder/add": "Add...",
   "treeview_finder/deleteSelection": "Delete selection",
-  "treeview_finder/contentText": "{multiselect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
-  "treeview_finder/finderTitle": "{multiselect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
-  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Add this element} other{Add # elements}}"
+  "treeview_finder/contentText": "{multiSelect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
+  "treeview_finder/finderTitle": "{multiSelect, select, true {Please choose one or more element(s).} false {Please choose one element.} other {}}",
+  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Add this element} other{Add # elements}}",
+  "treeview_finder/replaceElementsValidation": "{nbElements, plural, =0 {Please select an element} =1 {Replace with this element} other{Replace with # elements}}"
 };
 export {
   treeview_finder_en as default

package/dist/components/translations/treeview-finder-fr.d.ts

@@ -13,4 +13,5 @@ declare const treeview_finder_fr: {
     'treeview_finder/contentText': string;
     'treeview_finder/finderTitle': string;
     'treeview_finder/addElementsValidation': string;
+    'treeview_finder/replaceElementsValidation': string;
 };

package/dist/components/translations/treeview-finder-fr.js

@@ -3,9 +3,10 @@ const treeview_finder_fr = {
   "treeview_finder/validate": "Valider",
   "treeview_finder/add": "Ajouter...",
   "treeview_finder/deleteSelection": "Supprimer la selection",
-  "treeview_finder/contentText": "{multiselect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
-  "treeview_finder/finderTitle": "{multiselect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
-  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Ajouter cet élément} other {Ajouter # éléments}}"
+  "treeview_finder/contentText": "{multiSelect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
+  "treeview_finder/finderTitle": "{multiSelect, select, true {Veuillez choisir un ou plusieurs éléments.} false {Veuillez choisir un élément.} other {}}",
+  "treeview_finder/addElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Ajouter cet élément} other {Ajouter # éléments}}",
+  "treeview_finder/replaceElementsValidation": "{nbElements, plural, =0 {Veuillez sélectionner un élément} =1 {Remplacer par cet élément} other {Remplacer par # éléments}}"
 };
 export {
   treeview_finder_fr as default

package/dist/hooks/localized-countries-hook.d.ts

@@ -0,0 +1,6 @@
+export function getSystemLanguage(): string;
+export function getComputedLanguage(language: any): any;
+export function useLocalizedCountries(language: any): {
+    translate: (countryCode: any) => any;
+    countryCodes: string[];
+};

package/dist/hooks/localized-countries-hook.js

@@ -0,0 +1,45 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import localizedCountries from "localized-countries";
+import countriesFr from "localized-countries/data/fr";
+import countriesEn from "localized-countries/data/en";
+import { LANG_ENGLISH, LANG_SYSTEM, LANG_FRENCH } from "../components/TopBar/TopBar.js";
+const supportedLanguages = [LANG_FRENCH, LANG_ENGLISH];
+const getSystemLanguage = () => {
+  const systemLanguage = navigator.language.split(/[-_]/)[0];
+  return supportedLanguages.includes(systemLanguage) ? systemLanguage : LANG_ENGLISH;
+};
+const getComputedLanguage = (language) => {
+  return language === LANG_SYSTEM ? getSystemLanguage() : language;
+};
+const useLocalizedCountries = (language) => {
+  const [localizedCountriesModule, setLocalizedCountriesModule] = useState();
+  useEffect(() => {
+    const lang = getComputedLanguage(language).substring(0, 2);
+    let localizedCountriesResult;
+    if (lang === "fr") {
+      localizedCountriesResult = localizedCountries(countriesFr);
+    } else if (lang === "en") {
+      localizedCountriesResult = localizedCountries(countriesEn);
+    } else {
+      console.warn(
+        'Unsupported language "' + lang + '" for countries translation, we use english as default'
+      );
+      localizedCountriesResult = localizedCountries(countriesEn);
+    }
+    setLocalizedCountriesModule(localizedCountriesResult);
+  }, [language]);
+  const countryCodes = useMemo(
+    () => localizedCountriesModule ? Object.keys(localizedCountriesModule.object()) : [],
+    [localizedCountriesModule]
+  );
+  const translate = useCallback(
+    (countryCode) => localizedCountriesModule ? localizedCountriesModule.get(countryCode) : "",
+    [localizedCountriesModule]
+  );
+  return { translate, countryCodes };
+};
+export {
+  getComputedLanguage,
+  getSystemLanguage,
+  useLocalizedCountries
+};

package/dist/hooks/predefined-properties-hook.d.ts

@@ -0,0 +1,18 @@
+import { EquipmentType, PredefinedProperties } from '../utils/types.ts';
+import { Dispatch, SetStateAction } from 'react';
+
+interface Metadata {
+    name: string;
+    url: string;
+    appColor: string;
+    hiddenInAppsMenu: boolean;
+    resources: unknown;
+}
+export interface StudyMetadata extends Metadata {
+    name: 'Study';
+    predefinedEquipmentProperties: {
+        [networkElementType: string]: PredefinedProperties;
+    };
+}
+export declare const usePredefinedProperties: (initialType: EquipmentType | null) => [PredefinedProperties, Dispatch<SetStateAction<EquipmentType | null>>];
+export {};

package/dist/hooks/predefined-properties-hook.js

@@ -0,0 +1,43 @@
+import { useState, useContext, useEffect } from "react";
+import { mapEquipmentTypeForPredefinedProperties } from "../utils/equipment-types-for-predefined-properties-mapper.js";
+import { useSnackMessage } from "./useSnackMessage.js";
+import { FilterContext } from "../components/filter/filter-context.js";
+const isStudyMetadata = (metadata) => {
+  return metadata.name === "Study";
+};
+const fetchPredefinedProperties = async (equipmentType, fetchAppsAndUrls) => {
+  var _a;
+  const networkEquipmentType = mapEquipmentTypeForPredefinedProperties(equipmentType);
+  if (networkEquipmentType === void 0) {
+    return Promise.resolve(void 0);
+  }
+  const res = await fetchAppsAndUrls();
+  const studyMetadata = res.filter(isStudyMetadata);
+  if (!studyMetadata) {
+    return Promise.reject("Study entry could not be found in metadata");
+  }
+  return (_a = studyMetadata[0].predefinedEquipmentProperties) == null ? void 0 : _a[networkEquipmentType];
+};
+const usePredefinedProperties = (initialType) => {
+  const [type, setType] = useState(initialType);
+  const [equipmentPredefinedProps, setEquipmentPredefinedProps] = useState({});
+  const { snackError } = useSnackMessage();
+  const { fetchAppsAndUrls } = useContext(FilterContext);
+  useEffect(() => {
+    if (fetchAppsAndUrls && type !== null) {
+      fetchPredefinedProperties(type, fetchAppsAndUrls).then((p) => {
+        if (p !== void 0) {
+          setEquipmentPredefinedProps(p);
+        }
+      }).catch((error) => {
+        snackError({
+          messageTxt: error.message ?? error
+        });
+      });
+    }
+  }, [type, setEquipmentPredefinedProps, snackError, fetchAppsAndUrls]);
+  return [equipmentPredefinedProps, setType];
+};
+export {
+  usePredefinedProperties
+};

package/dist/hooks/useDebounce.d.ts

@@ -1 +1,7 @@
-export function useDebounce(func: any, delay?: number): any;
+/**
+ * Copyright (c) 2023, 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 declare const useDebounce: (func: (...args: any[]) => any, delay?: number) => ((...args: any[]) => any) & import('@mui/utils/debounce').Cancelable;

package/dist/hooks/useSnackMessage.d.ts

@@ -1,5 +1,23 @@
-export function useSnackMessage(): {
-    snackError: (snackInputs: any) => void;
-    snackInfo: (snackInputs: any) => void;
-    snackWarning: (snackInputs: any) => void;
-};
+/**
+ * Copyright (c) 2021, 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/.
+ */
+interface SnackInputs {
+    messageTxt?: string;
+    messageId?: string;
+    messageValues?: {
+        [key: string]: string;
+    };
+    headerTxt?: string;
+    headerId?: string;
+    headerValues?: Record<string, string>;
+}
+export interface UseSnackMessageReturn {
+    snackError: (snackInputs: SnackInputs) => void;
+    snackWarning: (snackInputs: SnackInputs) => void;
+    snackInfo: (snackInputs: SnackInputs) => void;
+}
+export declare function useSnackMessage(): UseSnackMessageReturn;
+export {};

package/dist/hooks/useSnackMessage.js

@@ -26,26 +26,28 @@ function useSnackMessage() {
 }
 function makeSnackbar(snackInputs, intlRef, enqueueSnackbar, level, persistent) {
   const message = checkAndTranslateIfNecessary(
+    intlRef,
     snackInputs.messageTxt,
     snackInputs.messageId,
-    snackInputs.messageValues,
-    intlRef
+    snackInputs.messageValues
   );
   const header = checkAndTranslateIfNecessary(
+    intlRef,
     snackInputs.headerTxt,
     snackInputs.headerId,
-    snackInputs.headerValues,
-    intlRef
-  );
-  displayMessageWithSnackbar(
-    message,
-    header,
-    enqueueSnackbar,
-    level,
-    persistent
+    snackInputs.headerValues
   );
+  if (message !== null && header !== null) {
+    displayMessageWithSnackbar(
+      message,
+      header,
+      enqueueSnackbar,
+      level,
+      persistent
+    );
+  }
 }
-function checkAndTranslateIfNecessary(txt, id, values, intlRef) {
+function checkAndTranslateIfNecessary(intlRef, txt, id, values) {
   checkInputs(txt, id, values);
   return txt ?? (id ? intlRef.current.formatMessage(
     {