@coveord/plasma-mantine 49.3.2 → 49.3.4
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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +29 -29
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/__tests__/VitestSetup.js.map +1 -1
- package/dist/cjs/components/table/Table.js +47 -34
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/TableContext.js.map +1 -1
- package/dist/definitions/__tests__/VitestSetup.d.ts +7 -1
- package/dist/definitions/__tests__/VitestSetup.d.ts.map +1 -1
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/definitions/components/table/TableContext.d.ts +5 -0
- package/dist/definitions/components/table/TableContext.d.ts.map +1 -1
- package/dist/definitions/components/table/useTable.d.ts +1 -0
- package/dist/definitions/components/table/useTable.d.ts.map +1 -1
- package/dist/esm/__tests__/VitestSetup.js.map +1 -1
- package/dist/esm/components/table/Table.js +48 -35
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/package.json +3 -1
- package/src/__tests__/VitestSetup.ts +6 -1
- package/src/components/table/Table.tsx +40 -24
- package/src/components/table/TableContext.tsx +5 -0
- package/src/components/table/__tests__/Table.spec.tsx +62 -0
- package/src/components/table/__tests__/TableDateRangePicker.spec.tsx +1 -0
- package/src/components/table/__tests__/TableFilter.spec.tsx +8 -0
- package/src/components/table/__tests__/TablePerPage.spec.tsx +8 -2
- package/src/components/table/__tests__/TablePredicate.spec.tsx +7 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/__tests__/VitestSetup.ts"],"sourcesContent":["import matchers from '@testing-library/jest-dom/matchers';\nimport {cleanup} from '@testing-library/react';\nexpect.extend(matchers);\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: vi.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: vi.fn(), // deprecated\n removeListener: vi.fn(), // deprecated\n addEventListener: vi.fn(),\n removeEventListener: vi.fn(),\n dispatchEvent: vi.fn(),\n })),\n});\nwindow.ResizeObserver =\n window.ResizeObserver ||\n vi.fn().mockImplementation(() => ({\n disconnect: vi.fn(),\n observe: vi.fn(),\n unobserve: vi.fn(),\n }));\n\nafterEach(() => {\n cleanup();\n});\n"],"names":["expect","extend","matchers","Object","defineProperty","window","writable","value","vi","fn","mockImplementation","query","matches","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","ResizeObserver","disconnect","observe","unobserve","afterEach","cleanup"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/__tests__/VitestSetup.ts"],"sourcesContent":["import matchers, {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';\nimport {cleanup} from '@testing-library/react';\ndeclare global {\n namespace Vi {\n interface JestAssertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}\n }\n}\nexpect.extend(matchers);\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: vi.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: vi.fn(), // deprecated\n removeListener: vi.fn(), // deprecated\n addEventListener: vi.fn(),\n removeEventListener: vi.fn(),\n dispatchEvent: vi.fn(),\n })),\n});\nwindow.ResizeObserver =\n window.ResizeObserver ||\n vi.fn().mockImplementation(() => ({\n disconnect: vi.fn(),\n observe: vi.fn(),\n unobserve: vi.fn(),\n }));\n\nafterEach(() => {\n cleanup();\n});\n"],"names":["expect","extend","matchers","Object","defineProperty","window","writable","value","vi","fn","mockImplementation","query","matches","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","ResizeObserver","disconnect","observe","unobserve","afterEach","cleanup"],"mappings":";;;;;6DAA+C;qBACzB;AAMtBA,OAAOC,MAAM,CAACC,iBAAQ;AACtBC,OAAOC,cAAc,CAACC,QAAQ,cAAc;IACxCC,UAAU,IAAI;IACdC,OAAOC,GAAGC,EAAE,GAAGC,kBAAkB,CAAC,SAACC;eAAW;YAC1CC,SAAS,KAAK;YACdC,OAAOF;YACPG,UAAU,IAAI;YACdC,aAAaP,GAAGC,EAAE;YAClBO,gBAAgBR,GAAGC,EAAE;YACrBQ,kBAAkBT,GAAGC,EAAE;YACvBS,qBAAqBV,GAAGC,EAAE;YAC1BU,eAAeX,GAAGC,EAAE;QACxB;;AACJ;AACAJ,OAAOe,cAAc,GACjBf,OAAOe,cAAc,IACrBZ,GAAGC,EAAE,GAAGC,kBAAkB,CAAC;WAAO;QAC9BW,YAAYb,GAAGC,EAAE;QACjBa,SAASd,GAAGC,EAAE;QACdc,WAAWf,GAAGC,EAAE;IACpB;;AAEJe,UAAU,WAAM;IACZC,IAAAA,cAAO;AACX"}
|
|
@@ -19,6 +19,7 @@ var _core = require("@mantine/core");
|
|
|
19
19
|
var _form = require("@mantine/form");
|
|
20
20
|
var _hooks = require("@mantine/hooks");
|
|
21
21
|
var _reactTable = require("@tanstack/react-table");
|
|
22
|
+
var _lodashDebounce = /*#__PURE__*/ _interopRequireDefault(require("lodash.debounce"));
|
|
22
23
|
var _lodashDefaultsdeep = /*#__PURE__*/ _interopRequireDefault(require("lodash.defaultsdeep"));
|
|
23
24
|
var _react = require("react");
|
|
24
25
|
var _tableActions = require("./TableActions");
|
|
@@ -78,6 +79,7 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
|
|
|
78
79
|
});
|
|
79
80
|
var Table = function(param) {
|
|
80
81
|
var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
|
|
82
|
+
var _form_values, _form_values_dateRange, _form_values_dateRange1;
|
|
81
83
|
var convertedChildren = _react.Children.toArray(children);
|
|
82
84
|
var header = convertedChildren.find(function(child) {
|
|
83
85
|
return child.type === _tableHeader.TableHeader;
|
|
@@ -131,11 +133,18 @@ var Table = function(param) {
|
|
|
131
133
|
});
|
|
132
134
|
});
|
|
133
135
|
var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table), clearSelection = _useRowSelection1.clearSelection, getSelectedRow = _useRowSelection1.getSelectedRow, getSelectedRows = _useRowSelection1.getSelectedRows;
|
|
134
|
-
var
|
|
136
|
+
var _form_values_predicates;
|
|
137
|
+
var isFiltered = !!state.globalFilter || Object.keys((_form_values_predicates = (_form_values = form.values) === null || _form_values === void 0 ? void 0 : _form_values.predicates) !== null && _form_values_predicates !== void 0 ? _form_values_predicates : {}).some(function(predicate) {
|
|
138
|
+
return !!form.values.predicates[predicate];
|
|
139
|
+
}) || !!((_form_values_dateRange = form.values.dateRange) === null || _form_values_dateRange === void 0 ? void 0 : _form_values_dateRange[0]) || !!((_form_values_dateRange1 = form.values.dateRange) === null || _form_values_dateRange1 === void 0 ? void 0 : _form_values_dateRange1[1]);
|
|
140
|
+
var triggerChange = (0, _lodashDebounce.default)(function() {
|
|
135
141
|
return onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread({}, state, form.values));
|
|
136
|
-
};
|
|
142
|
+
}, 500);
|
|
137
143
|
(0, _react.useEffect)(function() {
|
|
138
144
|
onMount === null || onMount === void 0 ? void 0 : onMount(_objectSpread({}, state, form.values));
|
|
145
|
+
return function() {
|
|
146
|
+
triggerChange.cancel();
|
|
147
|
+
};
|
|
139
148
|
}, []);
|
|
140
149
|
(0, _hooks.useDidUpdate)(function() {
|
|
141
150
|
triggerChange();
|
|
@@ -144,12 +153,13 @@ var Table = function(param) {
|
|
|
144
153
|
}
|
|
145
154
|
}, [
|
|
146
155
|
state.globalFilter,
|
|
147
|
-
state.sorting,
|
|
148
156
|
state.pagination,
|
|
157
|
+
state.sorting,
|
|
149
158
|
form.values
|
|
150
159
|
]);
|
|
151
160
|
var clearFilters = (0, _react.useCallback)(function() {
|
|
152
|
-
|
|
161
|
+
var _initialState_predicates;
|
|
162
|
+
form.setFieldValue("predicates", (_initialState_predicates = initialState.predicates) !== null && _initialState_predicates !== void 0 ? _initialState_predicates : {});
|
|
153
163
|
setState(function(prevState) {
|
|
154
164
|
return _objectSpreadProps(_objectSpread({}, prevState), {
|
|
155
165
|
globalFilter: ""
|
|
@@ -224,10 +234,11 @@ var Table = function(param) {
|
|
|
224
234
|
});
|
|
225
235
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
|
|
226
236
|
ref: outsideClickRef,
|
|
227
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.
|
|
237
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableContext.TableContext.Provider, {
|
|
228
238
|
value: {
|
|
229
239
|
onChange: triggerChange,
|
|
230
240
|
state: state,
|
|
241
|
+
isFiltered: isFiltered,
|
|
231
242
|
setState: setState,
|
|
232
243
|
clearFilters: clearFilters,
|
|
233
244
|
getSelectedRow: getSelectedRow,
|
|
@@ -238,38 +249,40 @@ var Table = function(param) {
|
|
|
238
249
|
multiRowSelectionEnabled: multiRowSelectionEnabled,
|
|
239
250
|
getPageCount: table.getPageCount
|
|
240
251
|
},
|
|
241
|
-
children:
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
252
|
+
children: !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
253
|
+
children: [
|
|
254
|
+
header,
|
|
255
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Table, {
|
|
256
|
+
className: classes.table,
|
|
257
|
+
horizontalSpacing: "sm",
|
|
258
|
+
verticalSpacing: "xs",
|
|
259
|
+
pb: "sm",
|
|
260
|
+
children: [
|
|
261
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)("thead", {
|
|
262
|
+
className: classes.header,
|
|
263
|
+
children: table.getHeaderGroups().map(function(headerGroup) {
|
|
264
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
265
|
+
children: headerGroup.headers.map(function(columnHeader) {
|
|
266
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_th.Th, {
|
|
267
|
+
header: columnHeader
|
|
268
|
+
}, columnHeader.id);
|
|
269
|
+
})
|
|
270
|
+
}, headerGroup.id);
|
|
271
|
+
})
|
|
272
|
+
}),
|
|
273
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
|
|
274
|
+
children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
275
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
|
|
276
|
+
colSpan: columns.length,
|
|
277
|
+
children: noDataChildren
|
|
257
278
|
})
|
|
258
|
-
}, headerGroup.id);
|
|
259
|
-
})
|
|
260
|
-
}),
|
|
261
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
|
|
262
|
-
children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
263
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
|
|
264
|
-
colSpan: columns.length,
|
|
265
|
-
children: noDataChildren
|
|
266
279
|
})
|
|
267
280
|
})
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
281
|
+
]
|
|
282
|
+
}),
|
|
283
|
+
footer
|
|
284
|
+
]
|
|
285
|
+
})
|
|
273
286
|
})
|
|
274
287
|
});
|
|
275
288
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n | 'enableRowSelection'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n | 'enableRowSelection'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n const isFiltered =\n !!state.globalFilter ||\n Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n !!form.values.dateRange?.[0] ||\n !!form.values.dateRange?.[1];\n\n const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n return () => {\n triggerChange.cancel();\n };\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', initialState.predicates ?? {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n isFiltered,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {!rows.length && !isFiltered && !loading ? (\n noDataChildren\n ) : (\n <>\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </>\n )}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","form","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n /**\n * Object containing the table predicates and their selected values\n *\n * @example {type: \"LONG\", origin: \"system\"}\n */\n predicates: Record<string, string>;\n /**\n * Selected date range in the table\n *\n * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n */\n dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n /**\n * Function to call when the table needs an update\n */\n onChange: () => void;\n /**\n * Internal state of the table\n *\n * @see https://tanstack.com/table/v8/docs/api/core/table#state\n */\n state: TableState;\n /**\n * Function to update the table state\n */\n setState: Dispatch<(prevState: TableState) => TableState>;\n /**\n * Function that clears the filter and predicates\n */\n clearFilters: () => void;\n /**\n * Function that returns the selected row if any.\n */\n getSelectedRow: () => any | null;\n /**\n * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n */\n getSelectedRows: () => any[];\n /**\n * Function that clear the selected row\n */\n clearSelection: () => void;\n /**\n * Form used to handle predicates and dateRange\n */\n form: UseFormReturnType<TableFormType>;\n /**\n * Table container ref\n */\n containerRef: RefObject<HTMLDivElement>;\n multiRowSelectionEnabled: boolean;\n\n /**\n * Function that returns the number of pages\n */\n getPageCount: () => number;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n /**\n * Object containing the table predicates and their selected values\n *\n * @example {type: \"LONG\", origin: \"system\"}\n */\n predicates: Record<string, string>;\n /**\n * Selected date range in the table\n *\n * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n */\n dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n /**\n * Function to call when the table needs an update\n */\n onChange: () => void;\n /**\n * Internal state of the table\n *\n * @see https://tanstack.com/table/v8/docs/api/core/table#state\n */\n state: TableState;\n /**\n * Function to update the table state\n */\n setState: Dispatch<(prevState: TableState) => TableState>;\n /**\n * Whether the table currently as any kind of filter applied.\n * Useful to determine if the noDataChildren is an empty state or just the result of a filter\n */\n isFiltered: boolean;\n /**\n * Function that clears the filter and predicates\n */\n clearFilters: () => void;\n /**\n * Function that returns the selected row if any.\n */\n getSelectedRow: () => any | null;\n /**\n * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n */\n getSelectedRows: () => any[];\n /**\n * Function that clear the selected row\n */\n clearSelection: () => void;\n /**\n * Form used to handle predicates and dateRange\n */\n form: UseFormReturnType<TableFormType>;\n /**\n * Table container ref\n */\n containerRef: RefObject<HTMLDivElement>;\n multiRowSelectionEnabled: boolean;\n\n /**\n * Function that returns the number of pages\n */\n getPageCount: () => number;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":";;;;+BA0EaA;;;eAAAA;;;qBAvEoC;AAuE1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace Vi {
|
|
4
|
+
interface JestAssertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
}
|
|
2
8
|
//# sourceMappingURL=VitestSetup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VitestSetup.d.ts","sourceRoot":"","sources":["../../../src/__tests__/VitestSetup.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"VitestSetup.d.ts","sourceRoot":"","sources":["../../../src/__tests__/VitestSetup.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAC,sBAAsB,EAAC,MAAM,oCAAoC,CAAC;AAEpF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,EAAE,CAAC;QACT,UAAU,aAAa,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,sBAAsB,CAAC,CAAC,EAAE,IAAI,CAAC;SAAG;KACtG;CACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAGlF,OAAO,EAAqB,YAAY,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAC,kBAAkB,EAAgB,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AA4DhD,MAAM,WAAW,UAAU,CAAC,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,OAAO,CAAC,EAAE,IAAI,CACV,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EACtB,cAAc,GACd,MAAM,GACN,SAAS,GACT,kBAAkB,GAClB,yBAAyB,GACzB,UAAU,GACV,iBAAiB,GACjB,oBAAoB,CACzB,CAAC;CACL;AAED,UAAU,SAAS;IACf,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC;IACxC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,UAAU,EAAE,OAAO,eAAe,CAAC;IACnC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,eAAe,EAAE,OAAO,oBAAoB,CAAC;IAC7C,iBAAiB,EAAE,OAAO,sBAAsB,CAAC;IACjD,eAAe,EAAE,OAAO,oBAAoB,CAAC;CAChD;AAED,eAAO,MAAM,KAAK,EAAE,SAyLnB,CAAC"}
|
|
@@ -32,6 +32,11 @@ type TableContextType = {
|
|
|
32
32
|
* Function to update the table state
|
|
33
33
|
*/
|
|
34
34
|
setState: Dispatch<(prevState: TableState) => TableState>;
|
|
35
|
+
/**
|
|
36
|
+
* Whether the table currently as any kind of filter applied.
|
|
37
|
+
* Useful to determine if the noDataChildren is an empty state or just the result of a filter
|
|
38
|
+
*/
|
|
39
|
+
isFiltered: boolean;
|
|
35
40
|
/**
|
|
36
41
|
* Function that clears the filter and predicates
|
|
37
42
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContext.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAgB,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,SAAS,EAAE,oBAAoB,CAAC;CACnC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC,CAAC,SAAS,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,cAAc,EAAE,MAAM,GAAG,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,eAAe,EAAE,MAAM,GAAG,EAAE,CAAC;IAC7B;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACvC;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,wBAAwB,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,2CAA+C,CAAC"}
|
|
1
|
+
{"version":3,"file":"TableContext.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAgB,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,SAAS,EAAE,oBAAoB,CAAC;CACnC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC,CAAC,SAAS,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;IAC1D;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,cAAc,EAAE,MAAM,GAAG,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,eAAe,EAAE,MAAM,GAAG,EAAE,CAAC;IAC7B;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACvC;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,wBAAwB,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,2CAA+C,CAAC"}
|
|
@@ -3,6 +3,7 @@ export declare const useTable: () => {
|
|
|
3
3
|
onChange: () => void;
|
|
4
4
|
state: import("@tanstack/table-core").TableState;
|
|
5
5
|
setState: import("react").Dispatch<(prevState: import("@tanstack/table-core").TableState) => import("@tanstack/table-core").TableState>;
|
|
6
|
+
isFiltered: boolean;
|
|
6
7
|
clearFilters: () => void;
|
|
7
8
|
getSelectedRow: () => any;
|
|
8
9
|
getSelectedRows: () => any[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useTable.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useTable.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAOpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/__tests__/VitestSetup.ts"],"sourcesContent":["import matchers from '@testing-library/jest-dom/matchers';\nimport {cleanup} from '@testing-library/react';\nexpect.extend(matchers);\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: vi.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: vi.fn(), // deprecated\n removeListener: vi.fn(), // deprecated\n addEventListener: vi.fn(),\n removeEventListener: vi.fn(),\n dispatchEvent: vi.fn(),\n })),\n});\nwindow.ResizeObserver =\n window.ResizeObserver ||\n vi.fn().mockImplementation(() => ({\n disconnect: vi.fn(),\n observe: vi.fn(),\n unobserve: vi.fn(),\n }));\n\nafterEach(() => {\n cleanup();\n});\n"],"names":["matchers","cleanup","expect","extend","Object","defineProperty","window","writable","value","vi","fn","mockImplementation","query","matches","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","ResizeObserver","disconnect","observe","unobserve","afterEach"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"sources":["../../../src/__tests__/VitestSetup.ts"],"sourcesContent":["import matchers, {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';\nimport {cleanup} from '@testing-library/react';\ndeclare global {\n namespace Vi {\n interface JestAssertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}\n }\n}\nexpect.extend(matchers);\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: vi.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: vi.fn(), // deprecated\n removeListener: vi.fn(), // deprecated\n addEventListener: vi.fn(),\n removeEventListener: vi.fn(),\n dispatchEvent: vi.fn(),\n })),\n});\nwindow.ResizeObserver =\n window.ResizeObserver ||\n vi.fn().mockImplementation(() => ({\n disconnect: vi.fn(),\n observe: vi.fn(),\n unobserve: vi.fn(),\n }));\n\nafterEach(() => {\n cleanup();\n});\n"],"names":["matchers","cleanup","expect","extend","Object","defineProperty","window","writable","value","vi","fn","mockImplementation","query","matches","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","ResizeObserver","disconnect","observe","unobserve","afterEach"],"mappings":"AAAA,OAAOA,cAAwC,qCAAqC;AACpF,SAAQC,OAAO,QAAO,yBAAyB;AAM/CC,OAAOC,MAAM,CAACH;AACdI,OAAOC,cAAc,CAACC,QAAQ,cAAc;IACxCC,UAAU,IAAI;IACdC,OAAOC,GAAGC,EAAE,GAAGC,kBAAkB,CAAC,SAACC;eAAW;YAC1CC,SAAS,KAAK;YACdC,OAAOF;YACPG,UAAU,IAAI;YACdC,aAAaP,GAAGC,EAAE;YAClBO,gBAAgBR,GAAGC,EAAE;YACrBQ,kBAAkBT,GAAGC,EAAE;YACvBS,qBAAqBV,GAAGC,EAAE;YAC1BU,eAAeX,GAAGC,EAAE;QACxB;;AACJ;AACAJ,OAAOe,cAAc,GACjBf,OAAOe,cAAc,IACrBZ,GAAGC,EAAE,GAAGC,kBAAkB,CAAC;WAAO;QAC9BW,YAAYb,GAAGC,EAAE;QACjBa,SAASd,GAAGC,EAAE;QACdc,WAAWf,GAAGC,EAAE;IACpB;;AAEJe,UAAU,WAAM;IACZxB;AACJ"}
|
|
@@ -3,11 +3,12 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
|
|
|
3
3
|
import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
|
|
4
4
|
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
5
5
|
import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
|
|
6
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
7
|
import { Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable } from "@mantine/core";
|
|
8
8
|
import { useForm } from "@mantine/form";
|
|
9
9
|
import { useClickOutside, useDidUpdate } from "@mantine/hooks";
|
|
10
10
|
import { defaultColumnSizing, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
|
|
11
|
+
import debounce from "lodash.debounce";
|
|
11
12
|
import defaultsDeep from "lodash.defaultsdeep";
|
|
12
13
|
import { Children, Fragment, useCallback, useEffect, useState } from "react";
|
|
13
14
|
import { TableActions } from "./TableActions";
|
|
@@ -67,6 +68,7 @@ var useStyles = createStyles(function(theme, param) {
|
|
|
67
68
|
});
|
|
68
69
|
export var Table = function(param) {
|
|
69
70
|
var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
|
|
71
|
+
var _form_values, _form_values_dateRange, _form_values_dateRange1;
|
|
70
72
|
var convertedChildren = Children.toArray(children);
|
|
71
73
|
var header = convertedChildren.find(function(child) {
|
|
72
74
|
return child.type === TableHeader;
|
|
@@ -120,11 +122,18 @@ export var Table = function(param) {
|
|
|
120
122
|
});
|
|
121
123
|
});
|
|
122
124
|
var _useRowSelection = useRowSelection(table), clearSelection = _useRowSelection.clearSelection, getSelectedRow = _useRowSelection.getSelectedRow, getSelectedRows = _useRowSelection.getSelectedRows;
|
|
123
|
-
var
|
|
125
|
+
var _form_values_predicates;
|
|
126
|
+
var isFiltered = !!state.globalFilter || Object.keys((_form_values_predicates = (_form_values = form.values) === null || _form_values === void 0 ? void 0 : _form_values.predicates) !== null && _form_values_predicates !== void 0 ? _form_values_predicates : {}).some(function(predicate) {
|
|
127
|
+
return !!form.values.predicates[predicate];
|
|
128
|
+
}) || !!((_form_values_dateRange = form.values.dateRange) === null || _form_values_dateRange === void 0 ? void 0 : _form_values_dateRange[0]) || !!((_form_values_dateRange1 = form.values.dateRange) === null || _form_values_dateRange1 === void 0 ? void 0 : _form_values_dateRange1[1]);
|
|
129
|
+
var triggerChange = debounce(function() {
|
|
124
130
|
return onChange === null || onChange === void 0 ? void 0 : onChange(_object_spread({}, state, form.values));
|
|
125
|
-
};
|
|
131
|
+
}, 500);
|
|
126
132
|
useEffect(function() {
|
|
127
133
|
onMount === null || onMount === void 0 ? void 0 : onMount(_object_spread({}, state, form.values));
|
|
134
|
+
return function() {
|
|
135
|
+
triggerChange.cancel();
|
|
136
|
+
};
|
|
128
137
|
}, []);
|
|
129
138
|
useDidUpdate(function() {
|
|
130
139
|
triggerChange();
|
|
@@ -133,12 +142,13 @@ export var Table = function(param) {
|
|
|
133
142
|
}
|
|
134
143
|
}, [
|
|
135
144
|
state.globalFilter,
|
|
136
|
-
state.sorting,
|
|
137
145
|
state.pagination,
|
|
146
|
+
state.sorting,
|
|
138
147
|
form.values
|
|
139
148
|
]);
|
|
140
149
|
var clearFilters = useCallback(function() {
|
|
141
|
-
|
|
150
|
+
var _initialState_predicates;
|
|
151
|
+
form.setFieldValue("predicates", (_initialState_predicates = initialState.predicates) !== null && _initialState_predicates !== void 0 ? _initialState_predicates : {});
|
|
142
152
|
setState(function(prevState) {
|
|
143
153
|
return _object_spread_props(_object_spread({}, prevState), {
|
|
144
154
|
globalFilter: ""
|
|
@@ -213,10 +223,11 @@ export var Table = function(param) {
|
|
|
213
223
|
});
|
|
214
224
|
return /*#__PURE__*/ _jsx(Box, {
|
|
215
225
|
ref: outsideClickRef,
|
|
216
|
-
children: /*#__PURE__*/
|
|
226
|
+
children: /*#__PURE__*/ _jsx(TableContext.Provider, {
|
|
217
227
|
value: {
|
|
218
228
|
onChange: triggerChange,
|
|
219
229
|
state: state,
|
|
230
|
+
isFiltered: isFiltered,
|
|
220
231
|
setState: setState,
|
|
221
232
|
clearFilters: clearFilters,
|
|
222
233
|
getSelectedRow: getSelectedRow,
|
|
@@ -227,38 +238,40 @@ export var Table = function(param) {
|
|
|
227
238
|
multiRowSelectionEnabled: multiRowSelectionEnabled,
|
|
228
239
|
getPageCount: table.getPageCount
|
|
229
240
|
},
|
|
230
|
-
children:
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
241
|
+
children: !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ _jsxs(_Fragment, {
|
|
242
|
+
children: [
|
|
243
|
+
header,
|
|
244
|
+
/*#__PURE__*/ _jsxs(MantineTable, {
|
|
245
|
+
className: classes.table,
|
|
246
|
+
horizontalSpacing: "sm",
|
|
247
|
+
verticalSpacing: "xs",
|
|
248
|
+
pb: "sm",
|
|
249
|
+
children: [
|
|
250
|
+
/*#__PURE__*/ _jsx("thead", {
|
|
251
|
+
className: classes.header,
|
|
252
|
+
children: table.getHeaderGroups().map(function(headerGroup) {
|
|
253
|
+
return /*#__PURE__*/ _jsx("tr", {
|
|
254
|
+
children: headerGroup.headers.map(function(columnHeader) {
|
|
255
|
+
return /*#__PURE__*/ _jsx(Th, {
|
|
256
|
+
header: columnHeader
|
|
257
|
+
}, columnHeader.id);
|
|
258
|
+
})
|
|
259
|
+
}, headerGroup.id);
|
|
260
|
+
})
|
|
261
|
+
}),
|
|
262
|
+
/*#__PURE__*/ _jsx("tbody", {
|
|
263
|
+
children: rows.length ? rows : /*#__PURE__*/ _jsx("tr", {
|
|
264
|
+
children: /*#__PURE__*/ _jsx("td", {
|
|
265
|
+
colSpan: columns.length,
|
|
266
|
+
children: noDataChildren
|
|
246
267
|
})
|
|
247
|
-
}, headerGroup.id);
|
|
248
|
-
})
|
|
249
|
-
}),
|
|
250
|
-
/*#__PURE__*/ _jsx("tbody", {
|
|
251
|
-
children: rows.length ? rows : /*#__PURE__*/ _jsx("tr", {
|
|
252
|
-
children: /*#__PURE__*/ _jsx("td", {
|
|
253
|
-
colSpan: columns.length,
|
|
254
|
-
children: noDataChildren
|
|
255
268
|
})
|
|
256
269
|
})
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
270
|
+
]
|
|
271
|
+
}),
|
|
272
|
+
footer
|
|
273
|
+
]
|
|
274
|
+
})
|
|
262
275
|
})
|
|
263
276
|
});
|
|
264
277
|
};
|