@gridsuite/commons-ui 0.62.0 → 0.63.1

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

@@ -8,7 +8,7 @@ const styles = {
     alignItems: "baseline"
   }
 };
-const RuleValueEditor = (props) => {
+function RuleValueEditor(props) {
   var _a, _b;
   const {
     schema: {
@@ -20,10 +20,10 @@ const RuleValueEditor = (props) => {
   } = props;
   const intl = useIntl();
   const operator = (rule == null ? void 0 : rule.operator) ?? ((_a = fieldData.operators) == null ? void 0 : _a.map((op) => op.name)[0]);
-  const handleOnChangeOperator = (operator2) => {
+  const handleOnChangeOperator = (newOperator) => {
     handleOnChangeRule({
       ...rule,
-      operator: operator2
+      operator: newOperator
     });
   };
   const handleOnChangeValue = (value) => {
@@ -45,7 +45,7 @@ const RuleValueEditor = (props) => {
         },
         variant: "standard",
         children: (_b = fieldData.operators) == null ? void 0 : _b.map(
-          (operator2) => /* @__PURE__ */ jsx(MenuItem, { value: operator2.name, children: intl.formatMessage({ id: operator2.label }) }, operator2.name)
+          (option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name)
         )
       }
     ) }),
@@ -59,7 +59,7 @@ const RuleValueEditor = (props) => {
       }
     ) })
   ] });
-};
+}
 export {
   RuleValueEditor as default
 };

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

@@ -1,5 +1,4 @@
-import { FunctionComponent } from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 
-declare const CountryValueEditor: FunctionComponent<ValueEditorProps>;
+declare function CountryValueEditor(props: ValueEditorProps): import("react/jsx-runtime").JSX.Element;
 export default CountryValueEditor;

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

@@ -1,14 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { MaterialValueEditor } from "@react-querybuilder/material";
 import { Autocomplete, TextField } from "@mui/material";
+import { useMemo } from "react";
 import useConvertValue from "./use-convert-value.js";
 import useValid from "./use-valid.js";
 import { useLocalizedCountries } from "../../../hooks/localized-countries-hook.js";
-import { useCustomFormContext } from "../react-hook-form/provider/use-custom-form-context.js";
-import { useMemo } from "react";
-const CountryValueEditor = (props) => {
+import useCustomFormContext from "../react-hook-form/provider/use-custom-form-context.js";
+function CountryValueEditor(props) {
   const { language } = useCustomFormContext();
   const { translate, countryCodes } = useLocalizedCountries(language);
+  const { value, handleOnChange } = props;
   const countriesList = useMemo(
     () => countryCodes.map((country) => {
       return { name: country, label: translate(country) };
@@ -17,7 +18,7 @@ const CountryValueEditor = (props) => {
   );
   useConvertValue(props);
   const valid = useValid(props);
-  if (!Array.isArray(props.value)) {
+  if (!Array.isArray(value)) {
     return /* @__PURE__ */ jsx(
       MaterialValueEditor,
       {
@@ -26,21 +27,20 @@ const CountryValueEditor = (props) => {
         title: void 0
       }
     );
-  } else {
-    return /* @__PURE__ */ jsx(
-      Autocomplete,
-      {
-        value: props.value,
-        options: countryCodes,
-        getOptionLabel: (code) => translate(code),
-        onChange: (event, value) => props.handleOnChange(value),
-        multiple: true,
-        fullWidth: true,
-        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
-      }
-    );
   }
-};
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      value,
+      options: countryCodes,
+      getOptionLabel: (code) => translate(code),
+      onChange: (event, newValue) => handleOnChange(newValue),
+      multiple: true,
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
+    }
+  );
+}
 export {
   CountryValueEditor as default
 };

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

@@ -4,5 +4,5 @@ interface CustomReactQueryBuilderProps {
     name: string;
     fields: Field[];
 }
-declare const CustomReactQueryBuilder: (props: CustomReactQueryBuilderProps) => import("react/jsx-runtime").JSX.Element;
+declare function CustomReactQueryBuilder(props: CustomReactQueryBuilderProps): import("react/jsx-runtime").JSX.Element;
 export default CustomReactQueryBuilder;

package/dist/components/inputs/react-query-builder/custom-react-query-builder.js

@@ -1,21 +1,94 @@
-import "react/jsx-runtime";
-import "@mui/material/Grid";
-import "@react-querybuilder/dnd";
-import "react-dnd";
-import "react-dnd-html5-backend";
-import "@react-querybuilder/material";
-import "react-querybuilder";
-import "react-intl";
-import "react-hook-form";
-import { j } from "../../../chunks/criteria-based-filter-edition-dialog.CAT38SvB.js";
-import "./combinator-selector.js";
-import "./add-button.js";
-import "./value-selector.js";
-import "react";
-import "../../filter/expert/expert-filter-constants.js";
-import "../react-hook-form/error-management/error-input.js";
-import "../react-hook-form/error-management/field-error-alert.js";
-import "../../filter/expert/expert-filter-utils.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import Grid from "@mui/material/Grid";
+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 { formatQuery, QueryBuilder } from "react-querybuilder";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { useCallback, useMemo } from "react";
+import CombinatorSelector from "./combinator-selector.js";
+import AddButton from "./add-button.js";
+import ValueEditor from "./value-editor.js";
+import ValueSelector from "./value-selector.js";
+import { COMBINATOR_OPTIONS } from "../../filter/expert/expert-filter-constants.js";
+import ErrorInput from "../react-hook-form/error-management/error-input.js";
+import FieldErrorAlert from "../react-hook-form/error-management/field-error-alert.js";
+import { countRules, getOperators, queryValidator } from "../../filter/expert/expert-filter-utils.js";
+import RemoveButton from "./remove-button.js";
+function RuleAddButton(props) {
+  return /* @__PURE__ */ jsx(AddButton, { ...props, label: "rule" });
+}
+function GroupAddButton(props) {
+  return /* @__PURE__ */ jsx(AddButton, { ...props, label: "subGroup" });
+}
+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(Grid, { item: true, xs: 12, 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: ValueSelector,
+              fieldSelector: ValueSelector,
+              valueSourceSelector: ValueSelector
+            },
+            listsAsArrays: true
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert }) })
+  ] });
+}
 export {
-  j as default
+  CustomReactQueryBuilder as default
 };

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

@@ -1,5 +1,9 @@
-import { FunctionComponent } from 'react';
-
+/**
+ * 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/.
+ */
 interface ElementValueEditorProps {
     name: string;
     elementType: string;
@@ -10,5 +14,5 @@ interface ElementValueEditorProps {
     itemFilter?: any;
     defaultValue?: any;
 }
-declare const ElementValueEditor: FunctionComponent<ElementValueEditorProps>;
+declare function ElementValueEditor(props: ElementValueEditorProps): import("react/jsx-runtime").JSX.Element;
 export default ElementValueEditor;

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

@@ -1,64 +1,52 @@
-import "react/jsx-runtime";
-import "react";
-import "uuid";
-import "../../TreeViewFinder/TreeViewFinder.js";
-import "../../TopBar/TopBar.js";
-import "@mui/material";
-import "@mui/icons-material";
-import "@mui/lab";
-import "react-intl";
-import "notistack";
-import "react-router-dom";
-import "../../../utils/AuthService.js";
-import "../../MuiVirtualizedTable/MuiVirtualizedTable.js";
-import "../../ReportViewer/report-item.js";
-import "../../ReportViewer/log-table.js";
-import "../../ReportViewer/report-tree-view-context.js";
-import "@mui/x-tree-view";
-import "../../OverflowableText/overflowable-text.js";
-import "clsx";
-import "../react-hook-form/utils/submit-button.js";
-import "../react-hook-form/utils/cancel-button.js";
-import "../react-hook-form/provider/custom-form-provider.js";
-import "../../dialogs/description-modification-dialog.js";
-import "react-hook-form";
-import "../../../services/explore.js";
-import "yup";
-import "../react-hook-form/provider/use-custom-form-context.js";
-import "../../dialogs/popup-confirmation-dialog.js";
-import { i } from "../../../chunks/criteria-based-filter-edition-dialog.CAT38SvB.js";
-import "ag-grid-react";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-alpine.css";
-import "autosuggest-highlight/match";
-import "autosuggest-highlight/parse";
-import "../../CardErrorBoundary/card-error-boundary.js";
-import "../react-hook-form/directory-items-input.js";
-import "../../CustomAGGrid/custom-aggrid.js";
-import "../../../chunks/filter-properties.B7-q_yPf.js";
-import "@mui/icons-material/Delete";
-import "@mui/material/IconButton";
-import "@mui/material/Grid";
-import "../../../utils/yup-config.js";
-import "../react-hook-form/range-input.js";
-import "../../filter/expert/expert-filter-utils.js";
-import "../react-hook-form/select-inputs/mui-select-input.js";
-import "localized-countries";
-import "localized-countries/data/fr";
-import "localized-countries/data/en";
-import "@mui/material/Dialog";
-import "@mui/material/DialogTitle";
-import "@mui/material/DialogContent";
-import "@mui/material/DialogActions";
-import "react-papaparse";
-import "@mui/material/Button";
-import "react-csv-downloader";
-import "@mui/material/Alert";
-import "papaparse";
-import "@mui/icons-material/Check";
-import "@mui/material/CircularProgress";
-import "@mui/material/TextField";
-import "../../filter/utils/filter-form-utils.js";
+import { jsx } from "react/jsx-runtime";
+import { validate } from "uuid";
+import { useEffect } from "react";
+import useCustomFormContext from "../react-hook-form/provider/use-custom-form-context.js";
+import { fetchElementsInfos } from "../../../services/explore.js";
+import DirectoryItemsInput from "../react-hook-form/directory-items-input.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 {
-  i as default
+  ElementValueEditor as default
 };

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

@@ -1,9 +1,8 @@
 import { ValueEditorProps } from 'react-querybuilder';
-import { FunctionComponent } from 'react';
 
 interface ExpertFilterPropertyProps {
     equipmentType: string;
     valueEditorProps: ValueEditorProps;
 }
-declare const PropertyValueEditor: FunctionComponent<ExpertFilterPropertyProps>;
+declare function PropertyValueEditor(props: ExpertFilterPropertyProps): import("react/jsx-runtime").JSX.Element;
 export default PropertyValueEditor;

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

@@ -2,13 +2,13 @@ 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 "../../../utils/field-constants.js";
+import useValid from "./use-valid.js";
 import { OPERATOR_OPTIONS } from "../../filter/expert/expert-filter-constants.js";
-import { usePredefinedProperties } from "../../../hooks/predefined-properties-hook.js";
+import FieldConstants from "../../../utils/field-constants.js";
+import usePredefinedProperties from "../../../hooks/predefined-properties-hook.js";
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
-const PropertyValueEditor = (props) => {
+function PropertyValueEditor(props) {
   const { equipmentType, valueEditorProps } = props;
   const valid = useValid(valueEditorProps);
   const intl = useIntl();
@@ -94,7 +94,7 @@ const PropertyValueEditor = (props) => {
       }
     ) })
   ] });
-};
+}
 export {
   PropertyValueEditor as default
 };

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

@@ -1,5 +1,4 @@
-import { FunctionComponent } from 'react';
 import { ActionWithRulesProps } from 'react-querybuilder';
 
-declare const RemoveButton: FunctionComponent<ActionWithRulesProps>;
+declare function RemoveButton(props: ActionWithRulesProps): import("react/jsx-runtime").JSX.Element;
 export default RemoveButton;

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

@@ -1,9 +1,28 @@
-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.CAT38SvB.js";
-import "../../filter/expert/expert-filter-utils.js";
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useController } from "react-hook-form";
+import { getNumberOfSiblings, recursiveRemove } from "../../filter/expert/expert-filter-utils.js";
+const EXPERT_FILTER_QUERY = "rules";
+function RemoveButton(props) {
+  const { path, className } = props;
+  const {
+    field: { value: query, onChange }
+  } = useController({ name: EXPERT_FILTER_QUERY });
+  function handleDelete() {
+    onChange(recursiveRemove(query, path));
+  }
+  const isLastRuleOrGroup = path.toString() === [0].toString() && getNumberOfSiblings(path, query) === 1;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      onClick: () => handleDelete(),
+      className,
+      children: !isLastRuleOrGroup && /* @__PURE__ */ jsx(DeleteIcon, {})
+    }
+  );
+}
 export {
-  h as default
+  RemoveButton as default
 };

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

@@ -1,5 +1,4 @@
-import { FunctionComponent } from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 
-declare const TextValueEditor: FunctionComponent<ValueEditorProps>;
+declare function TextValueEditor(props: ValueEditorProps): import("react/jsx-runtime").JSX.Element;
 export default TextValueEditor;

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

@@ -1,12 +1,13 @@
 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 useConvertValue from "./use-convert-value.js";
 import useValid from "./use-valid.js";
-const TextValueEditor = (props) => {
+function TextValueEditor(props) {
   useConvertValue(props);
   const valid = useValid(props);
-  if (!Array.isArray(props.value)) {
+  const { value, handleOnChange } = props;
+  if (!Array.isArray(value)) {
     return /* @__PURE__ */ jsx(
       MaterialValueEditor,
       {
@@ -14,21 +15,20 @@ const TextValueEditor = (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 })
-      }
-    );
   }
-};
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      value,
+      freeSolo: true,
+      options: [],
+      onChange: (event, newValue) => handleOnChange(newValue),
+      multiple: true,
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
+    }
+  );
+}
 export {
   TextValueEditor as default
 };

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

@@ -1,5 +1,4 @@
-import { FunctionComponent } from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 
-declare const TranslatedValueEditor: FunctionComponent<ValueEditorProps>;
+declare function TranslatedValueEditor(props: ValueEditorProps): import("react/jsx-runtime").JSX.Element;
 export default TranslatedValueEditor;

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

@@ -2,34 +2,31 @@ 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 useConvertValue from "./use-convert-value.js";
 import useValid from "./use-valid.js";
-const TranslatedValueEditor = (props) => {
+function TranslatedValueEditor(props) {
   const intl = useIntl();
+  const { values, value, handleOnChange } = props;
   const translatedValues = useMemo(() => {
-    var _a;
-    return (_a = props.values) == null ? void 0 : _a.map((v) => {
+    return values == null ? void 0 : values.map((v) => {
       return {
         name: v.name,
         label: intl.formatMessage({ id: v.label })
       };
     });
-  }, [intl, props.values]);
+  }, [intl, values]);
   const translatedValuesAutocomplete = useMemo(() => {
-    if (!props.values) {
+    if (!values) {
       return {};
     }
     return Object.fromEntries(
-      props.values.map((v) => [
-        v.name,
-        intl.formatMessage({ id: v.label })
-      ])
+      values.map((v) => [v.name, intl.formatMessage({ id: v.label })])
     );
-  }, [intl, props.values]);
+  }, [intl, values]);
   useConvertValue(props);
   const valid = useValid(props);
-  if (!Array.isArray(props.value)) {
+  if (!Array.isArray(value)) {
     return /* @__PURE__ */ jsx(
       MaterialValueEditor,
       {
@@ -38,21 +35,20 @@ const TranslatedValueEditor = (props) => {
         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 })
-      }
-    );
   }
-};
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      value,
+      options: Object.keys(translatedValuesAutocomplete),
+      getOptionLabel: (code) => translatedValuesAutocomplete[code],
+      onChange: (event, newValue) => handleOnChange(newValue),
+      multiple: true,
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid })
+    }
+  );
+}
 export {
   TranslatedValueEditor as default
 };

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

@@ -1,5 +1,4 @@
-import { FunctionComponent } from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 
-declare const ValueEditor: FunctionComponent<ValueEditorProps>;
+declare function ValueEditor(props: ValueEditorProps): import("react/jsx-runtime").JSX.Element | null;
 export default ValueEditor;