@m4l/components 0.1.80 → 0.1.81

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 (66) hide show
  1. package/@types/export.d.ts +4 -2
  2. package/components/AccountPopover/{index.00d1d15f.js → index.fea740a5.js} +2 -2
  3. package/components/AppBar/{index.c85b100d.js → index.6bdee075.js} +2 -2
  4. package/components/CommonActions/components/ActionCancel/{index.1051a117.js → index.6928b5ae.js} +1 -1
  5. package/components/CommonActions/components/ActionFormCancel/{index.a0d727b2.js → index.28d32483.js} +9 -9
  6. package/components/CommonActions/components/ActionFormIntro/{index.a20dc88d.js → index.f044e93c.js} +1 -1
  7. package/components/CommonActions/components/ActionIntro/{index.bfe3256c.js → index.8b1b3afc.js} +1 -1
  8. package/components/CommonActions/components/Actions/{index.19d67bc6.js → index.265d99c8.js} +7 -7
  9. package/components/DataGrid/{index.2f175eba.js → index.820e0043.js} +18 -676
  10. package/components/DataGrid/subcomponents/Actions/index.43325b59.js +618 -0
  11. package/components/DataGrid/subcomponents/editors/TextEditor/index.91380a55.js +64 -0
  12. package/components/DynamicFilter/{index.c1f9d560.js → index.2b80238b.js} +20 -20
  13. package/components/GridLayout/GridLayout.d.ts +1 -0
  14. package/components/GridLayout/classes/index.d.ts +4 -0
  15. package/components/GridLayout/classes/types.d.ts +17 -0
  16. package/components/GridLayout/constants.d.ts +26 -0
  17. package/components/GridLayout/{index.a792aacb.js → index.76bccc4f.js} +322 -575
  18. package/components/GridLayout/index.d.ts +4 -3
  19. package/components/GridLayout/subcomponents/Griditem/index.01fc14c3.js +370 -0
  20. package/components/GridLayout/subcomponents/Griditem/index.d.ts +9 -0
  21. package/components/GridLayout/subcomponents/Griditem/types.d.ts +103 -0
  22. package/components/GridLayout/subcomponents/Responsive/helper.d.ts +10 -0
  23. package/components/GridLayout/subcomponents/Responsive/index.d.ts +15 -2
  24. package/components/GridLayout/{Responsive/index.1671380a.js → subcomponents/Responsive/index.e589d8bf.js} +95 -139
  25. package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts +3 -6
  26. package/components/GridLayout/subcomponents/Responsive/types.d.ts +114 -33
  27. package/components/GridLayout/{WidthProvider/index.9a26dfe4.js → subcomponents/WidthProvider/index.50dafd87.js} +5 -5
  28. package/components/GridLayout/subcomponents/WidthProvider/index.d.ts +4 -5
  29. package/components/GridLayout/types.d.ts +83 -18
  30. package/components/GridLayout/utils.d.ts +15 -12
  31. package/components/HelperText/{index.6ef76993.js → index.2c408d8a.js} +2 -2
  32. package/components/LanguagePopover/{index.1564bd08.js → index.4596bf54.js} +2 -2
  33. package/components/ModalDialog/{index.fbc4cd71.js → index.62ffad3a.js} +3 -3
  34. package/components/NavLink/{index.6c9c2588.js → index.68392bd4.js} +2 -2
  35. package/components/ObjectLogs/{index.eab1c15f.js → index.665e043d.js} +11 -11
  36. package/components/Period/{index.26071a16.js → index.7d44c0e5.js} +8 -8
  37. package/components/PropertyValue/{index.18d3c0fd.js → index.a66988e1.js} +1 -1
  38. package/components/areas/components/AreasAdmin/{index.7a0dabbe.js → index.5562f65f.js} +19 -19
  39. package/components/areas/components/AreasViewer/{index.fd49f06c.js → index.1004b7a0.js} +31 -143
  40. package/components/areas/components/{index.7756928a.js → index.a441c8b1.js} +5 -5
  41. package/components/areas/contexts/AreasContext/helper.d.ts +2 -2
  42. package/components/areas/contexts/AreasContext/{index.0a08a08b.js → index.4bf1eabe.js} +12 -6
  43. package/components/areas/contexts/AreasContext/types.d.ts +4 -4
  44. package/components/areas/contexts/{index.b303b664.js → index.2938bc5a.js} +1 -1
  45. package/components/areas/hooks/useAreas/{index.c6eb2569.js → index.c77a2416.js} +1 -1
  46. package/components/areas/{index.6e67d89a.js → index.09851bae.js} +5 -5
  47. package/components/hook-form/RHFAutocomplete/{index.d1bbb015.js → index.9a9d7c73.js} +3 -3
  48. package/components/hook-form/RHFAutocompleteAsync/{index.f9a9ef48.js → index.172df421.js} +1 -1
  49. package/components/hook-form/RHFCheckbox/{index.7b4a21d7.js → index.47f0157b.js} +3 -3
  50. package/components/hook-form/RHFDateTime/{index.46cf616e.js → index.f46e987f.js} +3 -3
  51. package/components/hook-form/RHFPeriod/{index.ce513149.js → index.2e07ba7b.js} +2 -2
  52. package/components/hook-form/RHFTextField/{index.f7ee202c.js → index.253620eb.js} +1 -1
  53. package/components/hook-form/RHFUpload/{index.1befd5bb.js → index.9f00121f.js} +3 -3
  54. package/components/modal/{WindowBase.7e19843e.js → WindowBase.37b59511.js} +4 -4
  55. package/components/modal/{WindowConfirm.12a9608a.js → WindowConfirm.1a8c8c21.js} +10 -10
  56. package/components/modal/{index.b0a7236c.js → index.c8e23b8d.js} +7 -7
  57. package/components/mui_extended/Accordion/{index.a6447bf8.js → index.fa658639.js} +1 -1
  58. package/components/mui_extended/Tab/{index.c39a6681.js → index.f94d233e.js} +1 -1
  59. package/components/mui_extended/{index.d78bde19.js → index.07fcc38f.js} +2 -2
  60. package/contexts/ModalContext/{index.89805978.js → index.66e060a3.js} +1 -1
  61. package/hooks/useModal/{index.e1c5c31e.js → index.61968b84.js} +1 -1
  62. package/index.js +61 -58
  63. package/package.json +1 -2
  64. package/{vendor.f57d47a7.js → vendor.fefd45a3.js} +39 -36
  65. package/components/GridLayout/subcomponents/GridItem/index.d.ts +0 -26
  66. package/components/GridLayout/subcomponents/GridItem/types.d.ts +0 -78
@@ -1,51 +1,19 @@
1
+ import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.62ffad3a.js";
2
+ import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.82e89328.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.43325b59.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";
13
+ import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.e8de8e4c.js";
14
+ import "@m4l/graphics";
19
15
  import "../Icon/index.9fcd1476.js";
20
16
  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
17
  import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
50
18
  import { C as ConcatenatedFormatter } from "../formatters/index.67aeb049.js";
51
19
  const DataGridRoot = styled("div")(({
@@ -560,48 +528,6 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
560
528
  }
561
529
  return HeaderRenderer2;
562
530
  };
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
531
  const WrapperSkeleton = styled("div")(() => ({
606
532
  display: "flex",
607
533
  width: "100%",
@@ -879,70 +805,6 @@ function Table(props) {
879
805
  })
880
806
  });
881
807
  }
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
808
  const componentName = "M4LDataGrid";
947
809
  const dataGridClasses = generateUtilityClasses(componentName, [
948
810
  "root",
@@ -1000,438 +862,6 @@ const dataGridUtilityClasses = (ownerState) => {
1000
862
  ...composedClasses
1001
863
  };
1002
864
  };
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
865
  function getDataGridComponentsDictionary() {
1436
866
  return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
1437
867
  }
@@ -1440,38 +870,6 @@ const dictionary = {
1440
870
  LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
1441
871
  LABEL_OF: "pager.of"
1442
872
  };
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
873
  const DATAGRID_TEST_ID = "m4ldatagrid";
1476
874
  const PREFIX_TEST_ATTRIBUTE = "data-testid";
1477
875
  const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
@@ -1580,64 +978,6 @@ function columnConcatenatedValuesFormatter(props) {
1580
978
  });
1581
979
  };
1582
980
  }
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
981
  const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
1642
982
  const rowsFinded = [];
1643
983
  if (set) {
@@ -1657,11 +997,13 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
1657
997
  };
1658
998
  export {
1659
999
  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
1000
+ useFilters as a,
1001
+ dictionary as b,
1002
+ getDataGridRowsFromSet as c,
1003
+ dataGridClasses as d,
1004
+ columnBooleanFormatter as e,
1005
+ columnDateFormatter as f,
1006
+ getDataGridComponentsDictionary as g,
1007
+ columnConcatenatedValuesFormatter as h,
1008
+ useDataGrid as u
1667
1009
  };