@m4l/styles 0.0.21 → 0.0.23

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 (31) hide show
  1. package/index.js +10 -10
  2. package/package.json +1 -1
  3. package/theme/{defaultThemeOptions.81e20130.js → defaultThemeOptions.605b5b1a.js} +5 -5
  4. package/theme/index.c8a2f20d.js +7 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LAccordion.d.ts +1 -0
  6. package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.d.ts +47 -26
  7. package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.d.ts +5604 -190
  8. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +14 -2
  9. package/theme/overrides/M4LExtendedComponents/M4LAvatar.d.ts +4 -1
  10. package/theme/overrides/M4LExtendedComponents/M4LButton.d.ts +4 -0
  11. package/theme/overrides/M4LExtendedComponents/M4LCheckBox.d.ts +56 -0
  12. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +450 -0
  13. package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts +21 -2
  14. package/theme/overrides/M4LExtendedComponents/M4LMasterDetailLayout.d.ts +6 -0
  15. package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts +110 -0
  16. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +4 -0
  17. package/theme/overrides/M4LExtendedComponents/{index.9ecb9eb5.js → index.566e183a.js} +642 -108
  18. package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts +64 -30
  19. package/theme/overrides/M4LRHFComponents/M4LRHFAutocompleteAsync.d.ts +1 -0
  20. package/theme/overrides/M4LRHFComponents/{index.e3118e8b.js → index.0e107243.js} +67 -38
  21. package/theme/overrides/MUIComponents/Autocomplete.d.ts +13 -2
  22. package/theme/overrides/MUIComponents/DataGrid.d.ts +1 -1616
  23. package/theme/overrides/MUIComponents/{index.25926753.js → index.b9c696e9.js} +37 -26
  24. package/theme/overrides/index.ed4b5bcb.js +93 -0
  25. package/theme/{palette.ad96498c.js → palette.688aaf56.js} +3 -3
  26. package/theme/{shadows.c56e8ae9.js → shadows.1b2f7a87.js} +1 -1
  27. package/theme/{typography.39389e10.js → typography.86a19de9.js} +4 -4
  28. package/utils/{getColorPresets.82f91ceb.js → getColorPresets.8106cfef.js} +1 -1
  29. package/utils/{getColorState.0e5b3a7c.js → getColorState.7b615773.js} +33 -33
  30. package/theme/index.38ad102a.js +0 -7
  31. package/theme/overrides/index.05460ef6.js +0 -90
package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts CHANGED
@@ -209,8 +209,20 @@ export declare const M4LAreasViewer: (theme: Theme) => {
209
209
  "& .M4LTypography-root .MuiTypography-root": {
210
210
  [x: string]: any;
211
211
  };
212
- "& .M4LIcon-icon": {
213
- backgroundColor: string;
212
+ "& .MuiButtonBase-root": {
213
+ "& .M4LIcon-icon": {
214
+ backgroundColor: string;
215
+ };
216
+ };
217
+ "& .Mui-disabled": {
218
+ "& .M4LIcon-icon": {
219
+ backgroundColor: string;
220
+ };
221
+ };
222
+ "& .MuiButtonBase-root:hover": {
223
+ "& .M4LIcon-icon": {
224
+ backgroundColor: string;
225
+ };
214
226
  };
215
227
  };
216
228
  };
package/theme/overrides/M4LExtendedComponents/M4LAvatar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LAvatar: (_theme: Theme) => {
2
+ export declare const M4LAvatar: (theme: Theme) => {
3
3
  M4LAvatar: {
4
4
  styleOverrides: {
5
5
  '&.M4LAvatar-root': {
@@ -7,6 +7,9 @@ export declare const M4LAvatar: (_theme: Theme) => {
7
7
  width: string;
8
8
  height: string;
9
9
  borderRadius: string;
10
+ padding: string;
11
+ background: string;
12
+ color: string | undefined;
10
13
  };
11
14
  test: string;
12
15
  };
package/theme/overrides/M4LExtendedComponents/M4LButton.d.ts CHANGED
@@ -190,6 +190,10 @@ export declare const M4LButton: (theme: Theme) => {
190
190
  };
191
191
  };
192
192
  };
193
+ '&.M4LButton-colorError .MuiButtonBase-root': {
194
+ backgroundColor: string;
195
+ test: string;
196
+ };
193
197
  width: string;
194
198
  display: string;
195
199
  justifyContent: string;
package/theme/overrides/M4LExtendedComponents/M4LCheckBox.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const M4LCheckBox: (theme: Theme) => {
3
+ M4LCheckBox: {
4
+ styleOverrides: {
5
+ '&.M4LCheckBox-root': {
6
+ display: string;
7
+ flexDirection: string;
8
+ gap: string;
9
+ '& .MuiTypography-root': {
10
+ color: string;
11
+ };
12
+ '.M4LCheckBox-small .MuiButtonBase-root': {
13
+ width: string;
14
+ height: string;
15
+ };
16
+ '.MuiCheckbox-root .MuiSvgIcon-fontSizeSmall': {
17
+ width: string;
18
+ height: string;
19
+ };
20
+ '.M4LCheckBox-medium .MuiButtonBase-root': {
21
+ width: string;
22
+ height: string;
23
+ };
24
+ '.MuiCheckbox-root .MuiSvgIcon-fontSizeMedium': {
25
+ width: string;
26
+ height: string;
27
+ };
28
+ '.MuiButtonBase-root': {
29
+ borderRadius: string;
30
+ };
31
+ '.MuiButtonBase-root:hover': {
32
+ backgroundColor: string;
33
+ };
34
+ '.Mui-focusVisible': {
35
+ border: string;
36
+ borderColor: string;
37
+ };
38
+ '.MuiButtonBase-root:hover .MuiSvgIcon-root': {
39
+ fill: string;
40
+ };
41
+ '.M4LCheckBox-checkTypography .MuiTypography-root': {
42
+ [x: string]: any;
43
+ };
44
+ '.M4LCheckBox-stateDisabled .MuiSvgIcon-root': {
45
+ fill: string;
46
+ };
47
+ '.M4LCheckBox-stateDisabled .MuiTypography-root': {
48
+ color: string;
49
+ };
50
+ '.MuiButtonBase-root .Mui-focusVisible:focus-visible': {
51
+ outline: string;
52
+ };
53
+ };
54
+ };
55
+ };
56
+ };
package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts ADDED
@@ -0,0 +1,450 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const M4LDataGrid: (theme: Theme) => {
3
+ M4LDataGrid: {
4
+ styleOverrides: {
5
+ '&.M4LDataGrid-root': {
6
+ background: string;
7
+ boxShadow: string;
8
+ borderRadius: string;
9
+ padding: string;
10
+ display: string;
11
+ position: string;
12
+ flexDirection: string;
13
+ gap: string;
14
+ height: string;
15
+ borderTop: string;
16
+ borderColor: string;
17
+ width: string;
18
+ '& .M4LDataGrid-actions': {
19
+ left: string;
20
+ right: string;
21
+ top: string;
22
+ padding: string;
23
+ display: string;
24
+ flexDirection: string;
25
+ borderRadius: string;
26
+ alignItems: string;
27
+ justifyContent: string;
28
+ background: string;
29
+ position: string;
30
+ gap: string;
31
+ "& .M4LDataGrid-actionsConfigContainer": {
32
+ display: string;
33
+ flexDirection: string;
34
+ gap: string;
35
+ "& .M4LIconButton-root": {
36
+ background: string;
37
+ boxShadow: string;
38
+ borderTop: string;
39
+ borderColor: string;
40
+ };
41
+ };
42
+ '& .M4LDataGrid-rowsCount': {
43
+ display: string;
44
+ '& .M4LDataGrid-rowsCountLabel': {};
45
+ '& .M4LDataGrid-rowsCountValue': {
46
+ marginLeft: string;
47
+ paddingTop: string;
48
+ paddingBottom: string;
49
+ paddingLeft: string;
50
+ paddingRight: string;
51
+ border: string;
52
+ };
53
+ };
54
+ '& .M4LDataGrid-actionFilter': {};
55
+ '& .M4LDataGrid-actionSettings': {};
56
+ };
57
+ '& .M4LDataGrid-tableContaniner': {
58
+ [x: string]: string | {
59
+ top: string;
60
+ position?: undefined;
61
+ height?: undefined;
62
+ overflow?: undefined;
63
+ '& .rdg '?: undefined;
64
+ '& .rdg::-webkit-scrollbar'?: undefined;
65
+ '& .rdg::-webkit-scrollbar-track'?: undefined;
66
+ '& .rdg::-webkit-scrollbar-corner'?: undefined;
67
+ '& ::-webkit-scrollbar-thumb'?: undefined;
68
+ '& [role="columnheader"]'?: undefined;
69
+ "& .rdg-row"?: undefined;
70
+ '& .rdg-cell'?: undefined;
71
+ '& [aria-selected=true]'?: undefined;
72
+ '& .rdg-cell.rdg-cell-align-left'?: undefined;
73
+ '& .rdg-cell.rdg-cell-align-center'?: undefined;
74
+ '& .rdg-cell.rdg-cell-align-right'?: undefined;
75
+ '& .rdg-row .rdg-cell-frozen-last:after'?: undefined;
76
+ '& .rdg-row :last-child:after'?: undefined;
77
+ '& .rdg-header-row .rdg-cell'?: undefined;
78
+ '& .rdg-header-row :last-child.rdg-cell'?: undefined;
79
+ '& .filter_cell_div'?: undefined;
80
+ '& .rdg-header-sort-cell'?: undefined;
81
+ '& [aria-columnsort="ASC"]'?: undefined;
82
+ '& [aria-columnsort="DESC"]'?: undefined;
83
+ } | {
84
+ position: string;
85
+ height: string;
86
+ overflow: string;
87
+ '& .rdg ': {
88
+ border: string;
89
+ background: string;
90
+ gridColumnGap: string;
91
+ gridRowGap: string;
92
+ userSelect: string;
93
+ height: string;
94
+ contentVisibility: string;
95
+ overflow: string;
96
+ borderRadius: string;
97
+ padding: string;
98
+ borderColor: string;
99
+ '--rdg-grid-inline-size': string;
100
+ '--rdg-header-background-color': string;
101
+ '--rdg-row-selected-background-color': string;
102
+ '--rdg-row-hover-background-color': string;
103
+ '--rdg-background-color': string;
104
+ '--rdg-selection-color': string;
105
+ '--row-selected-hover-background-color': string;
106
+ '--rdg-checkbox-color': string;
107
+ '--rdg-checkbox-focus-color': string;
108
+ '--rdg-border-color': string;
109
+ };
110
+ '& .rdg::-webkit-scrollbar': {
111
+ width: string;
112
+ height: string;
113
+ borderRadius: string;
114
+ backgroundColor: string;
115
+ };
116
+ '& .rdg::-webkit-scrollbar-track': {
117
+ backgroundColor: string;
118
+ border: string;
119
+ };
120
+ '& .rdg::-webkit-scrollbar-corner': {
121
+ backgroundColor: string;
122
+ };
123
+ '& ::-webkit-scrollbar-thumb': {
124
+ borderRadius: string;
125
+ backgroundColor: string;
126
+ border: string;
127
+ };
128
+ '& [role="columnheader"]': {
129
+ justifyContent: string;
130
+ alignItems: string;
131
+ };
132
+ "& .rdg-row": {
133
+ '&[aria-selected="false"] .rdg-cell': {
134
+ backgroundColor: string;
135
+ };
136
+ '&:nth-child(odd)': {
137
+ '& .rdg-cell': {
138
+ backgroundColor: string;
139
+ };
140
+ };
141
+ '&[aria-selected="true"] .rdg-cell': {
142
+ backgroundColor: string;
143
+ };
144
+ '&:hover': {
145
+ '& .rdg-cell': {
146
+ backgroundColor: string;
147
+ };
148
+ };
149
+ backgroundColor: string;
150
+ };
151
+ '& .rdg-cell': {
152
+ fontFamily: import("csstype").Property.FontFamily | undefined;
153
+ fontWeight: import("csstype").Property.FontWeight | undefined;
154
+ fontSize: import("csstype").Property.FontSize<string | number> | undefined;
155
+ color: string;
156
+ borderBottom: string;
157
+ borderRight: string;
158
+ borderColor: string;
159
+ borderRadius: string;
160
+ display: string;
161
+ justifyContent: string;
162
+ alignItems: string;
163
+ textOverflow: string;
164
+ gridTemplateColumns: string;
165
+ '&.rdg-cell-frozen': {
166
+ display: string;
167
+ justifyContent: string;
168
+ alignItems: string;
169
+ };
170
+ '&:after': {
171
+ content: string;
172
+ borderRight: string;
173
+ position: string;
174
+ right: string;
175
+ height: string;
176
+ };
177
+ '& .m4l_icon': {
178
+ height: string;
179
+ };
180
+ };
181
+ '& [aria-selected=true]': {
182
+ backgroundColor: string;
183
+ color: string;
184
+ };
185
+ '& .rdg-cell.rdg-cell-align-left': {
186
+ textAlign: string;
187
+ display: string;
188
+ justifyContent: string;
189
+ alignItems: string;
190
+ };
191
+ '& .rdg-cell.rdg-cell-align-center': {
192
+ textAlign: string;
193
+ };
194
+ '& .rdg-cell.rdg-cell-align-right': {
195
+ textAlign: string;
196
+ };
197
+ '& .rdg-row .rdg-cell-frozen-last:after': {
198
+ borderRight: string;
199
+ boxShadow: string;
200
+ };
201
+ '& .rdg-row :last-child:after': {
202
+ borderRight: string;
203
+ borderColor: string;
204
+ };
205
+ '& .rdg-header-row .rdg-cell': {
206
+ fontFamily: Record<string, any>;
207
+ fontWeight: Record<string, any>;
208
+ fontSize: Record<string, any>;
209
+ color: string;
210
+ borderRight: string;
211
+ borderColor: string;
212
+ boxShadow: string;
213
+ gridTemplateColumns: string;
214
+ '&.rdg-cell-frozen-last': {
215
+ borderRight: string;
216
+ borderColor: string;
217
+ '&:after': {
218
+ borderRight: string;
219
+ borderColor: string;
220
+ };
221
+ boxShadow: string;
222
+ };
223
+ '& .rdg-sort-arrow': {
224
+ width: string;
225
+ margin: string;
226
+ };
227
+ };
228
+ '& .rdg-header-row :last-child.rdg-cell': {
229
+ borderTopRightRadius: string;
230
+ '&:after': {
231
+ borderRight: string;
232
+ };
233
+ };
234
+ '& .filter_cell_div': {
235
+ paddingLeft: string;
236
+ paddingRight: string;
237
+ };
238
+ '& .rdg-header-sort-cell': {
239
+ width: string;
240
+ flexGrow: string;
241
+ alignItems: string;
242
+ };
243
+ '& [aria-columnsort="ASC"]': {
244
+ borderTop: string;
245
+ };
246
+ '& [aria-columnsort="DESC"]': {
247
+ borderBottom: string;
248
+ };
249
+ top?: undefined;
250
+ };
251
+ display: string;
252
+ flexDirection: string;
253
+ position: string;
254
+ top: string;
255
+ bottom: string;
256
+ left: string;
257
+ right: string;
258
+ overflow: string;
259
+ borderRadius: string;
260
+ border: string;
261
+ boxshadow: string;
262
+ background: string;
263
+ padding: string;
264
+ '& .M4LDataGrid-wrapperDataGridCss': {
265
+ position: string;
266
+ height: string;
267
+ overflow: string;
268
+ '& .rdg ': {
269
+ border: string;
270
+ background: string;
271
+ gridColumnGap: string;
272
+ gridRowGap: string;
273
+ userSelect: string;
274
+ height: string;
275
+ contentVisibility: string;
276
+ overflow: string;
277
+ borderRadius: string;
278
+ padding: string;
279
+ borderColor: string;
280
+ '--rdg-grid-inline-size': string;
281
+ '--rdg-header-background-color': string;
282
+ '--rdg-row-selected-background-color': string;
283
+ '--rdg-row-hover-background-color': string;
284
+ '--rdg-background-color': string;
285
+ '--rdg-selection-color': string;
286
+ '--row-selected-hover-background-color': string;
287
+ '--rdg-checkbox-color': string;
288
+ '--rdg-checkbox-focus-color': string;
289
+ '--rdg-border-color': string;
290
+ };
291
+ '& .rdg::-webkit-scrollbar': {
292
+ width: string;
293
+ height: string;
294
+ borderRadius: string;
295
+ backgroundColor: string;
296
+ };
297
+ '& .rdg::-webkit-scrollbar-track': {
298
+ backgroundColor: string;
299
+ border: string;
300
+ };
301
+ '& .rdg::-webkit-scrollbar-corner': {
302
+ backgroundColor: string;
303
+ };
304
+ '& ::-webkit-scrollbar-thumb': {
305
+ borderRadius: string;
306
+ backgroundColor: string;
307
+ border: string;
308
+ };
309
+ '& [role="columnheader"]': {
310
+ justifyContent: string;
311
+ alignItems: string;
312
+ };
313
+ "& .rdg-row": {
314
+ '&[aria-selected="false"] .rdg-cell': {
315
+ backgroundColor: string;
316
+ };
317
+ '&:nth-child(odd)': {
318
+ '& .rdg-cell': {
319
+ backgroundColor: string;
320
+ };
321
+ };
322
+ '&[aria-selected="true"] .rdg-cell': {
323
+ backgroundColor: string;
324
+ };
325
+ '&:hover': {
326
+ '& .rdg-cell': {
327
+ backgroundColor: string;
328
+ };
329
+ };
330
+ backgroundColor: string;
331
+ };
332
+ '& .rdg-cell': {
333
+ fontFamily: import("csstype").Property.FontFamily | undefined;
334
+ fontWeight: import("csstype").Property.FontWeight | undefined;
335
+ fontSize: import("csstype").Property.FontSize<string | number> | undefined;
336
+ color: string;
337
+ borderBottom: string;
338
+ borderRight: string;
339
+ borderColor: string;
340
+ borderRadius: string;
341
+ display: string;
342
+ justifyContent: string;
343
+ alignItems: string;
344
+ textOverflow: string;
345
+ gridTemplateColumns: string;
346
+ '&.rdg-cell-frozen': {
347
+ display: string;
348
+ justifyContent: string;
349
+ alignItems: string;
350
+ };
351
+ '&:after': {
352
+ content: string;
353
+ borderRight: string;
354
+ position: string;
355
+ right: string;
356
+ height: string;
357
+ };
358
+ '& .m4l_icon': {
359
+ height: string;
360
+ };
361
+ };
362
+ '& [aria-selected=true]': {
363
+ backgroundColor: string;
364
+ color: string;
365
+ };
366
+ '& .rdg-cell.rdg-cell-align-left': {
367
+ textAlign: string;
368
+ display: string;
369
+ justifyContent: string;
370
+ alignItems: string;
371
+ };
372
+ '& .rdg-cell.rdg-cell-align-center': {
373
+ textAlign: string;
374
+ };
375
+ '& .rdg-cell.rdg-cell-align-right': {
376
+ textAlign: string;
377
+ };
378
+ '& .rdg-row .rdg-cell-frozen-last:after': {
379
+ borderRight: string;
380
+ boxShadow: string;
381
+ };
382
+ '& .rdg-row :last-child:after': {
383
+ borderRight: string;
384
+ borderColor: string;
385
+ };
386
+ '& .rdg-header-row .rdg-cell': {
387
+ fontFamily: Record<string, any>;
388
+ fontWeight: Record<string, any>;
389
+ fontSize: Record<string, any>;
390
+ color: string;
391
+ borderRight: string;
392
+ borderColor: string;
393
+ boxShadow: string;
394
+ gridTemplateColumns: string;
395
+ '&.rdg-cell-frozen-last': {
396
+ borderRight: string;
397
+ borderColor: string;
398
+ '&:after': {
399
+ borderRight: string;
400
+ borderColor: string;
401
+ };
402
+ boxShadow: string;
403
+ };
404
+ '& .rdg-sort-arrow': {
405
+ width: string;
406
+ margin: string;
407
+ };
408
+ };
409
+ '& .rdg-header-row :last-child.rdg-cell': {
410
+ borderTopRightRadius: string;
411
+ '&:after': {
412
+ borderRight: string;
413
+ };
414
+ };
415
+ '& .filter_cell_div': {
416
+ paddingLeft: string;
417
+ paddingRight: string;
418
+ };
419
+ '& .rdg-header-sort-cell': {
420
+ width: string;
421
+ flexGrow: string;
422
+ alignItems: string;
423
+ };
424
+ '& [aria-columnsort="ASC"]': {
425
+ borderTop: string;
426
+ };
427
+ '& [aria-columnsort="DESC"]': {
428
+ borderBottom: string;
429
+ };
430
+ };
431
+ };
432
+ '&.M4LDataGrid-withNoPager': {};
433
+ };
434
+ };
435
+ };
436
+ M4LDataGridDensityPopover: {
437
+ styleOverrides: {
438
+ '&.M4LDataGrid-actionDensityPopover': {
439
+ test: string;
440
+ };
441
+ };
442
+ };
443
+ M4LDataGridActionsFormatter: {
444
+ styleOverrides: {
445
+ '&.M4LDataGrid-actionsFormatter': {
446
+ test: string;
447
+ };
448
+ };
449
+ };
450
+ };