@rws-aoa/react-library 3.6.5 → 4.0.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/dist/_constants.js.map +1 -1
- package/dist/components/atoms/_menu/menu-item/MenuItem.d.ts.map +1 -1
- package/dist/components/atoms/_menu/menu-item/MenuItem.js +47 -41
- package/dist/components/atoms/_menu/menu-item/MenuItem.js.map +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.d.ts +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.d.ts.map +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.js +15 -14
- package/dist/components/atoms/_menu/user-menu/UserMenu.js.map +1 -1
- package/dist/components/atoms/button/Button.d.ts +4 -4
- package/dist/components/atoms/button/Button.d.ts.map +1 -1
- package/dist/components/atoms/button/Button.js +129 -127
- package/dist/components/atoms/button/Button.js.map +1 -1
- package/dist/components/atoms/icon-button/IconButton.d.ts +1 -1
- package/dist/components/atoms/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/atoms/icon-button/IconButton.js +6 -4
- package/dist/components/atoms/icon-button/IconButton.js.map +1 -1
- package/dist/components/atoms/input/Input.d.ts +2 -2
- package/dist/components/atoms/input/Input.d.ts.map +1 -1
- package/dist/components/atoms/input/Input.js +60 -55
- package/dist/components/atoms/input/Input.js.map +1 -1
- package/dist/components/atoms/logo/Logo.d.ts +2 -2
- package/dist/components/atoms/logo/Logo.js.map +1 -1
- package/dist/components/atoms/no-permission/NoPermission.d.ts +1 -1
- package/dist/components/atoms/no-permission/NoPermission.d.ts.map +1 -1
- package/dist/components/atoms/no-permission/NoPermission.js +9 -9
- package/dist/components/atoms/no-permission/NoPermission.js.map +1 -1
- package/dist/components/atoms/notification/Notification.d.ts +2 -2
- package/dist/components/atoms/notification/Notification.d.ts.map +1 -1
- package/dist/components/atoms/notification/Notification.js +22 -22
- package/dist/components/atoms/notification/Notification.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Error.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Info.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Success.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Warning.js.map +1 -1
- package/dist/components/atoms/section-header/SectionHeader.d.ts +2 -2
- package/dist/components/atoms/section-header/SectionHeader.d.ts.map +1 -1
- package/dist/components/atoms/section-header/SectionHeader.js +61 -39
- package/dist/components/atoms/section-header/SectionHeader.js.map +1 -1
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts +2 -2
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js +12 -12
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js.map +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js +9 -9
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js.map +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js +10 -10
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js.map +1 -1
- package/dist/components/atoms/table/Table.d.ts +4 -4
- package/dist/components/atoms/table/Table.d.ts.map +1 -1
- package/dist/components/atoms/table/Table.js +66 -64
- package/dist/components/atoms/table/Table.js.map +1 -1
- package/dist/components/atoms/table/_QuickSearchToolbar.d.ts +2 -2
- package/dist/components/atoms/table/_QuickSearchToolbar.d.ts.map +1 -1
- package/dist/components/atoms/table/_QuickSearchToolbar.js +29 -22
- package/dist/components/atoms/table/_QuickSearchToolbar.js.map +1 -1
- package/dist/components/atoms/zero-width-space/ZeroWidthSpace.js.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.d.ts.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.js +24 -13
- package/dist/components/molecules/file-dropzone/FileDropzone.js.map +1 -1
- package/dist/components/molecules/file-table/FileTable.d.ts +4 -4
- package/dist/components/molecules/file-table/FileTable.js +17 -17
- package/dist/components/molecules/file-table/FileTable.js.map +1 -1
- package/dist/components/molecules/form-error/FormError.d.ts +2 -2
- package/dist/components/molecules/form-error/FormError.js.map +1 -1
- package/dist/components/molecules/form-modal/FormModal.d.ts +2 -2
- package/dist/components/molecules/form-modal/FormModal.d.ts.map +1 -1
- package/dist/components/molecules/form-modal/FormModal.js +10 -1
- package/dist/components/molecules/form-modal/FormModal.js.map +1 -1
- package/dist/components/molecules/modal/Modal.d.ts +1 -1
- package/dist/components/molecules/modal/Modal.d.ts.map +1 -1
- package/dist/components/molecules/modal/Modal.js.map +1 -1
- package/dist/components/molecules/modal-close-button/ModalCloseButton.js.map +1 -1
- package/dist/components/molecules/navigation-bar/NavigationBar.d.ts.map +1 -1
- package/dist/components/molecules/navigation-bar/NavigationBar.js +27 -16
- package/dist/components/molecules/navigation-bar/NavigationBar.js.map +1 -1
- package/dist/components/molecules/upload-button/UploadButton.d.ts +2 -2
- package/dist/components/molecules/upload-button/UploadButton.d.ts.map +1 -1
- package/dist/components/molecules/upload-button/UploadButton.js +25 -23
- package/dist/components/molecules/upload-button/UploadButton.js.map +1 -1
- package/dist/components/organisms/content-page/ContentPage.d.ts +1 -1
- package/dist/components/organisms/content-page/ContentPage.d.ts.map +1 -1
- package/dist/components/organisms/content-page/ContentPage.js +6 -4
- package/dist/components/organisms/content-page/ContentPage.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +45 -45
|
@@ -1,39 +1,41 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "@mui/material";
|
|
3
|
-
import { DataGrid as
|
|
4
|
-
import { m as
|
|
5
|
-
import { memo as
|
|
6
|
-
import { FontNormalSxProps as
|
|
7
|
-
import { QuickSearchToolbar as
|
|
8
|
-
function
|
|
9
|
-
var b,
|
|
10
|
-
const [
|
|
1
|
+
import { jsx as F } from "react/jsx-runtime";
|
|
2
|
+
import { checkboxClasses as f, paginationItemClasses as P } from "@mui/material";
|
|
3
|
+
import { DataGrid as I, gridClasses as o } from "@mui/x-data-grid";
|
|
4
|
+
import { m as T } from "../../../chunks/index.DJYQ_-zP.js";
|
|
5
|
+
import { memo as j, useState as i, useCallback as h, useEffect as C } from "react";
|
|
6
|
+
import { FontNormalSxProps as H } from "../../../_constants.js";
|
|
7
|
+
import { QuickSearchToolbar as L } from "./_QuickSearchToolbar.js";
|
|
8
|
+
function p(e) {
|
|
9
|
+
var b, v, k;
|
|
10
|
+
const [S, u] = i(!1), [n, x] = i({
|
|
11
11
|
page: 0,
|
|
12
12
|
pageSize: 10
|
|
13
|
-
}), [
|
|
13
|
+
}), [s, M] = i([]), [c, y] = i({
|
|
14
14
|
items: []
|
|
15
|
-
}),
|
|
16
|
-
|
|
17
|
-
}, []),
|
|
18
|
-
|
|
19
|
-
}, []), [
|
|
20
|
-
async function
|
|
21
|
-
if (
|
|
22
|
-
const
|
|
23
|
-
await e.getData({ ...
|
|
15
|
+
}), l = e.mode ?? "server", d = l === "server", $ = h((t) => {
|
|
16
|
+
M(t);
|
|
17
|
+
}, []), w = h((t) => {
|
|
18
|
+
y(t);
|
|
19
|
+
}, []), [R, g] = i(((b = e.data) == null ? void 0 : b.totalItems) || 0);
|
|
20
|
+
async function m(t, a, r) {
|
|
21
|
+
if (d && e.getData) {
|
|
22
|
+
const D = async () => {
|
|
23
|
+
await e.getData({ ...t, sortModel: a, filterModel: r });
|
|
24
24
|
};
|
|
25
|
-
|
|
25
|
+
u(!0), await D(), u(!1);
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
return
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
-
|
|
28
|
+
return C(() => {
|
|
29
|
+
g(
|
|
30
|
+
(t) => {
|
|
31
|
+
var a, r;
|
|
32
|
+
return ((a = e.data) == null ? void 0 : a.totalItems) === void 0 ? t : (r = e.data) == null ? void 0 : r.totalItems;
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}, [(v = e.data) == null ? void 0 : v.totalItems, g]), C(() => {
|
|
36
|
+
m(n, s, c);
|
|
37
|
+
}, [n, s, c]), /* @__PURE__ */ F(
|
|
38
|
+
I,
|
|
37
39
|
{
|
|
38
40
|
columns: e.columns,
|
|
39
41
|
"data-qa": e["data-qa"],
|
|
@@ -43,14 +45,14 @@ function j(e) {
|
|
|
43
45
|
disableDensitySelector: !0,
|
|
44
46
|
disableRowSelectionOnClick: !0,
|
|
45
47
|
disableVirtualization: !0,
|
|
46
|
-
filterMode:
|
|
48
|
+
filterMode: l,
|
|
47
49
|
getRowHeight: () => "auto",
|
|
48
50
|
initialState: {
|
|
49
51
|
sorting: {
|
|
50
52
|
sortModel: e.initialSort ? [e.initialSort] : []
|
|
51
53
|
}
|
|
52
54
|
},
|
|
53
|
-
loading:
|
|
55
|
+
loading: S,
|
|
54
56
|
localeText: e.localeText ?? {
|
|
55
57
|
columnHeaderSortIconLabel: "Sorteren",
|
|
56
58
|
toolbarQuickFilterPlaceholder: "Zoeken...",
|
|
@@ -59,52 +61,52 @@ function j(e) {
|
|
|
59
61
|
noRowsLabel: "Geen regels beschikbaar",
|
|
60
62
|
noResultsOverlayLabel: "Geen regels gevonden.",
|
|
61
63
|
MuiTablePagination: {
|
|
62
|
-
labelDisplayedRows: ({ from:
|
|
64
|
+
labelDisplayedRows: ({ from: t, to: a, count: r }) => `${t} - ${a} van ${r}`,
|
|
63
65
|
labelRowsPerPage: "Regels per pagina"
|
|
64
66
|
},
|
|
65
|
-
footerRowSelected: (
|
|
67
|
+
footerRowSelected: (t) => `${t} regels geselecteerd`
|
|
66
68
|
},
|
|
67
|
-
onFilterModelChange:
|
|
68
|
-
onPaginationModelChange:
|
|
69
|
-
onSortModelChange:
|
|
69
|
+
onFilterModelChange: w,
|
|
70
|
+
onPaginationModelChange: x,
|
|
71
|
+
onSortModelChange: $,
|
|
70
72
|
pageSizeOptions: [5, 10, 20, 40, 80],
|
|
71
|
-
paginationMode:
|
|
72
|
-
paginationModel:
|
|
73
|
-
rowCount:
|
|
74
|
-
rows: (
|
|
73
|
+
paginationMode: l,
|
|
74
|
+
paginationModel: n,
|
|
75
|
+
rowCount: d ? R : void 0,
|
|
76
|
+
rows: (k = e.data) == null ? void 0 : k.items,
|
|
75
77
|
slotProps: {
|
|
76
78
|
toolbar: {
|
|
77
79
|
showQuickFilter: !0,
|
|
78
80
|
quickFilterProps: { debounceMs: 500 },
|
|
79
|
-
mode:
|
|
80
|
-
isServerMode:
|
|
81
|
-
getData: async () =>
|
|
81
|
+
mode: l,
|
|
82
|
+
isServerMode: d,
|
|
83
|
+
getData: async () => m(n, s, c),
|
|
82
84
|
actionButtons: e.actionButtons,
|
|
83
85
|
localeText: e.localeText
|
|
84
86
|
}
|
|
85
87
|
},
|
|
86
88
|
slots: {
|
|
87
|
-
toolbar:
|
|
89
|
+
toolbar: L
|
|
88
90
|
},
|
|
89
|
-
sortingMode:
|
|
90
|
-
sx:
|
|
91
|
+
sortingMode: l,
|
|
92
|
+
sx: T(
|
|
91
93
|
{
|
|
92
94
|
border: 0,
|
|
93
95
|
color: "var(--color-text)",
|
|
94
96
|
letterSpacing: "normal",
|
|
95
97
|
minHeight: "300px",
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
+
[`&.${o["root--densityCompact"]}`]: {
|
|
99
|
+
[`.${o.cell}`]: {
|
|
98
100
|
py: "8px"
|
|
99
101
|
}
|
|
100
102
|
},
|
|
101
|
-
"
|
|
102
|
-
|
|
103
|
+
[`&.${o["root--densityStandard"]}`]: {
|
|
104
|
+
[`.${o.cell}`]: {
|
|
103
105
|
py: "15px"
|
|
104
106
|
}
|
|
105
107
|
},
|
|
106
|
-
"
|
|
107
|
-
|
|
108
|
+
[`&.${o["root--densityComfortable"]}`]: {
|
|
109
|
+
[`.${o.cell}`]: {
|
|
108
110
|
py: "22px"
|
|
109
111
|
}
|
|
110
112
|
},
|
|
@@ -113,17 +115,17 @@ function j(e) {
|
|
|
113
115
|
* Because a fixed height is not desirable, we set a min-height on the DataGrid and set
|
|
114
116
|
* the min-height of the virtualScroller to half of that height.
|
|
115
117
|
*/
|
|
116
|
-
|
|
118
|
+
[`.${o.virtualScroller}`]: {
|
|
117
119
|
minHeight: "150px",
|
|
118
120
|
overflow: "hidden",
|
|
119
121
|
position: "relative"
|
|
120
122
|
},
|
|
121
|
-
|
|
123
|
+
[`.${o.columnHeaders}`]: {
|
|
122
124
|
"--DataGrid-containerBackground": "var(--color-rijks-skyblue)",
|
|
123
125
|
backgroundCcolor: "var(--color-rijks-skyblue)",
|
|
124
126
|
color: "var(--color-text-light)"
|
|
125
127
|
},
|
|
126
|
-
|
|
128
|
+
[`.${o.row}`]: {
|
|
127
129
|
":hover": {
|
|
128
130
|
backgroundColor: "var(--color-rijks-skyblue-light)"
|
|
129
131
|
},
|
|
@@ -134,16 +136,16 @@ function j(e) {
|
|
|
134
136
|
}
|
|
135
137
|
}
|
|
136
138
|
},
|
|
137
|
-
|
|
139
|
+
[`.${o.columnHeader}, .${o.cell}, .MuiDataGrid-columnsContainer`]: {
|
|
138
140
|
borderRight: "1px solid var(--color-rijks-grey-2)"
|
|
139
141
|
},
|
|
140
|
-
|
|
142
|
+
[`.${o.cell}`]: {
|
|
141
143
|
color: "var(--color-text)"
|
|
142
144
|
},
|
|
143
|
-
|
|
145
|
+
[`.${P.root}`]: {
|
|
144
146
|
borderRadius: 0
|
|
145
147
|
},
|
|
146
|
-
|
|
148
|
+
[`.${f.root}`]: {
|
|
147
149
|
color: "var(--color-primary)",
|
|
148
150
|
":focus": {
|
|
149
151
|
outline: "2px dashed var(--color-text)",
|
|
@@ -154,19 +156,19 @@ function j(e) {
|
|
|
154
156
|
color: "var(--color-disabled)"
|
|
155
157
|
}
|
|
156
158
|
},
|
|
157
|
-
|
|
159
|
+
[`.${o.columnHeader} .${f.root}`]: {
|
|
158
160
|
color: "white"
|
|
159
161
|
}
|
|
160
162
|
},
|
|
161
163
|
e.sx,
|
|
162
|
-
|
|
164
|
+
H
|
|
163
165
|
),
|
|
164
166
|
...e.dataGridOverridableProps
|
|
165
167
|
}
|
|
166
168
|
);
|
|
167
169
|
}
|
|
168
|
-
const
|
|
170
|
+
const N = j(p);
|
|
169
171
|
export {
|
|
170
|
-
|
|
172
|
+
N as AoaTable
|
|
171
173
|
};
|
|
172
174
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { type SxProps } from \"@mui/material\";\nimport { DataGrid, type DataGridProps, type GridColDef, type GridFilterModel, type GridLocaleText, type GridSortModel } from \"@mui/x-data-grid\";\nimport merge from \"lodash.merge\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\nimport { FontNormalSxProps } from \"../../../_constants\";\nimport { QuickSearchToolbar } from \"./_QuickSearchToolbar\";\n\nexport interface AoaTableData<T extends object = any> {\n /**\n * The paged, filtered and sorted items from the database\n */\n items: T[];\n /**\n * The total number of items present in the database table\n */\n totalItems: number;\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n /**\n * Material UI's GridFilterModel\n */\n filterModel: GridFilterModel;\n /**\n * The current page of the table\n */\n page: number;\n /**\n * The maximum number of items that are shown on a page\n */\n pageSize: number;\n /**\n * Material UI's GridSortModel\n */\n sortModel: GridSortModel;\n}\n\ntype ModeProps =\n /**\n * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n */\n | { getData?: never; mode: \"client\" }\n /**\n * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n */\n | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: never };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n /**\n * Action buttons shown in the toolbar of the table\n */\n readonly actionButtons?: JSX.Element[];\n /**\n * The column structure to display the data\n */\n readonly columns: GridColDef<T>[];\n /**\n * The TableData object to be displayed in the table\n */\n readonly data: AoaTableData<T>;\n /**\n * Data-qa tag for E2E test purposes\n */\n readonly \"data-qa\"?: string;\n /**\n * Overwrite a safe selection of the {@link DataGrid} properties\n */\n readonly dataGridOverridableProps?: Pick<\n DataGridProps<T>,\n \"checkboxSelection\" | \"getRowId\" | \"ignoreDiacritics\" | \"isRowSelectable\" | \"loading\" | \"onRowSelectionModelChange\" | \"rowSelectionModel\"\n >;\n /**\n * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n */\n readonly initialSort?: { field: string; sort: \"asc\" | \"desc\" };\n /**\n * Overwrites the default labels when you need a different language than Dutch\n */\n readonly localeText?: GridLocaleText & { refreshTable: string };\n /**\n * Material UI's property to apply styling\n */\n readonly sx?: SxProps;\n};\n\ninterface PaginationModel {\n page: number;\n pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n * getData={(queryOptions) => getMockData(queryOptions)}\n * data={mockData}\n * columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>) {\n const [isLoading, setIsLoading] = useState(false);\n const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n page: 0,\n pageSize: 10\n });\n const [sortModel, setSortModel] = useState<GridSortModel>([]);\n const [filterModel, setFilterModel] = useState<GridFilterModel>({\n items: []\n });\n\n const mode = props.mode ?? \"server\";\n const isServerMode = mode === \"server\";\n\n const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n setSortModel(sortModel);\n }, []);\n\n const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n setFilterModel(filterModel);\n }, []);\n\n const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n async function getData(paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n if (isServerMode && props.getData) {\n const fetchData = async () => {\n await props.getData({ ...paginationModel, sortModel, filterModel });\n };\n\n setIsLoading(true);\n await fetchData();\n setIsLoading(false);\n }\n }\n\n useEffect(() => {\n setRowCountState((prevRowCountState) => (props.data?.totalItems === undefined ? prevRowCountState : props.data?.totalItems));\n }, [props.data?.totalItems, setRowCountState]);\n\n useEffect(() => {\n void getData(paginationModel, sortModel, filterModel);\n // ESLint tells us here that we should add the `getData` function, however,\n // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [paginationModel, sortModel, filterModel]);\n\n return (\n <DataGrid\n columns={props.columns}\n data-qa={props[\"data-qa\"]}\n disableColumnFilter\n disableColumnMenu\n disableColumnSelector\n disableDensitySelector\n disableRowSelectionOnClick\n disableVirtualization\n filterMode={mode}\n getRowHeight={() => \"auto\"}\n initialState={{\n sorting: {\n sortModel: props.initialSort ? [props.initialSort] : []\n }\n }}\n loading={isLoading}\n localeText={\n props.localeText ?? {\n columnHeaderSortIconLabel: \"Sorteren\",\n toolbarQuickFilterPlaceholder: \"Zoeken...\",\n toolbarQuickFilterLabel: \"Zoeken\",\n toolbarQuickFilterDeleteIconLabel: \"Wissen\",\n noRowsLabel: \"Geen regels beschikbaar\",\n noResultsOverlayLabel: \"Geen regels gevonden.\",\n MuiTablePagination: {\n labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n labelRowsPerPage: \"Regels per pagina\"\n },\n footerRowSelected: (count) => `${count} regels geselecteerd`\n }\n }\n onFilterModelChange={onFilterChange}\n onPaginationModelChange={setPaginationModel}\n onSortModelChange={handleSortModelChange}\n pageSizeOptions={[5, 10, 20, 40, 80]}\n paginationMode={mode}\n paginationModel={paginationModel}\n rowCount={isServerMode ? rowCountState : undefined}\n rows={props.data?.items}\n slotProps={{\n toolbar: {\n showQuickFilter: true,\n quickFilterProps: { debounceMs: 500 },\n mode,\n isServerMode,\n getData: async () => getData(paginationModel, sortModel, filterModel),\n actionButtons: props.actionButtons,\n localeText: props.localeText\n }\n }}\n slots={{\n toolbar: QuickSearchToolbar\n }}\n sortingMode={mode}\n sx={merge(\n {\n border: 0,\n color: \"var(--color-text)\",\n letterSpacing: \"normal\",\n minHeight: \"300px\",\n\n \"&.MuiDataGrid-root--densityCompact\": {\n \".MuiDataGrid-cell\": {\n py: \"8px\"\n }\n },\n \"&.MuiDataGrid-root--densityStandard\": {\n \".MuiDataGrid-cell\": {\n py: \"15px\"\n }\n },\n \"&.MuiDataGrid-root--densityComfortable\": {\n \".MuiDataGrid-cell\": {\n py: \"22px\"\n }\n },\n\n /**\n * The 'no results' message does not show if the DataGrid does not have a fixed height.\n * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n * the min-height of the virtualScroller to half of that height.\n */\n \".MuiDataGrid-virtualScroller\": {\n minHeight: \"150px\",\n overflow: \"hidden\",\n position: \"relative\"\n },\n\n \".MuiDataGrid-columnHeaders\": {\n \"--DataGrid-containerBackground\": \"var(--color-rijks-skyblue)\",\n backgroundCcolor: \"var(--color-rijks-skyblue)\",\n color: \"var(--color-text-light)\"\n },\n\n \".MuiDataGrid-row\": {\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n },\n\n \":nth-of-type(even)\": {\n backgroundColor: \"var(--color-rijks-grey-1)\",\n\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n }\n }\n },\n\n \".MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell\": {\n borderRight: \"1px solid var(--color-rijks-grey-2)\"\n },\n\n \".MuiDataGrid-cell\": {\n color: \"var(--color-text)\"\n },\n\n \".MuiPaginationItem-root\": {\n borderRadius: 0\n },\n\n \".MuiCheckbox-root\": {\n color: \"var(--color-primary)\",\n\n \":focus\": {\n outline: \"2px dashed var(--color-text)\",\n outlineOffset: \"-9px\",\n borderRadius: 0\n },\n\n \":disabled\": {\n color: \"var(--color-disabled)\"\n }\n },\n\n \".MuiDataGrid-columnHeader .MuiCheckbox-root\": {\n color: \"white\"\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n {...props.dataGridOverridableProps}\n />\n );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","from","to","count","_c","QuickSearchToolbar","merge","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { checkboxClasses, paginationItemClasses, type SxProps } from '@mui/material';\nimport {\n DataGrid,\n gridClasses,\n type DataGridProps,\n type GridColDef,\n type GridFilterModel,\n type GridLocaleText,\n type GridSortModel\n} from '@mui/x-data-grid';\nimport merge from 'lodash.merge';\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { QuickSearchToolbar } from './_QuickSearchToolbar';\n\nexport interface AoaTableData<T extends object = any> {\n /**\n * The paged, filtered and sorted items from the database\n */\n items: T[];\n /**\n * The total number of items present in the database table\n */\n totalItems: number;\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n /**\n * Material UI's GridFilterModel\n */\n filterModel: GridFilterModel;\n /**\n * The current page of the table\n */\n page: number;\n /**\n * The maximum number of items that are shown on a page\n */\n pageSize: number;\n /**\n * Material UI's GridSortModel\n */\n sortModel: GridSortModel;\n}\n\ntype ModeProps =\n /**\n * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n */\n | { getData?: never; mode: 'client' }\n /**\n * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n */\n | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: never };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n /**\n * Action buttons shown in the toolbar of the table\n */\n readonly actionButtons?: JSX.Element[];\n /**\n * The column structure to display the data\n */\n readonly columns: GridColDef<T>[];\n /**\n * The TableData object to be displayed in the table\n */\n readonly data: AoaTableData<T>;\n /**\n * Data-qa tag for E2E test purposes\n */\n readonly 'data-qa'?: string;\n /**\n * Overwrite a safe selection of the {@link DataGrid} properties\n */\n readonly dataGridOverridableProps?: Pick<\n DataGridProps<T>,\n | 'checkboxSelection'\n | 'getRowId'\n | 'ignoreDiacritics'\n | 'isRowSelectable'\n | 'loading'\n | 'onRowSelectionModelChange'\n | 'rowSelectionModel'\n >;\n /**\n * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n */\n readonly initialSort?: { field: string; sort: 'asc' | 'desc' };\n /**\n * Overwrites the default labels when you need a different language than Dutch\n */\n readonly localeText?: GridLocaleText & { refreshTable: string };\n /**\n * Material UI's property to apply styling\n */\n readonly sx?: SxProps;\n};\n\ninterface PaginationModel {\n page: number;\n pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n * getData={(queryOptions) => getMockData(queryOptions)}\n * data={mockData}\n * columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>) {\n const [isLoading, setIsLoading] = useState(false);\n const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n page: 0,\n pageSize: 10\n });\n const [sortModel, setSortModel] = useState<GridSortModel>([]);\n const [filterModel, setFilterModel] = useState<GridFilterModel>({\n items: []\n });\n\n const mode = props.mode ?? 'server';\n const isServerMode = mode === 'server';\n\n const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n setSortModel(sortModel);\n }, []);\n\n const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n setFilterModel(filterModel);\n }, []);\n\n const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n async function getData(paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n if (isServerMode && props.getData) {\n const fetchData = async () => {\n await props.getData({ ...paginationModel, sortModel, filterModel });\n };\n\n setIsLoading(true);\n await fetchData();\n setIsLoading(false);\n }\n }\n\n useEffect(() => {\n setRowCountState((prevRowCountState) =>\n props.data?.totalItems === undefined ? prevRowCountState : props.data?.totalItems\n );\n }, [props.data?.totalItems, setRowCountState]);\n\n useEffect(() => {\n void getData(paginationModel, sortModel, filterModel);\n // ESLint tells us here that we should add the `getData` function, however,\n // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [paginationModel, sortModel, filterModel]);\n\n return (\n <DataGrid\n columns={props.columns}\n data-qa={props['data-qa']}\n disableColumnFilter\n disableColumnMenu\n disableColumnSelector\n disableDensitySelector\n disableRowSelectionOnClick\n disableVirtualization\n filterMode={mode}\n getRowHeight={() => 'auto'}\n initialState={{\n sorting: {\n sortModel: props.initialSort ? [props.initialSort] : []\n }\n }}\n loading={isLoading}\n localeText={\n props.localeText ?? {\n columnHeaderSortIconLabel: 'Sorteren',\n toolbarQuickFilterPlaceholder: 'Zoeken...',\n toolbarQuickFilterLabel: 'Zoeken',\n toolbarQuickFilterDeleteIconLabel: 'Wissen',\n noRowsLabel: 'Geen regels beschikbaar',\n noResultsOverlayLabel: 'Geen regels gevonden.',\n MuiTablePagination: {\n labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n labelRowsPerPage: 'Regels per pagina'\n },\n footerRowSelected: (count) => `${count} regels geselecteerd`\n }\n }\n onFilterModelChange={onFilterChange}\n onPaginationModelChange={setPaginationModel}\n onSortModelChange={handleSortModelChange}\n pageSizeOptions={[5, 10, 20, 40, 80]}\n paginationMode={mode}\n paginationModel={paginationModel}\n rowCount={isServerMode ? rowCountState : undefined}\n rows={props.data?.items}\n slotProps={{\n toolbar: {\n showQuickFilter: true,\n quickFilterProps: { debounceMs: 500 },\n mode,\n isServerMode,\n getData: async () => getData(paginationModel, sortModel, filterModel),\n actionButtons: props.actionButtons,\n localeText: props.localeText\n }\n }}\n slots={{\n toolbar: QuickSearchToolbar\n }}\n sortingMode={mode}\n sx={merge(\n {\n border: 0,\n color: 'var(--color-text)',\n letterSpacing: 'normal',\n minHeight: '300px',\n\n [`&.${gridClasses['root--densityCompact']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '8px'\n }\n },\n [`&.${gridClasses['root--densityStandard']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '15px'\n }\n },\n [`&.${gridClasses['root--densityComfortable']}`]: {\n [`.${gridClasses.cell}`]: {\n py: '22px'\n }\n },\n\n /**\n * The 'no results' message does not show if the DataGrid does not have a fixed height.\n * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n * the min-height of the virtualScroller to half of that height.\n */\n [`.${gridClasses.virtualScroller}`]: {\n minHeight: '150px',\n overflow: 'hidden',\n position: 'relative'\n },\n\n [`.${gridClasses.columnHeaders}`]: {\n '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n backgroundCcolor: 'var(--color-rijks-skyblue)',\n color: 'var(--color-text-light)'\n },\n\n [`.${gridClasses.row}`]: {\n ':hover': {\n backgroundColor: 'var(--color-rijks-skyblue-light)'\n },\n\n ':nth-of-type(even)': {\n backgroundColor: 'var(--color-rijks-grey-1)',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-skyblue-light)'\n }\n }\n },\n\n [`.${gridClasses.columnHeader}, .${gridClasses.cell}, .MuiDataGrid-columnsContainer`]: {\n borderRight: '1px solid var(--color-rijks-grey-2)'\n },\n\n [`.${gridClasses.cell}`]: {\n color: 'var(--color-text)'\n },\n\n [`.${paginationItemClasses.root}`]: {\n borderRadius: 0\n },\n\n [`.${checkboxClasses.root}`]: {\n color: 'var(--color-primary)',\n\n ':focus': {\n outline: '2px dashed var(--color-text)',\n outlineOffset: '-9px',\n borderRadius: 0\n },\n\n ':disabled': {\n color: 'var(--color-disabled)'\n }\n },\n\n [`.${gridClasses.columnHeader} .${checkboxClasses.root}`]: {\n color: 'white'\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n {...props.dataGridOverridableProps}\n />\n );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","from","to","count","_c","QuickSearchToolbar","merge","gridClasses","paginationItemClasses","checkboxClasses","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { GridLocaleText, GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid';
|
|
2
|
-
declare module
|
|
2
|
+
declare module '@mui/x-data-grid' {
|
|
3
3
|
interface ToolbarPropsOverrides {
|
|
4
4
|
actionButtons?: JSX.Element[];
|
|
5
5
|
getData(this: void): void;
|
|
@@ -7,7 +7,7 @@ declare module "@mui/x-data-grid" {
|
|
|
7
7
|
localeText?: GridLocaleText & {
|
|
8
8
|
refreshTable: string;
|
|
9
9
|
};
|
|
10
|
-
mode:
|
|
10
|
+
mode: 'client' | 'server';
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
export declare const QuickSearchToolbar: import('react').MemoExoticComponent<({ mode, isServerMode, actionButtons, getData, localeText, quickFilterProps }: GridToolbarProps & ToolbarPropsOverrides) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAI1B,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAiB,qBAAqB;QACpC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAC1B,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,cAAc,GAAG;YAC5B,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;KAC3B;CACF;AAED,eAAO,MAAM,kBAAkB,qHAQ1B,gBAAgB,GAAG,qBAAqB,6CAmG5C,CAAC"}
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Refresh as
|
|
3
|
-
import { Box as
|
|
4
|
-
import { GridToolbarQuickFilter as
|
|
5
|
-
import { memo as
|
|
6
|
-
import { AoaIconButton as
|
|
7
|
-
const
|
|
8
|
-
({
|
|
9
|
-
|
|
1
|
+
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { Refresh as x } from "@mui/icons-material";
|
|
3
|
+
import { Box as h, formControlClasses as m, textFieldClasses as g, inputClasses as f, buttonBaseClasses as i, touchRippleClasses as b, svgIconClasses as t, inputBaseClasses as c } from "@mui/material";
|
|
4
|
+
import { GridToolbarQuickFilter as u } from "@mui/x-data-grid";
|
|
5
|
+
import { memo as v } from "react";
|
|
6
|
+
import { AoaIconButton as k } from "../icon-button/IconButton.js";
|
|
7
|
+
const R = v(
|
|
8
|
+
({
|
|
9
|
+
mode: s,
|
|
10
|
+
isServerMode: a,
|
|
11
|
+
actionButtons: o,
|
|
12
|
+
getData: n,
|
|
13
|
+
localeText: r,
|
|
14
|
+
quickFilterProps: p
|
|
15
|
+
}) => /* @__PURE__ */ d(
|
|
16
|
+
h,
|
|
10
17
|
{
|
|
11
|
-
className: `${
|
|
18
|
+
className: `${s}-mode`,
|
|
12
19
|
sx: {
|
|
13
20
|
display: "flex",
|
|
14
21
|
alignItems: "center",
|
|
@@ -17,18 +24,18 @@ const k = h(
|
|
|
17
24
|
"&.server-mode :nth-child(2)": {
|
|
18
25
|
marginLeft: "auto"
|
|
19
26
|
},
|
|
20
|
-
|
|
27
|
+
[`.${i.root}`]: {
|
|
21
28
|
width: "48px",
|
|
22
29
|
marginRight: "10px"
|
|
23
30
|
},
|
|
24
|
-
|
|
31
|
+
[`.${m.root}.${g.root}`]: {
|
|
25
32
|
paddingBottom: 0,
|
|
26
|
-
|
|
33
|
+
[`.${f.root}`]: {
|
|
27
34
|
position: "relative",
|
|
28
35
|
":before, :after": {
|
|
29
36
|
borderBottom: "transparent"
|
|
30
37
|
},
|
|
31
|
-
|
|
38
|
+
[`.${t.root}`]: {
|
|
32
39
|
position: "absolute",
|
|
33
40
|
right: "-1px",
|
|
34
41
|
width: "24px",
|
|
@@ -41,7 +48,7 @@ const k = h(
|
|
|
41
48
|
whiteSpace: "nowrap",
|
|
42
49
|
boxSizing: "content-box"
|
|
43
50
|
},
|
|
44
|
-
|
|
51
|
+
[`.${c.input}`]: {
|
|
45
52
|
color: "var(--color-text)",
|
|
46
53
|
fontFamily: "RijksoverheidSansText, Verdana, Arial, sans-serif",
|
|
47
54
|
fontSize: "1.125rem",
|
|
@@ -65,20 +72,20 @@ const k = h(
|
|
|
65
72
|
`
|
|
66
73
|
}
|
|
67
74
|
},
|
|
68
|
-
|
|
75
|
+
[`.${i.root}`]: {
|
|
69
76
|
position: "absolute",
|
|
70
77
|
right: "48px",
|
|
71
78
|
height: "24px",
|
|
72
79
|
width: "24px",
|
|
73
80
|
marginRight: "4px",
|
|
74
|
-
|
|
81
|
+
[`.${t.root}`]: {
|
|
75
82
|
color: "var(--color-primary)",
|
|
76
83
|
background: "none"
|
|
77
84
|
},
|
|
78
85
|
":hover, :active, :focus": {
|
|
79
86
|
backgroundColor: "transparent"
|
|
80
87
|
},
|
|
81
|
-
|
|
88
|
+
[`.${b.root}`]: {
|
|
82
89
|
display: "none"
|
|
83
90
|
}
|
|
84
91
|
}
|
|
@@ -86,14 +93,14 @@ const k = h(
|
|
|
86
93
|
}
|
|
87
94
|
},
|
|
88
95
|
children: [
|
|
89
|
-
|
|
90
|
-
o == null ? void 0 : o.map((
|
|
91
|
-
/* @__PURE__ */
|
|
96
|
+
a && /* @__PURE__ */ e(k, { icon: /* @__PURE__ */ e(x, {}), label: (r == null ? void 0 : r.refreshTable) ?? "Ververs tabel", onClick: n }),
|
|
97
|
+
o == null ? void 0 : o.map((l) => l),
|
|
98
|
+
/* @__PURE__ */ e(u, { ...p })
|
|
92
99
|
]
|
|
93
100
|
}
|
|
94
101
|
)
|
|
95
102
|
);
|
|
96
103
|
export {
|
|
97
|
-
|
|
104
|
+
R as QuickSearchToolbar
|
|
98
105
|
};
|
|
99
106
|
//# sourceMappingURL=_QuickSearchToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from
|
|
1
|
+
{"version":3,"file":"_QuickSearchToolbar.js","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material';\nimport {\n Box,\n inputBaseClasses,\n inputClasses,\n formControlClasses,\n svgIconClasses,\n touchRippleClasses,\n textFieldClasses,\n buttonBaseClasses\n} from '@mui/material';\nimport {\n GridToolbarQuickFilter,\n type GridLocaleText,\n type GridToolbarProps,\n type ToolbarPropsOverrides\n} from '@mui/x-data-grid';\nimport { memo } from 'react';\nimport { AoaIconButton } from '../icon-button/IconButton';\n\ndeclare module '@mui/x-data-grid' {\n export interface ToolbarPropsOverrides {\n actionButtons?: JSX.Element[];\n getData(this: void): void;\n isServerMode: boolean;\n localeText?: GridLocaleText & {\n refreshTable: string;\n };\n mode: 'client' | 'server';\n }\n}\n\nexport const QuickSearchToolbar = memo(\n ({\n mode,\n isServerMode,\n actionButtons,\n getData,\n localeText,\n quickFilterProps\n }: GridToolbarProps & ToolbarPropsOverrides) => (\n <Box\n className={`${mode}-mode`}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n paddingBottom: '10px',\n\n '&.server-mode :nth-child(2)': {\n marginLeft: 'auto'\n },\n\n [`.${buttonBaseClasses.root}`]: {\n width: '48px',\n marginRight: '10px'\n },\n\n [`.${formControlClasses.root}.${textFieldClasses.root}`]: {\n paddingBottom: 0,\n\n [`.${inputClasses.root}`]: {\n position: 'relative',\n\n ':before, :after': {\n borderBottom: 'transparent'\n },\n\n [`.${svgIconClasses.root}`]: {\n position: 'absolute',\n right: '-1px',\n width: '24px',\n height: '24px',\n padding: '12px',\n background: '#007bc7',\n color: '#ffffff',\n fontWeight: '700',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n boxSizing: 'content-box'\n },\n\n [`.${inputBaseClasses.input}`]: {\n color: 'var(--color-text)',\n fontFamily: 'RijksoverheidSansText, Verdana, Arial, sans-serif',\n fontSize: '1.125rem',\n boxSizing: 'border-box',\n flex: '1 1',\n height: '48px',\n margin: '0',\n padding: '0 85px 0 14px',\n background: 'var(--color-text-light)',\n border: '1px solid var(--color-rijks-grey-3)',\n boxShadow: 'inset 1px 1px 3px hsl(0deg 0% 41% / 10%)',\n lineHeight: '1.5',\n maxWidth: '100%',\n\n ':focus': {\n borderColor: 'var(--color-rijks-skyblue)',\n outline: '0 !important',\n boxShadow: `\n inset 1px 1px 3px hsl(0deg 0% 41% / 10%),\n inset 0 0 0 1px var(--color-rijks-skyblue),\n 0 0 5px rgb(0 115 191 / 50%);\n `\n }\n },\n\n [`.${buttonBaseClasses.root}`]: {\n position: 'absolute',\n right: '48px',\n height: '24px',\n width: '24px',\n marginRight: '4px',\n\n [`.${svgIconClasses.root}`]: {\n color: 'var(--color-primary)',\n background: 'none'\n },\n\n ':hover, :active, :focus': {\n backgroundColor: 'transparent'\n },\n\n [`.${touchRippleClasses.root}`]: {\n display: 'none'\n }\n }\n }\n }\n }}\n >\n {isServerMode && (\n <AoaIconButton icon={<RefreshIcon />} label={localeText?.refreshTable ?? 'Ververs tabel'} onClick={getData} />\n )}\n {actionButtons?.map((button: JSX.Element) => button)}\n <GridToolbarQuickFilter {...quickFilterProps} />\n </Box>\n )\n);\n"],"names":["QuickSearchToolbar","memo","mode","isServerMode","actionButtons","getData","localeText","quickFilterProps","jsxs","Box","buttonBaseClasses","formControlClasses","textFieldClasses","inputClasses","svgIconClasses","inputBaseClasses","touchRippleClasses","jsx","AoaIconButton","RefreshIcon","button","GridToolbarQuickFilter"],"mappings":";;;;;;AAgCO,MAAMA,IAAqBC;AAAA,EAChC,CAAC;AAAA,IACC,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,MAEA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGP,CAAI;AAAA,MAClB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,eAAe;AAAA,QAEf,+BAA+B;AAAA,UAC7B,YAAY;AAAA,QACd;AAAA,QAEA,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAG;AAAA,UAC9B,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,QAEA,CAAC,IAAIC,EAAmB,IAAI,IAAIC,EAAiB,IAAI,EAAE,GAAG;AAAA,UACxD,eAAe;AAAA,UAEf,CAAC,IAAIC,EAAa,IAAI,EAAE,GAAG;AAAA,YACzB,UAAU;AAAA,YAEV,mBAAmB;AAAA,cACjB,cAAc;AAAA,YAChB;AAAA,YAEA,CAAC,IAAIC,EAAe,IAAI,EAAE,GAAG;AAAA,cAC3B,UAAU;AAAA,cACV,OAAO;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,YAEA,CAAC,IAAIC,EAAiB,KAAK,EAAE,GAAG;AAAA,cAC9B,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cAEV,UAAU;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAAA;AAAA,YAMf;AAAA,YAEA,CAAC,IAAIL,EAAkB,IAAI,EAAE,GAAG;AAAA,cAC9B,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,aAAa;AAAA,cAEb,CAAC,IAAII,EAAe,IAAI,EAAE,GAAG;AAAA,gBAC3B,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,2BAA2B;AAAA,gBACzB,iBAAiB;AAAA,cACnB;AAAA,cAEA,CAAC,IAAIE,EAAmB,IAAI,EAAE,GAAG;AAAA,gBAC/B,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MAEJ;AAAA,MAEC,UAAA;AAAA,QACCb,KAAA,gBAAAc,EAACC,GAAc,EAAA,MAAO,gBAAAD,EAAAE,GAAA,CAAA,CAAY,GAAI,QAAOb,KAAA,gBAAAA,EAAY,iBAAgB,iBAAiB,SAASD,EAAS,CAAA;AAAA,QAE7GD,KAAA,gBAAAA,EAAe,IAAI,CAACgB,MAAwBA;AAAA,QAC7C,gBAAAH,EAACI,GAAwB,EAAA,GAAGd,EAAkB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZeroWidthSpace.js","sources":["../../../../src/components/atoms/zero-width-space/ZeroWidthSpace.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from
|
|
1
|
+
{"version":3,"file":"ZeroWidthSpace.js","sources":["../../../../src/components/atoms/zero-width-space/ZeroWidthSpace.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material';\nimport { memo, type ReactNode } from 'react';\n\n/**\n * Inserts a Zero Width Space as a React component\n *\n * @param props - Props to pass to the Zero-Width Space component\n * @example\n * ```jsx\n * <AoaZeroWidthSpace />\n * ```\n */\nexport const AoaZeroWidthSpace = memo(\n ({ variant, style, ...props }: TypographyProps): ReactNode => (\n <Typography {...props} style={style} variant={variant ?? 'caption'}>\n ​\n </Typography>\n )\n);\n"],"names":["AoaZeroWidthSpace","memo","variant","style","props","jsx","Typography"],"mappings":";;;AAYO,MAAMA,IAAoBC;AAAA,EAC/B,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,GAAGC,EAAM,MACzB,gBAAAC,EAAAC,GAAA,EAAY,GAAGF,GAAO,OAAAD,GAAc,SAASD,KAAW,WAAW,UAEpE,IAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,MAAM,IAAI,MAAM,GAAG;IAC5D;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IAChG;;OAEG;IACH,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;;OAKG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;OAEG;IACH,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EAC1F,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,MAAM,IAAI,MAAM,GAAG;IAC5D;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IAChG;;OAEG;IACH,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;;OAKG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;OAEG;IACH,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EAC1F,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,2CAoGxE"}
|
|
@@ -7,19 +7,22 @@ import { isExtensionAllowed as W } from "../../../_constants.js";
|
|
|
7
7
|
function A(e) {
|
|
8
8
|
var d, r;
|
|
9
9
|
const o = f(() => {
|
|
10
|
-
g(
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
g(
|
|
11
|
+
e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`,
|
|
12
|
+
{
|
|
13
|
+
type: "warning"
|
|
14
|
+
}
|
|
15
|
+
);
|
|
13
16
|
}, [e.maxUploadFiles, e.maxUploadSizeExceededWarning]), u = f(
|
|
14
|
-
(a,
|
|
17
|
+
(a, n) => {
|
|
15
18
|
var m, s;
|
|
16
|
-
|
|
19
|
+
n.length > 0 && (n.every((i) => i.errors.every((l) => l.code === "too-many-files")) ? o() : g(e.extensionWarning, { type: "warning" }));
|
|
17
20
|
const t = [...e.currentFiles];
|
|
18
|
-
for (const
|
|
19
|
-
const l = t.findIndex((U) => U.file.name ===
|
|
20
|
-
l === -1 ? t.push({ file:
|
|
21
|
-
file:
|
|
22
|
-
...(s = e.perFileProperties) == null ? void 0 : s.call(e,
|
|
21
|
+
for (const i of a) {
|
|
22
|
+
const l = t.findIndex((U) => U.file.name === i.name);
|
|
23
|
+
l === -1 ? t.push({ file: i, ...(m = e.perFileProperties) == null ? void 0 : m.call(e, i) }) : t.splice(l, 1, {
|
|
24
|
+
file: i,
|
|
25
|
+
...(s = e.perFileProperties) == null ? void 0 : s.call(e, i)
|
|
23
26
|
});
|
|
24
27
|
}
|
|
25
28
|
e.maxUploadFiles && t.length > e.maxUploadFiles ? o() : e.storeFiles(t);
|
|
@@ -27,8 +30,8 @@ function A(e) {
|
|
|
27
30
|
[o, e]
|
|
28
31
|
);
|
|
29
32
|
function F(a) {
|
|
30
|
-
var
|
|
31
|
-
return (
|
|
33
|
+
var n;
|
|
34
|
+
return (n = e.customFileValidator) != null && n.call(e, a) ? {
|
|
32
35
|
code: "custom-validator",
|
|
33
36
|
message: e.extensionWarning
|
|
34
37
|
} : W(e.extensionRegex, a.name) ? null : {
|
|
@@ -54,7 +57,15 @@ function A(e) {
|
|
|
54
57
|
}
|
|
55
58
|
},
|
|
56
59
|
children: [
|
|
57
|
-
/* @__PURE__ */ c(
|
|
60
|
+
/* @__PURE__ */ c(
|
|
61
|
+
"input",
|
|
62
|
+
{
|
|
63
|
+
...b(),
|
|
64
|
+
"aria-label": "File drop",
|
|
65
|
+
"data-qa": ((r = e.dataQas) == null ? void 0 : r.input) ?? "file-drop-input",
|
|
66
|
+
"data-testid": "file-drop-input"
|
|
67
|
+
}
|
|
68
|
+
),
|
|
58
69
|
/* @__PURE__ */ c(
|
|
59
70
|
x,
|
|
60
71
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["import { Box } from
|
|
1
|
+
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport { useCallback, type PropsWithChildren, type ReactNode } from 'react';\nimport { useDropzone, type Accept, type FileError, type FileRejection } from 'react-dropzone';\nimport { toast } from 'react-toastify';\nimport { isExtensionAllowed } from '../../../_constants';\n\nexport type AoaDropableFile<TProps extends object> = TProps & {\n /**\n * The file that was dropped\n */\n file: File;\n};\n\nexport interface AoaFileDropzoneDataQas {\n /**\n * The data-qa tag for the input\n */\n input: string;\n /**\n * The data-qa tag for the root element\n */\n root: string;\n}\n\nexport interface AoaFileDropzoneProps<TProps extends object, TFile extends AoaDropableFile<TProps>> {\n /**\n * The current set of files that are already dropped, coming from Redux or Zustand\n */\n currentFiles: TFile[];\n /**\n * A custom function that can perform extra checks when validating files.\n * This should return `true` if the file should be rejected or `false` if it should be accepted\n *\n * @param file - The file to be validated\n */\n customFileValidator?(file: File): boolean;\n /**\n * data-qa tags for testing\n */\n dataQas?: AoaFileDropzoneDataQas;\n /**\n * The regular expression that validates if the dropped file should be accepted or rejected\n */\n extensionRegex: RegExp;\n /**\n * The toast warning message to be shown when a file is rejection\n */\n extensionWarning: string;\n /**\n * The extension map to be passed to the dropzone component\n */\n extensions: Accept;\n /**\n * The children to show inside the box where files can be dropped\n */\n fileDropChildren?: ReactNode;\n /**\n * Whether the dropzone should be disabled or not\n */\n isDisabled?: boolean;\n /**\n * A maximum count of files that should be accepted, if exceeded no save action will be performed\n */\n maxUploadFiles?: number;\n /**\n * The toast warning message to be shown when the files to be uploaded exceeds the maximum,\n * required if {@link AoaFileDropzoneProps.maxUploadFiles | maxUploadFiles} is specified.\n */\n maxUploadSizeExceededWarning?: string;\n /**\n * Additional properties to set for every file that is to be saved\n */\n perFileProperties?(acceptedFile: File): TProps;\n /**\n * The function to overwrite the files in the client store.\n * This should overwrite all files, not merge with current, which is handled in this component\n *\n * @param files - The new set of files to be stored\n */\n storeFiles(files: TFile[]): void;\n}\n\nexport function AoaFileDropzone<TProps extends object, TFile extends AoaDropableFile<TProps>>(\n props: Readonly<PropsWithChildren<AoaFileDropzoneProps<TProps, TFile>>>\n) {\n const showMaxUploadFilesWarning = useCallback(() => {\n toast(\n props.maxUploadSizeExceededWarning ??\n `U heeft meer dan ${props.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`,\n {\n type: 'warning'\n }\n );\n }, [props.maxUploadFiles, props.maxUploadSizeExceededWarning]);\n\n const handleDrop = useCallback(\n (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n if (fileRejections.length > 0) {\n if (fileRejections.every((file) => file.errors.every((error) => error.code === 'too-many-files'))) {\n showMaxUploadFilesWarning();\n } else {\n toast(props.extensionWarning, { type: 'warning' });\n }\n }\n\n const filesClone = [...props.currentFiles];\n for (const acceptedFile of acceptedFiles) {\n const existingFileIndex = filesClone.findIndex((file) => file.file.name === acceptedFile.name);\n if (existingFileIndex === -1) {\n filesClone.push({ file: acceptedFile, ...props.perFileProperties?.(acceptedFile) } as TFile & TProps);\n } else {\n filesClone.splice(existingFileIndex, 1, {\n file: acceptedFile,\n ...props.perFileProperties?.(acceptedFile)\n } as TFile & TProps);\n }\n }\n\n if (props.maxUploadFiles && filesClone.length > props.maxUploadFiles) {\n showMaxUploadFilesWarning();\n } else {\n props.storeFiles(filesClone);\n }\n },\n [showMaxUploadFilesWarning, props]\n );\n\n function fileValidator(file: File): FileError | null {\n if (props.customFileValidator?.(file)) {\n return {\n code: 'custom-validator',\n message: props.extensionWarning\n };\n }\n\n if (isExtensionAllowed(props.extensionRegex, file.name)) {\n return null;\n }\n\n return {\n code: 'name-not-ok',\n message: props.extensionWarning\n };\n }\n\n const { getRootProps, getInputProps } = useDropzone({\n onDrop: handleDrop,\n disabled: props.isDisabled,\n accept: props.extensions,\n maxFiles: props.maxUploadFiles,\n validator: fileValidator\n });\n\n return (\n <Box\n {...getRootProps()}\n data-qa={props.dataQas?.root ?? 'file-dropzone-root'}\n sx={{\n '&:focus': {\n outline: 'none'\n }\n }}\n >\n <input\n {...getInputProps()}\n aria-label='File drop'\n data-qa={props.dataQas?.input ?? 'file-drop-input'}\n data-testid='file-drop-input'\n />\n <Box\n sx={{\n backgroundColor: 'var(--color-rijks-grey-2)',\n borderWidth: 1,\n borderStyle: 'dashed',\n borderColor: 'black',\n marginBottom: 0.5,\n textAlign: 'center'\n }}\n >\n {props.fileDropChildren}\n </Box>\n </Box>\n );\n}\n"],"names":["AoaFileDropzone","props","showMaxUploadFilesWarning","useCallback","toast","handleDrop","acceptedFiles","fileRejections","file","error","filesClone","acceptedFile","existingFileIndex","_a","_b","fileValidator","isExtensionAllowed","getRootProps","getInputProps","useDropzone","jsxs","Box","jsx"],"mappings":";;;;;;AAkFO,SAASA,EACdC,GACA;;AACM,QAAAC,IAA4BC,EAAY,MAAM;AAClD,IAAAC;AAAA,MACEH,EAAM,gCACJ,oBAAoBA,EAAM,cAAc;AAAA,MAC1C;AAAA,QACE,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,KACC,CAACA,EAAM,gBAAgBA,EAAM,4BAA4B,CAAC,GAEvDI,IAAaF;AAAA,IACjB,CAACG,GAAuBC,MAAoC;;AACtD,MAAAA,EAAe,SAAS,MACtBA,EAAe,MAAM,CAACC,MAASA,EAAK,OAAO,MAAM,CAACC,MAAUA,EAAM,SAAS,gBAAgB,CAAC,IACpEP,EAAA,IAE1BE,EAAMH,EAAM,kBAAkB,EAAE,MAAM,WAAW;AAIrD,YAAMS,IAAa,CAAC,GAAGT,EAAM,YAAY;AACzC,iBAAWU,KAAgBL,GAAe;AAClC,cAAAM,IAAoBF,EAAW,UAAU,CAACF,MAASA,EAAK,KAAK,SAASG,EAAa,IAAI;AAC7F,QAAIC,MAAsB,KACbF,EAAA,KAAK,EAAE,MAAMC,GAAc,IAAGE,IAAAZ,EAAM,sBAAN,gBAAAY,EAAA,KAAAZ,GAA0BU,IAAiC,IAEzFD,EAAA,OAAOE,GAAmB,GAAG;AAAA,UACtC,MAAMD;AAAA,UACN,IAAGG,IAAAb,EAAM,sBAAN,gBAAAa,EAAA,KAAAb,GAA0BU;AAAA,QAAY,CACxB;AAAA,MACrB;AAGF,MAAIV,EAAM,kBAAkBS,EAAW,SAAST,EAAM,iBAC1BC,EAAA,IAE1BD,EAAM,WAAWS,CAAU;AAAA,IAE/B;AAAA,IACA,CAACR,GAA2BD,CAAK;AAAA,EACnC;AAEA,WAASc,EAAcP,GAA8B;;AAC/C,YAAAK,IAAAZ,EAAM,wBAAN,QAAAY,EAAA,KAAAZ,GAA4BO,KACvB;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IACjB,IAGEe,EAAmBf,EAAM,gBAAgBO,EAAK,IAAI,IAC7C,OAGF;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IACjB;AAAA,EAAA;AAGF,QAAM,EAAE,cAAAgB,GAAc,eAAAC,EAAc,IAAIC,EAAY;AAAA,IAClD,QAAQd;AAAA,IACR,UAAUJ,EAAM;AAAA,IAChB,QAAQA,EAAM;AAAA,IACd,UAAUA,EAAM;AAAA,IAChB,WAAWc;AAAA,EAAA,CACZ;AAGC,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAa;AAAA,MACjB,aAASJ,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,SAAQ;AAAA,MAChC,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGJ,EAAc;AAAA,YAClB,cAAW;AAAA,YACX,aAASJ,IAAAb,EAAM,YAAN,gBAAAa,EAAe,UAAS;AAAA,YACjC,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACA,gBAAAQ;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,cAAc;AAAA,cACd,WAAW;AAAA,YACb;AAAA,YAEC,UAAMpB,EAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -11,18 +11,18 @@ export interface AoaFileTableProps<T extends GridValidRowModel = any> {
|
|
|
11
11
|
/**
|
|
12
12
|
* Data-qa tag for E2E test purposes
|
|
13
13
|
*/
|
|
14
|
-
|
|
14
|
+
'data-qa'?: string;
|
|
15
15
|
/**
|
|
16
16
|
* Overwrite a safe selection of the {@link DataGrid} properties
|
|
17
17
|
*/
|
|
18
|
-
dataGridOverridableProps?: Pick<DataGridProps<T>,
|
|
18
|
+
dataGridOverridableProps?: Pick<DataGridProps<T>, 'getRowId' | 'ignoreDiacritics'>;
|
|
19
19
|
/**
|
|
20
20
|
* Sets the initial sortModel in case the required sorting differs from the back-end's default sorting
|
|
21
21
|
*/
|
|
22
22
|
initialSort?: {
|
|
23
23
|
field: string;
|
|
24
|
-
sort:
|
|
24
|
+
sort: 'asc' | 'desc';
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
export declare function AoaFileTable<T extends object = any>({ data, columns, initialSort, dataGridOverridableProps,
|
|
27
|
+
export declare function AoaFileTable<T extends object = any>({ data, columns, initialSort, dataGridOverridableProps, 'data-qa': dataQa }: Readonly<AoaFileTableProps<T>>): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
//# sourceMappingURL=FileTable.d.ts.map
|