@visns-studio/visns-components 5.6.11 → 5.6.13

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
@@ -60,7 +60,7 @@
60
60
  "truncate": "^3.0.0",
61
61
  "uuid": "^11.1.0",
62
62
  "validator": "^13.15.0",
63
- "vite": "^5.4.18",
63
+ "vite": "^5.4.19",
64
64
  "yarn": "^1.22.22",
65
65
  "yet-another-react-lightbox": "^3.23.0"
66
66
  },
@@ -84,7 +84,7 @@
84
84
  "react-dom": "^17.0.0 || ^18.0.0"
85
85
  },
86
86
  "name": "@visns-studio/visns-components",
87
- "version": "5.6.11",
87
+ "version": "5.6.13",
88
88
  "description": "Various packages to assist in the development of our Custom Applications.",
89
89
  "main": "src/index.js",
90
90
  "files": [
@@ -935,6 +935,12 @@ const DataGrid = forwardRef(
935
935
  const cellElement = event.target.closest(
936
936
  '.InovuaReactDataGrid__cell'
937
937
  );
938
+
939
+ // Add null check to prevent errors when cellElement is null
940
+ if (!cellElement) {
941
+ return; // Exit early if no cell element was found
942
+ }
943
+
938
944
  const columnIndex = Array.from(
939
945
  cellElement.parentNode.children
940
946
  ).indexOf(cellElement);
@@ -1042,6 +1048,12 @@ const DataGrid = forwardRef(
1042
1048
  const cellElement = event.target.closest(
1043
1049
  '.InovuaReactDataGrid__cell'
1044
1050
  );
1051
+
1052
+ // Add null check to prevent errors when cellElement is null
1053
+ if (!cellElement) {
1054
+ return; // Exit early if no cell element was found
1055
+ }
1056
+
1045
1057
  const columnIndex = Array.from(
1046
1058
  cellElement.parentNode.children
1047
1059
  ).indexOf(cellElement);
@@ -2773,13 +2785,68 @@ const DataGrid = forwardRef(
2773
2785
  e.preventDefault();
2774
2786
 
2775
2787
  // Check if every required field in column.validate exists and is truthy in data
2776
- const isValid =
2777
- column.validate?.every(
2778
- (v) =>
2779
- data[v]
2780
- ) ?? true;
2788
+ if (
2789
+ column.validate &&
2790
+ column.validate
2791
+ .length > 0
2792
+ ) {
2793
+ const missingFields =
2794
+ column.validate.filter(
2795
+ (v) =>
2796
+ !data[
2797
+ v
2798
+ ]
2799
+ );
2781
2800
 
2782
- if (isValid) {
2801
+ if (
2802
+ missingFields.length ===
2803
+ 0
2804
+ ) {
2805
+ handleTimer(
2806
+ data[
2807
+ form
2808
+ .primaryKey
2809
+ ],
2810
+ column.id
2811
+ );
2812
+ } else {
2813
+ // Format field names to be more readable
2814
+ const formattedFields =
2815
+ missingFields.map(
2816
+ (
2817
+ field
2818
+ ) => {
2819
+ // Try to find the column with this field ID to get its label
2820
+ const fieldColumn =
2821
+ columns.find(
2822
+ (
2823
+ col
2824
+ ) =>
2825
+ col.id ===
2826
+ field
2827
+ );
2828
+ // Use the label if found, otherwise use the field ID
2829
+ return (
2830
+ fieldColumn?.label ||
2831
+ field
2832
+ );
2833
+ }
2834
+ );
2835
+
2836
+ const fieldList =
2837
+ formattedFields.join(
2838
+ ', '
2839
+ );
2840
+ toast.error(
2841
+ `Please complete the following required field${
2842
+ missingFields.length >
2843
+ 1
2844
+ ? 's'
2845
+ : ''
2846
+ } before starting the timer: ${fieldList}`
2847
+ );
2848
+ }
2849
+ } else {
2783
2850
  handleTimer(
2784
2851
  data[
2785
2852
  form
@@ -2787,10 +2854,6 @@ const DataGrid = forwardRef(
2787
2854
  ],
2788
2855
  column.id
2789
2856
  );
2790
- } else {
2791
- toast.error(
2792
- 'Please complete the required fields before starting the timer.'
2793
- );
2794
2857
  }
2795
2858
  }}
2796
2859
  >
@@ -32,16 +32,16 @@
32
32
  padding: 8px 16px;
33
33
  font-weight: 600;
34
34
  font-size: 0.9rem;
35
- background-color: #000;
36
- color: #fff;
35
+ background-color: var(--primary-color, #000);
36
+ color: var(--tertiary-color, #fff);
37
37
  transition: all 0.2s ease;
38
38
  position: relative;
39
39
  text-decoration: none;
40
40
  }
41
41
 
42
42
  .parentLink:hover {
43
- background-color: #222 !important;
44
- color: #fff !important;
43
+ background-color: var(--secondary-color, #222) !important;
44
+ color: var(--tertiary-color, #fff) !important;
45
45
  text-decoration: none;
46
46
  }
47
47
 
@@ -50,7 +50,7 @@
50
50
  font-size: 7px;
51
51
  transition: transform 0.3s ease;
52
52
  margin-left: 8px;
53
- color: rgba(255, 255, 255, 0.8);
53
+ color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.8);
54
54
  }
55
55
 
56
56
  .arrowDown {
@@ -63,7 +63,7 @@
63
63
  overflow: hidden;
64
64
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
65
65
  opacity: 0;
66
- background-color: #f5f5f5;
66
+ background-color: var(--bg-color, #f5f5f5);
67
67
  }
68
68
 
69
69
  .visibleMenu {
@@ -74,7 +74,7 @@
74
74
  .childItem {
75
75
  margin: 0;
76
76
  position: relative;
77
- border-bottom: 1px solid rgba(0, 0, 0, 0.03);
77
+ border-bottom: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.03);
78
78
  }
79
79
 
80
80
  .childItem:last-child {
@@ -83,8 +83,8 @@
83
83
 
84
84
  .childLink {
85
85
  padding: 6px 16px 6px 26px;
86
- background-color: #f5f5f5;
87
- color: #333;
86
+ background-color: var(--bg-color, #f5f5f5);
87
+ color: var(--paragraph-color, #333);
88
88
  font-weight: normal;
89
89
  font-size: 0.85rem;
90
90
  display: block;
@@ -92,8 +92,8 @@
92
92
  }
93
93
 
94
94
  .childLink:hover {
95
- background-color: #e8e8e8 !important;
96
- color: #000 !important;
95
+ background-color: var(--hover-color, #e8e8e8) !important;
96
+ color: var(--primary-color, #000) !important;
97
97
  text-decoration: none;
98
98
  }
99
99
 
@@ -101,20 +101,20 @@
101
101
  display: inline-block;
102
102
  margin-right: 8px;
103
103
  font-size: 8px;
104
- color: #999;
104
+ color: rgba(var(--paragraph-color-rgb, 153, 153, 153), 0.6);
105
105
  }
106
106
 
107
107
  /* Active states */
108
108
  .subactive {
109
109
  font-weight: 600;
110
- background: #000 !important;
111
- color: #fff !important;
110
+ background: var(--primary-color, #000) !important;
111
+ color: var(--tertiary-color, #fff) !important;
112
112
  }
113
113
 
114
114
  .subactivechildren {
115
115
  font-weight: 500;
116
- background-color: #f0f0f0 !important;
117
- color: #000 !important;
116
+ background-color: var(--hover-color, #f0f0f0) !important;
117
+ color: var(--primary-color, #000) !important;
118
118
  }
119
119
 
120
120
  /* Base link styling */
@@ -122,23 +122,23 @@
122
122
  display: block;
123
123
  padding: 6px 16px;
124
124
  text-decoration: none;
125
- background: #f5f5f5;
126
- color: #333;
125
+ background: var(--bg-color, #f5f5f5);
126
+ color: var(--paragraph-color, #333);
127
127
  font-size: 0.85rem;
128
128
  transition: all 0.2s ease;
129
129
  cursor: pointer;
130
130
  }
131
131
 
132
132
  .link:hover {
133
- background: #e8e8e8 !important;
134
- color: #000 !important;
133
+ background: var(--hover-color, #e8e8e8) !important;
134
+ color: var(--primary-color, #000) !important;
135
135
  text-decoration: none;
136
136
  }
137
137
 
138
138
  .activetab button {
139
139
  font-weight: bold;
140
- background: #e0e0e0 !important;
141
- color: #333 !important;
140
+ background: var(--hover-color, #e0e0e0) !important;
141
+ color: var(--paragraph-color, #333) !important;
142
142
  }
143
143
 
144
144
  /* Mobile menu toggle button */
@@ -147,18 +147,18 @@
147
147
  align-items: center;
148
148
  justify-content: space-between;
149
149
  padding: 12px 15px;
150
- background: #000;
151
- color: white;
150
+ background: var(--primary-color, #000);
151
+ color: var(--tertiary-color, white);
152
152
  border-radius: 8px;
153
153
  cursor: pointer;
154
154
  margin-bottom: 10px;
155
155
  border: none;
156
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
156
+ box-shadow: 0 1px 3px rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.2);
157
157
  }
158
158
 
159
159
  .activeFilterLabel {
160
160
  font-weight: 600;
161
- color: white;
161
+ color: var(--tertiary-color, white);
162
162
  }
163
163
 
164
164
  .mobileMenuIcon {
@@ -175,7 +175,7 @@
175
175
  display: block;
176
176
  height: 2px;
177
177
  width: 100%;
178
- background-color: white;
178
+ background-color: var(--tertiary-color, white);
179
179
  border-radius: 2px;
180
180
  transition: all 0.3s ease;
181
181
  }
@@ -209,10 +209,10 @@
209
209
  display: block;
210
210
  max-height: 1000px;
211
211
  overflow-y: auto;
212
- border: 1px solid rgba(0, 0, 0, 0.1);
212
+ border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
213
213
  border-radius: 8px;
214
214
  margin-bottom: 10px;
215
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
215
+ box-shadow: 0 2px 5px rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
216
216
  }
217
217
 
218
218
  .parentLink {