@gridsuite/commons-ui 0.56.0 → 0.58.0

package/dist/components/ElementSearchDialog/element-search-dialog.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
+import { useMemo, useCallback } from "react";
 import { Dialog, DialogContent, Autocomplete, TextField } from "@mui/material";
-import PropTypes from "prop-types";
 import { SearchOff, Search } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 const ElementSearchDialog = (props) => {
@@ -10,48 +9,23 @@ const ElementSearchDialog = (props) => {
     open,
     onClose,
     searchingLabel,
+    searchTerm,
     onSearchTermChange,
     onSelectionChange,
     elementsFound,
-    // [{ label: aLabel, id: anId }, ...]
     renderElement,
     searchTermDisabled,
-    searchTermDisableReason
+    searchTermDisableReason,
+    isLoading,
+    loadingText
   } = props;
-  const [expanded, setExpanded] = useState(false);
-  const [value, setValue] = useState(
-    searchTermDisabled && searchTermDisableReason ? { label: searchTermDisableReason } : null
-  );
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    setLoading(false);
-  }, [elementsFound]);
-  useEffect(() => {
-    if (!searchTermDisabled || !searchTermDisableReason) {
-      setValue(null);
-    } else {
-      setValue({ label: searchTermDisableReason });
-    }
-  }, [searchTermDisabled, searchTermDisableReason]);
-  useEffect(() => {
-    setValue((old) => !open ? null : old);
-  }, [open]);
-  const handleSearchTermChange = (term) => {
-    if (term) {
-      setLoading(true);
-      onSearchTermChange(term);
-      setExpanded(true);
-      setValue({ label: term });
-    } else {
-      setExpanded(false);
-      setValue(null);
-    }
-  };
+  const displayedValue = useMemo(() => {
+    return searchTermDisabled || searchTermDisableReason ? searchTermDisableReason : searchTerm;
+  }, [searchTerm, searchTermDisabled, searchTermDisableReason]);
   const handleClose = useCallback(() => {
-    setValue(null);
-    setExpanded(false);
+    onSearchTermChange("");
     onClose();
-  }, [onClose]);
+  }, [onSearchTermChange, onClose]);
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -63,32 +37,32 @@ const ElementSearchDialog = (props) => {
       children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
         Autocomplete,
         {
+          open: isLoading || (elementsFound == null ? void 0 : elementsFound.length) > 0,
           id: "element-search",
           forcePopupIcon: false,
-          open: expanded,
-          onClose: () => {
-            setExpanded(false);
-          },
           fullWidth: true,
           freeSolo: true,
-          clearOnBlur: true,
-          onInputChange: (_event, value2) => {
-            if (!searchTermDisabled) {
-              handleSearchTermChange(value2);
+          onInputChange: (_event, value, reason) => {
+            if (!searchTermDisabled && reason !== "reset") {
+              onSearchTermChange(value);
             }
           },
           onChange: (_event, newValue, reason) => {
-            if (reason === "selectOption") {
+            if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
               onSelectionChange(newValue);
-              setValue(newValue);
+            }
+          },
+          getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+          isOptionEqualToValue: (option, value) => {
+            if (typeof option === "string" || typeof value === "string") {
+              return option === value;
             } else {
-              setValue(null);
+              return option.id === value.id;
             }
           },
-          getOptionLabel: (option) => option.label,
-          isOptionEqualToValue: (option, value2) => option.id === value2.id,
-          options: loading ? [] : elementsFound,
-          loading,
+          options: isLoading ? [] : elementsFound,
+          loading: isLoading,
+          loadingText,
           autoHighlight: true,
           noOptionsText: intl.formatMessage({
             id: "element_search/noResult"
@@ -104,7 +78,7 @@ const ElementSearchDialog = (props) => {
             {
               autoFocus: true,
               ...params,
-              label: searchingLabel || intl.formatMessage({
+              label: searchingLabel ?? intl.formatMessage({
                 id: "element_search/label"
               }),
               InputProps: {
@@ -113,27 +87,16 @@ const ElementSearchDialog = (props) => {
                   searchTermDisabled ? /* @__PURE__ */ jsx(SearchOff, { color: "disabled" }) : /* @__PURE__ */ jsx(Search, { color: "disabled" }),
                   params.InputProps.startAdornment
                 ] })
-              }
+              },
+              value: displayedValue ?? ""
             }
           ),
-          value,
           disabled: searchTermDisabled
         }
       ) })
     }
   );
 };
-ElementSearchDialog.propTypes = {
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  searchingLabel: PropTypes.string,
-  onSearchTermChange: PropTypes.func.isRequired,
-  onSelectionChange: PropTypes.func.isRequired,
-  elementsFound: PropTypes.array.isRequired,
-  renderElement: PropTypes.func.isRequired,
-  searchTermDisabled: PropTypes.bool,
-  searchTermDisableReason: PropTypes.string
-};
 export {
   ElementSearchDialog as default
 };

package/dist/components/ElementSearchDialog/equipment-item.js

@@ -1,13 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "./element-search-dialog.js";
+import "react";
+import { Box } from "@mui/material";
+import "@mui/icons-material";
+import { FormattedMessage } from "react-intl";
 import { TagRenderer } from "./tag-renderer.js";
 import match from "autosuggest-highlight/match";
 import parse from "autosuggest-highlight/parse";
 import clsx from "clsx";
-import { FormattedMessage } from "react-intl";
 import { OverflowableText } from "../OverflowableText/overflowable-text.js";
 import { EQUIPMENT_TYPE } from "../../utils/EquipmentType.js";
-import { Box } from "@mui/material";
 import { mergeSx } from "../../utils/styles.js";
 const EquipmentItem = ({
   inputValue,

package/dist/components/OverflowableText/overflowable-text.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useCallback, useLayoutEffect } from "react";
+import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
 import { Tooltip, Box } from "@mui/material";
 import PropTypes from "prop-types";
 import { styled } from "@mui/system";
@@ -16,26 +16,56 @@ const overflowStyle = {
     maxWidth: "fit-content"
   }
 };
+const multilineOverflowStyle = (numberOfLinesToDisplay) => ({
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: numberOfLinesToDisplay,
+  lineClamp: numberOfLinesToDisplay,
+  WebkitBoxOrient: "vertical",
+  wordWrap: "break-word"
+  // prevent bug when writing a very long word
+});
 const OverflowableText = styled(
-  ({ text, tooltipStyle, tooltipSx, className, children, ...props }) => {
-    var _a, _b;
+  ({
+    text,
+    maxLineCount,
+    // overflowable text can be displayed on several lines if this is set to a number > 1
+    tooltipStyle,
+    tooltipSx,
+    className,
+    children,
+    ...props
+  }) => {
+    var _a, _b, _c, _d;
     const element = useRef();
+    const isMultiLine = useMemo(
+      () => maxLineCount && maxLineCount > 1,
+      [maxLineCount]
+    );
     const [overflowed, setOverflowed] = useState(false);
     const checkOverflow = useCallback(() => {
       if (!element.current) {
         return;
       }
-      setOverflowed(
-        element.current.scrollWidth > element.current.clientWidth
-      );
-    }, [setOverflowed, element]);
+      if (isMultiLine) {
+        setOverflowed(
+          element.current.scrollHeight > element.current.clientHeight
+        );
+      } else {
+        setOverflowed(
+          element.current.scrollWidth > element.current.clientWidth
+        );
+      }
+    }, [isMultiLine, setOverflowed, element]);
     useLayoutEffect(() => {
       checkOverflow();
     }, [
       checkOverflow,
       text,
       (_a = element.current) == null ? void 0 : _a.scrollWidth,
-      (_b = element.current) == null ? void 0 : _b.clientWidth
+      (_b = element.current) == null ? void 0 : _b.clientWidth,
+      (_c = element.current) == null ? void 0 : _c.scrollHeight,
+      (_d = element.current) == null ? void 0 : _d.clientHeight
     ]);
     const defaultTooltipSx = !tooltipStyle ? overflowStyle.tooltip : false;
     const finalTooltipSx = tooltipSx || defaultTooltipSx;
@@ -58,7 +88,7 @@ const OverflowableText = styled(
             ref: element,
             children: children || text,
             className,
-            sx: overflowStyle.overflow
+            sx: isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow
           }
         )
       }