@m4l/components 0.1.80 → 0.1.82

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 (105) hide show
  1. package/@types/export.d.ts +9 -1
  2. package/components/AccountPopover/AccountPopover.d.ts +21 -0
  3. package/components/AccountPopover/classes/types.d.ts +1 -1
  4. package/components/AccountPopover/{index.00d1d15f.js → index.0ba26726.js} +68 -72
  5. package/components/AccountPopover/subcomponents/MyAvatar/index.d.ts +2 -2
  6. package/components/AccountPopover/subcomponents/MyAvatar/types.d.ts +7 -0
  7. package/components/AccountPopover/subcomponents/PopOver/index.d.ts +6 -0
  8. package/components/AccountPopover/subcomponents/PopOver/types.d.ts +5 -4
  9. package/components/AccountPopover/types.d.ts +3 -4
  10. package/components/AppBar/{index.c85b100d.js → index.fadcefc6.js} +7 -7
  11. package/components/CommonActions/components/ActionCancel/{index.1051a117.js → index.6cf96d04.js} +2 -2
  12. package/components/CommonActions/components/ActionFormCancel/{index.a0d727b2.js → index.a0335cbf.js} +15 -15
  13. package/components/CommonActions/components/ActionFormIntro/{index.a20dc88d.js → index.273b1b9f.js} +2 -2
  14. package/components/CommonActions/components/ActionIntro/{index.bfe3256c.js → index.856df8ef.js} +2 -2
  15. package/components/CommonActions/components/Actions/{index.19d67bc6.js → index.5abb6ac4.js} +13 -13
  16. package/components/DataGrid/classes/index.d.ts +1 -0
  17. package/components/DataGrid/classes/types.d.ts +1 -0
  18. package/components/DataGrid/constants.d.ts +1 -0
  19. package/components/DataGrid/{index.2f175eba.js → index.03ad08af.js} +28 -681
  20. package/components/DataGrid/subcomponents/Actions/index.db54ec98.js +621 -0
  21. package/components/DataGrid/subcomponents/editors/TextEditor/index.91380a55.js +64 -0
  22. package/components/DynamicFilter/constants.d.ts +1 -1
  23. package/components/DynamicFilter/{index.c1f9d560.js → index.9b72180b.js} +28 -28
  24. package/components/GridLayout/GridLayout.d.ts +1 -0
  25. package/components/GridLayout/classes/index.d.ts +4 -0
  26. package/components/GridLayout/classes/types.d.ts +17 -0
  27. package/components/GridLayout/constants.d.ts +26 -0
  28. package/components/GridLayout/{index.a792aacb.js → index.76bccc4f.js} +322 -575
  29. package/components/GridLayout/index.d.ts +4 -3
  30. package/components/GridLayout/subcomponents/Griditem/index.01fc14c3.js +370 -0
  31. package/components/GridLayout/subcomponents/Griditem/index.d.ts +9 -0
  32. package/components/GridLayout/subcomponents/Griditem/types.d.ts +103 -0
  33. package/components/GridLayout/subcomponents/Responsive/helper.d.ts +10 -0
  34. package/components/GridLayout/subcomponents/Responsive/index.d.ts +15 -2
  35. package/components/GridLayout/{Responsive/index.1671380a.js → subcomponents/Responsive/index.e589d8bf.js} +95 -139
  36. package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts +3 -6
  37. package/components/GridLayout/subcomponents/Responsive/types.d.ts +114 -33
  38. package/components/GridLayout/{WidthProvider/index.9a26dfe4.js → subcomponents/WidthProvider/index.50dafd87.js} +5 -5
  39. package/components/GridLayout/subcomponents/WidthProvider/index.d.ts +4 -5
  40. package/components/GridLayout/types.d.ts +83 -18
  41. package/components/GridLayout/utils.d.ts +15 -12
  42. package/components/HelperText/{index.6ef76993.js → index.6c3adb40.js} +7 -7
  43. package/components/Icon/{index.9fcd1476.js → index.2414ff25.js} +1 -1
  44. package/components/LanguagePopover/{index.1564bd08.js → index.66e11634.js} +7 -7
  45. package/components/ModalDialog/{index.fbc4cd71.js → index.4dc1c8ed.js} +4 -4
  46. package/components/NavLink/{index.6c9c2588.js → index.5859e048.js} +7 -7
  47. package/components/ObjectLogs/{index.eab1c15f.js → index.51de2deb.js} +17 -17
  48. package/components/PaperForm/{index.ba38a0bd.js → index.f931dc02.js} +1 -1
  49. package/components/Period/{index.26071a16.js → index.4fd9df2a.js} +14 -14
  50. package/components/PropertyValue/{index.18d3c0fd.js → index.1b09f426.js} +1 -1
  51. package/components/ScrollBar/{index.bbe48f4d.js → index.d4410cb5.js} +5 -0
  52. package/components/SideBar/{index.2f497e6c.js → index.72564ef2.js} +11 -6
  53. package/components/animate/AnimatedScroll/animatedScroll.d.ts +3 -0
  54. package/components/animate/AnimatedScroll/index.d.ts +1 -0
  55. package/components/animate/AnimatedScroll/types.d.ts +5 -0
  56. package/components/animate/index.4e9774a6.js +150 -0
  57. package/components/animate/index.d.ts +1 -0
  58. package/components/areas/components/AreasAdmin/{index.7a0dabbe.js → index.f011d49d.js} +60 -49
  59. package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/PanelWindowPopUp/index.d.ts +1 -1
  60. package/components/areas/components/AreasViewer/{index.fd49f06c.js → index.51a52736.js} +41 -153
  61. package/components/areas/components/{index.7756928a.js → index.f496660b.js} +11 -11
  62. package/components/areas/contexts/AreasContext/helper.d.ts +2 -2
  63. package/components/areas/contexts/AreasContext/{index.0a08a08b.js → index.9820bc7f.js} +12 -6
  64. package/components/areas/contexts/AreasContext/types.d.ts +4 -4
  65. package/components/areas/contexts/{index.b303b664.js → index.361acb6f.js} +1 -1
  66. package/components/areas/hooks/useAreas/{index.c6eb2569.js → index.b403f383.js} +1 -1
  67. package/components/areas/{index.6e67d89a.js → index.eacab372.js} +11 -11
  68. package/components/formatters/BooleanFormatter/{index.e8de8e4c.js → index.32de0803.js} +1 -1
  69. package/components/formatters/{index.67aeb049.js → index.d16d2331.js} +2 -2
  70. package/components/hook-form/RHFAutocomplete/{index.d1bbb015.js → index.6edb51b1.js} +8 -8
  71. package/components/hook-form/RHFAutocompleteAsync/{index.f9a9ef48.js → index.c2ca5c66.js} +1 -1
  72. package/components/hook-form/RHFCheckbox/{index.7b4a21d7.js → index.c6c3933b.js} +8 -8
  73. package/components/hook-form/RHFDateTime/{index.46cf616e.js → index.3add0fa4.js} +8 -8
  74. package/components/hook-form/RHFPeriod/{index.ce513149.js → index.72edef4d.js} +2 -2
  75. package/components/hook-form/RHFTextField/{index.f7ee202c.js → index.20daa95e.js} +3 -3
  76. package/components/hook-form/RHFUpload/{index.1befd5bb.js → index.cc5adc15.js} +8 -8
  77. package/components/modal/{WindowBase.7e19843e.js → WindowBase.4016485b.js} +9 -9
  78. package/components/modal/{WindowConfirm.12a9608a.js → WindowConfirm.f148e495.js} +16 -16
  79. package/components/modal/{index.b0a7236c.js → index.e9fece72.js} +13 -13
  80. package/components/mui_extended/Accordion/{index.a6447bf8.js → index.42cef1c7.js} +3 -3
  81. package/components/mui_extended/Avatar/types.d.ts +3 -1
  82. package/components/mui_extended/Button/classes/types.d.ts +3 -0
  83. package/components/mui_extended/Button/{index.4288f9fc.js → index.40af964e.js} +8 -3
  84. package/components/mui_extended/Button/types.d.ts +2 -1
  85. package/components/mui_extended/IconButton/{index.12f1a3c3.js → index.a318316e.js} +1 -1
  86. package/components/mui_extended/MenuActions/{index.43a2e1ae.js → index.f6bfdd40.js} +2 -2
  87. package/components/mui_extended/Pager/classes/index.d.ts +12 -0
  88. package/components/mui_extended/Pager/classes/types.d.ts +12 -4
  89. package/components/mui_extended/Pager/{index.82e89328.js → index.da26e9d4.js} +114 -62
  90. package/components/mui_extended/Pager/subcomponents/CustomTablePagination/index.d.ts +3 -0
  91. package/components/mui_extended/Pager/subcomponents/CustomTablePagination/types.d.ts +12 -0
  92. package/components/mui_extended/Pager/{components → subcomponents}/PagerActions/types.d.ts +2 -0
  93. package/components/mui_extended/Tab/{index.c39a6681.js → index.0d5f96e6.js} +1 -1
  94. package/components/mui_extended/{index.d78bde19.js → index.f6a356b9.js} +7 -7
  95. package/contexts/ModalContext/{index.89805978.js → index.efc1135a.js} +1 -1
  96. package/contexts/RHFormContext/{index.fe175bab.js → index.b9266262.js} +1 -1
  97. package/hooks/useModal/{index.e1c5c31e.js → index.9b0cc3fe.js} +1 -1
  98. package/index.js +92 -88
  99. package/package.json +1 -2
  100. package/{vendor.f57d47a7.js → vendor.88ed58a5.js} +51 -48
  101. package/components/AccountPopover/subcomponents/MyAvatar/createAvatar.d.ts +0 -4
  102. package/components/GridLayout/subcomponents/GridItem/index.d.ts +0 -26
  103. package/components/GridLayout/subcomponents/GridItem/types.d.ts +0 -78
  104. package/components/animate/index.1f8eadd4.js +0 -66
  105. /package/components/mui_extended/Pager/{components → subcomponents}/PagerActions/index.d.ts +0 -0
@@ -1,53 +1,23 @@
1
+ import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.4dc1c8ed.js";
2
+ import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.da26e9d4.js";
1
3
  import { styled } from "@mui/material/styles";
2
- import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect, useImperativeHandle } from "react";
4
+ import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
3
5
  import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
4
6
  import { useDrag, useDrop, DndProvider } from "react-dnd";
5
7
  import { HTML5Backend } from "react-dnd-html5-backend";
6
- import { SvgIcon, Checkbox, InputBase, useTheme, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
7
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
8
- import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString, useEnvironment } from "@m4l/core";
9
- import { M as MenuActions } from "../mui_extended/MenuActions/index.43a2e1ae.js";
10
- import { g as getPagerComponentsDictionary, P as Pager } from "../mui_extended/Pager/index.82e89328.js";
11
- import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.js";
8
+ import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
+ import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
11
+ import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.db54ec98.js";
12
12
  import { unstable_composeClasses } from "@mui/base";
13
- import { u as useModal } from "../../hooks/useModal/index.e1c5c31e.js";
14
- import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.1051a117.js";
15
- import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.bfe3256c.js";
16
- import "../../react-draggable.7abb5d0a.js";
17
- import "../Resizeable/index.9a9c79a4.js";
18
- import { useResponsiveDesktop } from "@m4l/graphics";
19
- import "../Icon/index.9fcd1476.js";
13
+ import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
14
+ import { g as getNameDataTestId } from "../../vendor.88ed58a5.js";
15
+ import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.32de0803.js";
16
+ import "@m4l/graphics";
17
+ import "../Icon/index.2414ff25.js";
20
18
  import "clsx";
21
- import "../modal/index.b0a7236c.js";
22
- import { A as Actions$1 } from "../CommonActions/components/Actions/index.19d67bc6.js";
23
- import "react-hook-form";
24
- import "@mui/material/Button";
25
- import "../mui_extended/Button/index.4288f9fc.js";
26
- import "zustand";
27
- import "../areas/contexts/AreasContext/index.0a08a08b.js";
28
- import "../areas/components/AreasAdmin/index.7a0dabbe.js";
29
- import "zustand/shallow";
30
- import "../ScrollBar/index.bbe48f4d.js";
31
- import "../mui_extended/Accordion/index.a6447bf8.js";
32
- import "../mui_extended/Typography/index.443590d6.js";
33
- import "../mui_extended/Avatar/index.75e6ed57.js";
34
- import "react-router-dom";
35
- import "../mui_extended/CheckBox.5f6c78b0.js";
36
- import "../mui_extended/Badge/index.cad260fe.js";
37
- import "../Image/index.c18ebf5a.js";
38
- import "@mui/lab";
39
- import "../mui_extended/Popover/index.9f35d0eb.js";
40
- import "../mui_extended/Tab/index.c39a6681.js";
41
- import "../mui_extended/Tooltip/index.5a795dcd.js";
42
- import "../areas/components/AreasViewer/index.fd49f06c.js";
43
- import "../LinearProgressIndeterminate/index.60dabc06.js";
44
- import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
45
- import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
46
- import { W as WindowBase } from "../modal/WindowBase.7e19843e.js";
47
- import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.fbc4cd71.js";
48
- import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.e8de8e4c.js";
49
19
  import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
50
- import { C as ConcatenatedFormatter } from "../formatters/index.67aeb049.js";
20
+ import { C as ConcatenatedFormatter } from "../formatters/index.d16d2331.js";
51
21
  const DataGridRoot = styled("div")(({
52
22
  theme
53
23
  }) => ({
@@ -560,48 +530,6 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
560
530
  }
561
531
  return HeaderRenderer2;
562
532
  };
563
- const ACTIONS_COLUMN_KEY = "actions-row";
564
- function ActionsFormatter(props) {
565
- const {
566
- rowActionsGetter,
567
- classes
568
- } = useDataGrid();
569
- const theme = useTheme();
570
- if (rowActionsGetter === void 0) {
571
- return /* @__PURE__ */ jsx(Fragment, {});
572
- }
573
- return /* @__PURE__ */ jsx(MenuActions, {
574
- arrowType: "top-left",
575
- objItem: props.row,
576
- menuActions: rowActionsGetter,
577
- className: classes.actionsFormatter,
578
- menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
579
- marginTop: 1,
580
- marginLeft: "-11px",
581
- anchorOrigin: {
582
- vertical: "bottom",
583
- horizontal: "left"
584
- },
585
- transformOrigin: {
586
- vertical: "top",
587
- horizontal: "left"
588
- }
589
- });
590
- }
591
- const ActionsColumn = {
592
- key: ACTIONS_COLUMN_KEY,
593
- name: getActionLabel(),
594
- width: 60,
595
- withFilter: false,
596
- resizable: true,
597
- sortable: false,
598
- frozen: true,
599
- type: "custom",
600
- formatter: ActionsFormatter
601
- };
602
- function getActionLabel() {
603
- return "";
604
- }
605
533
  const WrapperSkeleton = styled("div")(() => ({
606
534
  display: "flex",
607
535
  width: "100%",
@@ -879,70 +807,6 @@ function Table(props) {
879
807
  })
880
808
  });
881
809
  }
882
- function Filter() {
883
- const {
884
- activeFilters,
885
- setActiveFilters
886
- } = useFilters();
887
- const {
888
- host_static_assets,
889
- environment_assets
890
- } = useEnvironment();
891
- const {
892
- classes
893
- } = useDataGrid();
894
- const toggleIcon = () => {
895
- setActiveFilters(!activeFilters);
896
- };
897
- return /* @__PURE__ */ jsx(IconButton, {
898
- dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
899
- className: classes.actionFilter,
900
- onClick: toggleIcon,
901
- "aria-label": "filter",
902
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
903
- });
904
- }
905
- const WrapperColumnsConfig = styled("div")(({ theme }) => ({
906
- color: theme.palette.text.primary,
907
- position: "relative",
908
- display: "flex",
909
- flexDirection: "column",
910
- height: "100%",
911
- width: "100%"
912
- }));
913
- styled("div")(({ theme }) => ({
914
- color: theme.palette.text.primary,
915
- fontSize: theme.typography.h4.fontSize
916
- }));
917
- const DivSelColumns = styled("div")(({ theme }) => ({
918
- ...theme.typography.subtitle2,
919
- color: theme.palette.text.primary,
920
- padding: `${theme.spacing(3)} ${theme.spacing(1)}`
921
- }));
922
- const WrapperDataGrid = styled("div")(() => ({
923
- position: "relative",
924
- display: "flex",
925
- flexDirection: "column",
926
- flexGrow: 1
927
- }));
928
- styled("div")(() => ({
929
- display: "flex",
930
- flexDirection: "row"
931
- }));
932
- const ColumnActions = styled("div")(({ theme }) => ({
933
- paddingTop: theme.spacing(3),
934
- display: "flex",
935
- flexDirection: "row"
936
- }));
937
- styled("div")(({ theme }) => ({
938
- paddingTop: theme.spacing(3),
939
- display: "flex",
940
- flexDirection: "row",
941
- justifyContent: "flex-end",
942
- "& > button": {
943
- marginLeft: "10px"
944
- }
945
- }));
946
810
  const componentName = "M4LDataGrid";
947
811
  const dataGridClasses = generateUtilityClasses(componentName, [
948
812
  "root",
@@ -966,6 +830,7 @@ const dataGridClasses = generateUtilityClasses(componentName, [
966
830
  "formatterColumn",
967
831
  "skeletonFormatter",
968
832
  "actionsFormatter",
833
+ "actionsConfigContainer",
969
834
  "withActions"
970
835
  ]);
971
836
  function getDataGridUtilityClass(slot) {
@@ -993,445 +858,14 @@ const dataGridUtilityClasses = (ownerState) => {
993
858
  columnsConfigActions: ["columnsConfigActions"],
994
859
  formatterColumn: ["formatterColumn"],
995
860
  skeletonFormatter: ["skeletonFormatter"],
996
- actionsFormatter: ["actionsFormatter"]
861
+ actionsFormatter: ["actionsFormatter"],
862
+ actionsConfigContainer: ["actionsConfigContainer"]
997
863
  };
998
864
  const composedClasses = unstable_composeClasses(slots, getDataGridUtilityClass, {});
999
865
  return {
1000
866
  ...composedClasses
1001
867
  };
1002
868
  };
1003
- function FormatterColumn(props) {
1004
- const {
1005
- row,
1006
- onRowChange,
1007
- column
1008
- } = props;
1009
- const handleChange = () => {
1010
- const newRow = {
1011
- ...row
1012
- };
1013
- newRow[column.key] = !row[column.key];
1014
- onRowChange(newRow);
1015
- };
1016
- return /* @__PURE__ */ jsx(Checkbox, {
1017
- size: "small",
1018
- checked: row[column.key],
1019
- onChange: handleChange,
1020
- className: dataGridClasses.formatterColumn
1021
- });
1022
- }
1023
- function getRowsFromColumnsConfig(columnsConfig) {
1024
- return columnsConfig.filter((column) => !column.hidden).map((column) => ({
1025
- key: column.key,
1026
- name: column.name,
1027
- visible: column.visible === void 0 ? true : column.visible,
1028
- frozen: column.frozen === void 0 ? false : column.frozen,
1029
- originalIndex: column.orginalIndex,
1030
- originalFrozen: column.originalFrozen,
1031
- originalVisible: column.originalVisible
1032
- }));
1033
- }
1034
- const ColumnsConfig = forwardRef((props, ref) => {
1035
- const refdata_grid = useRef(null);
1036
- const {
1037
- onCloseSettings,
1038
- columnsConfig,
1039
- onChangeColumnsConfig,
1040
- classes
1041
- } = props;
1042
- const {
1043
- getLabel
1044
- } = useModuleDictionary();
1045
- const [isInit, setIsInit] = useState(true);
1046
- const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
1047
- const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
1048
- const divRef = useRef(null);
1049
- const {
1050
- host_static_assets,
1051
- environment_assets
1052
- } = useEnvironment();
1053
- useImperativeHandle(ref, () => ({
1054
- onClickIntro: handleIntro,
1055
- current: divRef.current
1056
- }));
1057
- const columnsdata_grid = useMemo(() => [{
1058
- key: "name",
1059
- name: getLabel("data_grid.settings_column_name"),
1060
- width: 200,
1061
- resizable: true,
1062
- type: "string"
1063
- }, {
1064
- key: "originalIndex",
1065
- name: getLabel("data_grid.settings_column_position"),
1066
- width: 50,
1067
- type: "number",
1068
- cellClass: "rdg-cell-align-center"
1069
- }, {
1070
- key: "visible",
1071
- name: getLabel("data_grid.settings_column_visible"),
1072
- width: 80,
1073
- type: "boolean",
1074
- formatter: FormatterColumn,
1075
- cellClass: "rdg-cell-align-center"
1076
- }, {
1077
- key: "frozen",
1078
- name: getLabel("data_grid.settings_column_frozen"),
1079
- width: 80,
1080
- type: "boolean",
1081
- formatter: FormatterColumn,
1082
- cellClass: "rdg-cell-align-center"
1083
- }], [getLabel]);
1084
- const checkAll = () => {
1085
- setRows(rows.map((row) => ({
1086
- ...row,
1087
- visible: true
1088
- })));
1089
- };
1090
- const unCheckAll = () => {
1091
- setRows(rows.map((row) => ({
1092
- ...row,
1093
- visible: false
1094
- })));
1095
- };
1096
- const restoreAll = () => {
1097
- setRows(rows.map((row) => ({
1098
- ...row,
1099
- visible: row.originalVisible,
1100
- frozen: row.originalFrozen,
1101
- index: row.originalIndex
1102
- })).sort((a, b) => a.index - b.index));
1103
- };
1104
- useEffect(() => {
1105
- if (isInit === false) {
1106
- setRows(getRowsFromColumnsConfig(columnsConfig));
1107
- }
1108
- setIsInit(false);
1109
- }, [columnsConfig]);
1110
- const rowSelectedIndex = useMemo(() => {
1111
- let rowIndex = -1;
1112
- if (selRows.size !== 1)
1113
- return rowIndex;
1114
- const iterator = selRows.entries();
1115
- const entry = iterator.next().value[1];
1116
- rowIndex = rows.findIndex((row) => row.key === entry);
1117
- return rowIndex;
1118
- }, [rows, selRows]);
1119
- const handleMoveFirst = () => {
1120
- if (rowSelectedIndex === -1)
1121
- return -1;
1122
- const newRows = [...rows];
1123
- newRows.splice(rowSelectedIndex, 1);
1124
- newRows.splice(0, 0, rows[rowSelectedIndex]);
1125
- refdata_grid.current?.selectCell({
1126
- idx: 0,
1127
- rowIdx: 0
1128
- });
1129
- setRows(newRows);
1130
- };
1131
- const handleMoveLast = () => {
1132
- if (rowSelectedIndex === -1)
1133
- return -1;
1134
- const newRows = [...rows];
1135
- newRows.splice(rowSelectedIndex, 1);
1136
- newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
1137
- refdata_grid.current?.selectCell({
1138
- idx: 0,
1139
- rowIdx: newRows.length - 1
1140
- });
1141
- setRows(newRows);
1142
- };
1143
- const handleMoveUpDownd = (position) => {
1144
- if (rowSelectedIndex === -1)
1145
- return -1;
1146
- const newRows = [...rows];
1147
- const element = newRows[rowSelectedIndex];
1148
- newRows.splice(rowSelectedIndex, 1);
1149
- newRows.splice(rowSelectedIndex + position, 0, element);
1150
- refdata_grid.current?.selectCell({
1151
- idx: 0,
1152
- rowIdx: rowSelectedIndex + position
1153
- });
1154
- setRows(newRows);
1155
- };
1156
- const getColumnConfigByKey2 = (key) => {
1157
- const rowIndexFinded = rows.findIndex((row) => row.key === key);
1158
- if (rowIndexFinded > -1) {
1159
- return {
1160
- visible: rows[rowIndexFinded].visible,
1161
- frozen: rows[rowIndexFinded].frozen
1162
- };
1163
- }
1164
- return void 0;
1165
- };
1166
- const getRowIndex = (column) => {
1167
- const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
1168
- if (rowIndexFinded > -1) {
1169
- return rowIndexFinded;
1170
- }
1171
- return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
1172
- };
1173
- const handleIntro = () => {
1174
- const newColumnsConfig = columnsConfig.map((columnConfig) => {
1175
- const newColumnConfig = {
1176
- ...columnConfig
1177
- };
1178
- if (!columnConfig.hidden) {
1179
- const columnConfigRow = getColumnConfigByKey2(columnConfig.key);
1180
- if (columnConfigRow) {
1181
- newColumnConfig.visible = columnConfigRow.visible;
1182
- newColumnConfig.frozen = columnConfigRow.frozen;
1183
- }
1184
- }
1185
- return newColumnConfig;
1186
- }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
1187
- onChangeColumnsConfig(newColumnsConfig);
1188
- onCloseSettings();
1189
- };
1190
- const onInternalSelectedRowsChange = () => {
1191
- };
1192
- const onInternalRowsChange = (newRows) => {
1193
- setRows(newRows);
1194
- };
1195
- const onRowClick = (row) => {
1196
- if (selRows.has(row.key))
1197
- return;
1198
- const mySet = /* @__PURE__ */ new Set([row.key]);
1199
- setSelRows(mySet);
1200
- };
1201
- return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
1202
- ref: divRef,
1203
- className: classes.columnsConfigContainer,
1204
- children: [/* @__PURE__ */ jsx(DivSelColumns, {
1205
- className: classes.columnsLabelSetColumns,
1206
- children: getLabel("data_grid.settings_sel_columns")
1207
- }), /* @__PURE__ */ jsx(WrapperDataGrid, {
1208
- className: classes.columnsConfigContent,
1209
- children: /* @__PURE__ */ jsx("div", {
1210
- className: classes.wrapperDataGridCss,
1211
- children: /* @__PURE__ */ jsx(DataGrid$1, {
1212
- className: classes.columnsConfigGrid,
1213
- ref: refdata_grid,
1214
- columns: columnsdata_grid,
1215
- rows,
1216
- onRowsChange: onInternalRowsChange,
1217
- selectedRows: selRows,
1218
- onSelectedRowsChange: onInternalSelectedRowsChange,
1219
- onRowClick,
1220
- rowKeyGetter: (row) => row.key,
1221
- cellNavigationMode: "CHANGE_ROW",
1222
- defaultColumnOptions: {
1223
- resizable: true,
1224
- sortable: true
1225
- }
1226
- })
1227
- })
1228
- }), /* @__PURE__ */ jsxs(ColumnActions, {
1229
- className: classes.columnsConfigActions,
1230
- children: [/* @__PURE__ */ jsx(IconButton, {
1231
- dictionaryTooltipId: "data_grid.settings_move_first",
1232
- onClick: handleMoveFirst,
1233
- "aria-label": "move first place",
1234
- disabled: rowSelectedIndex < 1,
1235
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
1236
- }), /* @__PURE__ */ jsx(IconButton, {
1237
- dictionaryTooltipId: "data_grid.settings_move_up",
1238
- onClick: () => handleMoveUpDownd(-1),
1239
- "aria-label": "move up place",
1240
- disabled: rowSelectedIndex < 1,
1241
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
1242
- }), /* @__PURE__ */ jsx(IconButton, {
1243
- dictionaryTooltipId: "data_grid.settings_move_last",
1244
- onClick: handleMoveLast,
1245
- "aria-label": "move last place",
1246
- disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
1247
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
1248
- }), /* @__PURE__ */ jsx(IconButton, {
1249
- dictionaryTooltipId: "data_grid.settings_move_down",
1250
- onClick: () => handleMoveUpDownd(1),
1251
- "aria-label": "move down place",
1252
- disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
1253
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
1254
- }), /* @__PURE__ */ jsx(IconButton, {
1255
- dictionaryTooltipId: "data_grid.settings_visible_all",
1256
- onClick: checkAll,
1257
- "aria-label": "check visible all",
1258
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
1259
- }), /* @__PURE__ */ jsx(IconButton, {
1260
- dictionaryTooltipId: "data_grid.settings_no_visible_all",
1261
- onClick: unCheckAll,
1262
- "aria-label": "un check all",
1263
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
1264
- }), /* @__PURE__ */ jsx(IconButton, {
1265
- dictionaryTooltipId: "data_grid.settings_restore",
1266
- onClick: restoreAll,
1267
- "aria-label": "Restore columns",
1268
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
1269
- })]
1270
- })]
1271
- });
1272
- });
1273
- ColumnsConfig.displayName = "ColumnsConfig";
1274
- function Settings() {
1275
- const {
1276
- openModal,
1277
- closeModal
1278
- } = useModal();
1279
- const {
1280
- columnsConfig,
1281
- onChangeColumnsConfig
1282
- } = useDataGrid();
1283
- const {
1284
- getLabel
1285
- } = useModuleDictionary();
1286
- const {
1287
- host_static_assets,
1288
- environment_assets
1289
- } = useEnvironment();
1290
- const {
1291
- classes
1292
- } = useDataGrid();
1293
- const ref = useRef(null);
1294
- const onCloseSettings = useCallback(() => {
1295
- closeModal();
1296
- }, [closeModal]);
1297
- const onClickIntro = useCallback(() => {
1298
- if (ref.current?.onClickIntro) {
1299
- ref.current?.onClickIntro();
1300
- }
1301
- }, []);
1302
- const onClickSettings = useCallback(() => {
1303
- openModal({
1304
- initialWidth: 500,
1305
- initialHeigth: 680,
1306
- window: /* @__PURE__ */ jsxs(WindowBase, {
1307
- title: getLabel("data_grid.settings_title"),
1308
- children: [/* @__PURE__ */ jsx(ColumnsConfig, {
1309
- ref,
1310
- columnsConfig,
1311
- onChangeColumnsConfig,
1312
- onCloseSettings,
1313
- classes
1314
- }), /* @__PURE__ */ jsxs(Actions$1, {
1315
- children: [/* @__PURE__ */ jsx(ActionCancel, {
1316
- onClick: closeModal
1317
- }), /* @__PURE__ */ jsx(ActionIntro, {
1318
- onClick: onClickIntro
1319
- })]
1320
- })]
1321
- })
1322
- });
1323
- }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
1324
- return /* @__PURE__ */ jsx(IconButton, {
1325
- className: classes.actionSettings,
1326
- dictionaryTooltipId: "data_grid.tooltip_settings",
1327
- onClick: onClickSettings,
1328
- "aria-label": "settings",
1329
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
1330
- });
1331
- }
1332
- function RowsCount() {
1333
- const {
1334
- rowsCount,
1335
- classes
1336
- } = useDataGrid();
1337
- const {
1338
- getLabel
1339
- } = useModuleDictionary();
1340
- const isSkeleton = useModuleSkeleton();
1341
- return /* @__PURE__ */ jsx("div", {
1342
- className: classes.rowsCount,
1343
- children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
1344
- children: [/* @__PURE__ */ jsx("div", {
1345
- className: classes.rowsCountLabel,
1346
- children: getLabel("data_grid.rows")
1347
- }), /* @__PURE__ */ jsx("div", {
1348
- className: classes.rowsCountValue,
1349
- children: rowsCount
1350
- })]
1351
- }) : /* @__PURE__ */ jsxs(Fragment, {
1352
- children: [/* @__PURE__ */ jsx("div", {
1353
- className: classes.rowsCountLabel,
1354
- children: /* @__PURE__ */ jsx(Skeleton, {
1355
- variant: "text",
1356
- width: "40px",
1357
- height: "16px"
1358
- })
1359
- }), /* @__PURE__ */ jsx("div", {
1360
- className: classes.rowsCountValue,
1361
- children: /* @__PURE__ */ jsx(Skeleton, {
1362
- variant: "text",
1363
- width: "20px",
1364
- height: "16px"
1365
- })
1366
- })]
1367
- })
1368
- });
1369
- }
1370
- function Density() {
1371
- const {
1372
- host_static_assets,
1373
- environment_assets
1374
- } = useEnvironment();
1375
- const {
1376
- rowHeights,
1377
- currentRowHeightVariant,
1378
- setRowHeightVariant,
1379
- classes
1380
- } = useDataGrid();
1381
- const {
1382
- getLabel
1383
- } = useModuleDictionary();
1384
- const menuActions = useMemo(() => {
1385
- if (typeof rowHeights === "number") {
1386
- return [];
1387
- }
1388
- return [{
1389
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
1390
- onClick: () => setRowHeightVariant("compact"),
1391
- disabled: currentRowHeightVariant === "compact",
1392
- dictionaryField: "data_grid.density_compact"
1393
- }, {
1394
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
1395
- onClick: () => setRowHeightVariant("standard"),
1396
- disabled: currentRowHeightVariant === "standard",
1397
- dictionaryField: "data_grid.density_standard"
1398
- }, {
1399
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
1400
- onClick: () => setRowHeightVariant("confortable"),
1401
- disabled: currentRowHeightVariant === "confortable",
1402
- dictionaryField: "data_grid.density_confortable"
1403
- }];
1404
- }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
1405
- const theme = useTheme();
1406
- const currenViewIcon = useMemo(() => {
1407
- if (currentRowHeightVariant === "compact") {
1408
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
1409
- }
1410
- if (currentRowHeightVariant === "standard") {
1411
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
1412
- }
1413
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
1414
- }, [currentRowHeightVariant, host_static_assets, environment_assets]);
1415
- if (menuActions.length === 0) {
1416
- return /* @__PURE__ */ jsx(Fragment, {});
1417
- }
1418
- return /* @__PURE__ */ jsx(MenuActions, {
1419
- arrowType: "right-top",
1420
- className: classes.actionDensityPopover,
1421
- menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
1422
- anchorOrigin: {
1423
- vertical: "top",
1424
- horizontal: "left"
1425
- },
1426
- transformOrigin: {
1427
- vertical: "top",
1428
- horizontal: "right"
1429
- },
1430
- menuActions,
1431
- urlIcon: currenViewIcon,
1432
- toolTip: getLabel("data_grid.tooltip_density")
1433
- });
1434
- }
1435
869
  function getDataGridComponentsDictionary() {
1436
870
  return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
1437
871
  }
@@ -1440,41 +874,10 @@ const dictionary = {
1440
874
  LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
1441
875
  LABEL_OF: "pager.of"
1442
876
  };
1443
- function Actions(props) {
1444
- const isDesktop = useResponsiveDesktop();
1445
- const {
1446
- rowHeights,
1447
- classes
1448
- } = useDataGrid();
1449
- const isSkeleton = useModuleSkeleton();
1450
- const {
1451
- getLabel
1452
- } = useModuleDictionary();
1453
- const {
1454
- withRowsCount = true,
1455
- withPager = true,
1456
- pagerOptions,
1457
- withSettings = true,
1458
- settingsProps,
1459
- withLocalFilters
1460
- } = props;
1461
- return /* @__PURE__ */ jsxs("div", {
1462
- className: classes.actions,
1463
- children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
1464
- ...pagerOptions,
1465
- totalRecords: pagerOptions.totalRecords,
1466
- isSkeleton,
1467
- isDesktop,
1468
- labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
1469
- labelOf: getLabel(dictionary.LABEL_OF)
1470
- }), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
1471
- ...settingsProps
1472
- })]
1473
- });
1474
- }
1475
877
  const DATAGRID_TEST_ID = "m4ldatagrid";
1476
878
  const PREFIX_TEST_ATTRIBUTE = "data-testid";
1477
879
  const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
880
+ const DATAGRID_PREFIX_NAME = "M4LDataGrid";
1478
881
  function DataGrid(props) {
1479
882
  const {
1480
883
  id,
@@ -1492,7 +895,7 @@ function DataGrid(props) {
1492
895
  initialRowHeightVariant,
1493
896
  checkedRows,
1494
897
  onCheckedRowsChange,
1495
- dataTestId
898
+ dataTestId = ""
1496
899
  } = props;
1497
900
  const ownerState = {
1498
901
  actionsProps,
@@ -1504,7 +907,7 @@ function DataGrid(props) {
1504
907
  className: classes.root,
1505
908
  ...process.env.NODE_ENV !== "production" ? {
1506
909
  [TEST_PROP_COLUMNS]: JSON.stringify(columns),
1507
- [PREFIX_TEST_ATTRIBUTE]: `m4ldatagrid-${dataTestId}`
910
+ [TEST_PROP_ID]: getNameDataTestId(DATAGRID_PREFIX_NAME, "root", dataTestId)
1508
911
  } : {},
1509
912
  children: /* @__PURE__ */ jsx(DataGridProvider, {
1510
913
  id: props.id,
@@ -1580,64 +983,6 @@ function columnConcatenatedValuesFormatter(props) {
1580
983
  });
1581
984
  };
1582
985
  }
1583
- const Input = styled("input")(() => ({
1584
- appearance: "none",
1585
- boxSizing: "border-box",
1586
- inlineSize: "100%",
1587
- blockSize: "100%",
1588
- paddingBlock: "0",
1589
- verticalAlign: "top",
1590
- textAlign: "right",
1591
- color: "var(--rdg-color)",
1592
- backgroundColor: "var(--rdg-background-color)",
1593
- fontFamily: "inherit",
1594
- "&:focus": {
1595
- outline: "none"
1596
- },
1597
- "&::placeholder": {
1598
- color: "#999",
1599
- opacity: "1"
1600
- }
1601
- }));
1602
- function autoFocusAndSelect(input) {
1603
- input?.focus();
1604
- input?.select();
1605
- }
1606
- function TextEditor({
1607
- row,
1608
- column,
1609
- onRowChange,
1610
- onClose
1611
- }) {
1612
- return /* @__PURE__ */ jsx(Input, {
1613
- className: "rdg-text-editor",
1614
- ref: autoFocusAndSelect,
1615
- value: row[column.key],
1616
- onChange: (event) => onRowChange({
1617
- ...row,
1618
- [column.key]: event.target.value
1619
- }),
1620
- onBlur: () => onClose(true)
1621
- });
1622
- }
1623
- function NumberEditor({
1624
- row,
1625
- column,
1626
- onRowChange,
1627
- onClose
1628
- }) {
1629
- return /* @__PURE__ */ jsx(Input, {
1630
- className: "rdg-text-editor",
1631
- ref: autoFocusAndSelect,
1632
- type: "number",
1633
- value: row[column.key],
1634
- onChange: (event) => onRowChange({
1635
- ...row,
1636
- [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
1637
- }),
1638
- onBlur: () => onClose(true)
1639
- });
1640
- }
1641
986
  const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
1642
987
  const rowsFinded = [];
1643
988
  if (set) {
@@ -1657,11 +1002,13 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
1657
1002
  };
1658
1003
  export {
1659
1004
  DataGrid as D,
1660
- NumberEditor as N,
1661
- TextEditor as T,
1662
- getDataGridRowsFromSet as a,
1663
- columnDateFormatter as b,
1664
- columnBooleanFormatter as c,
1665
- columnConcatenatedValuesFormatter as d,
1666
- getDataGridComponentsDictionary as g
1005
+ useFilters as a,
1006
+ dictionary as b,
1007
+ getDataGridRowsFromSet as c,
1008
+ dataGridClasses as d,
1009
+ columnBooleanFormatter as e,
1010
+ columnDateFormatter as f,
1011
+ getDataGridComponentsDictionary as g,
1012
+ columnConcatenatedValuesFormatter as h,
1013
+ useDataGrid as u
1667
1014
  };