@gridsuite/commons-ui 0.55.0 → 0.57.0

package/dist/components/react-hook-form/radio-input.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
 import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useController } from "react-hook-form";
 import FieldLabel from "./utils/field-label.js";
-const RadioInput = ({ name, label, id, options, formProps }) => {
+const RadioInput = ({
+  name,
+  label,
+  id,
+  options,
+  formProps
+}) => {
   const {
     field: { onChange, value }
   } = useController({ name });
@@ -31,13 +36,6 @@ const RadioInput = ({ name, label, id, options, formProps }) => {
     )
   ] });
 };
-RadioInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  id: PropTypes.string,
-  options: PropTypes.array.isRequired,
-  formProps: PropTypes.object
-};
 export {
   RadioInput as default
 };

package/dist/components/react-hook-form/range-input.d.ts

@@ -0,0 +1,54 @@
+import { FunctionComponent } from 'react';
+import { default as yup } from '../../utils/yup-config.ts';
+
+export declare const RangeType: {
+    EQUALITY: {
+        id: string;
+        label: string;
+    };
+    GREATER_THAN: {
+        id: string;
+        label: string;
+    };
+    GREATER_OR_EQUAL: {
+        id: string;
+        label: string;
+    };
+    LESS_THAN: {
+        id: string;
+        label: string;
+    };
+    LESS_OR_EQUAL: {
+        id: string;
+        label: string;
+    };
+    RANGE: {
+        id: string;
+        label: string;
+    };
+};
+export declare const DEFAULT_RANGE_VALUE: {
+    type: string;
+    value1: null;
+    value2: null;
+};
+export declare const getRangeInputDataForm: (name: string, rangeValue: unknown) => {
+    [x: string]: unknown;
+};
+export declare const getRangeInputSchema: (name: string) => {
+    [x: string]: yup.ObjectSchema<{
+        type: string | undefined;
+        value1: number | undefined;
+        value2: number | undefined;
+    }, yup.AnyObject, {
+        type: undefined;
+        value1: undefined;
+        value2: undefined;
+    }, "">;
+};
+interface RangeInputProps {
+    name: string;
+    label: string;
+}
+declare const RangeInput: FunctionComponent<RangeInputProps>;
+export default RangeInput;

package/dist/components/react-hook-form/range-input.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useWatch } from "react-hook-form";
+import FloatInput from "./numbers/float-input.js";
+import "../../utils/yup-config.js";
+import { FormattedMessage } from "react-intl";
+import { useMemo } from "react";
+import InputLabel from "@mui/material/InputLabel";
+import { Grid } from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import MuiSelectInput from "./select-inputs/mui-select-input.js";
+import { FieldConstants } from "../filter/constants/field-constants.js";
+import * as yup from "yup";
+const style = {
+  inputLegend: (theme) => ({
+    backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    backgroundColor: theme.palette.background.paper,
+    padding: "0 8px 0 8px"
+  })
+};
+const RangeType = {
+  EQUALITY: { id: "EQUALITY", label: "equality" },
+  GREATER_THAN: { id: "GREATER_THAN", label: "greaterThan" },
+  GREATER_OR_EQUAL: { id: "GREATER_OR_EQUAL", label: "greaterOrEqual" },
+  LESS_THAN: { id: "LESS_THAN", label: "lessThan" },
+  LESS_OR_EQUAL: { id: "LESS_OR_EQUAL", label: "lessOrEqual" },
+  RANGE: { id: "RANGE", label: "range" }
+};
+const DEFAULT_RANGE_VALUE = {
+  [FieldConstants.OPERATION_TYPE]: RangeType.EQUALITY.id,
+  [FieldConstants.VALUE_1]: null,
+  [FieldConstants.VALUE_2]: null
+};
+const getRangeInputDataForm = (name, rangeValue) => ({
+  [name]: rangeValue
+});
+const getRangeInputSchema = (name) => ({
+  [name]: yup.object().shape(
+    {
+      [FieldConstants.OPERATION_TYPE]: yup.string(),
+      [FieldConstants.VALUE_1]: yup.number().when([FieldConstants.OPERATION_TYPE, FieldConstants.VALUE_2], {
+        is: (operationType, value2) => operationType === RangeType.RANGE.id && value2 !== null,
+        then: (schema) => schema.required(),
+        otherwise: (schema) => schema.nullable()
+      }),
+      [FieldConstants.VALUE_2]: yup.number().when([FieldConstants.OPERATION_TYPE, FieldConstants.VALUE_1], {
+        is: (operationType, value1) => operationType === RangeType.RANGE.id && value1 !== null,
+        then: (schema) => schema.required(),
+        otherwise: (schema) => schema.nullable()
+      })
+    },
+    [[FieldConstants.VALUE_1, FieldConstants.VALUE_2]]
+  )
+});
+const RangeInput = ({ name, label }) => {
+  const watchOperationType = useWatch({
+    name: `${name}.${FieldConstants.OPERATION_TYPE}`
+  });
+  const isOperationTypeRange = useMemo(
+    () => watchOperationType === RangeType.RANGE.id,
+    [watchOperationType]
+  );
+  const firstValueField = /* @__PURE__ */ jsx(
+    FloatInput,
+    {
+      label: "",
+      name: `${name}.${FieldConstants.VALUE_1}`,
+      clearable: false,
+      formProps: {
+        size: "medium",
+        placeholder: isOperationTypeRange ? "Min" : ""
+      }
+    }
+  );
+  const secondValueField = /* @__PURE__ */ jsx(
+    FloatInput,
+    {
+      name: `${name}.${FieldConstants.VALUE_2}`,
+      clearable: false,
+      label: "",
+      formProps: {
+        size: "medium",
+        placeholder: "Max"
+      }
+    }
+  );
+  const operationTypeField = /* @__PURE__ */ jsx(
+    MuiSelectInput,
+    {
+      name: `${name}.${FieldConstants.OPERATION_TYPE}`,
+      options: Object.values(RangeType),
+      fullWidth: true
+    }
+  );
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    /* @__PURE__ */ jsx(InputLabel, { sx: style.inputLegend, shrink: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ jsx(
+        Grid,
+        {
+          item: true,
+          style: isOperationTypeRange ? {
+            flex: "min-content"
+          } : {},
+          children: operationTypeField
+        }
+      ),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: firstValueField }),
+      isOperationTypeRange && /* @__PURE__ */ jsx(Grid, { item: true, children: secondValueField })
+    ] })
+  ] });
+};
+export {
+  DEFAULT_RANGE_VALUE,
+  RangeType,
+  RangeInput as default,
+  getRangeInputDataForm,
+  getRangeInputSchema
+};

package/dist/components/react-hook-form/select-inputs/countries-input.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+
+interface CountryInputProps {
+    name: string;
+    label: string;
+}
+export declare const CountriesInput: FunctionComponent<CountryInputProps>;
+export default CountriesInput;

package/dist/components/react-hook-form/select-inputs/countries-input.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Chip } from "@mui/material";
+import AutocompleteInput from "../autocomplete-input.js";
+import { useLocalizedCountries } from "../../../hooks/localized-countries-hook.js";
+import { useCustomFormContext } from "../provider/use-custom-form-context.js";
+const CountriesInput = ({
+  name,
+  label
+}) => {
+  const { language } = useCustomFormContext();
+  const { translate, countryCodes } = useLocalizedCountries(language);
+  return /* @__PURE__ */ jsx(
+    AutocompleteInput,
+    {
+      name,
+      label,
+      options: countryCodes,
+      getOptionLabel: translate,
+      fullWidth: true,
+      multiple: true,
+      renderTags: (val, getTagsProps) => val.map((code, index) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          size: "small",
+          label: translate(code),
+          ...getTagsProps({ index })
+        },
+        code
+      ))
+    }
+  );
+};
+export {
+  CountriesInput,
+  CountriesInput as default
+};

package/dist/components/react-hook-form/select-inputs/input-with-popup-confirmation.d.ts

@@ -0,0 +1,2 @@
+declare const InputWithPopupConfirmation: ({ Input, name, shouldOpenPopup, resetOnConfirmation, message, validateButtonLabel, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export default InputWithPopupConfirmation;

package/dist/components/react-hook-form/select-inputs/input-with-popup-confirmation.js

@@ -0,0 +1,61 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useController } from "react-hook-form";
+import { useState } from "react";
+import PopupConfirmationDialog from "../../dialogs/popup-confirmation-dialog.js";
+const InputWithPopupConfirmation = ({
+  Input,
+  name,
+  shouldOpenPopup,
+  // condition to open popup confirmation
+  resetOnConfirmation,
+  // function to reset values in your form on confirmation,
+  message,
+  validateButtonLabel,
+  ...props
+}) => {
+  const [newValue, setNewValue] = useState(null);
+  const [openPopup, setOpenPopup] = useState(false);
+  const {
+    field: { onChange }
+  } = useController({
+    name
+  });
+  const handleOnChange = (_event, value) => {
+    if (shouldOpenPopup()) {
+      setOpenPopup(true);
+      setNewValue(value);
+    } else {
+      onChange(value);
+    }
+  };
+  const handlePopupConfirmation = () => {
+    resetOnConfirmation && resetOnConfirmation();
+    onChange(newValue);
+    setOpenPopup(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        name,
+        ...props,
+        onChange: (e, value) => {
+          handleOnChange(e, (value == null ? void 0 : value.id) ?? value);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopupConfirmationDialog,
+      {
+        message,
+        openConfirmationPopup: openPopup,
+        setOpenConfirmationPopup: setOpenPopup,
+        handlePopupConfirmation,
+        validateButtonLabel
+      }
+    )
+  ] });
+};
+export {
+  InputWithPopupConfirmation as default
+};

package/dist/components/react-hook-form/select-inputs/mui-select-input.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import { SelectProps } from '@mui/material';
+
+interface MuiSelectInputProps {
+    name: string;
+    options: {
+        id: string;
+        label: string;
+    }[];
+}
+declare const MuiSelectInput: FunctionComponent<MuiSelectInputProps & SelectProps>;
+export default MuiSelectInput;

package/dist/components/react-hook-form/select-inputs/mui-select-input.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Select, MenuItem } from "@mui/material";
+import { useController } from "react-hook-form";
+const MuiSelectInput = ({
+  name,
+  options,
+  ...props
+}) => {
+  const {
+    field: { value, onChange }
+  } = useController({
+    name
+  });
+  return /* @__PURE__ */ jsx(Select, { value, onChange, ...props, children: options.map((option, index) => /* @__PURE__ */ jsx(MenuItem, { value: option.id ?? option, children: /* @__PURE__ */ jsx(FormattedMessage, { id: option.label ?? option }) }, index)) });
+};
+MuiSelectInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  options: PropTypes.array.isRequired
+};
+export {
+  MuiSelectInput as default
+};

package/dist/components/react-hook-form/select-inputs/select-input.d.ts

@@ -0,0 +1,9 @@
+import { Option } from '../../../utils/types.ts';
+import { FunctionComponent } from 'react';
+import { AutocompleteInputProps } from '../autocomplete-input';
+
+export interface SelectInputProps extends Omit<AutocompleteInputProps, 'outputTransform' | 'inputTransform' | 'readOnly' | 'getOptionLabel'> {
+    options: Option[];
+}
+declare const SelectInput: FunctionComponent<SelectInputProps>;
+export default SelectInput;

package/dist/components/react-hook-form/select-inputs/select-input.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import AutocompleteInput from "../autocomplete-input.js";
+import { useIntl } from "react-intl";
+const SelectInput = (props) => {
+  const intl = useIntl();
+  const inputTransform = (value) => {
+    if (typeof value === "string") {
+      return props.options.find(
+        (option) => typeof option !== "string" && (option == null ? void 0 : option.id) === value
+      ) || null;
+    }
+    return props.options.find(
+      (option) => typeof option !== "string" && (option == null ? void 0 : option.id) === value.id
+    ) || null;
+  };
+  const outputTransform = (value) => {
+    if (typeof value === "string") {
+      return value;
+    }
+    return (value == null ? void 0 : value.id) ?? null;
+  };
+  return /* @__PURE__ */ jsx(
+    AutocompleteInput,
+    {
+      getOptionLabel: (option) => {
+        return typeof option !== "string" ? (option == null ? void 0 : option.label) ? intl.formatMessage({ id: option == null ? void 0 : option.label }) : option == null ? void 0 : option.id : option;
+      },
+      inputTransform,
+      outputTransform,
+      readOnly: true,
+      ...props
+    }
+  );
+};
+export {
+  SelectInput as default
+};

package/dist/components/react-hook-form/text-input.d.ts

@@ -1,33 +1,24 @@
-import { default as PropTypes } from 'prop-types';
-import { identity } from './utils/functions';
-export default TextInput;
-declare function TextInput({ name, label, labelValues, id, adornment, customAdornment, outputTransform, inputTransform, acceptValue, previousValue, clearable, formProps, }: {
-    name: any;
-    label: any;
-    labelValues: any;
-    id: any;
-    adornment: any;
-    customAdornment: any;
-    outputTransform?: typeof identity | undefined;
-    inputTransform?: typeof identity | undefined;
-    acceptValue?: (() => boolean) | undefined;
-    previousValue: any;
-    clearable: any;
-    formProps: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    namespace propTypes {
-        let name: PropTypes.Requireable<string>;
-        let label: PropTypes.Requireable<string>;
-        let labelValues: PropTypes.Requireable<object>;
-        let id: PropTypes.Requireable<string>;
-        let adornment: PropTypes.Requireable<object>;
-        let customAdornment: PropTypes.Requireable<object>;
-        let outputTransform: PropTypes.Requireable<(...args: any[]) => any>;
-        let inputTransform: PropTypes.Requireable<(...args: any[]) => any>;
-        let acceptValue: PropTypes.Requireable<(...args: any[]) => any>;
-        let previousValue: PropTypes.Requireable<any>;
-        let clearable: PropTypes.Requireable<boolean>;
-        let formProps: PropTypes.Requireable<object>;
-    }
+import { Input } from '../../utils/types.ts';
+import { TextFieldWithAdornmentProps } from './utils/text-field-with-adornment';
+import { TextFieldProps } from '@mui/material';
+import { FunctionComponent, ReactElement } from 'react';
+
+export interface TextInputProps {
+    name: string;
+    label?: string;
+    labelValues?: any;
+    id?: string;
+    adornment?: {
+        position: string;
+        text: string;
+    };
+    customAdornment?: ReactElement | null;
+    outputTransform?: (value: string) => Input | null;
+    inputTransform?: (value: Input) => string;
+    acceptValue?: (value: string) => boolean;
+    previousValue?: Input;
+    clearable?: boolean;
+    formProps?: Omit<TextFieldWithAdornmentProps | TextFieldProps, 'value' | 'onChange' | 'inputRef' | 'inputProps' | 'InputProps'>;
 }
+declare const TextInput: FunctionComponent<TextInputProps>;
+export default TextInput;

package/dist/components/react-hook-form/text-input.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
 import { InputAdornment, IconButton, TextField } from "@mui/material";
 import { Clear } from "@mui/icons-material";
 import { useController } from "react-hook-form";
@@ -31,6 +30,10 @@ const TextInput = ({
     fieldState: { error }
   } = useController({ name });
   const Field = adornment ? TextFieldWithAdornment : TextField;
+  const finalAdornment = {
+    adornmentPosition: (adornment == null ? void 0 : adornment.position) ?? "",
+    adornmentText: (adornment == null ? void 0 : adornment.text) ?? ""
+  };
   const handleClearValue = () => {
     onChange(outputTransform(""));
   };
@@ -52,10 +55,6 @@ const TextInput = ({
       fullWidth: true,
       id: id ? id : label,
       label: fieldLabel,
-      ...adornment && {
-        adornmentPosition: adornment.position,
-        adornmentText: adornment == null ? void 0 : adornment.text
-      },
       value: transformedValue,
       onChange: handleValueChanged,
       InputProps: {
@@ -70,25 +69,12 @@ const TextInput = ({
       },
       ...genHelperPreviousValue(previousValue, adornment),
       ...genHelperError(error == null ? void 0 : error.message),
-      ...formProps
+      ...formProps,
+      ...finalAdornment
     },
     id ? id : label
   );
 };
-TextInput.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.string,
-  labelValues: PropTypes.object,
-  id: PropTypes.string,
-  adornment: PropTypes.object,
-  customAdornment: PropTypes.object,
-  outputTransform: PropTypes.func,
-  inputTransform: PropTypes.func,
-  acceptValue: PropTypes.func,
-  previousValue: PropTypes.any,
-  clearable: PropTypes.bool,
-  formProps: PropTypes.object
-};
 export {
   TextInput as default
 };

package/dist/components/react-hook-form/unique-name-input.d.ts

@@ -0,0 +1,21 @@
+import { elementExistsType } from '../filter/criteria-based/criteria-based-filter-edition-dialog';
+import { UUID } from 'crypto';
+import { ElementType } from '../../utils/ElementType.ts';
+import { TextFieldProps } from '@mui/material';
+import { FunctionComponent } from 'react';
+
+interface UniqueNameInputProps {
+    name: string;
+    label?: string;
+    elementType: ElementType;
+    autoFocus?: boolean;
+    onManualChangeCallback?: () => void;
+    formProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'name' | 'label' | 'inputRef' | 'inputProps' | 'InputProps'>;
+    activeDirectory?: UUID;
+    elementExists?: elementExistsType;
+}
+/**
+ * Input component that constantly check if the field's value is available or not
+ */
+export declare const UniqueNameInput: FunctionComponent<UniqueNameInputProps>;
+export {};

package/dist/components/react-hook-form/unique-name-input.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useDebounce } from "../../hooks/useDebounce.js";
+import { FormattedMessage } from "react-intl";
+import { InputAdornment } from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+import { useController, useFormContext } from "react-hook-form";
+import CircularProgress from "@mui/material/CircularProgress";
+import TextField from "@mui/material/TextField";
+import { FieldConstants } from "../filter/constants/field-constants.js";
+const UniqueNameInput = ({
+  name,
+  label,
+  elementType,
+  autoFocus,
+  onManualChangeCallback,
+  formProps,
+  activeDirectory,
+  elementExists
+}) => {
+  var _a;
+  const {
+    field: { onChange, onBlur, value, ref },
+    fieldState: { error, isDirty }
+  } = useController({
+    name
+  });
+  const {
+    field: { value: selectedDirectory }
+  } = useController({
+    name: FieldConstants.DIRECTORY
+  });
+  const {
+    setError,
+    clearErrors,
+    formState: { errors }
+  } = useFormContext();
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  const directory = selectedDirectory || activeDirectory;
+  const handleCheckName = useCallback(
+    (value2) => {
+      if (value2) {
+        elementExists && elementExists(directory, value2, elementType).then((alreadyExist) => {
+          if (alreadyExist) {
+            setError(name, {
+              type: "validate",
+              message: "nameAlreadyUsed"
+            });
+          }
+        }).catch((error2) => {
+          setError(name, {
+            type: "validate",
+            message: "nameValidityCheckErrorMsg"
+          });
+          console.error(error2 == null ? void 0 : error2.message);
+        }).finally(() => {
+          clearErrors("root.isValidating");
+        });
+      }
+    },
+    [setError, clearErrors, name, elementType, elementExists, directory]
+  );
+  const debouncedHandleCheckName = useDebounce(handleCheckName, 700);
+  useEffect(() => {
+    const trimmedValue = value.trim();
+    if (selectedDirectory) {
+      debouncedHandleCheckName(trimmedValue);
+    }
+    if (!isDirty) {
+      clearErrors(name);
+      return;
+    }
+    if (trimmedValue) {
+      clearErrors(name);
+      setError("root.isValidating", {
+        type: "validate",
+        message: "cantSubmitWhileValidating"
+      });
+      debouncedHandleCheckName(trimmedValue);
+    } else {
+      clearErrors("root.isValidating");
+      setError(name, {
+        type: "validate",
+        message: "nameEmpty"
+      });
+    }
+  }, [
+    debouncedHandleCheckName,
+    setError,
+    clearErrors,
+    name,
+    value,
+    isDirty,
+    selectedDirectory
+  ]);
+  const handleManualChange = (e) => {
+    onChange(e.target.value);
+    onManualChangeCallback && onManualChangeCallback();
+  };
+  const translatedLabel = /* @__PURE__ */ jsx(FormattedMessage, { id: label });
+  const translatedError = error && /* @__PURE__ */ jsx(FormattedMessage, { id: error.message });
+  const showOk = (value == null ? void 0 : value.trim()) && !isValidating && !error;
+  const endAdornment = /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
+    isValidating && /* @__PURE__ */ jsx(CircularProgress, { size: "1rem" }),
+    showOk && /* @__PURE__ */ jsx(CheckIcon, { style: { color: "green" } })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      onChange: handleManualChange,
+      onBlur,
+      value,
+      name,
+      inputRef: ref,
+      label: translatedLabel,
+      type: "text",
+      autoFocus,
+      margin: "dense",
+      fullWidth: true,
+      error: !!error,
+      helperText: translatedError,
+      InputProps: { endAdornment },
+      ...formProps
+    }
+  );
+};
+export {
+  UniqueNameInput
+};