@m4l/components 9.3.34-JT25112025.beta.2 → 9.3.34-JT25112025.beta.3
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/@types/export.d.ts +3 -0
- package/@types/types.d.ts +26 -5
- package/components/DataGrid/DataGrid.js +2 -0
- package/components/DataGrid/Datagrid.styles.js +45 -112
- package/components/DataGrid/contexts/DataGridContext/index.js +2 -0
- package/components/DataGrid/contexts/DataGridContext/types.d.ts +2 -2
- package/components/DataGrid/dictionary.d.ts +0 -1
- package/components/DataGrid/dictionary.js +1 -2
- package/components/DataGrid/formatters/ColumnIconFormatter/constants.d.ts +4 -0
- package/components/DataGrid/hooks/useModalCardDetail.d.ts +1 -1
- package/components/DataGrid/hooks/useModalCardDetail.js +1 -6
- package/components/DataGrid/icons.d.ts +0 -1
- package/components/DataGrid/icons.js +1 -2
- package/components/DataGrid/slots/DataGridEnum.d.ts +1 -4
- package/components/DataGrid/slots/DataGridEnum.js +0 -3
- package/components/DataGrid/slots/DataGridSlot.d.ts +0 -3
- package/components/DataGrid/slots/DataGridSlot.js +33 -48
- package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.d.ts +1 -1
- package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.js +5 -47
- package/components/DataGrid/subcomponents/Cards/index.js +3 -6
- package/components/DataGrid/subcomponents/Cards/subcomponents/CardDetails/index.d.ts +1 -1
- package/components/DataGrid/subcomponents/Cards/subcomponents/CardDetails/index.js +15 -59
- package/components/DataGrid/subcomponents/Cards/subcomponents/CardHeader/index.js +16 -8
- package/components/DataGrid/subcomponents/Cards/subcomponents/CardRow/index.d.ts +2 -2
- package/components/DataGrid/subcomponents/Cards/subcomponents/CardRow/index.js +1 -5
- package/components/DataGrid/subcomponents/Cards/types.d.ts +0 -16
- package/components/DataGrid/subcomponents/CheckboxCellAdapter/index.js +5 -2
- package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/index.js +2 -2
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.js +1 -1
- package/components/DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.js +1 -1
- package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +6 -2
- package/components/DataGrid/subcomponents/Table/index.js +1 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.js +0 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.js +14 -39
- package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +1 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +1 -1
- package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.d.ts +6 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.js +12 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.d.ts +64 -0
- package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.js +46 -0
- package/components/DataGrid/subcomponents/editors/TextEditor/index.js +1 -1
- package/components/DataGrid/types.d.ts +7 -12
- package/components/mui_extended/RadioButton/RadioButton.d.ts +24 -0
- package/components/mui_extended/RadioButton/RadioButton.js +110 -0
- package/components/mui_extended/RadioButton/RadioButton.styles.d.ts +2 -0
- package/components/mui_extended/RadioButton/RadioButton.styles.js +126 -0
- package/components/mui_extended/RadioButton/constants.d.ts +1 -0
- package/components/mui_extended/RadioButton/constants.js +4 -0
- package/components/mui_extended/RadioButton/icons.d.ts +4 -0
- package/components/mui_extended/RadioButton/icons.js +7 -0
- package/components/mui_extended/RadioButton/index.d.ts +1 -0
- package/components/mui_extended/RadioButton/index.js +1 -0
- package/components/mui_extended/RadioButton/slots/RadioButtonEnum.d.ts +8 -0
- package/components/mui_extended/RadioButton/slots/RadioButtonEnum.js +12 -0
- package/components/mui_extended/RadioButton/slots/RadioButtonSlots.d.ts +20 -0
- package/components/mui_extended/RadioButton/slots/RadioButtonSlots.js +39 -0
- package/components/mui_extended/RadioButton/types.d.ts +50 -0
- package/components/mui_extended/index.d.ts +1 -0
- package/index.js +42 -40
- package/package.json +1 -1
- package/components/DataGrid/formatters/ColumnTagsFormatter/tests/useColumnTags.test.d.ts +0 -1
- /package/components/DataGrid/{formatters/ColumnColorFormatter/tests/ColumnColorFormatter.test.d.ts → tests/table/subcomponents/RadioButtonFormatter.test.d.ts} +0 -0
- /package/components/DataGrid/{formatters/ColumnColorFormatter/tests/useColumnColor.test.d.ts → tests/table/subcomponents/RadioSelectColumn.test.d.ts} +0 -0
- /package/components/{DataGrid/formatters/ColumnTagsFormatter/tests/ColumnTagsFormatter.test.d.ts → mui_extended/RadioButton/tests/RadioButton.test.d.ts} +0 -0
package/@types/export.d.ts
CHANGED
|
@@ -55,6 +55,9 @@ declare module '@mui/material/styles' {
|
|
|
55
55
|
M4LCheckBox?: {
|
|
56
56
|
styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
|
|
57
57
|
};
|
|
58
|
+
M4LRadioButton?: {
|
|
59
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
|
|
60
|
+
};
|
|
58
61
|
M4LDataGrid?: {
|
|
59
62
|
styleOverrides?: ComponentsOverrides<Theme>['M4LDataGrid'];
|
|
60
63
|
};
|
package/@types/types.d.ts
CHANGED
|
@@ -76,6 +76,10 @@ import {
|
|
|
76
76
|
CheckBoxOwnerState,
|
|
77
77
|
CheckBoxSlotsType,
|
|
78
78
|
} from '../components/mui_extended/CheckBox/types';
|
|
79
|
+
import {
|
|
80
|
+
RadioButtonOwnerState,
|
|
81
|
+
RadioButtonSlotsType,
|
|
82
|
+
} from '../components/mui_extended/RadioButton/types';
|
|
79
83
|
import {
|
|
80
84
|
RHFNumberInputOwnerState,
|
|
81
85
|
RHFNumberInputSlotsType,
|
|
@@ -292,10 +296,19 @@ import {
|
|
|
292
296
|
ImageTextOwnerState,
|
|
293
297
|
ImageTextSlotsType,
|
|
294
298
|
} from '../components/ImageText/types';
|
|
295
|
-
import {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
+
import {
|
|
300
|
+
FormContainerOwnerState,
|
|
301
|
+
FormContainerSlotsType,
|
|
302
|
+
} from '../components/FormContainer/types';
|
|
303
|
+
import { TabsNavigatorSlotsType } from 'src/components/TabsNavigator/types';
|
|
304
|
+
import {
|
|
305
|
+
EditLabelOwnerState,
|
|
306
|
+
EditLabelSlotsType,
|
|
307
|
+
} from '../components/EditLabel/types';
|
|
308
|
+
import {
|
|
309
|
+
MFIsolationAppOwnerState,
|
|
310
|
+
MFIsolationAppSlotsType,
|
|
311
|
+
} from '../components/MFIsolationApp/types';
|
|
299
312
|
import {
|
|
300
313
|
TagsFormatterOwnerState,
|
|
301
314
|
TagsFormatterSlotsType,
|
|
@@ -328,6 +341,7 @@ declare module '@mui/material/styles' {
|
|
|
328
341
|
M4LSelect: SelectSlotsType;
|
|
329
342
|
M4LTypography: TypographySlotsType;
|
|
330
343
|
M4LCheckBox: CheckBoxSlotsType;
|
|
344
|
+
M4LRadioButton: RadioButtonSlotsType;
|
|
331
345
|
M4LRHFNumberInput: RHFNumberInputSlotsType;
|
|
332
346
|
M4LTab: TabSlotsType;
|
|
333
347
|
M4LButton: ButtonSlotsType;
|
|
@@ -342,7 +356,8 @@ declare module '@mui/material/styles' {
|
|
|
342
356
|
M4LChip: ChipSlotsType;
|
|
343
357
|
M4LCircularProgress: CircularProgressSlotsType;
|
|
344
358
|
M4LPaperForm: PaperFormSlotsType;
|
|
345
|
-
M4LWindowBase: WindowBaseType;
|
|
359
|
+
M4LWindowBase: WindowBaseType;
|
|
360
|
+
a;
|
|
346
361
|
M4LWindowConfirm: WindowConfirmType;
|
|
347
362
|
M4LAppBar: AppBarSlotsType;
|
|
348
363
|
M4LDialog: DialogType;
|
|
@@ -420,6 +435,7 @@ declare module '@mui/material/styles' {
|
|
|
420
435
|
M4LSelect: Partial<SelectOwnerState>;
|
|
421
436
|
M4LTypography: Partial<TypographyOwnerState>;
|
|
422
437
|
M4LCheckBox: Partial<CheckBoxOwnerState>;
|
|
438
|
+
M4LRadioButton: Partial<RadioButtonOwnerState>;
|
|
423
439
|
M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
|
|
424
440
|
M4LTab: Partial<TabOwnerState>;
|
|
425
441
|
M4LButton: Partial<ButtonOwnerState>;
|
|
@@ -611,6 +627,11 @@ declare module '@mui/material/styles' {
|
|
|
611
627
|
styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
|
|
612
628
|
variants?: ComponentsVariants['M4LCheckBox'];
|
|
613
629
|
};
|
|
630
|
+
M4LRadioButton?: {
|
|
631
|
+
defaultProps?: ComponentsPropsList['M4LRadioButton'];
|
|
632
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
|
|
633
|
+
variants?: ComponentsVariants['M4LRadioButton'];
|
|
634
|
+
};
|
|
614
635
|
M4LActionCancel?: {
|
|
615
636
|
defaultProps?: ComponentsPropsList['M4LActionCancel'];
|
|
616
637
|
styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];
|
|
@@ -30,6 +30,7 @@ function DataGrid(props) {
|
|
|
30
30
|
initialRowHeightVariant,
|
|
31
31
|
checkedRows,
|
|
32
32
|
onCheckedRowsChange,
|
|
33
|
+
checkedRowsMultiple,
|
|
33
34
|
dataTestId = "",
|
|
34
35
|
customHeader: CustomHeader,
|
|
35
36
|
visibleCustomHeader = true,
|
|
@@ -87,6 +88,7 @@ function DataGrid(props) {
|
|
|
87
88
|
checkedRows,
|
|
88
89
|
rowActionsGetter,
|
|
89
90
|
onCheckedRowsChange,
|
|
91
|
+
checkedRowsMultiple,
|
|
90
92
|
rowKeyGetter,
|
|
91
93
|
rows,
|
|
92
94
|
onChangeUserColumns,
|
|
@@ -24,42 +24,6 @@ const dataGridStyles = {
|
|
|
24
24
|
flex: 1,
|
|
25
25
|
overflow: "hidden",
|
|
26
26
|
"& .rdg .MuiCheckbox-root": {
|
|
27
|
-
overflow: "visible",
|
|
28
|
-
padding: 0,
|
|
29
|
-
...theme.generalSettings.isMobile ? {
|
|
30
|
-
width: theme.vars.size.mobile.small.action,
|
|
31
|
-
height: theme.vars.size.mobile.small.action
|
|
32
|
-
} : {
|
|
33
|
-
width: theme.vars.size.desktop.small.action,
|
|
34
|
-
height: theme.vars.size.desktop.small.action
|
|
35
|
-
},
|
|
36
|
-
display: "inline-flex",
|
|
37
|
-
justifyContent: "center",
|
|
38
|
-
alignItems: "center",
|
|
39
|
-
borderRadius: theme.size.borderRadius.r1,
|
|
40
|
-
"&:hover": {
|
|
41
|
-
backgroundColor: theme.vars.palette.default.hoverOpacity
|
|
42
|
-
},
|
|
43
|
-
"&:active": {
|
|
44
|
-
backgroundColor: theme.vars.palette.default.activeOpacity
|
|
45
|
-
},
|
|
46
|
-
"&.Mui-checked": {
|
|
47
|
-
"&:hover": {
|
|
48
|
-
backgroundColor: theme.vars.palette.primary.hoverOpacity,
|
|
49
|
-
"& .M4LIcon-icon": {
|
|
50
|
-
backgroundColor: theme.vars.palette.primary.hover
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
"&:active": {
|
|
54
|
-
backgroundColor: theme.vars.palette.primary.activeOpacity,
|
|
55
|
-
"& .M4LIcon-icon": {
|
|
56
|
-
backgroundColor: theme.vars.palette.primary.active
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
"&.Mui-focusVisible, &:focus-visible": {
|
|
61
|
-
outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
|
|
62
|
-
},
|
|
63
27
|
"& > svg": {
|
|
64
28
|
color: theme.vars.palette.text.secondary
|
|
65
29
|
}
|
|
@@ -416,19 +380,33 @@ const dataGridStyles = {
|
|
|
416
380
|
outline: `2px solid var(--rdg-selection-color)`,
|
|
417
381
|
outlineOffset: "-2px"
|
|
418
382
|
},
|
|
419
|
-
"&:has(> .MuiCheckbox-root)": {
|
|
420
|
-
overflow: "visible",
|
|
421
|
-
paddingInline: 0
|
|
422
|
-
},
|
|
423
383
|
"& .checkbox-checked": {
|
|
424
|
-
"&
|
|
425
|
-
|
|
426
|
-
}
|
|
384
|
+
"& path:first-of-type": {
|
|
385
|
+
fill: theme.vars.palette.primary.main
|
|
386
|
+
},
|
|
387
|
+
...getSizeStyles(
|
|
388
|
+
theme,
|
|
389
|
+
ownerState?.size || "medium",
|
|
390
|
+
"base",
|
|
391
|
+
(size) => ({
|
|
392
|
+
minHeight: size,
|
|
393
|
+
height: size
|
|
394
|
+
})
|
|
395
|
+
)
|
|
427
396
|
},
|
|
428
397
|
"& .checkbox-unChecked": {
|
|
429
|
-
"&
|
|
430
|
-
|
|
431
|
-
}
|
|
398
|
+
"& path": {
|
|
399
|
+
fill: theme.vars.palette.text.primary
|
|
400
|
+
},
|
|
401
|
+
...getSizeStyles(
|
|
402
|
+
theme,
|
|
403
|
+
ownerState?.size || "medium",
|
|
404
|
+
"base",
|
|
405
|
+
(size) => ({
|
|
406
|
+
minHeight: size,
|
|
407
|
+
height: size
|
|
408
|
+
})
|
|
409
|
+
)
|
|
432
410
|
},
|
|
433
411
|
"& .rdg-text-editor": {
|
|
434
412
|
textAlign: "inherit",
|
|
@@ -445,6 +423,10 @@ const dataGridStyles = {
|
|
|
445
423
|
borderColor: `${theme.vars.palette?.border.disabled} !important`,
|
|
446
424
|
...theme.colorSchemes.finalTheme.typography.body
|
|
447
425
|
},
|
|
426
|
+
"&:has(> .M4LRadioButton-root)": {
|
|
427
|
+
overflow: "visible",
|
|
428
|
+
paddingInline: 0
|
|
429
|
+
},
|
|
448
430
|
"&.rdg-cell-frozen": {
|
|
449
431
|
display: "flex",
|
|
450
432
|
boxShadow: "unset",
|
|
@@ -694,54 +676,26 @@ const dataGridStyles = {
|
|
|
694
676
|
* Estilos para el wrapper del CheckboxCellAdapter
|
|
695
677
|
* Aplica los mismos estilos que los checkboxes dentro de celdas rdg
|
|
696
678
|
*/
|
|
697
|
-
checkboxCellWrapper: ({ theme }) => ({
|
|
679
|
+
checkboxCellWrapper: ({ theme, ownerState }) => ({
|
|
698
680
|
"& .checkbox-checked": {
|
|
699
|
-
"&
|
|
700
|
-
|
|
701
|
-
}
|
|
681
|
+
"& path:first-of-type": {
|
|
682
|
+
fill: theme.vars.palette.primary.main
|
|
683
|
+
},
|
|
684
|
+
...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
|
|
685
|
+
minHeight: size,
|
|
686
|
+
height: size
|
|
687
|
+
}))
|
|
702
688
|
},
|
|
703
689
|
"& .checkbox-unChecked": {
|
|
704
|
-
"&
|
|
705
|
-
|
|
706
|
-
}
|
|
690
|
+
"& path": {
|
|
691
|
+
fill: theme.vars.palette.text.primary
|
|
692
|
+
},
|
|
693
|
+
...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
|
|
694
|
+
minHeight: size,
|
|
695
|
+
height: size
|
|
696
|
+
}))
|
|
707
697
|
},
|
|
708
698
|
"& .MuiCheckbox-root": {
|
|
709
|
-
overflow: "visible",
|
|
710
|
-
padding: 0,
|
|
711
|
-
...theme.generalSettings.isMobile ? {
|
|
712
|
-
width: theme.vars.size.mobile.small.action,
|
|
713
|
-
height: theme.vars.size.mobile.small.action
|
|
714
|
-
} : {
|
|
715
|
-
width: theme.vars.size.desktop.small.action,
|
|
716
|
-
height: theme.vars.size.desktop.small.action
|
|
717
|
-
},
|
|
718
|
-
display: "inline-flex",
|
|
719
|
-
justifyContent: "center",
|
|
720
|
-
alignItems: "center",
|
|
721
|
-
borderRadius: theme.size.borderRadius.r1,
|
|
722
|
-
"&:hover": {
|
|
723
|
-
backgroundColor: theme.vars.palette.default.hoverOpacity
|
|
724
|
-
},
|
|
725
|
-
"&:active": {
|
|
726
|
-
backgroundColor: theme.vars.palette.default.activeOpacity
|
|
727
|
-
},
|
|
728
|
-
"&.Mui-checked": {
|
|
729
|
-
"&:hover": {
|
|
730
|
-
backgroundColor: theme.vars.palette.primary.hoverOpacity,
|
|
731
|
-
"& .M4LIcon-icon": {
|
|
732
|
-
backgroundColor: theme.vars.palette.primary.hover
|
|
733
|
-
}
|
|
734
|
-
},
|
|
735
|
-
"&:active": {
|
|
736
|
-
backgroundColor: theme.vars.palette.primary.activeOpacity,
|
|
737
|
-
"& .M4LIcon-icon": {
|
|
738
|
-
backgroundColor: theme.vars.palette.primary.active
|
|
739
|
-
}
|
|
740
|
-
}
|
|
741
|
-
},
|
|
742
|
-
"&.Mui-focusVisible, &:focus-visible": {
|
|
743
|
-
outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
|
|
744
|
-
},
|
|
745
699
|
"& > svg": {
|
|
746
700
|
color: theme.vars.palette.text.secondary
|
|
747
701
|
}
|
|
@@ -795,6 +749,7 @@ const dataGridStyles = {
|
|
|
795
749
|
minWidth: "280px",
|
|
796
750
|
maxWidth: "580px",
|
|
797
751
|
cursor: "pointer",
|
|
752
|
+
padding: theme.vars.size.baseSpacings["sp2-5"],
|
|
798
753
|
// Si está checked (pero no selected), border de checked
|
|
799
754
|
...ownerState?.checked && !ownerState?.selected && {
|
|
800
755
|
borderColor: theme.vars.palette.primary.activeOpacity
|
|
@@ -835,7 +790,7 @@ const dataGridStyles = {
|
|
|
835
790
|
cardHeaderRight: ({ theme }) => ({
|
|
836
791
|
display: "flex",
|
|
837
792
|
alignItems: "center",
|
|
838
|
-
gap: theme.vars.size.baseSpacings
|
|
793
|
+
gap: theme.vars.size.baseSpacings["sp0-5"]
|
|
839
794
|
}),
|
|
840
795
|
/**
|
|
841
796
|
* Contenido de la card (body)
|
|
@@ -942,28 +897,6 @@ const dataGridStyles = {
|
|
|
942
897
|
}
|
|
943
898
|
}
|
|
944
899
|
}),
|
|
945
|
-
/**
|
|
946
|
-
* Placeholder editable
|
|
947
|
-
*/
|
|
948
|
-
editablePlaceholder: ({ theme }) => ({
|
|
949
|
-
display: "flex",
|
|
950
|
-
alignItems: "center",
|
|
951
|
-
gap: theme.spacing(1)
|
|
952
|
-
}),
|
|
953
|
-
/**
|
|
954
|
-
* EditLabel
|
|
955
|
-
*/
|
|
956
|
-
editLabel: ({ theme, ownerState }) => ({
|
|
957
|
-
width: "auto",
|
|
958
|
-
opacity: 1,
|
|
959
|
-
transition: "opacity 0.3s ease",
|
|
960
|
-
...getTypographyStyles(
|
|
961
|
-
theme.generalSettings.isMobile,
|
|
962
|
-
ownerState?.size || "medium",
|
|
963
|
-
"body"
|
|
964
|
-
)
|
|
965
|
-
}),
|
|
966
|
-
iconButtonEdit: () => ({}),
|
|
967
900
|
/**
|
|
968
901
|
* Header de la card personalizada (avatar + nombre + email)
|
|
969
902
|
*/
|
|
@@ -155,6 +155,7 @@ function DataGridProvider(props) {
|
|
|
155
155
|
initialRowHeightVariant = "standard",
|
|
156
156
|
checkedRows,
|
|
157
157
|
onCheckedRowsChange,
|
|
158
|
+
checkedRowsMultiple,
|
|
158
159
|
rowKeyGetter,
|
|
159
160
|
onChangeUserColumns,
|
|
160
161
|
externalSortSettings: sortSettings,
|
|
@@ -530,6 +531,7 @@ function DataGridProvider(props) {
|
|
|
530
531
|
rowActionsGetter,
|
|
531
532
|
setRowHeightVariant: setCurrentRowHeightInternal,
|
|
532
533
|
onCheckedRowsChange,
|
|
534
|
+
checkedRowsMultiple,
|
|
533
535
|
rowKeyGetter,
|
|
534
536
|
onChangeUserColumns,
|
|
535
537
|
sortColumns,
|
|
@@ -79,7 +79,7 @@ export interface IGridConfig {
|
|
|
79
79
|
export interface IGridConfigExtended extends IGridConfig {
|
|
80
80
|
columnsConfigCards?: BaseConfigColumnCards[];
|
|
81
81
|
}
|
|
82
|
-
export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
|
|
82
|
+
export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
|
|
83
83
|
id: number | string;
|
|
84
84
|
children: ReactNode;
|
|
85
85
|
rowsCount: number;
|
|
@@ -92,7 +92,7 @@ export type RowHeightState = {
|
|
|
92
92
|
rowHeight: number;
|
|
93
93
|
rowHeaderHeight: number;
|
|
94
94
|
};
|
|
95
|
-
export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
|
|
95
|
+
export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
|
|
96
96
|
getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
|
|
97
97
|
onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
|
|
98
98
|
onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;
|
|
@@ -37,8 +37,7 @@ const DICTIONARY = {
|
|
|
37
37
|
VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
|
|
38
38
|
VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
|
|
39
39
|
TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,
|
|
40
|
-
DETAILS: `${DATAGRID_ID_DICTIONARY}.details
|
|
41
|
-
EDIT_PLACEHOLDER: `${DATAGRID_ID_DICTIONARY}.edit_placeholder`
|
|
40
|
+
DETAILS: `${DATAGRID_ID_DICTIONARY}.details`
|
|
42
41
|
};
|
|
43
42
|
export {
|
|
44
43
|
DICTIONARY as D,
|
|
@@ -3,4 +3,4 @@ import { UseModalDetailProps } from '../types';
|
|
|
3
3
|
* Hook que renderiza el modal de detalle para cualquier vista
|
|
4
4
|
* mostrando TODAS las columnas sin excepción
|
|
5
5
|
*/
|
|
6
|
-
export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange,
|
|
6
|
+
export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
|
|
@@ -14,8 +14,7 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
|
|
|
14
14
|
const useModalDetail = ({
|
|
15
15
|
columns,
|
|
16
16
|
viewMode,
|
|
17
|
-
onRowsChange
|
|
18
|
-
rows
|
|
17
|
+
onRowsChange
|
|
19
18
|
}) => {
|
|
20
19
|
const { getConfigColumns, size } = useDataGrid();
|
|
21
20
|
const { openModal, closeModal } = useModal();
|
|
@@ -25,7 +24,6 @@ const useModalDetail = ({
|
|
|
25
24
|
const handleOpenDetail = useCallback(
|
|
26
25
|
(row) => {
|
|
27
26
|
const viewColumnsConfig = getConfigColumns(viewMode);
|
|
28
|
-
const rowIndex = rows.findIndex((r) => r === row);
|
|
29
27
|
openModal({
|
|
30
28
|
initialWidth: 500,
|
|
31
29
|
initialHeight: 680,
|
|
@@ -44,8 +42,6 @@ const useModalDetail = ({
|
|
|
44
42
|
CardDetails,
|
|
45
43
|
{
|
|
46
44
|
row,
|
|
47
|
-
rows,
|
|
48
|
-
rowIndex,
|
|
49
45
|
columns,
|
|
50
46
|
viewColumnsConfig,
|
|
51
47
|
onRowsChange,
|
|
@@ -60,7 +56,6 @@ const useModalDetail = ({
|
|
|
60
56
|
},
|
|
61
57
|
[
|
|
62
58
|
columns,
|
|
63
|
-
rows,
|
|
64
59
|
onRowsChange,
|
|
65
60
|
size,
|
|
66
61
|
getConfigColumns,
|
|
@@ -23,8 +23,7 @@ const pathIcons = {
|
|
|
23
23
|
viewTable: "frontend/components/data_grid/assets/icons/table.svg",
|
|
24
24
|
viewCards: "frontend/components/data_grid/assets/icons/card.svg",
|
|
25
25
|
info: "frontend/components/data_grid/assets/icons/info.svg",
|
|
26
|
-
expanded: "frontend/components/data_grid/assets/icons/expanded.svg"
|
|
27
|
-
edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
|
|
26
|
+
expanded: "frontend/components/data_grid/assets/icons/expanded.svg"
|
|
28
27
|
};
|
|
29
28
|
export {
|
|
30
29
|
pathIcons as p
|
|
@@ -50,10 +50,7 @@ export declare enum TableSlots {
|
|
|
50
50
|
customCardFieldContent = "customCardFieldContent",
|
|
51
51
|
customCardIconContainer = "customCardIconContainer",
|
|
52
52
|
checkboxCellWrapper = "checkboxCellWrapper",
|
|
53
|
-
editorCellWrapper = "editorCellWrapper"
|
|
54
|
-
editablePlaceholder = "editablePlaceholder",
|
|
55
|
-
editLabel = "editLabel",
|
|
56
|
-
iconButtonEdit = "iconButtonEdit"
|
|
53
|
+
editorCellWrapper = "editorCellWrapper"
|
|
57
54
|
}
|
|
58
55
|
export declare enum TextEditorSlots {
|
|
59
56
|
inputTexEditor = "inputTexEditor"
|
|
@@ -54,9 +54,6 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
|
|
|
54
54
|
TableSlots2["customCardIconContainer"] = "customCardIconContainer";
|
|
55
55
|
TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
|
|
56
56
|
TableSlots2["editorCellWrapper"] = "editorCellWrapper";
|
|
57
|
-
TableSlots2["editablePlaceholder"] = "editablePlaceholder";
|
|
58
|
-
TableSlots2["editLabel"] = "editLabel";
|
|
59
|
-
TableSlots2["iconButtonEdit"] = "iconButtonEdit";
|
|
60
57
|
return TableSlots2;
|
|
61
58
|
})(TableSlots || {});
|
|
62
59
|
var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {
|
|
@@ -76,9 +76,6 @@ export declare const ButtonHeaderActionsStyled: import('@emotion/styled').Styled
|
|
|
76
76
|
export declare const NameColumnIconStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
77
77
|
export declare const IconColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
78
78
|
export declare const NameColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
79
|
-
export declare const EditablePlaceholderStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
80
|
-
export declare const EditLabelStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
|
|
81
|
-
export declare const IconButtonEditStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
|
|
82
79
|
/**
|
|
83
80
|
* ****************
|
|
84
81
|
* Slots TextEditor
|
|
@@ -6,7 +6,6 @@ import { d as dataGridStyles } from "../Datagrid.styles.js";
|
|
|
6
6
|
import { I as Icon } from "../../Icon/Icon.js";
|
|
7
7
|
import { C as Card } from "../../Card/Card.js";
|
|
8
8
|
import { T as Typography } from "../../mui_extended/Typography/Typography.js";
|
|
9
|
-
import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
|
|
10
9
|
const DataGridRootStyled = styled("div", {
|
|
11
10
|
name: DATAGRID_PREFIX_NAME,
|
|
12
11
|
slot: DataGridSlots.datagridRoot
|
|
@@ -207,18 +206,6 @@ const NameColumnStyled = styled("div", {
|
|
|
207
206
|
name: DATAGRID_PREFIX_NAME,
|
|
208
207
|
slot: TableSlots.nameColumn
|
|
209
208
|
})(dataGridStyles.nameColumn);
|
|
210
|
-
const EditablePlaceholderStyled = styled("div", {
|
|
211
|
-
name: DATAGRID_PREFIX_NAME,
|
|
212
|
-
slot: TableSlots.editablePlaceholder
|
|
213
|
-
})(dataGridStyles.editablePlaceholder);
|
|
214
|
-
styled(Typography, {
|
|
215
|
-
name: DATAGRID_PREFIX_NAME,
|
|
216
|
-
slot: TableSlots.editLabel
|
|
217
|
-
})(dataGridStyles.editLabel);
|
|
218
|
-
const IconButtonEditStyled = styled(IconButton, {
|
|
219
|
-
name: DATAGRID_PREFIX_NAME,
|
|
220
|
-
slot: TableSlots.iconButtonEdit
|
|
221
|
-
})(dataGridStyles.iconButtonEdit);
|
|
222
209
|
const InputTextEditorStyled = styled("input", {
|
|
223
210
|
name: DATAGRID_PREFIX_NAME,
|
|
224
211
|
slot: TextEditorSlots.inputTexEditor
|
|
@@ -233,51 +220,49 @@ styled("div", {
|
|
|
233
220
|
})(dataGridStyles.columnIconFormatter);
|
|
234
221
|
export {
|
|
235
222
|
ActionsRootStyled as A,
|
|
236
|
-
|
|
223
|
+
NameColumnStyled as B,
|
|
237
224
|
CustomHeaderStyled as C,
|
|
238
225
|
DataGridRootStyled as D,
|
|
239
226
|
EditorCellWrapperStyled as E,
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
227
|
+
DraggableHeaderRootStyled as F,
|
|
228
|
+
ButtonHeaderActionsStyled as G,
|
|
229
|
+
DraggableWrapperInputBaseStyled as H,
|
|
230
|
+
IconColumnStyled as I,
|
|
231
|
+
IconSearchStyled as J,
|
|
232
|
+
HeaderInputBaseStyled as K,
|
|
246
233
|
LabelHeaderColumnStyled as L,
|
|
247
|
-
|
|
234
|
+
MenuListStyled as M,
|
|
248
235
|
NameColumnIconStyled as N,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
HeaderRenderClickStyled as Q,
|
|
236
|
+
HeaderRenderClickStyled as O,
|
|
237
|
+
InputTextEditorStyled as P,
|
|
252
238
|
RowsCountRootStyled as R,
|
|
253
|
-
InputTextEditorStyled as S,
|
|
254
239
|
TableWrapperDataGridStyled as T,
|
|
255
240
|
ValueColumnStyled as V,
|
|
256
241
|
WrapperSkeletonStyled as W,
|
|
257
242
|
ContentModalSettingStyled as a,
|
|
258
243
|
ContainerLabelValueColumnStyled as b,
|
|
259
244
|
ContentWrapperColumnStyled as c,
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
245
|
+
CardsContainerStyled as d,
|
|
246
|
+
CardDetailContainerStyled as e,
|
|
247
|
+
CardHeaderStyled as f,
|
|
248
|
+
CardHeaderLeftStyled as g,
|
|
249
|
+
CardHeaderRightStyled as h,
|
|
250
|
+
CardContentWrapperStyled as i,
|
|
251
|
+
CardContentStyled as j,
|
|
252
|
+
CardStyled as k,
|
|
253
|
+
CheckboxCellWrapperStyled as l,
|
|
254
|
+
ControlNavigateStyled as m,
|
|
255
|
+
ActionsConfigContainerStyled as n,
|
|
256
|
+
ContainerLeftActionsStyled as o,
|
|
257
|
+
ContainerRightActionsStyled as p,
|
|
258
|
+
RowsCountLabelStyled as q,
|
|
259
|
+
RowsCountValueStyled as r,
|
|
260
|
+
ColumnsConfigWrapperStyled as s,
|
|
261
|
+
ColumnsConfigDataGridStyled as t,
|
|
262
|
+
ColumnsConfigSelColumnsStyled as u,
|
|
263
|
+
ColumnsConfigActiosStyled as v,
|
|
264
|
+
ContainerToggleCardsStyled as w,
|
|
265
|
+
CardToggleButtonStyled as x,
|
|
266
|
+
TextToggleCardButtonStyled as y,
|
|
267
|
+
TableContainerStyled as z
|
|
283
268
|
};
|
|
@@ -2,7 +2,7 @@ import { CardContentProps } from '../../../types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Hook que encapsula toda la lógica de renderizado del contenido de una Card
|
|
4
4
|
*/
|
|
5
|
-
export declare function useCardContent<TRow>({ row,
|
|
5
|
+
export declare function useCardContent<TRow>({ row, columns, onRowsChange, }: CardContentProps<TRow>): {
|
|
6
6
|
cardContent: import("react/jsx-runtime").JSX.Element[];
|
|
7
7
|
columnsCount: number;
|
|
8
8
|
};
|