@gridsuite/commons-ui 0.55.0 → 0.56.0

package/dist/components/react-hook-form/utils/functions.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
 import { getIn } from "yup";
+import { Grid } from "@mui/material";
 function genHelperPreviousValue(previousValue, adornment) {
   return {
     ...(previousValue || previousValue === 0) && {
@@ -27,9 +28,28 @@ const isFieldRequired = (fieldName, schema, values) => {
   const { schema: fieldSchema, parent: parentValues } = getIn(schema, fieldName, values) || {};
   return ((_a = fieldSchema.describe({ parent: parentValues })) == null ? void 0 : _a.optional) === false;
 };
+const gridItem = (field, size = 6) => {
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: "start", children: field });
+};
+const isFloatNumber = (val) => {
+  return /^-?[0-9]*[.,]?[0-9]*$/.test(val);
+};
+const toFloatOrNullValue = (value) => {
+  if (value === "-") {
+    return value;
+  }
+  if (value === "0") {
+    return 0;
+  }
+  const tmp = (value == null ? void 0 : value.replace(",", ".")) || "";
+  return parseFloat(tmp) || null;
+};
 export {
   genHelperError,
   genHelperPreviousValue,
+  gridItem,
   identity,
-  isFieldRequired
+  isFieldRequired,
+  isFloatNumber,
+  toFloatOrNullValue
 };

package/dist/components/react-hook-form/utils/submit-button.d.ts

@@ -1,10 +1,11 @@
 import { default as PropTypes } from 'prop-types';
+
+declare const SubmitButton: {
+    ({ ...buttonProps }: {
+        [x: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        buttonProps: PropTypes.Requireable<object>;
+    };
+};
 export default SubmitButton;
-declare function SubmitButton({ ...buttonProps }: {
-    [x: string]: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace SubmitButton {
-    namespace propTypes {
-        let buttonProps: PropTypes.Requireable<object>;
-    }
-}

package/dist/components/react-hook-form/utils/text-field-with-adornment.d.ts

@@ -1,12 +1,12 @@
-import { default as PropTypes } from 'prop-types';
+import { Input } from '../../../utils/types.ts';
+import { TextFieldProps } from '@mui/material';
+import { FunctionComponent } from 'react';
+
+export type TextFieldWithAdornmentProps = TextFieldProps & {
+    value: Input;
+    adornmentPosition: string;
+    adornmentText: string;
+    handleClearValue?: () => void;
+};
+declare const TextFieldWithAdornment: FunctionComponent<TextFieldWithAdornmentProps>;
 export default TextFieldWithAdornment;
-declare function TextFieldWithAdornment(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TextFieldWithAdornment {
-    namespace propTypes {
-        let adornmentPosition: PropTypes.Validator<string>;
-        let adornmentText: PropTypes.Validator<string>;
-        let value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        let variant: PropTypes.Requireable<string>;
-        let handleClearValue: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}

package/dist/components/react-hook-form/utils/text-field-with-adornment.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import PropTypes from "prop-types";
 import { Clear } from "@mui/icons-material";
 import { InputAdornment, IconButton, TextField } from "@mui/material";
 const TextFieldWithAdornment = (props) => {
@@ -13,20 +12,23 @@ const TextFieldWithAdornment = (props) => {
     ...otherProps
   } = props;
   const [isFocused, setIsFocused] = useState(false);
-  const getAdornmentStyle = useCallback((variant2) => {
-    if (variant2 === "filled") {
-      return {
-        alignItems: "start",
-        marginBottom: "0.4em"
-      };
-    }
-    if (variant2 === "standard") {
-      return {
-        marginBottom: "0.3em"
-      };
-    }
-    return void 0;
-  }, []);
+  const getAdornmentStyle = useCallback(
+    (variant2) => {
+      if (variant2 === "filled") {
+        return {
+          alignItems: "start",
+          marginBottom: "0.4em"
+        };
+      }
+      if (variant2 === "standard") {
+        return {
+          marginBottom: "0.3em"
+        };
+      }
+      return void 0;
+    },
+    []
+  );
   const getClearAdornment = useCallback(
     (position) => {
       return /* @__PURE__ */ jsx(InputAdornment, { position, children: /* @__PURE__ */ jsx(IconButton, { onClick: handleClearValue, children: /* @__PURE__ */ jsx(Clear, {}) }) });
@@ -39,7 +41,7 @@ const TextFieldWithAdornment = (props) => {
         InputAdornment,
         {
           position,
-          sx: getAdornmentStyle(variant),
+          sx: variant && getAdornmentStyle(variant),
           children: adornmentText
         }
       );
@@ -84,13 +86,6 @@ const TextFieldWithAdornment = (props) => {
     }
   );
 };
-TextFieldWithAdornment.propTypes = {
-  adornmentPosition: PropTypes.string.isRequired,
-  adornmentText: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  variant: PropTypes.string,
-  handleClearValue: PropTypes.func
-};
 export {
   TextFieldWithAdornment as default
 };

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { ActionWithRulesAndAddersProps } from 'react-querybuilder';
+
+interface ActionWithRulesAndAddersWithLabelProps extends ActionWithRulesAndAddersProps {
+    label: string;
+}
+declare const AddButton: FunctionComponent<ActionWithRulesAndAddersWithLabelProps>;
+export default AddButton;

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@mui/material";
+import AddIcon from "@mui/icons-material/ControlPoint";
+import { FormattedMessage } from "react-intl";
+const AddButton = (props) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+    onClick: props.handleOnClick,
+    size: "small",
+    className: "add-button",
+    children: /* @__PURE__ */ jsx(FormattedMessage, { id: props.label })
+  }
+) });
+export {
+  AddButton as default
+};

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

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

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

@@ -0,0 +1,38 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import PopupConfirmationDialog from "../dialogs/popup-confirmation-dialog.js";
+import { MaterialValueSelector } from "@react-querybuilder/material";
+const CombinatorSelector = (props) => {
+  const [tempCombinator, setTempCombinator] = useState(props.value);
+  const [openPopup, setOpenPopup] = useState(false);
+  const handlePopupConfirmation = useCallback(() => {
+    props.handleOnChange(tempCombinator);
+    setOpenPopup(false);
+  }, [props, tempCombinator]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PopupConfirmationDialog,
+      {
+        message: "changeOperatorMessage",
+        validateButtonLabel: "button.changeOperator",
+        openConfirmationPopup: openPopup,
+        setOpenConfirmationPopup: setOpenPopup,
+        handlePopupConfirmation
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MaterialValueSelector,
+      {
+        ...props,
+        title: void 0,
+        handleOnChange: (newCombinator) => {
+          setTempCombinator(newCombinator);
+          setOpenPopup(true);
+        }
+      }
+    )
+  ] });
+};
+export {
+  CombinatorSelector as default
+};

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

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

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { MaterialValueEditor } from "@react-querybuilder/material";
+import { Autocomplete, TextField } from "@mui/material";
+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) => {
+  const { language } = useCustomFormContext();
+  const { translate, countryCodes } = useLocalizedCountries(language);
+  const countriesList = useMemo(
+    () => countryCodes.map((country) => {
+      return { name: country, label: translate(country) };
+    }),
+    [countryCodes, translate]
+  );
+  useConvertValue(props);
+  const valid = useValid(props);
+  if (!Array.isArray(props.value)) {
+    return /* @__PURE__ */ jsx(
+      MaterialValueEditor,
+      {
+        ...props,
+        values: countriesList,
+        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 })
+      }
+    );
+  }
+};
+export {
+  CountryValueEditor as default
+};

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

@@ -0,0 +1,8 @@
+import { Field } from 'react-querybuilder';
+
+interface CustomReactQueryBuilderProps {
+    name: string;
+    fields: Field[];
+}
+declare const CustomReactQueryBuilder: (props: CustomReactQueryBuilderProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomReactQueryBuilder;

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

@@ -0,0 +1,21 @@
+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.DxqH-mLe.js";
+import "./combinator-selector.js";
+import "./add-button.js";
+import "./value-selector.js";
+import "react";
+import "../filter/constants/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";
+export {
+  j as default
+};

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

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+
+interface ElementValueEditorProps {
+    name: string;
+    elementType: string;
+    equipmentTypes?: string[];
+    titleId: string;
+    hideErrorMessage: boolean;
+    onChange?: (e: any) => void;
+    itemFilter?: any;
+    defaultValue?: any;
+}
+declare const ElementValueEditor: FunctionComponent<ElementValueEditorProps>;
+export default ElementValueEditor;

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

@@ -0,0 +1,69 @@
+import "react/jsx-runtime";
+import "react";
+import "uuid";
+import "../TreeViewFinder/TreeViewFinder.js";
+import "../TopBar/TopBar.js";
+import "../TopBar/GridLogo.js";
+import "../TopBar/AboutDialog.js";
+import "../SnackbarProvider/SnackbarProvider.js";
+import "react-router-dom";
+import "../../utils/AuthService.js";
+import "@mui/material";
+import "@mui/icons-material";
+import "react-intl";
+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 "../ElementSearchDialog/element-search-dialog.js";
+import "../ElementSearchDialog/tag-renderer.js";
+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 "yup";
+import "../react-hook-form/provider/use-custom-form-context.js";
+import "../dialogs/popup-confirmation-dialog.js";
+import "../filter/utils/criteria-based-utils.js";
+import { i } from "../../chunks/criteria-based-filter-edition-dialog.DxqH-mLe.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 "clsx";
+import "../CardErrorBoundary/card-error-boundary.js";
+import "notistack";
+import "../react-hook-form/slider-input.js";
+import "../react-hook-form/numbers/integer-input.js";
+import "../react-hook-form/booleans/checkbox-input.js";
+import "../react-hook-form/booleans/switch-input.js";
+import "../react-hook-form/directory-items-input.js";
+import "../../chunks/filter-properties.GRon8-ML.js";
+import "@mui/icons-material/Delete";
+import "@mui/material/IconButton";
+import "@mui/material/Grid";
+import "../filter/expert/expert-filter-utils.js";
+import "../react-hook-form/range-input.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 "@mui/icons-material/Check";
+import "@mui/material/CircularProgress";
+import "@mui/material/TextField";
+import "../filter/filter-context.js";
+export {
+  i as default
+};

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

@@ -0,0 +1,9 @@
+import { ValueEditorProps } from 'react-querybuilder';
+import { FunctionComponent } from 'react';
+
+interface ExpertFilterPropertyProps {
+    equipmentType: string;
+    valueEditorProps: ValueEditorProps;
+}
+declare const PropertyValueEditor: FunctionComponent<ExpertFilterPropertyProps>;
+export default PropertyValueEditor;

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
+};