@visns-studio/visns-components 5.15.34 → 5.16.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.
package/package.json
CHANGED
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
"@nivo/core": "^0.87.0",
|
|
13
13
|
"@nivo/line": "^0.87.0",
|
|
14
14
|
"@nivo/pie": "^0.87.0",
|
|
15
|
-
"@react-pdf/renderer": "^4.
|
|
16
|
-
"@tanstack/react-query": "^5.
|
|
15
|
+
"@react-pdf/renderer": "^4.5.1",
|
|
16
|
+
"@tanstack/react-query": "^5.99.2",
|
|
17
17
|
"@tinymce/miniature": "^6.0.0",
|
|
18
18
|
"@tinymce/tinymce-react": "^6.3.0",
|
|
19
|
-
"@uiw/react-color": "^2.
|
|
19
|
+
"@uiw/react-color": "^2.10.1",
|
|
20
20
|
"@visns-studio/visns-datagrid-community": "1.1.0",
|
|
21
21
|
"@visns-studio/visns-datagrid-enterprise": "1.1.0",
|
|
22
22
|
"@vitejs/plugin-react": "^4.7.0",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"framer-motion": "^12.38.0",
|
|
31
31
|
"html-react-parser": "^5.2.17",
|
|
32
32
|
"html2canvas": "^1.4.1",
|
|
33
|
-
"lodash": "^4.
|
|
33
|
+
"lodash": "^4.18.1",
|
|
34
34
|
"lodash.debounce": "^4.0.8",
|
|
35
35
|
"lucide-react": "^0.544.0",
|
|
36
|
-
"mapbox-gl": "^3.
|
|
36
|
+
"mapbox-gl": "^3.22.0",
|
|
37
37
|
"moment": "^2.30.1",
|
|
38
38
|
"motion": "^12.38.0",
|
|
39
39
|
"numeral": "^2.0.6",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"react-slugify": "^4.0.1",
|
|
58
58
|
"react-sortable-hoc": "^2.0.0",
|
|
59
59
|
"react-to-print": "^3.3.0",
|
|
60
|
-
"react-toastify": "^11.0
|
|
60
|
+
"react-toastify": "^11.1.0",
|
|
61
61
|
"react-toggle": "^4.1.3",
|
|
62
|
-
"react-tooltip": "^5.30.
|
|
62
|
+
"react-tooltip": "^5.30.1",
|
|
63
63
|
"react-window": "^1.8.11",
|
|
64
64
|
"reactjs-popup": "^2.0.6",
|
|
65
65
|
"style-loader": "^4.0.0",
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
"tesseract.js": "^6.0.1",
|
|
69
69
|
"truncate": "^3.0.0",
|
|
70
70
|
"uuid": "^11.1.0",
|
|
71
|
-
"validator": "^13.15.
|
|
72
|
-
"vite": "^6.4.
|
|
71
|
+
"validator": "^13.15.35",
|
|
72
|
+
"vite": "^6.4.2",
|
|
73
73
|
"xlsx": "^0.18.5",
|
|
74
74
|
"yarn": "^1.22.22",
|
|
75
|
-
"yet-another-react-lightbox": "^3.
|
|
75
|
+
"yet-another-react-lightbox": "^3.31.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
78
|
"@babel/core": "^7.29.0",
|
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
"copy-webpack-plugin": "^13.0.1",
|
|
84
84
|
"css-loader": "^7.1.4",
|
|
85
85
|
"css-minimizer-webpack-plugin": "^7.0.4",
|
|
86
|
-
"mini-css-extract-plugin": "^2.10.
|
|
86
|
+
"mini-css-extract-plugin": "^2.10.2",
|
|
87
87
|
"react": "^18.3.1",
|
|
88
88
|
"react-dom": "^18.3.1",
|
|
89
|
-
"sass": "^1.
|
|
89
|
+
"sass": "^1.99.0",
|
|
90
90
|
"sass-loader": "^16.0.7"
|
|
91
91
|
},
|
|
92
92
|
"peerDependencies": {
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
95
95
|
},
|
|
96
96
|
"name": "@visns-studio/visns-components",
|
|
97
|
-
"version": "5.
|
|
97
|
+
"version": "5.16.0",
|
|
98
98
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
99
99
|
"main": "src/index.js",
|
|
100
100
|
"files": [
|
|
@@ -472,16 +472,19 @@ const DataGrid = forwardRef(
|
|
|
472
472
|
setColumnsMetadata(res.metadata);
|
|
473
473
|
}
|
|
474
474
|
|
|
475
|
-
//
|
|
475
|
+
// Group rows together while preserving the backend's sortBy order:
|
|
476
|
+
// first appearance of each group key determines group order, so when
|
|
477
|
+
// the backend sorts by e.g. pickling_completed_at desc, groups appear
|
|
478
|
+
// in the order their most-recent member finished.
|
|
476
479
|
if (ajaxSetting?.groupBy?.length > 0) {
|
|
477
480
|
const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
const
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
481
|
+
const buckets = new Map();
|
|
482
|
+
for (const row of res.data) {
|
|
483
|
+
const key = (row[groupField] ?? '').toString();
|
|
484
|
+
if (!buckets.has(key)) buckets.set(key, []);
|
|
485
|
+
buckets.get(key).push(row);
|
|
486
|
+
}
|
|
487
|
+
res.data = Array.from(buckets.values()).flat();
|
|
485
488
|
|
|
486
489
|
// Initialize all groups as collapsed when data is first loaded
|
|
487
490
|
if (
|
|
@@ -3933,6 +3936,89 @@ const DataGrid = forwardRef(
|
|
|
3933
3936
|
/>
|
|
3934
3937
|
)}
|
|
3935
3938
|
</strong>
|
|
3939
|
+
{/* Display fields surfaced from the group's rows. Assumes value is consistent
|
|
3940
|
+
across the group (e.g. set via groupUpdate). Skips empty values. */}
|
|
3941
|
+
{(() => {
|
|
3942
|
+
const displayFields =
|
|
3943
|
+
ajaxSetting
|
|
3944
|
+
?.groupBySetting
|
|
3945
|
+
?.displayFields ||
|
|
3946
|
+
[];
|
|
3947
|
+
if (
|
|
3948
|
+
!displayFields.length ||
|
|
3949
|
+
!ajaxSetting?.groupBy
|
|
3950
|
+
)
|
|
3951
|
+
return null;
|
|
3952
|
+
const groupField =
|
|
3953
|
+
ajaxSetting
|
|
3954
|
+
.groupBy[0];
|
|
3955
|
+
const groupRow =
|
|
3956
|
+
dataRef.current?.find(
|
|
3957
|
+
(row) =>
|
|
3958
|
+
row[
|
|
3959
|
+
groupField
|
|
3960
|
+
] ===
|
|
3961
|
+
groupValue
|
|
3962
|
+
);
|
|
3963
|
+
if (!groupRow)
|
|
3964
|
+
return null;
|
|
3965
|
+
return displayFields.map(
|
|
3966
|
+
(fieldId) => {
|
|
3967
|
+
const value =
|
|
3968
|
+
groupRow[
|
|
3969
|
+
fieldId
|
|
3970
|
+
];
|
|
3971
|
+
if (
|
|
3972
|
+
value ===
|
|
3973
|
+
null ||
|
|
3974
|
+
value ===
|
|
3975
|
+
undefined ||
|
|
3976
|
+
value ===
|
|
3977
|
+
''
|
|
3978
|
+
)
|
|
3979
|
+
return null;
|
|
3980
|
+
const colDef =
|
|
3981
|
+
columns?.find(
|
|
3982
|
+
(
|
|
3983
|
+
c
|
|
3984
|
+
) =>
|
|
3985
|
+
c.id ===
|
|
3986
|
+
fieldId
|
|
3987
|
+
);
|
|
3988
|
+
const label =
|
|
3989
|
+
colDef?.label ||
|
|
3990
|
+
fieldId;
|
|
3991
|
+
return (
|
|
3992
|
+
<span
|
|
3993
|
+
key={`group-display-${fieldId}`}
|
|
3994
|
+
className={
|
|
3995
|
+
styles.groupHeaderDisplayField
|
|
3996
|
+
}
|
|
3997
|
+
>
|
|
3998
|
+
<span
|
|
3999
|
+
className={
|
|
4000
|
+
styles.groupHeaderDisplayFieldLabel
|
|
4001
|
+
}
|
|
4002
|
+
>
|
|
4003
|
+
{
|
|
4004
|
+
label
|
|
4005
|
+
}
|
|
4006
|
+
:
|
|
4007
|
+
</span>{' '}
|
|
4008
|
+
<span
|
|
4009
|
+
className={
|
|
4010
|
+
styles.groupHeaderDisplayFieldValue
|
|
4011
|
+
}
|
|
4012
|
+
>
|
|
4013
|
+
{
|
|
4014
|
+
value
|
|
4015
|
+
}
|
|
4016
|
+
</span>
|
|
4017
|
+
</span>
|
|
4018
|
+
);
|
|
4019
|
+
}
|
|
4020
|
+
);
|
|
4021
|
+
})()}
|
|
3936
4022
|
{/* Click indicator */}
|
|
3937
4023
|
<span
|
|
3938
4024
|
className={
|
|
@@ -1380,6 +1380,7 @@ export const renderRelationArrayColumn = ({
|
|
|
1380
1380
|
sortable: isSortable,
|
|
1381
1381
|
filterEditor: filterEditor,
|
|
1382
1382
|
filterEditorProps: filterEditorProps,
|
|
1383
|
+
className: 'cell-word-wrap',
|
|
1383
1384
|
render: ({ data }) => {
|
|
1384
1385
|
const relationValue = column.id.reduce(
|
|
1385
1386
|
(acc, id) =>
|
|
@@ -1454,7 +1455,11 @@ export const renderRelationArrayColumn = ({
|
|
|
1454
1455
|
}
|
|
1455
1456
|
|
|
1456
1457
|
return (
|
|
1457
|
-
<CellWithTooltip
|
|
1458
|
+
<CellWithTooltip
|
|
1459
|
+
value={result}
|
|
1460
|
+
columnType="relationArray"
|
|
1461
|
+
wordWrap
|
|
1462
|
+
>
|
|
1458
1463
|
<span>{parse(result)}</span>
|
|
1459
1464
|
</CellWithTooltip>
|
|
1460
1465
|
);
|
|
@@ -1479,7 +1484,11 @@ export const renderRelationArrayColumn = ({
|
|
|
1479
1484
|
}
|
|
1480
1485
|
|
|
1481
1486
|
return (
|
|
1482
|
-
<CellWithTooltip
|
|
1487
|
+
<CellWithTooltip
|
|
1488
|
+
value={result}
|
|
1489
|
+
columnType="relationArray"
|
|
1490
|
+
wordWrap
|
|
1491
|
+
>
|
|
1483
1492
|
<span>{parse(result)}</span>
|
|
1484
1493
|
</CellWithTooltip>
|
|
1485
1494
|
);
|
|
@@ -1050,6 +1050,32 @@
|
|
|
1050
1050
|
user-select: none;
|
|
1051
1051
|
}
|
|
1052
1052
|
|
|
1053
|
+
.groupHeaderDisplayField {
|
|
1054
|
+
display: inline-flex;
|
|
1055
|
+
align-items: baseline;
|
|
1056
|
+
gap: 4px;
|
|
1057
|
+
padding: 2px 8px;
|
|
1058
|
+
margin-left: 4px;
|
|
1059
|
+
background: rgba(59, 130, 246, 0.08);
|
|
1060
|
+
border: 1px solid rgba(59, 130, 246, 0.18);
|
|
1061
|
+
border-radius: 10px;
|
|
1062
|
+
font-size: 0.72rem;
|
|
1063
|
+
line-height: 1.2;
|
|
1064
|
+
white-space: nowrap;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
.groupHeaderDisplayFieldLabel {
|
|
1068
|
+
color: #6b7280;
|
|
1069
|
+
font-weight: 500;
|
|
1070
|
+
text-transform: none;
|
|
1071
|
+
letter-spacing: 0;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.groupHeaderDisplayFieldValue {
|
|
1075
|
+
color: var(--secondary-color, #1f2937);
|
|
1076
|
+
font-weight: 600;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1053
1079
|
.groupHeaderContainer {
|
|
1054
1080
|
display: flex;
|
|
1055
1081
|
align-items: center;
|