@gridsuite/commons-ui 0.81.0 → 0.82.0

package/dist/components/inputs/reactQueryBuilder/PropertyValueEditor.js

@@ -7,6 +7,8 @@ import { useValid } from "./hooks/useValid.js";
 import { OPERATOR_OPTIONS } from "../../filter/expert/expertFilterConstants.js";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { usePredefinedProperties } from "../../../hooks/usePredefinedProperties.js";
+import { useSelectAppearance } from "../../../hooks/useSelectAppearance.js";
+import { useCustomFilterOptions } from "../../../hooks/useCustomFilterOptions.js";
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
 function PropertyValueEditor(props) {
   const { equipmentType, valueEditorProps } = props;
@@ -45,7 +47,7 @@ function PropertyValueEditor(props) {
     },
     [valueEditorProps]
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, spacing: 1, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, item: true, children: [
     /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
@@ -58,10 +60,11 @@ function PropertyValueEditor(props) {
         onChange: (event, value) => {
           onChange(FieldConstants.PROPERTY_NAME, value);
         },
-        size: "small"
+        size: "small",
+        filterOptions: useCustomFilterOptions()
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 2.5, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", children: /* @__PURE__ */ jsx(
       Select,
       {
         value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
@@ -71,23 +74,32 @@ function PropertyValueEditor(props) {
         onChange: (event, value) => {
           onChange(FieldConstants.PROPERTY_OPERATOR, value);
         },
+        ...useSelectAppearance(PROPERTY_VALUE_OPERATORS.length),
         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(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         value: propertyValues ?? [],
         options: predefinedValues ?? [],
         title: valueEditorProps == null ? void 0 : valueEditorProps.title,
         multiple: true,
-        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            error: !valid,
+            placeholder: (propertyValues == null ? void 0 : propertyValues.length) > 0 ? "" : intl.formatMessage({ id: "valuesList" })
+          }
+        ),
         freeSolo: true,
         autoSelect: true,
         onChange: (event, value) => {
           onChange(FieldConstants.PROPERTY_VALUES, value);
         },
-        size: "small"
+        size: "small",
+        filterOptions: useCustomFilterOptions()
       }
     ) })
   ] });

package/dist/components/inputs/reactQueryBuilder/TextValueEditor.js

@@ -1,12 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { MaterialValueEditor } from "@react-querybuilder/material";
 import { Autocomplete, TextField } from "@mui/material";
+import { useIntl } from "react-intl";
 import { useConvertValue } from "./hooks/useConvertValue.js";
 import { useValid } from "./hooks/useValid.js";
+import { useCustomFilterOptions } from "../../../hooks/useCustomFilterOptions.js";
 function TextValueEditor(props) {
   useConvertValue(props);
   const valid = useValid(props);
   const { value, handleOnChange, title } = props;
+  const customFilterOptions = useCustomFilterOptions();
+  const intl = useIntl();
   if (!Array.isArray(value)) {
     return /* @__PURE__ */ jsx(MaterialValueEditor, { ...props });
   }
@@ -19,9 +23,17 @@ function TextValueEditor(props) {
       onChange: (event, newValue) => handleOnChange(newValue),
       multiple: true,
       fullWidth: true,
-      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: !valid }),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...params,
+          error: !valid,
+          placeholder: (value == null ? void 0 : value.length) > 0 ? "" : intl.formatMessage({ id: "valuesList" })
+        }
+      ),
       size: "small",
-      title
+      title,
+      filterOptions: customFilterOptions
     }
   );
 }

package/dist/components/inputs/reactQueryBuilder/ValueSelector.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { MaterialValueSelector } from "@react-querybuilder/material";
+import { useSelectAppearance } from "../../../hooks/useSelectAppearance.js";
 function ValueSelector(props) {
-  return /* @__PURE__ */ jsx(MaterialValueSelector, { ...props });
+  const { options } = props;
+  return /* @__PURE__ */ jsx(MaterialValueSelector, { ...props, ...useSelectAppearance(options.length), sx: { border: "none" } });
 }
 export {
   ValueSelector

package/dist/components/topBar/MessageBanner.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface MessageBannerProps {
+    children: ReactNode;
+}
+declare function MessageBanner({ children }: MessageBannerProps): false | import("react/jsx-runtime").JSX.Element;
+export default MessageBanner;

package/dist/components/topBar/MessageBanner.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+const styles = {
+  banner: (theme) => ({
+    left: 0,
+    width: "100%",
+    backgroundColor: "#f6b26b",
+    color: "black",
+    padding: theme.spacing(1),
+    textAlign: "left",
+    boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.1)",
+    zIndex: 1e3,
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }),
+  icon: (theme) => ({
+    paddingRight: theme.spacing(0.75),
+    color: "red",
+    marginTop: theme.spacing(0.5)
+  }),
+  message: {
+    flexGrow: 1
+  },
+  button: (theme) => ({
+    backgroundColor: "#f6b26b",
+    border: "none",
+    cursor: "pointer",
+    borderRadius: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+    width: theme.spacing(3.5),
+    height: theme.spacing(3.5),
+    "&:hover": {
+      backgroundColor: "#e39648"
+    },
+    "& svg": {
+      width: "100%",
+      height: "100%"
+    }
+  })
+};
+function MessageBanner({ children }) {
+  const [visible, setVisible] = useState(true);
+  return visible && /* @__PURE__ */ jsxs(Box, { sx: styles.banner, children: [
+    /* @__PURE__ */ jsx(Box, { sx: styles.icon, children: /* @__PURE__ */ jsx(WarningAmberIcon, {}) }),
+    /* @__PURE__ */ jsx(Box, { sx: styles.message, children }),
+    /* @__PURE__ */ jsx(Box, { sx: styles.button, onClick: () => setVisible(false), children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+  ] });
+}
+export {
+  MessageBanner as default
+};

package/dist/components/topBar/TopBar.d.ts

@@ -10,7 +10,6 @@ export type GsLangUser = typeof LANG_ENGLISH | typeof LANG_FRENCH;
 export type GsLang = GsLangUser | typeof LANG_SYSTEM;
 export type GsTheme = typeof LIGHT_THEME | typeof DARK_THEME;
 export type TopBarProps = Omit<GridLogoProps, 'onClick'> & Omit<LogoutProps, 'disabled'> & Omit<AboutDialogProps, 'open' | 'onClose'> & {
-    onParametersClick?: () => void;
     onLogoClick: GridLogoProps['onClick'];
     user?: User;
     onAboutClick?: () => void;
@@ -22,5 +21,7 @@ export type TopBarProps = Omit<GridLogoProps, 'onClick'> & Omit<LogoutProps, 'di
     equipmentLabelling?: boolean;
     onLanguageClick: (value: GsLang) => void;
     language: GsLang;
+    developerMode: boolean;
+    onDeveloperModeClick?: (value: boolean) => void;
 };
-export declare function TopBar({ appName, appColor, appLogo, appVersion, appLicense, logoAboutDialog, onParametersClick, onLogoutClick, onLogoClick, user, children, appsAndUrls, onAboutClick, globalVersionPromise, additionalModulesPromise, onThemeClick, theme, onEquipmentLabellingClick, equipmentLabelling, onLanguageClick, language, }: PropsWithChildren<TopBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TopBar({ appName, appColor, appLogo, appVersion, appLicense, logoAboutDialog, onLogoutClick, onLogoClick, user, children, appsAndUrls, onAboutClick, globalVersionPromise, additionalModulesPromise, onThemeClick, theme, developerMode, onDeveloperModeClick, onEquipmentLabellingClick, equipmentLabelling, onLanguageClick, language, }: PropsWithChildren<TopBarProps>): import("react/jsx-runtime").JSX.Element;