@gridsuite/commons-ui 0.46.0 → 0.47.0

package/dist/components/TreeViewFinder/TreeViewFinder.js

@@ -0,0 +1,288 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { toNestedGlobalSelectors, makeComposeClasses } from "../../utils/styles.js";
+import { styled } from "@mui/system";
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Typography } from "@mui/material";
+import { TreeView, TreeItem } from "@mui/lab";
+import { ChevronRight, ExpandMore, Check } from "@mui/icons-material";
+import CancelButton from "../react-hook-form/utils/cancel-button.js";
+const cssDialogPaper = "dialogPaper";
+const cssLabelRoot = "labelRoot";
+const cssLabelText = "labelText";
+const cssLabelIcon = "labelIcon";
+const cssIcon = "icon";
+const defaultStyles = {
+  [cssDialogPaper]: {
+    minWidth: "50%"
+  },
+  [cssLabelRoot]: {
+    display: "flex",
+    alignContent: "center",
+    alignItems: "center"
+  },
+  [cssLabelText]: {
+    fontWeight: "inherit",
+    flexGrow: 1
+  },
+  [cssLabelIcon]: {
+    display: "flex",
+    alignContent: "center",
+    alignItems: "center",
+    marginRight: "4px"
+  },
+  [cssIcon]: {}
+};
+const generateTreeViewFinderClass = (className) => `GsiTreeViewFinder-${className}`;
+const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
+const TreeViewFinder = (props) => {
+  const intl = useIntl();
+  const {
+    classes,
+    title,
+    contentText,
+    open,
+    data,
+    defaultExpanded,
+    defaultSelected,
+    onClose,
+    onTreeBrowse,
+    validationButtonText,
+    onlyLeaves,
+    multiselect,
+    sortMethod,
+    className,
+    cancelButtonProps
+  } = props;
+  const [mapPrintedNodes, setMapPrintedNodes] = useState({});
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [selected, setSelected] = useState(defaultSelected);
+  const isSelectable = (node) => {
+    return onlyLeaves ? isLeaf(node) : true;
+  };
+  const isLeaf = (node) => {
+    return node && node.children === void 0;
+  };
+  const computeMapPrintedNodes = useCallback((nodes) => {
+    let newMapPrintedNodes = {};
+    nodes.forEach((node) => {
+      newMapPrintedNodes[node.id] = node;
+      if (!isLeaf(node)) {
+        Object.assign(
+          newMapPrintedNodes,
+          computeMapPrintedNodes(node.children)
+        );
+      }
+    });
+    return newMapPrintedNodes;
+  }, []);
+  useEffect(() => {
+    let newMapPrintedNodes = computeMapPrintedNodes(data);
+    console.debug(
+      "data updated, new mapPrintedNodes (nbNodes = ",
+      Object.keys(newMapPrintedNodes).length,
+      ") : ",
+      newMapPrintedNodes
+    );
+    setMapPrintedNodes(newMapPrintedNodes);
+  }, [data, computeMapPrintedNodes]);
+  const computeSelectedNodes = () => {
+    return selected.map((nodeId) => {
+      return mapPrintedNodes[nodeId];
+    });
+  };
+  const handleNodeToggle = (e, nodeIds) => {
+    nodeIds.every((nodeId) => {
+      if (!expanded.includes(nodeId)) {
+        onTreeBrowse && onTreeBrowse(nodeId);
+        return false;
+      }
+      return true;
+    });
+    setExpanded(nodeIds);
+  };
+  const handleNodeSelect = (e, values) => {
+    if (multiselect) {
+      setSelected(
+        values.filter((nodeId) => isSelectable(mapPrintedNodes[nodeId]))
+      );
+    } else {
+      if (selected.includes(values)) {
+        setSelected([]);
+      } else {
+        setSelected(
+          isSelectable(mapPrintedNodes[values]) ? [values] : []
+        );
+      }
+    }
+  };
+  const getValidationButtonText = () => {
+    if (validationButtonText) {
+      return validationButtonText;
+    } else {
+      return intl.formatMessage(
+        { id: "treeview_finder/addElementsValidation" },
+        {
+          nbElements: selected.length
+        }
+      );
+    }
+  };
+  const getNodeIcon = (node) => {
+    if (!node) {
+      return null;
+    }
+    if (isSelectable(node) && selected.find((nodeId) => nodeId === node.id)) {
+      return /* @__PURE__ */ jsx(Check, { className: composeClasses(classes, cssLabelIcon) });
+    } else {
+      if (node.icon) {
+        return /* @__PURE__ */ jsx("div", { className: composeClasses(classes, cssLabelIcon), children: node.icon });
+      } else {
+        return null;
+      }
+    }
+  };
+  const renderTreeItemLabel = (node) => {
+    return /* @__PURE__ */ jsxs("div", { className: composeClasses(classes, cssLabelRoot), children: [
+      getNodeIcon(node),
+      /* @__PURE__ */ jsx(Typography, { className: composeClasses(classes, cssLabelText), children: node.name })
+    ] });
+  };
+  const showChevron = (node) => {
+    return !!(node.childrenCount == null || node.childrenCount && node.childrenCount > 0);
+  };
+  const renderTree = (node) => {
+    if (!node) {
+      return;
+    }
+    return /* @__PURE__ */ jsx(
+      TreeItem,
+      {
+        nodeId: node.id,
+        label: renderTreeItemLabel(node),
+        expandIcon: showChevron(node) ? /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: composeClasses(classes, cssIcon)
+          }
+        ) : null,
+        collapseIcon: showChevron(node) ? /* @__PURE__ */ jsx(
+          ExpandMore,
+          {
+            className: composeClasses(classes, cssIcon)
+          }
+        ) : null,
+        children: Array.isArray(node.children) ? node.children.length ? node.children.sort(sortMethod).map((child) => renderTree(child)) : [false] : null
+      },
+      node.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: (e, r) => {
+        if (r === "escapeKeyDown" || r === "backdropClick") {
+          onClose([]);
+          setSelected([]);
+        }
+      },
+      "aria-labelledby": "TreeViewFindertitle",
+      className,
+      classes: {
+        paper: composeClasses(classes, cssDialogPaper)
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "TreeViewFindertitle", children: title ? title : intl.formatMessage(
+          { id: "treeview_finder/finderTitle" },
+          { multiselect }
+        ) }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(DialogContentText, { children: contentText ? contentText : intl.formatMessage(
+            { id: "treeview_finder/contentText" },
+            { multiselect }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TreeView,
+            {
+              expanded,
+              selected,
+              onNodeToggle: handleNodeToggle,
+              onNodeSelect: handleNodeSelect,
+              multiSelect: multiselect,
+              children: data && Array.isArray(data) ? data.sort(sortMethod).map((child) => renderTree(child)) : null
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(
+            CancelButton,
+            {
+              style: { float: "left", margin: "5px" },
+              onClick: () => {
+                onClose([]);
+                setSelected([]);
+              },
+              ...cancelButtonProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              style: { float: "left", margin: "5px" },
+              onClick: () => {
+                onClose(computeSelectedNodes());
+                setSelected([]);
+              },
+              disabled: selected.length === 0,
+              children: getValidationButtonText()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+TreeViewFinder.propTypes = {
+  // Controlled
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      children: PropTypes.array
+    })
+  ).isRequired,
+  onTreeBrowse: PropTypes.func,
+  //uncontrolled
+  classes: PropTypes.object,
+  title: PropTypes.string,
+  contentText: PropTypes.string,
+  validationButtonText: PropTypes.string,
+  defaultSelected: PropTypes.arrayOf(PropTypes.string),
+  defaultExpanded: PropTypes.arrayOf(PropTypes.string),
+  onlyLeaves: PropTypes.bool,
+  multiselect: PropTypes.bool,
+  sortMethod: PropTypes.func,
+  cancelButtonProps: PropTypes.object
+};
+TreeViewFinder.defaultProps = {
+  defaultSelected: [],
+  defaultExpanded: [],
+  onlyLeaves: true,
+  multiselect: false,
+  sortMethod: void 0,
+  classes: {}
+};
+const nestedGlobalSelectorsStyles = toNestedGlobalSelectors(
+  defaultStyles,
+  generateTreeViewFinderClass
+);
+const TreeViewFinder$1 = styled(TreeViewFinder)(nestedGlobalSelectorsStyles);
+export {
+  TreeViewFinder$1 as default,
+  generateTreeViewFinderClass
+};

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

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Autocomplete, TextField } from "@mui/material";
+import { useFormContext, useController } from "react-hook-form";
+import { isFieldRequired, genHelperPreviousValue, genHelperError, identity } from "./utils/functions.js";
+import FieldLabel from "./utils/field-label.js";
+const AutocompleteInput = ({
+  name,
+  label,
+  options,
+  outputTransform = identity,
+  //transform materialUi input value before sending it to react hook form, mostly used to deal with select fields that need to return a string
+  inputTransform = identity,
+  //transform react hook form value before sending it to materialUi input, mostly used to deal with select fields that need to return a string
+  readOnly = false,
+  previousValue,
+  allowNewValue,
+  onChangeCallback,
+  // method called when input value is changing
+  formProps,
+  ...props
+}) => {
+  const { validationSchema, getValues, removeOptional } = useFormContext();
+  const {
+    field: { onChange, value, ref },
+    fieldState: { error }
+  } = useController({ name });
+  const handleChange = (value2) => {
+    onChangeCallback && onChangeCallback();
+    if (!allowNewValue || typeof value2 !== "string") {
+      onChange(outputTransform(value2));
+      return;
+    }
+    const matchingOption = options.find((option) => option.id === value2);
+    if (matchingOption) {
+      onChange(outputTransform(matchingOption));
+      return;
+    }
+    onChange(outputTransform(value2));
+  };
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      value: inputTransform(value),
+      onChange: (_, data) => handleChange(data),
+      ...allowNewValue && {
+        freeSolo: true,
+        autoComplete: true,
+        blurOnSelect: true,
+        autoSelect: false,
+        onInputChange: (_, data) => {
+          handleChange(data);
+        }
+      },
+      options,
+      renderInput: ({ inputProps, ...rest }) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...label && {
+            label: FieldLabel({
+              label,
+              optional: !isFieldRequired(
+                name,
+                validationSchema,
+                getValues()
+              ) && !(props == null ? void 0 : props.disabled) && !removeOptional
+            })
+          },
+          inputRef: ref,
+          inputProps: { ...inputProps, readOnly },
+          ...genHelperPreviousValue(previousValue),
+          ...genHelperError(error == null ? void 0 : error.message),
+          ...formProps,
+          ...rest
+        }
+      ),
+      ...props
+    }
+  );
+};
+AutocompleteInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  options: PropTypes.array.isRequired,
+  outputTransform: PropTypes.func,
+  inputTransform: PropTypes.func,
+  readOnly: PropTypes.bool,
+  previousValue: PropTypes.any,
+  allowNewValue: PropTypes.bool,
+  onChangeCallback: PropTypes.func,
+  formProps: PropTypes.object
+};
+export {
+  AutocompleteInput as default
+};

package/dist/components/react-hook-form/booleans/boolean-input.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { FormControlLabel } from "@mui/material";
+import { useController } from "react-hook-form";
+const BooleanInput = ({ name, label, formProps, Input }) => {
+  const {
+    field: { onChange, value, ref }
+  } = useController({ name });
+  const intl = useIntl();
+  const handleChangeValue = useCallback(
+    (event) => {
+      onChange(event.target.checked);
+    },
+    [onChange]
+  );
+  const CustomInput = /* @__PURE__ */ jsx(
+    Input,
+    {
+      checked: value,
+      onChange: (e) => handleChangeValue(e),
+      inputRef: ref,
+      inputProps: {
+        "aria-label": "primary checkbox"
+      },
+      ...formProps
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: CustomInput,
+        label: intl.formatMessage({ id: label })
+      }
+    );
+  }
+  return CustomInput;
+};
+BooleanInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  formProps: PropTypes.object,
+  Input: PropTypes.elementType.isRequired
+};
+export {
+  BooleanInput as default
+};

package/dist/components/react-hook-form/booleans/checkbox-input.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import BooleanInput from "./boolean-input.js";
+import { Checkbox } from "@mui/material";
+const CheckboxInput = ({ name, label, formProps }) => {
+  return /* @__PURE__ */ jsx(
+    BooleanInput,
+    {
+      name,
+      label,
+      formProps,
+      Input: Checkbox
+    }
+  );
+};
+CheckboxInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  formProps: PropTypes.object
+};
+export {
+  CheckboxInput as default
+};

package/dist/components/react-hook-form/booleans/switch-input.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import BooleanInput from "./boolean-input.js";
+import { Switch } from "@mui/material";
+const SwitchInput = ({ name, label, formProps }) => {
+  return /* @__PURE__ */ jsx(
+    BooleanInput,
+    {
+      name,
+      label,
+      formProps,
+      Input: Switch
+    }
+  );
+};
+SwitchInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  formProps: PropTypes.object
+};
+export {
+  SwitchInput as default
+};

package/dist/components/react-hook-form/error-management/error-input.js

@@ -0,0 +1,42 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { FormattedMessage } from "react-intl";
+import { useController } from "react-hook-form";
+const ErrorInput = ({ name, InputField }) => {
+  const {
+    fieldState: { error },
+    formState: { isSubmitting }
+  } = useController({
+    name
+  });
+  const errorRef = useRef(null);
+  const errorProps = (errorMsg) => {
+    if (typeof errorMsg === "string") {
+      return {
+        id: errorMsg
+      };
+    } else if (typeof errorMsg === "object") {
+      return {
+        id: errorMsg.id,
+        values: {
+          value: errorMsg.value
+        }
+      };
+    }
+    return {};
+  };
+  useEffect(() => {
+    if (error && errorRef.current) {
+      errorRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [isSubmitting]);
+  return /* @__PURE__ */ jsx(Fragment, { children: (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx("div", { ref: errorRef, children: /* @__PURE__ */ jsx(
+    InputField,
+    {
+      message: /* @__PURE__ */ jsx(FormattedMessage, { ...errorProps(error == null ? void 0 : error.message) })
+    }
+  ) }) });
+};
+export {
+  ErrorInput as default
+};

package/dist/components/react-hook-form/error-management/field-error-alert.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Grid, Alert } from "@mui/material";
+const FieldErrorAlert = ({ message }) => {
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: message }) });
+};
+export {
+  FieldErrorAlert as default
+};

package/dist/components/react-hook-form/error-management/mid-form-error.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "@mui/material";
+const MidFormError = ({ message }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: (theme) => ({
+        color: theme.palette.error.main,
+        fontSize: "small",
+        marginLeft: theme.spacing(2),
+        marginRight: theme.spacing(2)
+      }),
+      children: message
+    }
+  );
+};
+export {
+  MidFormError as default
+};

package/dist/components/react-hook-form/numbers/float-input.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import TextInput from "../text-input.js";
+import { isFloatNumber } from "./utils.js";
+const normalizeFixed = (number) => {
+  return number.toLocaleString("en-US", {
+    maximumFractionDigits: 20,
+    useGrouping: false
+  });
+};
+const FloatInput = (props) => {
+  const inputTransform = (value) => {
+    if (typeof value == "number" && !isNaN(value)) {
+      return normalizeFixed(value);
+    } else {
+      if (["-", "."].includes(value)) {
+        return value;
+      }
+      return value === null || isNaN(value) ? "" : value;
+    }
+  };
+  const outputTransform = (value) => {
+    if (value === "-") {
+      return value;
+    }
+    if (value === "") {
+      return null;
+    }
+    const tmp = (value == null ? void 0 : value.replace(",", ".")) || "";
+    if (tmp.endsWith(".") || tmp.includes(".") && tmp.endsWith("0")) {
+      return tmp;
+    }
+    const parsed = parseFloat(tmp);
+    return isNaN(parsed) ? null : normalizeFixed(parsed);
+  };
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      acceptValue: isFloatNumber,
+      outputTransform,
+      inputTransform,
+      ...props
+    }
+  );
+};
+FloatInput.propTypes = {
+  ...TextInput.propTypes
+};
+export {
+  FloatInput as default
+};

package/dist/components/react-hook-form/numbers/integer-input.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import TextInput from "../text-input.js";
+import { isIntegerNumber } from "./utils.js";
+const IntegerInput = (props) => {
+  const inputTransform = (value) => {
+    if ("-" === value) {
+      return value;
+    }
+    return value === null || isNaN(value) ? "" : value.toString();
+  };
+  const outputTransform = (value) => {
+    if (value === "-") {
+      return value;
+    }
+    if (value === "0") {
+      return 0;
+    }
+    return parseInt(value) || null;
+  };
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      acceptValue: isIntegerNumber,
+      outputTransform,
+      inputTransform,
+      ...props
+    }
+  );
+};
+IntegerInput.propTypes = {
+  ...TextInput.propTypes
+};
+export {
+  IntegerInput as default
+};

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

@@ -0,0 +1,10 @@
+const isIntegerNumber = (val) => {
+  return /^-?[0-9]*$/.test(val);
+};
+const isFloatNumber = (val) => {
+  return /^-?[0-9]*[.,]?[0-9]*$/.test(val);
+};
+export {
+  isFloatNumber,
+  isIntegerNumber
+};

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

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+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 {
+    field: { onChange, value }
+  } = useController({ name });
+  return /* @__PURE__ */ jsxs(FormControl, { children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { id: id ?? label, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        row: true,
+        "aria-labelledby": id ?? label,
+        value,
+        onChange,
+        ...formProps,
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(Radio, {}),
+            value: option.id,
+            label: /* @__PURE__ */ jsx(FieldLabel, { label: option.label })
+          },
+          option.id
+        ))
+      }
+    )
+  ] });
+};
+RadioInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  id: PropTypes.string,
+  options: PropTypes.array.isRequired,
+  formProps: PropTypes.object
+};
+export {
+  RadioInput as default
+};