@gridsuite/commons-ui 0.59.1 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/chunks/{criteria-based-filter-edition-dialog.DcXcQOoT.js → criteria-based-filter-edition-dialog.g-QT74FD.js} +57 -22
  2. package/dist/components/ElementSearchDialog/element-search-dialog.d.ts +4 -15
  3. package/dist/components/ElementSearchDialog/element-search-dialog.js +10 -80
  4. package/dist/components/ElementSearchDialog/element-search-input.d.ts +21 -0
  5. package/dist/components/ElementSearchDialog/element-search-input.js +85 -0
  6. package/dist/components/ElementSearchDialog/equipment-item.d.ts +8 -8
  7. package/dist/components/ElementSearchDialog/equipment-item.js +1 -1
  8. package/dist/components/ElementSearchDialog/index.d.ts +2 -0
  9. package/dist/components/ElementSearchDialog/index.js +6 -2
  10. package/dist/components/ElementSearchDialog/tag-renderer.d.ts +3 -3
  11. package/dist/components/ElementSearchDialog/use-element-search.d.ts +16 -0
  12. package/dist/components/ElementSearchDialog/use-element-search.js +57 -0
  13. package/dist/components/MuiVirtualizedTable/MuiVirtualizedTable.d.ts +1 -1
  14. package/dist/components/OverflowableText/overflowable-text.d.ts +3 -3
  15. package/dist/components/OverflowableText/overflowable-text.js +1 -2
  16. package/dist/components/dialogs/modify-element-selection.js +1 -1
  17. package/dist/components/filter/criteria-based/criteria-based-filter-edition-dialog.js +1 -1
  18. package/dist/components/filter/expert/expert-filter-constants.d.ts +129 -2
  19. package/dist/components/filter/expert/expert-filter-constants.js +165 -4
  20. package/dist/components/filter/expert/expert-filter-edition-dialog.js +1 -1
  21. package/dist/components/filter/expert/expert-filter-form.js +1 -1
  22. package/dist/components/filter/expert/expert-filter-utils.d.ts +3 -7
  23. package/dist/components/filter/expert/expert-filter-utils.js +127 -26
  24. package/dist/components/filter/expert/expert-filter.type.d.ts +42 -7
  25. package/dist/components/filter/expert/expert-filter.type.js +16 -0
  26. package/dist/components/filter/explicit-naming/explicit-naming-filter-edition-dialog.js +1 -1
  27. package/dist/components/filter/explicit-naming/explicit-naming-filter-form.js +1 -1
  28. package/dist/components/filter/filter-creation-dialog.js +1 -1
  29. package/dist/components/filter/filter-form.js +1 -1
  30. package/dist/components/filter/utils/filter-form-utils.js +1 -1
  31. package/dist/components/inputs/react-hook-form/ag-grid-table/bottom-right-buttons.js +1 -1
  32. package/dist/components/inputs/react-hook-form/ag-grid-table/csv-uploader/csv-uploader.js +2 -1
  33. package/dist/components/inputs/react-hook-form/ag-grid-table/custom-ag-grid-table.js +1 -1
  34. package/dist/components/inputs/react-hook-form/directory-items-input.js +1 -1
  35. package/dist/components/inputs/react-hook-form/error-management/error-input.js +10 -8
  36. package/dist/components/inputs/react-query-builder/composite-rule-editor/group-value-editor.d.ts +5 -0
  37. package/dist/components/inputs/react-query-builder/composite-rule-editor/group-value-editor.js +62 -0
  38. package/dist/components/inputs/react-query-builder/composite-rule-editor/rule-value-editor.d.ts +9 -0
  39. package/dist/components/inputs/react-query-builder/composite-rule-editor/rule-value-editor.js +65 -0
  40. package/dist/components/inputs/react-query-builder/custom-react-query-builder.js +1 -1
  41. package/dist/components/inputs/react-query-builder/element-value-editor.js +2 -1
  42. package/dist/components/inputs/react-query-builder/remove-button.js +1 -1
  43. package/dist/components/inputs/react-query-builder/value-editor.js +3 -1
  44. package/dist/components/translations/filter-expert-en.d.ts +23 -0
  45. package/dist/components/translations/filter-expert-en.js +24 -1
  46. package/dist/components/translations/filter-expert-fr.d.ts +23 -0
  47. package/dist/components/translations/filter-expert-fr.js +25 -2
  48. package/dist/index.d.ts +2 -2
  49. package/dist/index.js +131 -127
  50. package/dist/utils/styles.d.ts +2 -2
  51. package/dist/utils/types.d.ts +3 -0
  52. package/package.json +1 -1
@@ -56,8 +56,8 @@ import "../components/CustomAGGrid/custom-aggrid.js";
56
56
  import { saveExplicitNamingFilter, saveCriteriaBasedFilter, saveExpertFilter } from "../components/filter/utils/filter-api.js";
57
57
  import { formatQuery, QueryBuilder } from "react-querybuilder";
58
58
  import { getNumberOfSiblings, recursiveRemove, countRules, getOperators, queryValidator, testQuery, importExpertRules } from "../components/filter/expert/expert-filter-utils.js";
59
- import { COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, OPERATOR_OPTIONS, fields } from "../components/filter/expert/expert-filter-constants.js";
60
- import { FieldType, OperatorType, DataType } from "../components/filter/expert/expert-filter.type.js";
59
+ import { OPERATOR_OPTIONS, COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, fields } from "../components/filter/expert/expert-filter-constants.js";
60
+ import { FieldType, DataType } from "../components/filter/expert/expert-filter.type.js";
61
61
  import { QueryBuilderDnD } from "@react-querybuilder/dnd";
62
62
  import * as ReactDnD from "react-dnd";
63
63
  import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
@@ -81,12 +81,14 @@ import "../components/inputs/react-hook-form/select-inputs/mui-select-input.js";
81
81
  import "localized-countries";
82
82
  import "localized-countries/data/fr";
83
83
  import "localized-countries/data/en";
84
+ import { RECORD_SEP, UNIT_SEP } from "papaparse";
84
85
  import "@mui/icons-material/Check";
85
86
  import "@mui/material/CircularProgress";
86
87
  import "@mui/material/TextField";
87
88
  import { FILTER_EQUIPMENTS } from "../components/filter/utils/filter-form-utils.js";
88
89
  import { ElementType } from "../utils/ElementType.js";
89
90
  import PropertyValueEditor from "../components/inputs/react-query-builder/property-value-editor.js";
91
+ import GroupValueEditor from "../components/inputs/react-query-builder/composite-rule-editor/group-value-editor.js";
90
92
  import ValueSelector from "../components/inputs/react-query-builder/value-selector.js";
91
93
  import ErrorInput from "../components/inputs/react-hook-form/error-management/error-input.js";
92
94
  import FieldErrorAlert from "../components/inputs/react-hook-form/error-management/field-error-alert.js";
@@ -248,6 +250,16 @@ const CsvUploader = ({
248
250
  setImportedData([...results.data]);
249
251
  setCreateError("");
250
252
  },
253
+ config: {
254
+ // We use | for multi values in one cell, then we remove it from the default value for this config, to avoid delimiter autodetection
255
+ delimitersToGuess: [
256
+ ",",
257
+ " ",
258
+ ";",
259
+ RECORD_SEP,
260
+ UNIT_SEP
261
+ ]
262
+ },
251
263
  children: ({ getRootProps, acceptedFile }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { item: true, children: [
252
264
  /* @__PURE__ */ jsx(
253
265
  Button,
@@ -469,6 +481,7 @@ const CustomAgGridTable = ({
469
481
  const [gridApi, setGridApi] = useState(null);
470
482
  const [selectedRows, setSelectedRows] = useState([]);
471
483
  const [newRowAdded, setNewRowAdded] = useState(false);
484
+ const [isSortApplied, setIsSortApplied] = useState(false);
472
485
  const { control, getValues, watch } = useFormContext();
473
486
  const useFieldArrayOutput = useFieldArray({
474
487
  control,
@@ -476,10 +489,14 @@ const CustomAgGridTable = ({
476
489
  });
477
490
  const { append, remove, update, swap, move } = useFieldArrayOutput;
478
491
  const rowData = watch(name);
479
- const isFirstSelected = (rowData == null ? void 0 : rowData.length) && ((_a = gridApi == null ? void 0 : gridApi.api.getRowNode(rowData[0][FieldConstants.AG_GRID_ROW_UUID])) == null ? void 0 : _a.isSelected());
480
- const isLastSelected = (rowData == null ? void 0 : rowData.length) && ((_b = gridApi == null ? void 0 : gridApi.api.getRowNode(
481
- rowData[rowData.length - 1][FieldConstants.AG_GRID_ROW_UUID]
482
- )) == null ? void 0 : _b.isSelected());
492
+ const isFirstSelected = Boolean(
493
+ (rowData == null ? void 0 : rowData.length) && ((_a = gridApi == null ? void 0 : gridApi.api.getRowNode(rowData[0][FieldConstants.AG_GRID_ROW_UUID])) == null ? void 0 : _a.isSelected())
494
+ );
495
+ const isLastSelected = Boolean(
496
+ (rowData == null ? void 0 : rowData.length) && ((_b = gridApi == null ? void 0 : gridApi.api.getRowNode(
497
+ rowData[rowData.length - 1][FieldConstants.AG_GRID_ROW_UUID]
498
+ )) == null ? void 0 : _b.isSelected())
499
+ );
483
500
  const noRowSelected = selectedRows.length === 0;
484
501
  const handleMoveRowUp = () => {
485
502
  selectedRows.map((row) => getIndex(row)).sort().forEach((idx) => {
@@ -512,11 +529,14 @@ const CustomAgGridTable = ({
512
529
  append(makeDefaultRowData2());
513
530
  setNewRowAdded(true);
514
531
  };
515
- const getIndex = (val) => {
516
- return getValues(name).findIndex(
517
- (row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
518
- );
519
- };
532
+ const getIndex = useCallback(
533
+ (val) => {
534
+ return getValues(name).findIndex(
535
+ (row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
536
+ );
537
+ },
538
+ [getValues, name]
539
+ );
520
540
  useEffect(() => {
521
541
  if (gridApi) {
522
542
  gridApi.api.sizeColumnsToFit();
@@ -541,18 +561,32 @@ const CustomAgGridTable = ({
541
561
  gridApi.api.ensureIndexVisible(lastIndex, "bottom");
542
562
  }
543
563
  };
564
+ const onCellEditingStopped = useCallback(
565
+ (event) => {
566
+ const rowIndex = getIndex(event.data);
567
+ if (rowIndex === -1) {
568
+ return;
569
+ }
570
+ update(rowIndex, event.data);
571
+ },
572
+ [getIndex, update]
573
+ );
574
+ const onSortChanged = useCallback((event) => {
575
+ const isAnycolumnhasSort = event.api.getColumnState().some((col) => col.sort);
576
+ setIsSortApplied(isAnycolumnhasSort);
577
+ }, []);
544
578
  return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
545
579
  /* @__PURE__ */ jsx(
546
580
  Grid$1,
547
581
  {
548
582
  item: true,
549
583
  xs: 12,
550
- className: theme.aggrid,
584
+ className: theme.aggrid.theme,
551
585
  sx: style(cssProps).grid,
552
586
  children: /* @__PURE__ */ jsx(
553
587
  AgGridReact,
554
588
  {
555
- rowData: gridApi && (rowData == null ? void 0 : rowData.length) ? rowData : null,
589
+ rowData,
556
590
  onGridReady,
557
591
  getLocaleText,
558
592
  cacheOverflowSize: 10,
@@ -568,9 +602,8 @@ const CustomAgGridTable = ({
568
602
  setSelectedRows(gridApi.api.getSelectedRows());
569
603
  },
570
604
  onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
571
- onCellEditingStopped: (event) => {
572
- update(event.rowIndex, event.data);
573
- },
605
+ onCellEditingStopped,
606
+ onSortChanged,
574
607
  getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
575
608
  pagination,
576
609
  paginationPageSize,
@@ -590,8 +623,8 @@ const CustomAgGridTable = ({
590
623
  handleDeleteRows,
591
624
  handleMoveRowDown,
592
625
  handleMoveRowUp,
593
- disableUp: noRowSelected || isFirstSelected,
594
- disableDown: noRowSelected || isLastSelected,
626
+ disableUp: noRowSelected || isFirstSelected || isSortApplied,
627
+ disableDown: noRowSelected || isLastSelected || isSortApplied,
595
628
  disableDelete: noRowSelected,
596
629
  csvProps,
597
630
  useFieldArrayOutput
@@ -886,7 +919,7 @@ const ValueEditor = (props) => {
886
919
  },
887
920
  [props.field, getValues]
888
921
  );
889
- if (props.operator === OperatorType.EXISTS || props.operator === OperatorType.NOT_EXISTS) {
922
+ if (props.operator === OPERATOR_OPTIONS.EXISTS.name || props.operator === OPERATOR_OPTIONS.NOT_EXISTS.name) {
890
923
  return null;
891
924
  }
892
925
  if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(
@@ -894,10 +927,10 @@ const ValueEditor = (props) => {
894
927
  )) {
895
928
  return /* @__PURE__ */ jsx(CountryValueEditor, { ...props });
896
929
  }
897
- if (props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
930
+ if (props.field === FieldType.REGULATION_TYPE || props.field === FieldType.SVAR_REGULATION_MODE || props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
898
931
  return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
899
932
  }
900
- if (props.operator === OperatorType.IS_PART_OF || props.operator === OperatorType.IS_NOT_PART_OF) {
933
+ if (props.operator === OPERATOR_OPTIONS.IS_PART_OF.name || props.operator === OPERATOR_OPTIONS.IS_NOT_PART_OF.name) {
901
934
  let equipmentTypes;
902
935
  if (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
903
936
  equipmentTypes = [VoltageLevel.type];
@@ -919,7 +952,7 @@ const ValueEditor = (props) => {
919
952
  defaultValue: props.value
920
953
  }
921
954
  );
922
- } else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
955
+ } else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.REGULATING_TERMINAL_VL_ID || props.field === FieldType.REGULATING_TERMINAL_CONNECTABLE_ID || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
923
956
  return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
924
957
  } else if (props.field === FieldType.PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_1 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_2) {
925
958
  let equipmentType;
@@ -937,6 +970,8 @@ const ValueEditor = (props) => {
937
970
  valueEditorProps: props
938
971
  }
939
972
  );
973
+ } else if (props.fieldData.dataType === DataType.COMBINATOR) {
974
+ return /* @__PURE__ */ jsx(GroupValueEditor, { ...props });
940
975
  }
941
976
  return /* @__PURE__ */ jsx(Box, { sx: props.inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(
942
977
  MaterialValueEditor,
@@ -1,19 +1,8 @@
1
- import { EquipmentInfos } from '../../index';
2
- import { ReactNode } from 'react';
1
+ import { ElementSearchInputProps } from './element-search-input';
3
2
 
4
- interface ElementSearchDialogProps {
3
+ export interface ElementSearchDialogProps<T> extends ElementSearchInputProps<T> {
4
+ onClose?: () => void;
5
5
  open: boolean;
6
- onClose: () => void;
7
- searchingLabel?: string;
8
- searchTerm: string;
9
- onSearchTermChange: (searchTerm: string) => void;
10
- onSelectionChange: (selection: EquipmentInfos) => void;
11
- elementsFound: EquipmentInfos[];
12
- renderElement: (props: any) => ReactNode;
13
- searchTermDisabled?: boolean;
14
- searchTermDisableReason?: string;
15
- isLoading: boolean;
16
- loadingText?: string;
17
6
  }
18
- declare const ElementSearchDialog: (props: ElementSearchDialogProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const ElementSearchDialog: <T>(props: ElementSearchDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
19
8
  export default ElementSearchDialog;
@@ -1,30 +1,12 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useMemo, useCallback } from "react";
3
- import { Dialog, DialogContent, Autocomplete, TextField } from "@mui/material";
4
- import { SearchOff, Search } from "@mui/icons-material";
5
- import { useIntl } from "react-intl";
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import { Dialog, DialogContent } from "@mui/material";
4
+ import { ElementSearchInput } from "./element-search-input.js";
6
5
  const ElementSearchDialog = (props) => {
7
- const intl = useIntl();
8
- const {
9
- open,
10
- onClose,
11
- searchingLabel,
12
- searchTerm,
13
- onSearchTermChange,
14
- onSelectionChange,
15
- elementsFound,
16
- renderElement,
17
- searchTermDisabled,
18
- searchTermDisableReason,
19
- isLoading,
20
- loadingText
21
- } = props;
22
- const displayedValue = useMemo(() => {
23
- return searchTermDisabled || searchTermDisableReason ? searchTermDisableReason : searchTerm;
24
- }, [searchTerm, searchTermDisabled, searchTermDisableReason]);
6
+ const { open, onClose, onSearchTermChange, ...rest } = props;
25
7
  const handleClose = useCallback(() => {
26
8
  onSearchTermChange("");
27
- onClose();
9
+ onClose == null ? void 0 : onClose();
28
10
  }, [onSearchTermChange, onClose]);
29
11
  return /* @__PURE__ */ jsx(
30
12
  Dialog,
@@ -35,68 +17,16 @@ const ElementSearchDialog = (props) => {
35
17
  "aria-labelledby": "dialog-title-search",
36
18
  fullWidth: true,
37
19
  children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
38
- Autocomplete,
20
+ ElementSearchInput,
39
21
  {
40
- open: isLoading || (elementsFound == null ? void 0 : elementsFound.length) > 0,
41
- id: "element-search",
42
- forcePopupIcon: false,
43
- fullWidth: true,
44
- freeSolo: true,
45
- onInputChange: (_event, value, reason) => {
46
- if (!searchTermDisabled && reason !== "reset") {
47
- onSearchTermChange(value);
48
- }
49
- },
50
- onChange: (_event, newValue, reason) => {
51
- if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
52
- onSelectionChange(newValue);
53
- }
54
- },
55
- getOptionLabel: (option) => typeof option === "string" ? option : option.label,
56
- isOptionEqualToValue: (option, value) => {
57
- if (typeof option === "string" || typeof value === "string") {
58
- return option === value;
59
- } else {
60
- return option.id === value.id;
61
- }
62
- },
63
- options: isLoading ? [] : elementsFound,
64
- loading: isLoading,
65
- loadingText,
66
- autoHighlight: true,
67
- noOptionsText: intl.formatMessage({
68
- id: "element_search/noResult"
69
- }),
70
- renderOption: (optionProps, element, { inputValue }) => renderElement({
71
- ...optionProps,
72
- element,
73
- inputValue,
74
- onClose: handleClose
75
- }),
76
- renderInput: (params) => /* @__PURE__ */ jsx(
77
- TextField,
78
- {
79
- autoFocus: true,
80
- ...params,
81
- label: searchingLabel ?? intl.formatMessage({
82
- id: "element_search/label"
83
- }),
84
- InputProps: {
85
- ...params.InputProps,
86
- startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
87
- searchTermDisabled ? /* @__PURE__ */ jsx(SearchOff, { color: "disabled" }) : /* @__PURE__ */ jsx(Search, { color: "disabled" }),
88
- params.InputProps.startAdornment
89
- ] })
90
- },
91
- value: displayedValue ?? ""
92
- }
93
- ),
94
- disabled: searchTermDisabled
22
+ onSearchTermChange,
23
+ ...rest
95
24
  }
96
25
  ) })
97
26
  }
98
27
  );
99
28
  };
100
29
  export {
30
+ ElementSearchDialog,
101
31
  ElementSearchDialog as default
102
32
  };
@@ -0,0 +1,21 @@
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
+ import { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
3
+
4
+ export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
5
+ element: T;
6
+ inputValue: string;
7
+ };
8
+ export interface ElementSearchInputProps<T> extends Pick<AutocompleteProps<T, false, false, true>, 'sx' | 'size' | 'loadingText' | 'loading'> {
9
+ searchTerm: string;
10
+ onSearchTermChange: (searchTerm: string) => void;
11
+ onSelectionChange: (selection: T) => void;
12
+ getOptionLabel: (option: T) => string;
13
+ isOptionEqualToValue: (option1: T, option2: T) => boolean;
14
+ elementsFound: T[];
15
+ renderElement: (props: RenderElementProps<T>) => ReactNode;
16
+ renderInput: (searchTerm: string, props: AutocompleteRenderInputParams) => ReactNode;
17
+ searchTermDisabled?: boolean;
18
+ searchTermDisableReason?: string;
19
+ showResults?: boolean;
20
+ }
21
+ export declare const ElementSearchInput: <T>(props: ElementSearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,85 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Autocomplete } from "@mui/material";
3
+ import { useMemo } from "react";
4
+ import { useIntl } from "react-intl";
5
+ const ElementSearchInput = (props) => {
6
+ const {
7
+ elementsFound,
8
+ loading,
9
+ onSearchTermChange,
10
+ onSelectionChange,
11
+ renderElement,
12
+ renderInput,
13
+ getOptionLabel,
14
+ isOptionEqualToValue,
15
+ showResults,
16
+ searchTerm,
17
+ loadingText,
18
+ searchTermDisableReason,
19
+ searchTermDisabled,
20
+ size,
21
+ sx
22
+ } = props;
23
+ const intl = useIntl();
24
+ const displayedValue = useMemo(() => {
25
+ if (searchTermDisabled || searchTermDisableReason) {
26
+ return searchTermDisableReason ?? intl.formatMessage({
27
+ id: "element_search/searchDisabled"
28
+ });
29
+ } else {
30
+ return searchTerm ?? "";
31
+ }
32
+ }, [searchTerm, searchTermDisabled, searchTermDisableReason, intl]);
33
+ return /* @__PURE__ */ jsx(
34
+ Autocomplete,
35
+ {
36
+ sx,
37
+ open: showResults,
38
+ freeSolo: true,
39
+ size,
40
+ id: "element-search",
41
+ forcePopupIcon: false,
42
+ fullWidth: true,
43
+ onInputChange: (_event, value, reason) => {
44
+ if (!searchTermDisabled && reason !== "reset") {
45
+ onSearchTermChange(value);
46
+ }
47
+ },
48
+ onChange: (_event, newValue, reason) => {
49
+ if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
50
+ onSelectionChange(newValue);
51
+ }
52
+ },
53
+ options: loading ? [] : elementsFound,
54
+ loading,
55
+ loadingText,
56
+ autoHighlight: true,
57
+ noOptionsText: intl.formatMessage({
58
+ id: "element_search/noResult"
59
+ }),
60
+ renderOption: (optionProps, element, { inputValue }) => renderElement({
61
+ ...optionProps,
62
+ element,
63
+ inputValue
64
+ }),
65
+ renderInput: (params) => renderInput(displayedValue, params),
66
+ getOptionLabel: (option) => {
67
+ if (typeof option === "string") {
68
+ return option;
69
+ }
70
+ return getOptionLabel(option);
71
+ },
72
+ isOptionEqualToValue: (option, value) => {
73
+ if (typeof option !== "string" && typeof value !== "string") {
74
+ return isOptionEqualToValue(option, value);
75
+ } else {
76
+ return option === value;
77
+ }
78
+ },
79
+ disabled: searchTermDisabled
80
+ }
81
+ );
82
+ };
83
+ export {
84
+ ElementSearchInput
85
+ };
@@ -1,12 +1,12 @@
1
- import { SxProps } from '@mui/material';
1
+ import { SxProps, Theme } from '@mui/material';
2
2
  import { EquipmentInfos } from '../../utils/EquipmentType';
3
3
  import { TagRenderer } from './index';
4
4
 
5
5
  export interface EquipmentItemProps {
6
6
  inputValue: string;
7
- suffixRenderer: typeof TagRenderer;
7
+ suffixRenderer?: typeof TagRenderer;
8
8
  element: EquipmentInfos;
9
- showsJustText: boolean;
9
+ showsJustText?: boolean;
10
10
  classes?: {
11
11
  result?: string;
12
12
  equipmentOption?: string;
@@ -15,11 +15,11 @@ export interface EquipmentItemProps {
15
15
  equipmentVlTag?: string;
16
16
  };
17
17
  styles?: {
18
- result?: SxProps;
19
- equipmentOption?: SxProps;
20
- equipmentTag?: SxProps;
21
- equipmentTypeTag?: SxProps;
22
- equipmentVlTag?: SxProps;
18
+ result?: SxProps<Theme>;
19
+ equipmentOption?: SxProps<Theme>;
20
+ equipmentTag?: SxProps<Theme>;
21
+ equipmentTypeTag?: SxProps<Theme>;
22
+ equipmentVlTag?: SxProps<Theme>;
23
23
  };
24
24
  }
25
25
  export declare const EquipmentItem: ({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { Box } from "@mui/material";
4
- import "@mui/icons-material";
5
4
  import { FormattedMessage } from "react-intl";
6
5
  import { TagRenderer } from "./tag-renderer.js";
6
+ import "notistack";
7
7
  import match from "autosuggest-highlight/match";
8
8
  import parse from "autosuggest-highlight/parse";
9
9
  import clsx from "clsx";
@@ -6,3 +6,5 @@
6
6
  */
7
7
  export { default } from './element-search-dialog';
8
8
  export { TagRenderer } from './tag-renderer';
9
+ export { ElementSearchInput } from './element-search-input';
10
+ export { useElementSearch } from './use-element-search';
@@ -1,6 +1,10 @@
1
- import { default as default2 } from "./element-search-dialog.js";
1
+ import { ElementSearchDialog } from "./element-search-dialog.js";
2
2
  import { TagRenderer } from "./tag-renderer.js";
3
+ import { ElementSearchInput } from "./element-search-input.js";
4
+ import { useElementSearch } from "./use-element-search.js";
3
5
  export {
6
+ ElementSearchInput,
4
7
  TagRenderer,
5
- default2 as default
8
+ ElementSearchDialog as default,
9
+ useElementSearch
6
10
  };
@@ -1,4 +1,4 @@
1
- import { SxProps } from '@mui/material';
1
+ import { SxProps, Theme } from '@mui/material';
2
2
  import { EquipmentType } from '../../utils/EquipmentType';
3
3
 
4
4
  interface TagRendererProps {
@@ -8,8 +8,8 @@ interface TagRendererProps {
8
8
  equipmentVlTag?: string;
9
9
  };
10
10
  styles?: {
11
- equipmentTag?: SxProps;
12
- equipmentVlTag?: SxProps;
11
+ equipmentTag?: SxProps<Theme>;
12
+ equipmentVlTag?: SxProps<Theme>;
13
13
  };
14
14
  };
15
15
  element: {
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright (c) 2022, RTE (http://www.rte-france.com)
3
+ * This Source Code Form is subject to the terms of the Mozilla Public
4
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
5
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
6
+ */
7
+ interface UseElementSearch<T> {
8
+ fetchElements: (newSearchTerm: string) => Promise<T[]>;
9
+ }
10
+ export declare const useElementSearch: <T>(props: UseElementSearch<T>) => {
11
+ searchTerm: string;
12
+ updateSearchTerm: (newSearchTerm: string) => void;
13
+ elementsFound: T[];
14
+ isLoading: boolean;
15
+ };
16
+ export {};
@@ -0,0 +1,57 @@
1
+ import { useState, useRef, useCallback } from "react";
2
+ import { useDebounce } from "../../hooks/useDebounce.js";
3
+ import { useSnackMessage } from "../../hooks/useSnackMessage.js";
4
+ const SEARCH_FETCH_TIMEOUT_MILLIS = 1e3;
5
+ const useElementSearch = (props) => {
6
+ const { fetchElements } = props;
7
+ const { snackError } = useSnackMessage();
8
+ const [isLoading, setIsLoading] = useState(false);
9
+ const [searchTerm, setSearchTerm] = useState("");
10
+ const [elementsFound, setElementsFound] = useState([]);
11
+ const lastSearchTermRef = useRef("");
12
+ const searchMatchingElements = useCallback(
13
+ (newSearchTerm) => {
14
+ if (newSearchTerm.length === 0) {
15
+ return;
16
+ }
17
+ lastSearchTermRef.current = newSearchTerm;
18
+ fetchElements(newSearchTerm).then((infos) => {
19
+ if (newSearchTerm === lastSearchTermRef.current) {
20
+ setElementsFound(infos);
21
+ setIsLoading(false);
22
+ }
23
+ }).catch((error) => {
24
+ if (newSearchTerm === lastSearchTermRef.current) {
25
+ setElementsFound([]);
26
+ setIsLoading(false);
27
+ snackError({
28
+ messageTxt: error.message,
29
+ headerId: "equipmentsSearchingError"
30
+ });
31
+ }
32
+ });
33
+ },
34
+ [snackError, fetchElements]
35
+ );
36
+ const debouncedSearchMatchingElements = useDebounce(
37
+ searchMatchingElements,
38
+ SEARCH_FETCH_TIMEOUT_MILLIS
39
+ );
40
+ const updateSearchTerm = useCallback(
41
+ (newSearchTerm) => {
42
+ setSearchTerm(newSearchTerm);
43
+ if (newSearchTerm.length === 0) {
44
+ setElementsFound([]);
45
+ setIsLoading(false);
46
+ } else {
47
+ setIsLoading(true);
48
+ }
49
+ debouncedSearchMatchingElements(newSearchTerm);
50
+ },
51
+ [debouncedSearchMatchingElements]
52
+ );
53
+ return { searchTerm, updateSearchTerm, elementsFound, isLoading };
54
+ };
55
+ export {
56
+ useElementSearch
57
+ };
@@ -100,7 +100,7 @@ declare class MuiVirtualizedTable extends PureComponent<MuiVirtualizedTableProps
100
100
  }[]>;
101
101
  render(): import("react/jsx-runtime").JSX.Element;
102
102
  }
103
- declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "className" | "style" | "label" | "id" | "aria-label" | "name" | "rows" | "sort" | "numeric" | "tooltipSx" | "defersFilterChanges" | "onRowClick" | "onCellClick" | "exportCSVDataKeys" | "sortable" | "indexer" | "clickable" | "fractionDigits" | "unit" | "extra" | "nostat" | "cellDataGetter" | "cellRenderer" | "columnData" | "dataKey" | "defaultSortDirection" | "disableSort" | "headerClassName" | "headerRenderer" | "headerStyle"> & {
103
+ declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "style" | "className" | "label" | "id" | "aria-label" | "name" | "rows" | "sort" | "numeric" | "tooltipSx" | "defersFilterChanges" | "onRowClick" | "onCellClick" | "exportCSVDataKeys" | "sortable" | "indexer" | "clickable" | "fractionDigits" | "unit" | "extra" | "nostat" | "cellDataGetter" | "cellRenderer" | "columnData" | "dataKey" | "defaultSortDirection" | "disableSort" | "headerClassName" | "headerRenderer" | "headerStyle"> & {
104
104
  classes?: Record<string, string> | undefined;
105
105
  headerHeight?: number | undefined;
106
106
  rowHeight?: number | undefined;
@@ -1,12 +1,12 @@
1
1
  import { Style } from 'node:util';
2
- import { BoxProps, SxProps } from '@mui/material';
2
+ import { BoxProps, SxProps, Theme } from '@mui/material';
3
3
  import { ReactElement } from 'react';
4
4
 
5
5
  export interface OverflowableTextProps extends BoxProps {
6
6
  text?: ReactElement | string;
7
7
  maxLineCount?: number;
8
8
  tooltipStyle?: Style;
9
- tooltipSx?: SxProps;
9
+ tooltipSx?: SxProps<Theme>;
10
10
  }
11
- export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
11
+ export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
12
12
  export default OverflowableText;
@@ -1,7 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
3
- import { Tooltip, Box } from "@mui/material";
4
- import { styled } from "@mui/system";
3
+ import { styled, Tooltip, Box } from "@mui/material";
5
4
  const overflowStyle = {
6
5
  overflow: {
7
6
  display: "inline-block",
@@ -20,7 +20,7 @@ const ModifyElementSelection = (props) => {
20
20
  if (directory) {
21
21
  fetchDirectoryElementPath(directory).then((res) => {
22
22
  setActiveDirectoryName(
23
- res.map((element) => element.elementName.trim()).reverse().join("/")
23
+ res.map((element) => element.elementName.trim()).join("/")
24
24
  );
25
25
  });
26
26
  }
@@ -8,7 +8,7 @@ import "react-hook-form";
8
8
  import "@hookform/resolvers/yup";
9
9
  import "./criteria-based-filter-form.js";
10
10
  import "../../../utils/yup-config.js";
11
- import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.DcXcQOoT.js";
11
+ import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.g-QT74FD.js";
12
12
  import "../constants/filter-constants.js";
13
13
  import "../../../utils/FetchStatus.js";
14
14
  import "../../../services/explore.js";