@gridsuite/commons-ui 0.213.0 → 0.215.0

package/dist/components/ui/reactHookForm/expandableInput/ExpandableInput.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFieldArray } from "react-hook-form";
+import { Grid } from "@mui/material";
+import { forwardRef, useImperativeHandle } from "react";
+import { DeletableRow } from "./DeletableRow.js";
+import { ErrorInput } from "../errorManagement/ErrorInput.js";
+import { MidFormError } from "../errorManagement/MidFormError.js";
+import { AddButton } from "../../addButton/AddButton.js";
+const ExpandableInput = forwardRef(
+  ({
+    name,
+    Field,
+    // Used to display each object of an array
+    fieldProps,
+    // Props to pass to Field
+    addButtonLabel,
+    initialValue,
+    // Initial value to display when we add a new entry to array
+    getDeletionMark,
+    deleteCallback,
+    alignItems = "stretch",
+    // default value for a flex container
+    watchProps = true,
+    disabled = false,
+    disabledDeletion
+  }, ref) => {
+    const {
+      fields: values,
+      append,
+      remove,
+      replace
+    } = useFieldArray({
+      name
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        replaceItems: (newItems) => replace(newItems),
+        appendItem: (newItem) => append(newItem)
+      }),
+      [append, replace]
+    );
+    return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
+      watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
+        DeletableRow,
+        {
+          alignItems,
+          onClick: () => {
+            const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
+            if (shouldRemove) {
+              remove(idx);
+            }
+          },
+          deletionMark: getDeletionMark?.(idx),
+          disabledDeletion: disabledDeletion?.(idx),
+          children: /* @__PURE__ */ jsx(Field, { name, index: idx, ...fieldProps })
+        },
+        value.id
+      )),
+      addButtonLabel && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
+    ] });
+  }
+);
+export {
+  ExpandableInput
+};

package/dist/components/ui/reactHookForm/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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/.
+ */
+export * from './OverflowableChip';
+export * from './OverflowableChipWithHelperText';
+export * from './chip-items-input';
+export * from './DirectoryItemsInput';
+export * from './RawReadOnlyInput';
+export * from './autocompleteInputs';
+export * from './booleans';
+export * from './errorManagement';
+export * from './numbers';
+export * from './provider';
+export * from './readOnly';
+export * from './selectInputs';
+export * from './tableInputs';
+export * from './text';
+export * from './utils';
+export * from './constants';
+export * from './expandableInput';
+export * from './CountrySelectionInput';
+export * from './CheckboxNullableInput';

package/dist/components/ui/reactHookForm/index.js

@@ -0,0 +1,104 @@
+import { OverflowableChip } from "./OverflowableChip.js";
+import { OverflowableChipWithHelperText } from "./OverflowableChipWithHelperText.js";
+import { ChipItemsInput } from "./chip-items-input.js";
+import { DirectoryItemsInput } from "./DirectoryItemsInput.js";
+import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
+import { AutocompleteInput } from "./autocompleteInputs/AutocompleteInput.js";
+import { MultipleAutocompleteInput } from "./autocompleteInputs/MultipleAutocompleteInput.js";
+import { BooleanInput } from "./booleans/BooleanInput.js";
+import { CheckboxInput } from "./booleans/CheckboxInput.js";
+import { RadioInput } from "./booleans/RadioInput.js";
+import { SwitchInput } from "./booleans/SwitchInput.js";
+import { ErrorInput } from "./errorManagement/ErrorInput.js";
+import { FieldErrorAlert } from "./errorManagement/FieldErrorAlert.js";
+import { MidFormError } from "./errorManagement/MidFormError.js";
+import { FloatInput } from "./numbers/FloatInput.js";
+import { IntegerInput } from "./numbers/IntegerInput.js";
+import { DEFAULT_RANGE_VALUE, RangeInput, RangeType, getRangeInputSchema } from "./numbers/RangeInput.js";
+import { SliderInput } from "./numbers/SliderInput.js";
+import { isFloatNumber, isIntegerNumber } from "./numbers/utils.js";
+import { CustomFormContext, CustomFormProvider } from "./provider/CustomFormProvider.js";
+import { useCustomFormContext } from "./provider/useCustomFormContext.js";
+import { ReadOnlyInput } from "./readOnly/ReadOnlyInput.js";
+import { ButtonReadOnlyInput } from "./readOnly/ButtonReadOnlyInput.js";
+import { CountriesInput } from "./selectInputs/CountriesInput.js";
+import { InputWithPopupConfirmation } from "./selectInputs/InputWithPopupConfirmation.js";
+import { MuiSelectInput } from "./selectInputs/MuiSelectInput.js";
+import { SelectInput } from "./selectInputs/SelectInput.js";
+import { SelectWithConfirmationInput } from "./selectInputs/SelectWithConfirmationInput.js";
+import { EnumInput } from "./selectInputs/EnumInput.js";
+import { TableNumericalInput } from "./tableInputs/table-numerical-input.js";
+import { TableTextInput } from "./tableInputs/table-text-input.js";
+import { DescriptionField } from "./text/DescriptionField.js";
+import { ExpandingTextField } from "./text/ExpandingTextField.js";
+import { TextInput } from "./text/TextInput.js";
+import { UniqueNameInput } from "./text/UniqueNameInput.js";
+import { DescriptionInput } from "./text/DescriptionInput.js";
+import { CancelButton } from "./utils/CancelButton.js";
+import { FieldLabel } from "./utils/FieldLabel.js";
+import { SubmitButton } from "./utils/SubmitButton.js";
+import { TextFieldWithAdornment } from "./utils/TextFieldWithAdornment.js";
+import { genHelperError, gridItem, identity, isFieldRequired, toFloatOrNullValue } from "./utils/functions.js";
+import { HelperPreviousValue } from "./utils/HelperPreviousValue.js";
+import { DESCRIPTION, NAME } from "./constants.js";
+import { ExpandableInput } from "./expandableInput/ExpandableInput.js";
+import { CountrySelectionInput } from "./CountrySelectionInput.js";
+import { CheckboxNullableInput } from "./CheckboxNullableInput.js";
+export {
+  AutocompleteInput,
+  BooleanInput,
+  ButtonReadOnlyInput,
+  CancelButton,
+  CheckboxInput,
+  CheckboxNullableInput,
+  ChipItemsInput,
+  CountriesInput,
+  CountrySelectionInput,
+  CustomFormContext,
+  CustomFormProvider,
+  DEFAULT_RANGE_VALUE,
+  DESCRIPTION,
+  DescriptionField,
+  DescriptionInput,
+  DirectoryItemsInput,
+  EnumInput,
+  ErrorInput,
+  ExpandableInput,
+  ExpandingTextField,
+  FieldErrorAlert,
+  FieldLabel,
+  FloatInput,
+  HelperPreviousValue,
+  InputWithPopupConfirmation,
+  IntegerInput,
+  MidFormError,
+  MuiSelectInput,
+  MultipleAutocompleteInput,
+  NAME,
+  OverflowableChip,
+  OverflowableChipWithHelperText,
+  RadioInput,
+  RangeInput,
+  RangeType,
+  RawReadOnlyInput,
+  ReadOnlyInput,
+  SelectInput,
+  SelectWithConfirmationInput,
+  SliderInput,
+  SubmitButton,
+  SwitchInput,
+  TableNumericalInput,
+  TableTextInput,
+  TextFieldWithAdornment,
+  TextInput,
+  UniqueNameInput,
+  genHelperError,
+  getRangeInputSchema,
+  gridItem,
+  identity,
+  isFieldRequired,
+  isFloatNumber,
+  isIntegerNumber,
+  toFloatOrNullValue,
+  useCustomFormContext
+};

package/dist/components/ui/reactHookForm/selectInputs/InputWithPopupConfirmation.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/popupConfirmationDialog/PopupConfirmationDialog.js";
+function 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?.();
+    onChange(newValue);
+    setOpenPopup(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        name,
+        ...props,
+        onChange: (e, value) => {
+          handleOnChange(e, value?.id ?? value);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopupConfirmationDialog,
+      {
+        message,
+        openConfirmationPopup: openPopup,
+        setOpenConfirmationPopup: setOpenPopup,
+        handlePopupConfirmation,
+        validateButtonLabel
+      }
+    )
+  ] });
+}
+export {
+  InputWithPopupConfirmation
+};

package/dist/components/ui/reactHookForm/selectInputs/SelectWithConfirmationInput.js

@@ -0,0 +1,64 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useController } from "react-hook-form";
+import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
+import { useIntl, FormattedMessage } from "react-intl";
+import { PopupConfirmationDialog } from "../../dialogs/popupConfirmationDialog/PopupConfirmationDialog.js";
+function SelectWithConfirmationInput({
+  name,
+  options,
+  onValidate,
+  getOptionLabel,
+  label
+}) {
+  const intl = useIntl();
+  const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+  const [newValue, setNewValue] = useState("");
+  const {
+    field: { value, onChange }
+  } = useController({
+    name
+  });
+  const handleChange = (event) => {
+    if (value) {
+      setOpenConfirmationDialog(true);
+      setNewValue(event.target.value);
+    } else {
+      onChange(event.target.value);
+    }
+  };
+  const handleValidate = () => {
+    onValidate?.();
+    onChange(newValue);
+    setOpenConfirmationDialog(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+      /* @__PURE__ */ jsx(InputLabel, { size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: value ?? "",
+          size: "small",
+          fullWidth: true,
+          onChange: handleChange,
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: label }),
+          children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: getOptionLabel ? getOptionLabel(option) : intl.formatMessage({ id: option }) }, option))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      PopupConfirmationDialog,
+      {
+        message: "changeTypeConfirmation",
+        openConfirmationPopup: openConfirmationDialog,
+        setOpenConfirmationPopup: setOpenConfirmationDialog,
+        handlePopupConfirmation: handleValidate,
+        validateButtonLabel: "button.changeType"
+      }
+    )
+  ] });
+}
+export {
+  SelectWithConfirmationInput
+};

package/dist/components/ui/reactHookForm/text/DescriptionField.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Button } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import { useFormContext } from "react-hook-form";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import { ExpandingTextField } from "./ExpandingTextField.js";
+import { MAX_CHAR_DESCRIPTION } from "../../../../utils/constants/uiConstants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import "../../../../utils/yupConfig.js";
+import { AddButton } from "../../addButton/AddButton.js";
+function DescriptionField({
+  expandingTextSx,
+  maxCharactersNumber = MAX_CHAR_DESCRIPTION,
+  rows = 3
+}) {
+  const { setValue, getValues } = useFormContext();
+  const description = getValues(FieldConstants.DESCRIPTION);
+  const [isDescriptionFieldVisible, setIsDescriptionFieldVisible] = useState(!!description);
+  const handleOpenDescription = () => {
+    setIsDescriptionFieldVisible(true);
+  };
+  const handleCloseDescription = () => {
+    setIsDescriptionFieldVisible(false);
+    setValue(FieldConstants.DESCRIPTION, "", { shouldDirty: true });
+  };
+  useEffect(() => {
+    if (description) {
+      setIsDescriptionFieldVisible(true);
+    }
+  }, [description]);
+  return !isDescriptionFieldVisible ? /* @__PURE__ */ jsx(AddButton, { onClick: handleOpenDescription, "data-testid": "AddDescriptionButton", label: "AddDescription" }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx(
+      ExpandingTextField,
+      {
+        name: FieldConstants.DESCRIPTION,
+        label: "descriptionProperty",
+        minRows: rows,
+        rows,
+        sx: expandingTextSx,
+        maxCharactersNumber
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        sx: {
+          alignSelf: "flex-end",
+          marginLeft: 1,
+          padding: 1,
+          marginBottom: 2
+        },
+        onClick: handleCloseDescription,
+        children: /* @__PURE__ */ jsx(Delete, {})
+      }
+    )
+  ] });
+}
+export {
+  DescriptionField
+};

package/dist/components/ui/reactHookForm/text/DescriptionInput.js

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Box, IconButton } from "@mui/material";
+import { useController } from "react-hook-form";
+import { useState, useCallback } from "react";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import { EditNoteIcon } from "../../icons/EditNoteIcon.js";
+import "../provider/CustomFormProvider.js";
+import { useCustomFormContext } from "../provider/useCustomFormContext.js";
+import { DescriptionModificationDialog } from "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+const styles = {
+  descriptionTooltip: {
+    display: "inline-block",
+    whiteSpace: "pre",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    maxWidth: "250px",
+    maxHeight: "50px",
+    cursor: "pointer"
+  },
+  coloredButton: (theme) => ({
+    color: theme.palette.text.primary
+  })
+};
+function DescriptionInput({ name }) {
+  const {
+    field: { value }
+  } = useController({ name });
+  const formContext = useCustomFormContext();
+  const [openDescModificationDialog, setOpenDescModificationDialog] = useState(false);
+  const updateModification = useCallback(
+    (descriptionRecord) => {
+      const newDescription = descriptionRecord?.description ?? "";
+      formContext.setValue(name, newDescription, {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+    },
+    [formContext, name]
+  );
+  const handleDescDialogClose = useCallback(() => {
+    setOpenDescModificationDialog(false);
+  }, [setOpenDescModificationDialog]);
+  const handleModifyDescription = useCallback(() => {
+    setOpenDescModificationDialog(true);
+  }, [setOpenDescModificationDialog]);
+  const descriptionLines = value?.split("\n");
+  if (descriptionLines?.length > 3) {
+    descriptionLines[2] = "...";
+  }
+  const tooltipBox = value ? /* @__PURE__ */ jsxs(Box, { sx: styles.descriptionTooltip, children: [
+    " ",
+    descriptionLines?.join("\n"),
+    " "
+  ] }) : void 0;
+  const icon = /* @__PURE__ */ jsx(CustomTooltip, { title: tooltipBox, children: /* @__PURE__ */ jsx(IconButton, { onClick: handleModifyDescription, sx: styles.coloredButton, children: /* @__PURE__ */ jsx(EditNoteIcon, { empty: !value }) }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    openDescModificationDialog && /* @__PURE__ */ jsx(
+      DescriptionModificationDialog,
+      {
+        open: true,
+        description: value ?? "",
+        onClose: handleDescDialogClose,
+        updateForm: updateModification
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          verticalAlign: "middle",
+          cursor: void 0
+        },
+        children: icon
+      }
+    )
+  ] });
+}
+export {
+  DescriptionInput
+};

package/dist/components/ui/reactHookForm/utils/HelperPreviousValue.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { FormHelperText, Stack, Typography } from "@mui/material";
+import { InfoOutlined, WarningAmberRounded } from "@mui/icons-material";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
+function HelperPreviousValue({
+  previousValue,
+  isNodeBuilt,
+  disabledTooltip,
+  adornmentText
+}) {
+  const intl = useIntl();
+  if (!previousValue && previousValue !== 0 || Number.isNaN(previousValue) || previousValue === "NaN") {
+    return void 0;
+  }
+  return /* @__PURE__ */ jsx(FormHelperText, { error: false, sx: { marginLeft: 0 }, children: !disabledTooltip ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(
+      CustomTooltip,
+      {
+        title: intl.formatMessage({ id: isNodeBuilt ? "builtNodeTooltip" : "notBuiltNodeTooltip" }),
+        PopperProps: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -10]
+              }
+            }
+          ]
+        },
+        children: isNodeBuilt ? /* @__PURE__ */ jsx(InfoOutlined, { color: "info", fontSize: "small" }) : /* @__PURE__ */ jsx(WarningAmberRounded, { color: "warning", fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { noWrap: true, fontSize: 11, align: "center", children: previousValue + (adornmentText ? ` ${adornmentText}` : "") })
+  ] }) : previousValue + (adornmentText ? ` ${adornmentText}` : "") });
+}
+export {
+  HelperPreviousValue
+};

package/dist/components/ui/treeViewFinder/TreeViewFinder.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ModalProps } from '@mui/material';
+import { SimpleTreeViewClasses } from '@mui/x-tree-view';
+import { UUID } from 'node:crypto';
+import { ElementType } from '../../../utils';
+export declare const generateTreeViewFinderClass: (className: string) => string;
+export interface TreeViewFinderNodeProps {
+    id: UUID;
+    name: string;
+    type?: ElementType;
+    description?: string;
+    icon?: ReactElement;
+    childrenCount?: number;
+    children?: TreeViewFinderNodeProps[];
+    parents?: TreeViewFinderNodeProps[];
+    specificMetadata?: {
+        equipmentType: string;
+    };
+}
+export interface TreeViewFinderProps {
+    defaultExpanded?: string[];
+    defaultSelected?: string[];
+    selected?: string[];
+    expanded?: string[];
+    multiSelect?: boolean;
+    classes?: Partial<SimpleTreeViewClasses>;
+    className?: string;
+    contentText?: string;
+    open: ModalProps['open'];
+    onClose: (nodes: TreeViewFinderNodeProps[]) => void;
+    validationButtonText?: string;
+    cancelButtonProps?: ButtonProps;
+    title?: string;
+    onlyLeaves?: boolean;
+    data?: TreeViewFinderNodeProps[];
+    onTreeBrowse?: (itemId: string) => void;
+    sortMethod?: (a: TreeViewFinderNodeProps, b: TreeViewFinderNodeProps) => number;
+}
+export declare const TreeViewFinder: import('@emotion/styled').StyledComponent<Readonly<TreeViewFinderProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;