@gridsuite/commons-ui 0.214.0 → 0.216.0

package/dist/components/composite/reactQueryBuilder/CustomReactQueryBuilder.js

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { QueryBuilderDnD } from "@react-querybuilder/dnd";
+import * as ReactDnD from "react-dnd";
+import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
+import { QueryBuilderMaterial } from "@react-querybuilder/material";
+import { defaultTranslations, QueryBuilder } from "react-querybuilder";
+import { formatQuery } from "react-querybuilder/formatQuery";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { useCallback, useMemo } from "react";
+import { CombinatorSelector } from "./CombinatorSelector.js";
+import { AddButton } from "./AddButton.js";
+import { ValueEditor } from "./ValueEditor.js";
+import { ValueSelector } from "./ValueSelector.js";
+import { COMBINATOR_OPTIONS } from "../filter/expert/expertFilterConstants.js";
+import { ErrorInput } from "../../ui/reactHookForm/errorManagement/ErrorInput.js";
+import { FieldErrorAlert } from "../../ui/reactHookForm/errorManagement/FieldErrorAlert.js";
+import { countRules, queryValidator, getOperators } from "../filter/expert/expertFilterUtils.js";
+import { RemoveButton } from "./RemoveButton.js";
+import { FieldSelector } from "./FieldSelector.js";
+import { OperatorSelector } from "./OperatorSelector.js";
+function RuleAddButton(props) {
+  return /* @__PURE__ */ jsx(AddButton, { ...props, label: "rule" });
+}
+function GroupAddButton(props) {
+  return /* @__PURE__ */ jsx(AddButton, { ...props, label: "subGroup" });
+}
+const customTranslations = {
+  ...defaultTranslations,
+  fields: { ...defaultTranslations.fields, title: "" },
+  operators: { ...defaultTranslations.operators, title: "" },
+  dragHandle: { ...defaultTranslations.dragHandle, title: "" },
+  addRule: { ...defaultTranslations.addRule, title: "" },
+  addGroup: { ...defaultTranslations.addGroup, title: "" },
+  removeRule: { ...defaultTranslations.removeRule, title: "" },
+  removeGroup: { ...defaultTranslations.removeGroup, title: "" },
+  value: { title: "" },
+  combinators: { title: "" }
+};
+function CustomReactQueryBuilder(props) {
+  const { name, fields } = props;
+  const {
+    getValues,
+    setValue,
+    watch,
+    formState: { isSubmitted }
+    // Set to true after the form is submitted. Will remain true until the reset method is invoked.
+  } = useFormContext();
+  const intl = useIntl();
+  const query = watch(name);
+  const handleQueryChange = useCallback(
+    (newQuery) => {
+      const oldQuery = getValues(name);
+      const hasQueryChanged = formatQuery(oldQuery, "json_without_ids") !== formatQuery(newQuery, "json_without_ids");
+      const hasAddedRules = countRules(newQuery) > countRules(oldQuery);
+      setValue(name, newQuery, {
+        shouldDirty: hasQueryChanged,
+        shouldValidate: isSubmitted && hasQueryChanged && !hasAddedRules
+      });
+    },
+    [getValues, setValue, isSubmitted, name]
+  );
+  const combinators = useMemo(() => {
+    return Object.values(COMBINATOR_OPTIONS).map((c) => ({
+      name: c.name,
+      label: intl.formatMessage({ id: c.label })
+    }));
+  }, [intl]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(QueryBuilderMaterial, { children: /* @__PURE__ */ jsx(QueryBuilderDnD, { dnd: { ...ReactDnD, ...ReactDndHtml5Backend }, children: /* @__PURE__ */ jsx(
+      QueryBuilder,
+      {
+        fields,
+        query,
+        addRuleToNewGroups: true,
+        combinators,
+        onQueryChange: handleQueryChange,
+        getOperators: (fieldName) => getOperators(fieldName, intl),
+        validator: queryValidator,
+        controlClassnames: {
+          queryBuilder: "queryBuilder-branches"
+        },
+        controlElements: {
+          addRuleAction: RuleAddButton,
+          addGroupAction: GroupAddButton,
+          combinatorSelector: CombinatorSelector,
+          removeRuleAction: RemoveButton,
+          removeGroupAction: RemoveButton,
+          valueEditor: ValueEditor,
+          operatorSelector: OperatorSelector,
+          fieldSelector: FieldSelector,
+          valueSourceSelector: ValueSelector
+        },
+        listsAsArrays: true,
+        accessibleDescriptionGenerator: () => "",
+        translations: customTranslations
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert }) })
+  ] });
+}
+export {
+  CustomReactQueryBuilder
+};

package/dist/components/composite/reactQueryBuilder/ElementValueEditor.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { validate } from "uuid";
+import { useEffect } from "react";
+import { useCustomFormContext } from "../../ui/reactHookForm/provider/useCustomFormContext.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { fetchElementsInfos } from "../../../services/explore.js";
+import { DirectoryItemsInput } from "../../ui/reactHookForm/DirectoryItemsInput.js";
+function ElementValueEditor(props) {
+  const { defaultValue, name, elementType, equipmentTypes, titleId, hideErrorMessage, itemFilter, onChange } = props;
+  const { setValue } = useCustomFormContext();
+  useEffect(() => {
+    if (defaultValue && Array.isArray(defaultValue) && defaultValue.length > 0 && defaultValue[0].length > 0 && validate(defaultValue[0])) {
+      fetchElementsInfos(defaultValue).then((childrenWithMetadata) => {
+        setValue(
+          name,
+          childrenWithMetadata.map((v) => {
+            return {
+              id: v.elementUuid,
+              name: v.elementName,
+              specificMetadata: v.specificMetadata
+            };
+          })
+        );
+      });
+    }
+  }, [name, defaultValue, elementType, setValue]);
+  return /* @__PURE__ */ jsx(
+    DirectoryItemsInput,
+    {
+      name,
+      elementType,
+      equipmentTypes,
+      titleId,
+      hideErrorMessage,
+      label: "filter",
+      itemFilter,
+      onChange,
+      labelRequiredFromContext: false
+    }
+  );
+}
+export {
+  ElementValueEditor
+};

package/dist/components/composite/reactQueryBuilder/OperatorSelector.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { MaterialValueSelector } from "@react-querybuilder/material";
+import "react";
+import "react-intl";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "@mui/material";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import { useSelectAppearance } from "../../../hooks/useSelectAppearance.js";
+function OperatorSelector(props) {
+  const { options } = props;
+  const selectAppearance = useSelectAppearance(options?.length || 0);
+  if (!options?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(MaterialValueSelector, { ...props, ...selectAppearance, sx: { border: "none" } });
+}
+export {
+  OperatorSelector
+};

package/dist/components/composite/reactQueryBuilder/PropertyValueEditor.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { Grid, Autocomplete, TextField, FormControl, Select, MenuItem } from "@mui/material";
+import { useIntl } from "react-intl";
+import { useValid } from "./hooks/useValid.js";
+import { OPERATOR_OPTIONS } from "../filter/expert/expertFilterConstants.js";
+import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
+import { usePredefinedProperties } from "../../../hooks/usePredefinedProperties.js";
+import { useCustomFilterOptions } from "../../../hooks/useCustomFilterOptions.js";
+const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN, OPERATOR_OPTIONS.NOT_IN];
+function PropertyValueEditor(props) {
+  const { equipmentType, valueEditorProps } = props;
+  const valid = useValid(valueEditorProps);
+  const intl = useIntl();
+  const { propertyName, propertyOperator, propertyValues } = valueEditorProps?.value ?? {};
+  const [equipmentPredefinedProps] = usePredefinedProperties(equipmentType);
+  const predefinedNames = useMemo(() => {
+    return Object.keys(equipmentPredefinedProps ?? {}).sort();
+  }, [equipmentPredefinedProps]);
+  const predefinedValues = useMemo(() => {
+    const predefinedForName = equipmentPredefinedProps?.[propertyName];
+    if (!predefinedForName) {
+      return [];
+    }
+    return [...new Set(predefinedForName)].sort();
+  }, [equipmentPredefinedProps, propertyName]);
+  const onChange = useCallback(
+    (field, value) => {
+      let updatedValue = {
+        ...valueEditorProps?.value,
+        [FieldConstants.PROPERTY_OPERATOR]: valueEditorProps?.value?.propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
+        [field]: value
+      };
+      if (field === FieldConstants.PROPERTY_NAME) {
+        updatedValue = {
+          ...updatedValue,
+          [FieldConstants.PROPERTY_VALUES]: []
+        };
+      }
+      valueEditorProps?.handleOnChange?.(updatedValue);
+    },
+    [valueEditorProps]
+  );
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, item: true, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, 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);
+        },
+        size: "small",
+        filterOptions: useCustomFilterOptions()
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
+        size: "small",
+        title: valueEditorProps?.title,
+        error: !valid,
+        onChange: (event) => {
+          onChange(FieldConstants.PROPERTY_OPERATOR, event.target.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: true, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: propertyValues ?? [],
+        options: predefinedValues ?? [],
+        title: valueEditorProps?.title,
+        multiple: true,
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            error: !valid,
+            placeholder: propertyValues?.length > 0 ? "" : intl.formatMessage({ id: "valuesList" })
+          }
+        ),
+        freeSolo: true,
+        autoSelect: true,
+        onChange: (event, value) => {
+          onChange(FieldConstants.PROPERTY_VALUES, value);
+        },
+        size: "small",
+        filterOptions: useCustomFilterOptions()
+      }
+    ) })
+  ] });
+}
+export {
+  PropertyValueEditor
+};

package/dist/components/composite/reactQueryBuilder/RemoveButton.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import { useController } from "react-hook-form";
+import { recursiveRemove } from "../filter/expert/expertFilterUtils.js";
+const EXPERT_FILTER_QUERY = "rules";
+function RemoveButton(props) {
+  const { path, className, title } = props;
+  const {
+    field: { value: query, onChange }
+  } = useController({ name: EXPERT_FILTER_QUERY });
+  function handleDelete() {
+    onChange(recursiveRemove(query, path));
+  }
+  return /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => handleDelete(), className, title, children: /* @__PURE__ */ jsx(Delete, {}) });
+}
+export {
+  RemoveButton
+};

package/dist/components/composite/reactQueryBuilder/ValueEditor.js

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, createElement } from "react";
+import { MaterialValueEditor } from "@react-querybuilder/material";
+import { Box } from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { CountryValueEditor } from "./CountryValueEditor.js";
+import { TranslatedValueEditor } from "./TranslatedValueEditor.js";
+import { TextValueEditor } from "./TextValueEditor.js";
+import { DataType } from "../filter/expert/expertFilter.type.js";
+import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
+import { VoltageLevel, Substation } from "../../../utils/types/equipmentTypes.js";
+import { ElementValueEditor } from "./ElementValueEditor.js";
+import { ElementType } from "../../../utils/types/elementType.js";
+import { PropertyValueEditor } from "./PropertyValueEditor.js";
+import { GroupValueEditor } from "./compositeRuleEditor/GroupValueEditor.js";
+import { OPERATOR_OPTIONS } from "../filter/expert/expertFilterConstants.js";
+import { FieldType } from "../../../utils/types/fieldType.js";
+const styles = {
+  noArrows: {
+    "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
+      display: "none"
+    },
+    "& input[type=number]": {
+      MozAppearance: "textfield"
+    }
+  }
+};
+function ValueEditor(props) {
+  const { field, operator, value, rule, handleOnChange, inputType, fieldData } = props;
+  const formContext = useFormContext();
+  const { getValues } = formContext;
+  const itemFilter = useCallback(
+    (filterValue) => {
+      if (filterValue?.type === ElementType.FILTER) {
+        return field === FieldType.ID && filterValue?.specificMetadata?.equipmentType === getValues(FieldConstants.EQUIPMENT_TYPE) || (field === FieldType.VOLTAGE_LEVEL_ID || field === FieldType.VOLTAGE_LEVEL_ID_1 || field === FieldType.VOLTAGE_LEVEL_ID_2 || field === FieldType.VOLTAGE_LEVEL_ID_3) && filterValue?.specificMetadata?.equipmentType === VoltageLevel.type || (field === FieldType.SUBSTATION_ID || field === FieldType.SUBSTATION_ID_1 || field === FieldType.SUBSTATION_ID_2) && filterValue?.specificMetadata?.equipmentType === Substation.type;
+      }
+      return true;
+    },
+    [field, getValues]
+  );
+  if (operator === OPERATOR_OPTIONS.EXISTS.name || operator === OPERATOR_OPTIONS.NOT_EXISTS.name) {
+    return null;
+  }
+  if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(field)) {
+    return /* @__PURE__ */ createElement(CountryValueEditor, { ...props, key: field });
+  }
+  if (fieldData.dataType === DataType.ENUM) {
+    return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
+  }
+  if (operator === OPERATOR_OPTIONS.IS_PART_OF.name || operator === OPERATOR_OPTIONS.IS_NOT_PART_OF.name) {
+    let equipmentTypes;
+    if (field === FieldType.VOLTAGE_LEVEL_ID || field === FieldType.VOLTAGE_LEVEL_ID_1 || field === FieldType.VOLTAGE_LEVEL_ID_2 || field === FieldType.VOLTAGE_LEVEL_ID_3) {
+      equipmentTypes = [VoltageLevel.type];
+    } else if (field === FieldType.SUBSTATION_ID || field === FieldType.SUBSTATION_ID_1 || field === FieldType.SUBSTATION_ID_2) {
+      equipmentTypes = [Substation.type];
+    } else if (field === FieldType.ID) {
+      equipmentTypes = [getValues(FieldConstants.EQUIPMENT_TYPE)];
+    }
+    return /* @__PURE__ */ jsx(
+      ElementValueEditor,
+      {
+        name: DataType.FILTER_UUID + rule.id,
+        elementType: ElementType.FILTER,
+        equipmentTypes,
+        titleId: "selectFilterDialogTitle",
+        hideErrorMessage: true,
+        onChange: (e) => {
+          handleOnChange(e.map((v) => v.id));
+        },
+        itemFilter,
+        defaultValue: value
+      }
+    );
+  }
+  if (fieldData.dataType === DataType.STRING) {
+    return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
+  }
+  if (fieldData.dataType === DataType.PROPERTY) {
+    let equipmentType;
+    if (field === FieldType.SUBSTATION_PROPERTIES || field === FieldType.SUBSTATION_PROPERTIES_1 || field === FieldType.SUBSTATION_PROPERTIES_2) {
+      equipmentType = Substation.type;
+    } else if (field === FieldType.VOLTAGE_LEVEL_PROPERTIES || field === FieldType.VOLTAGE_LEVEL_PROPERTIES_1 || field === FieldType.VOLTAGE_LEVEL_PROPERTIES_2 || field === FieldType.VOLTAGE_LEVEL_PROPERTIES_3) {
+      equipmentType = VoltageLevel.type;
+    } else {
+      equipmentType = getValues(FieldConstants.EQUIPMENT_TYPE);
+    }
+    return /* @__PURE__ */ jsx(PropertyValueEditor, { equipmentType, valueEditorProps: props });
+  }
+  if (fieldData.dataType === DataType.COMBINATOR) {
+    return /* @__PURE__ */ jsx(GroupValueEditor, { ...props });
+  }
+  return /* @__PURE__ */ jsx(Box, { sx: inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(MaterialValueEditor, { ...props }) });
+}
+export {
+  ValueEditor
+};

package/dist/components/composite/reactQueryBuilder/compositeRuleEditor/GroupValueEditor.d.ts

@@ -0,0 +1,3 @@
+import { ValueEditorProps } from 'react-querybuilder';
+import { CompositeField } from '../../filter/expert/expertFilter.type';
+export declare function GroupValueEditor(props: ValueEditorProps<CompositeField>): import("react/jsx-runtime").JSX.Element;

package/dist/components/composite/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.d.ts

@@ -0,0 +1,8 @@
+import { ValueEditorProps } from 'react-querybuilder';
+import { CompositeRule } from '../../filter/expert/expertFilter.type';
+type RuleValueEditorProps = ValueEditorProps & {
+    rule?: CompositeRule;
+    handleOnChangeRule: (rule: CompositeRule) => void;
+};
+export declare function RuleValueEditor(props: RuleValueEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/composite/reactQueryBuilder/hooks/useConvertValue.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { OPERATOR_OPTIONS } from "../../filter/expert/expertFilterConstants.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
+};

package/dist/components/index.d.ts

@@ -4,21 +4,5 @@
  * 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 './customAGGrid';
-export * from './directoryItemSelector/DirectoryItemSelector';
-export * from './dnd-table';
-export * from './elementSearch';
-export * from './filter';
-export * from './flatParameters';
-export * from './grid';
-export * from './topBar';
-export * from './treeViewFinder';
-export * from './notifications';
-export * from './parameters';
-export * from './muiTable';
-export * from './network-modifications';
-export * from './node';
-export * from './network-modification-table';
 export * from './ui';
+export * from './composite';