@okta/odyssey-react-mui 1.14.3 → 1.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/DataTable/DataTable.js +450 -0
  3. package/dist/DataTable/DataTable.js.map +1 -0
  4. package/dist/DataTable/DataTableEmptyState.js +55 -0
  5. package/dist/DataTable/DataTableEmptyState.js.map +1 -0
  6. package/dist/DataTable/DataTablePagination.js +221 -0
  7. package/dist/DataTable/DataTablePagination.js.map +1 -0
  8. package/dist/DataTable/DataTableRowActions.js +99 -0
  9. package/dist/DataTable/DataTableRowActions.js.map +1 -0
  10. package/dist/DataTable/DataTableSettings.js +84 -0
  11. package/dist/DataTable/DataTableSettings.js.map +1 -0
  12. package/dist/DataTable/constants.js +15 -0
  13. package/dist/DataTable/constants.js.map +1 -0
  14. package/dist/DataTable/index.js +15 -0
  15. package/dist/DataTable/index.js.map +1 -0
  16. package/dist/DataTable/reorderDataRowsLocally.js +26 -0
  17. package/dist/DataTable/reorderDataRowsLocally.js.map +1 -0
  18. package/dist/DataTable/useRowReordering.js +179 -0
  19. package/dist/DataTable/useRowReordering.js.map +1 -0
  20. package/dist/DataTable/useScrollIndication.js +70 -0
  21. package/dist/DataTable/useScrollIndication.js.map +1 -0
  22. package/dist/index.js +1 -0
  23. package/dist/index.js.map +1 -1
  24. package/dist/labs/DataFilters.js +47 -15
  25. package/dist/labs/DataFilters.js.map +1 -1
  26. package/dist/labs/DataTable.js +19 -14
  27. package/dist/labs/DataTable.js.map +1 -1
  28. package/dist/labs/index.js +0 -1
  29. package/dist/labs/index.js.map +1 -1
  30. package/dist/properties/ts/odyssey-react-mui.js +27 -1
  31. package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
  32. package/dist/src/DataTable/DataTable.d.ts +151 -0
  33. package/dist/src/DataTable/DataTable.d.ts.map +1 -0
  34. package/dist/src/DataTable/DataTableEmptyState.d.ts +21 -0
  35. package/dist/src/DataTable/DataTableEmptyState.d.ts.map +1 -0
  36. package/dist/src/DataTable/DataTablePagination.d.ts +33 -0
  37. package/dist/src/DataTable/DataTablePagination.d.ts.map +1 -0
  38. package/dist/src/DataTable/DataTableRowActions.d.ts +30 -0
  39. package/dist/src/DataTable/DataTableRowActions.d.ts.map +1 -0
  40. package/dist/src/DataTable/DataTableSettings.d.ts +27 -0
  41. package/dist/src/DataTable/DataTableSettings.d.ts.map +1 -0
  42. package/dist/src/DataTable/constants.d.ts +14 -0
  43. package/dist/src/DataTable/constants.d.ts.map +1 -0
  44. package/dist/src/DataTable/index.d.ts +16 -0
  45. package/dist/src/DataTable/index.d.ts.map +1 -0
  46. package/dist/src/DataTable/reorderDataRowsLocally.d.ts +26 -0
  47. package/dist/src/DataTable/reorderDataRowsLocally.d.ts.map +1 -0
  48. package/dist/src/DataTable/useRowReordering.d.ts +56 -0
  49. package/dist/src/DataTable/useRowReordering.d.ts.map +1 -0
  50. package/dist/src/DataTable/useScrollIndication.d.ts +22 -0
  51. package/dist/src/DataTable/useScrollIndication.d.ts.map +1 -0
  52. package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
  53. package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
  54. package/dist/src/index.d.ts +1 -0
  55. package/dist/src/index.d.ts.map +1 -1
  56. package/dist/src/labs/DataFilters.d.ts +5 -1
  57. package/dist/src/labs/DataFilters.d.ts.map +1 -1
  58. package/dist/src/labs/DataTable.d.ts +2 -2
  59. package/dist/src/labs/DataTable.d.ts.map +1 -1
  60. package/dist/src/labs/index.d.ts +3 -1
  61. package/dist/src/labs/index.d.ts.map +1 -1
  62. package/dist/src/properties/ts/odyssey-react-mui.d.ts +27 -1
  63. package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  64. package/dist/src/theme/components.d.ts.map +1 -1
  65. package/dist/theme/components.js +37 -18
  66. package/dist/theme/components.js.map +1 -1
  67. package/dist/tsconfig.production.tsbuildinfo +1 -1
  68. package/package.json +3 -3
  69. package/src/DataTable/DataTable.tsx +746 -0
  70. package/src/DataTable/DataTableEmptyState.tsx +62 -0
  71. package/src/DataTable/DataTablePagination.tsx +289 -0
  72. package/src/DataTable/DataTableRowActions.tsx +122 -0
  73. package/src/DataTable/DataTableSettings.tsx +135 -0
  74. package/src/DataTable/constants.ts +14 -0
  75. package/src/DataTable/index.tsx +28 -0
  76. package/src/DataTable/reorderDataRowsLocally.tsx +48 -0
  77. package/src/DataTable/useRowReordering.tsx +235 -0
  78. package/src/DataTable/useScrollIndication.tsx +118 -0
  79. package/src/index.ts +1 -0
  80. package/src/labs/DataFilters.tsx +69 -17
  81. package/src/labs/DataTable.tsx +29 -20
  82. package/src/labs/index.ts +3 -1
  83. package/src/properties/odyssey-react-mui.properties +41 -2
  84. package/src/properties/ts/odyssey-react-mui.ts +1 -1
  85. package/src/theme/components.tsx +43 -16
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.14.5](https://github.com/okta/odyssey/compare/v1.14.4...v1.14.5) (2024-03-01)
7
+
8
+ **Note:** Version bump only for package @okta/odyssey-react-mui
9
+
10
+ ## [1.14.4](https://github.com/okta/odyssey/compare/v1.14.3...v1.14.4) (2024-03-01)
11
+
12
+ **Note:** Version bump only for package @okta/odyssey-react-mui
13
+
6
14
  ## [1.14.3](https://github.com/okta/odyssey/compare/v1.14.2...v1.14.3) (2024-02-29)
7
15
 
8
16
  **Note:** Version bump only for package @okta/odyssey-react-mui
@@ -0,0 +1,450 @@
1
+ /*!
2
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
+ *
5
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
+ * Unless required by applicable law or agreed to in writing, software
7
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
+ *
10
+ * See the License for the specific language governing permissions and limitations under the License.
11
+ */
12
+
13
+ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
14
+ import { useMaterialReactTable, MRT_TableContainer } from "material-react-table";
15
+ import { ArrowDownIcon, ArrowUnsortedIcon, DragIndicatorIcon, MoreIcon } from "../icons.generated/index.js";
16
+ import { densityValues } from "./constants.js";
17
+ import { DataTablePagination } from "./DataTablePagination.js";
18
+ import { DataFilters } from "../labs/DataFilters.js";
19
+ import { DataTableRowActions } from "./DataTableRowActions.js";
20
+ import { useRowReordering } from "./useRowReordering.js";
21
+ import { DataTableSettings } from "./DataTableSettings.js";
22
+ import { MenuButton } from "../MenuButton.js";
23
+ import { Box } from "../Box.js";
24
+ import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
25
+ import { useScrollIndication } from "./useScrollIndication.js";
26
+ import styled from "@emotion/styled";
27
+ import { DataTableEmptyState } from "./DataTableEmptyState.js";
28
+ import { Callout } from "../Callout.js";
29
+ import { t } from "i18next";
30
+ import { jsx as _jsx } from "react/jsx-runtime";
31
+ import { Fragment as _Fragment } from "react/jsx-runtime";
32
+ import { jsxs as _jsxs } from "react/jsx-runtime";
33
+ const displayColumnDefOptions = {
34
+ "mrt-row-actions": {
35
+ header: "",
36
+ grow: true,
37
+ muiTableBodyCellProps: {
38
+ align: "right",
39
+ sx: {
40
+ overflow: "visible",
41
+ width: "unset"
42
+ },
43
+ className: "ods-actions-cell"
44
+ },
45
+ muiTableHeadCellProps: {
46
+ align: "right",
47
+ sx: {
48
+ width: "unset"
49
+ },
50
+ className: "ods-actions-cell"
51
+ }
52
+ },
53
+ "mrt-row-drag": {
54
+ header: "",
55
+ muiTableBodyCellProps: {
56
+ sx: {
57
+ minWidth: 0,
58
+ width: "auto"
59
+ },
60
+ className: "ods-drag-handle"
61
+ },
62
+ muiTableHeadCellProps: {
63
+ sx: {
64
+ minWidth: 0,
65
+ width: "auto"
66
+ },
67
+ children: _jsx(Box, {
68
+ sx: {
69
+ marginInline: "-0.1rem"
70
+ },
71
+ children: _jsx(DragIndicatorIcon, {
72
+ sx: {
73
+ marginInline: 1,
74
+ opacity: 0
75
+ }
76
+ })
77
+ })
78
+ }
79
+ },
80
+ "mrt-row-select": {
81
+ muiTableHeadCellProps: {
82
+ padding: "checkbox"
83
+ },
84
+ muiTableBodyCellProps: {
85
+ padding: "checkbox"
86
+ }
87
+ }
88
+ };
89
+ const ScrollableTableContainer = styled("div", {
90
+ shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
91
+ })(({
92
+ odysseyDesignTokens,
93
+ isScrollableStart,
94
+ isScrollableEnd
95
+ }) => ({
96
+ borderBlockEndColor: odysseyDesignTokens.HueNeutral100,
97
+ borderBlockEndStyle: "solid",
98
+ borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,
99
+ marginBlockEnd: odysseyDesignTokens.Spacing4,
100
+ position: "relative",
101
+ borderInlineStartColor: isScrollableStart ? odysseyDesignTokens.HueNeutral200 : "transparent",
102
+ borderInlineStartStyle: "solid",
103
+ borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
104
+ "::before": {
105
+ background: "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
106
+ content: '""',
107
+ opacity: isScrollableStart ? "0.075" : "0",
108
+ pointerEvents: "none",
109
+ position: "absolute",
110
+ top: 0,
111
+ left: 0,
112
+ bottom: 0,
113
+ width: odysseyDesignTokens.Spacing6,
114
+ zIndex: 100,
115
+ transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
116
+ },
117
+ borderInlineEndColor: isScrollableEnd ? odysseyDesignTokens.HueNeutral200 : "transparent",
118
+ borderInlineEndStyle: "solid",
119
+ borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
120
+ "::after": {
121
+ background: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
122
+ content: '""',
123
+ opacity: isScrollableEnd ? "0.075" : "0",
124
+ pointerEvents: "none",
125
+ position: "absolute",
126
+ top: 0,
127
+ right: 0,
128
+ bottom: 0,
129
+ width: odysseyDesignTokens.Spacing6,
130
+ transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
131
+ }
132
+ }));
133
+ const DataTable = ({
134
+ columns,
135
+ getRowId: getRowIdProp,
136
+ currentPage = 1,
137
+ initialDensity = densityValues[0],
138
+ resultsPerPage = 20,
139
+ getData,
140
+ onReorderRows,
141
+ totalRows,
142
+ hasSearchSubmitButton,
143
+ searchDelayTime,
144
+ paginationType = "paged",
145
+ onChangeRowSelection,
146
+ rowActionButtons,
147
+ rowActionMenuItems,
148
+ hasChangeableDensity,
149
+ hasColumnResizing,
150
+ hasColumnVisibility,
151
+ hasFilters,
152
+ hasPagination,
153
+ hasRowReordering,
154
+ hasRowSelection,
155
+ hasSearch,
156
+ hasSorting,
157
+ bulkActionMenuItems,
158
+ errorMessage: errorMessageProp,
159
+ emptyPlaceholder,
160
+ noResultsPlaceholder
161
+ }) => {
162
+ const [data, setData] = useState([]);
163
+ const [pagination, setPagination] = useState({
164
+ pageIndex: currentPage,
165
+ pageSize: resultsPerPage
166
+ });
167
+ const [draggingRow, setDraggingRow] = useState();
168
+ const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] = useState(true);
169
+ const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] = useState(true);
170
+ const [tableInnerContainerWidth, setTableInnerContainerWidth] = useState("100%");
171
+ const tableOuterContainerRef = useRef(null);
172
+ const tableInnerContainerRef = useRef(null);
173
+ const tableContentRef = useRef(null);
174
+ const [columnSorting, setColumnSorting] = useState([]);
175
+ const [columnVisibility, setColumnVisibility] = useState();
176
+ const [rowDensity, setRowDensity] = useState(initialDensity);
177
+ const [rowSelection, setRowSelection] = useState({});
178
+ const [search, setSearch] = useState("");
179
+ const [filters, setFilters] = useState();
180
+ const [initialFilters, setInitialFilters] = useState();
181
+ const [isLoading, setIsLoading] = useState(true);
182
+ const [isEmpty, setIsEmpty] = useState();
183
+ const [errorMessage, setErrorMessage] = useState(errorMessageProp);
184
+ useScrollIndication({
185
+ tableOuterContainer: tableOuterContainerRef.current,
186
+ tableInnerContainer: tableInnerContainerRef.current,
187
+ setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
188
+ setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
189
+ setTableInnerContainerWidth: setTableInnerContainerWidth
190
+ });
191
+ const odysseyDesignTokens = useOdysseyDesignTokens();
192
+ const {
193
+ dragHandleStyles,
194
+ dragHandleText,
195
+ draggableTableBodyRowClassName,
196
+ handleDragHandleKeyDown,
197
+ handleDragHandleOnDragCapture,
198
+ handleDragHandleOnDragEnd,
199
+ resetDraggingAndHoveredRow,
200
+ updateRowOrder
201
+ } = useRowReordering({
202
+ totalRows,
203
+ onReorderRows,
204
+ data,
205
+ setData,
206
+ draggingRow,
207
+ setDraggingRow,
208
+ resultsPerPage: pagination.pageSize,
209
+ page: pagination.pageIndex
210
+ });
211
+ const getRowId = getRowIdProp ? getRowIdProp : row => row.id;
212
+ const rowDensityCellClassName = useMemo(() => {
213
+ return rowDensity === "spacious" ? "MuiTableCell-spacious" : rowDensity === "compact" ? "MuiTableCell-compact" : "MuiTableCell-default";
214
+ }, [rowDensity]);
215
+ const renderRowActions = useCallback(({
216
+ row
217
+ }) => {
218
+ const currentIndex = row.index + (pagination.pageIndex - 1) * pagination.pageSize;
219
+ return _jsx(DataTableRowActions, {
220
+ row: row,
221
+ rowIndex: currentIndex,
222
+ rowActionButtons: rowActionButtons,
223
+ rowActionMenuItems: rowActionMenuItems,
224
+ totalRows: totalRows,
225
+ updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
226
+ });
227
+ }, [pagination, rowActionButtons, rowActionMenuItems, hasRowReordering, onReorderRows, totalRows, updateRowOrder]);
228
+ const dataTableFilters = useMemo(() => columns.filter(column => column.enableColumnFilter !== false).map(column => {
229
+ return {
230
+ id: column.accessorKey,
231
+ label: column.header,
232
+ variant: column.filterVariant ?? "text",
233
+ options: column.filterSelectOptions
234
+ };
235
+ }), [columns]);
236
+ const defaultCell = useCallback(({
237
+ cell
238
+ }) => {
239
+ const value = cell.getValue();
240
+ return _jsx(Box, {
241
+ sx: {
242
+ whiteSpace: "nowrap",
243
+ textOverflow: "ellipsis",
244
+ overflow: "hidden"
245
+ },
246
+ children: value
247
+ });
248
+ }, []);
249
+ const emptyState = useCallback(() => {
250
+ const noResultsInnerContent = noResultsPlaceholder || _jsx(DataTableEmptyState, {
251
+ heading: t("table.noresults.heading"),
252
+ text: t("table.noresults.text")
253
+ });
254
+ const emptyStateInnerContent = emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;
255
+ return _jsx(Box, {
256
+ sx: {
257
+ width: tableInnerContainerWidth
258
+ },
259
+ children: emptyStateInnerContent
260
+ });
261
+ }, [tableInnerContainerWidth, emptyPlaceholder, noResultsPlaceholder, isEmpty]);
262
+ const dataTable = useMaterialReactTable({
263
+ columns: columns,
264
+ data: data,
265
+ getRowId: getRowId,
266
+ state: {
267
+ density: rowDensity,
268
+ sorting: columnSorting,
269
+ globalFilter: search,
270
+ columnVisibility,
271
+ isLoading,
272
+ rowSelection
273
+ },
274
+ icons: {
275
+ ArrowDownwardIcon: ArrowDownIcon,
276
+ DragHandleIcon: DragIndicatorIcon,
277
+ SyncAltIcon: ArrowUnsortedIcon
278
+ },
279
+ enableColumnActions: false,
280
+ enableColumnResizing: hasColumnResizing,
281
+ enableDensityToggle: false,
282
+ enableFilters: false,
283
+ enableFullScreenToggle: false,
284
+ enableGlobalFilter: false,
285
+ enableHiding: false,
286
+ enablePagination: false,
287
+ layoutMode: "grid-no-grow",
288
+ manualFiltering: true,
289
+ manualSorting: true,
290
+ muiTablePaperProps: {
291
+ elevation: 0,
292
+ sx: {
293
+ overflow: "visible"
294
+ }
295
+ },
296
+ selectAllMode: "all",
297
+ displayColumnDefOptions: displayColumnDefOptions,
298
+ muiTableBodyCellProps: () => ({
299
+ className: rowDensityCellClassName
300
+ }),
301
+ defaultColumn: {
302
+ Cell: defaultCell
303
+ },
304
+ enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
305
+ enableRowDragging: hasRowReordering && Boolean(onReorderRows),
306
+ muiTableBodyRowProps: ({
307
+ table,
308
+ row
309
+ }) => ({
310
+ className: draggableTableBodyRowClassName({
311
+ currentRowId: row.id,
312
+ draggingRowId: draggingRow?.id,
313
+ hoveredRowId: table.getState().hoveredRow?.id
314
+ })
315
+ }),
316
+ muiRowDragHandleProps: ({
317
+ table,
318
+ row
319
+ }) => ({
320
+ onKeyDown: event => handleDragHandleKeyDown({
321
+ table,
322
+ row,
323
+ event
324
+ }),
325
+ onBlur: () => resetDraggingAndHoveredRow(table),
326
+ onDragEnd: () => handleDragHandleOnDragEnd(table),
327
+ onDragCapture: () => handleDragHandleOnDragCapture(table),
328
+ sx: dragHandleStyles,
329
+ ...dragHandleText
330
+ }),
331
+ enableRowActions: hasRowReordering === true && onReorderRows || rowActionButtons || rowActionMenuItems ? true : false,
332
+ positionActionsColumn: "last",
333
+ renderRowActions: ({
334
+ row
335
+ }) => renderRowActions({
336
+ row
337
+ }),
338
+ enableRowSelection: hasRowSelection,
339
+ onRowSelectionChange: setRowSelection,
340
+ enableSorting: hasSorting,
341
+ onSortingChange: setColumnSorting,
342
+ muiTableHeadCellProps: ({
343
+ column: currentColumn
344
+ }) => ({
345
+ className: columnSorting.find(sortedColumn => sortedColumn.id === currentColumn.id) ? "isSorted" : "isUnsorted"
346
+ }),
347
+ enableRowVirtualization: paginationType !== "loadMore" && pagination.pageSize > 50,
348
+ rowVirtualizerInstanceRef: useRef(null),
349
+ rowVirtualizerOptions: {
350
+ overscan: 4
351
+ },
352
+ renderEmptyRowsFallback: emptyState,
353
+ muiTableProps: {
354
+ ref: tableContentRef
355
+ },
356
+ muiTableContainerProps: {
357
+ ref: tableInnerContainerRef
358
+ }
359
+ });
360
+ const bulkActionMenuButton = useMemo(() => _jsx(_Fragment, {
361
+ children: _jsx(MenuButton, {
362
+ buttonVariant: "secondary",
363
+ endIcon: _jsx(MoreIcon, {}),
364
+ isDisabled: Object.keys(rowSelection).length === 0,
365
+ ariaLabel: "More actions",
366
+ children: bulkActionMenuItems?.(rowSelection)
367
+ })
368
+ }), [bulkActionMenuItems, rowSelection]);
369
+ useEffect(() => {
370
+ (async () => {
371
+ setIsLoading(true);
372
+ setErrorMessage(errorMessageProp);
373
+ try {
374
+ const incomingData = await getData?.({
375
+ page: pagination.pageIndex,
376
+ resultsPerPage: pagination.pageSize,
377
+ search,
378
+ filters,
379
+ sort: columnSorting
380
+ });
381
+ setData(incomingData);
382
+ } catch (error) {
383
+ setErrorMessage(typeof error === "string" ? error : t("table.error"));
384
+ } finally {
385
+ setIsLoading(false);
386
+ }
387
+ })();
388
+ }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);
389
+ useEffect(() => {
390
+ if (!initialFilters && filters) {
391
+ setInitialFilters(filters);
392
+ }
393
+ setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && filters === initialFilters && data.length === 0);
394
+ }, [filters, pagination, search, data, currentPage, initialFilters, resultsPerPage]);
395
+ useEffect(() => {
396
+ onChangeRowSelection?.(rowSelection);
397
+ }, [rowSelection, onChangeRowSelection]);
398
+ return _jsxs(_Fragment, {
399
+ children: [(hasSearch || hasFilters || hasChangeableDensity || hasColumnVisibility || bulkActionMenuItems) && _jsx(Box, {
400
+ sx: {
401
+ marginBottom: 5
402
+ },
403
+ children: _jsx(DataFilters, {
404
+ onChangeSearch: hasSearch ? setSearch : undefined,
405
+ onChangeFilters: hasFilters ? setFilters : undefined,
406
+ hasSearchSubmitButton: hasSearchSubmitButton,
407
+ searchDelayTime: searchDelayTime,
408
+ filters: hasFilters ? dataTableFilters : undefined,
409
+ isDisabled: isEmpty,
410
+ additionalActions: _jsxs(_Fragment, {
411
+ children: [_jsx(DataTableSettings, {
412
+ hasChangeableDensity: hasChangeableDensity,
413
+ rowDensity: rowDensity,
414
+ setRowDensity: setRowDensity,
415
+ hasColumnVisibility: hasColumnVisibility,
416
+ columns: columns,
417
+ columnVisibility: columnVisibility,
418
+ setColumnVisibility: setColumnVisibility
419
+ }), bulkActionMenuItems && bulkActionMenuButton]
420
+ })
421
+ })
422
+ }), errorMessage && _jsx(Box, {
423
+ sx: {
424
+ marginBlockEnd: 2
425
+ },
426
+ children: _jsx(Callout, {
427
+ severity: "error",
428
+ text: errorMessage
429
+ })
430
+ }), _jsx(ScrollableTableContainer, {
431
+ odysseyDesignTokens: odysseyDesignTokens,
432
+ isScrollableStart: !isTableContainerScrolledToStart,
433
+ isScrollableEnd: !isTableContainerScrolledToEnd,
434
+ ref: tableOuterContainerRef,
435
+ children: _jsx(MRT_TableContainer, {
436
+ table: dataTable
437
+ })
438
+ }), hasPagination && _jsx(DataTablePagination, {
439
+ pagination: pagination,
440
+ setPagination: setPagination,
441
+ totalRows: totalRows,
442
+ isDisabled: isEmpty,
443
+ variant: paginationType
444
+ })]
445
+ });
446
+ };
447
+ const MemoizedDataTable = memo(DataTable);
448
+ MemoizedDataTable.displayName = "DataTable";
449
+ export { MemoizedDataTable as DataTable };
450
+ //# sourceMappingURL=DataTable.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTable.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useMaterialReactTable","MRT_TableContainer","ArrowDownIcon","ArrowUnsortedIcon","DragIndicatorIcon","MoreIcon","densityValues","DataTablePagination","DataFilters","DataTableRowActions","useRowReordering","DataTableSettings","MenuButton","Box","useOdysseyDesignTokens","useScrollIndication","styled","DataTableEmptyState","Callout","t","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","displayColumnDefOptions","header","grow","muiTableBodyCellProps","align","sx","overflow","width","className","muiTableHeadCellProps","minWidth","children","marginInline","opacity","padding","ScrollableTableContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrollableStart","isScrollableEnd","borderBlockEndColor","HueNeutral100","borderBlockEndStyle","borderBlockEndWidth","BorderWidthMain","marginBlockEnd","Spacing4","position","borderInlineStartColor","HueNeutral200","borderInlineStartStyle","borderInlineStartWidth","background","content","pointerEvents","top","left","bottom","Spacing6","zIndex","transition","TransitionDurationMain","TransitionTimingMain","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","right","DataTable","columns","getRowId","getRowIdProp","currentPage","initialDensity","resultsPerPage","getData","onReorderRows","totalRows","hasSearchSubmitButton","searchDelayTime","paginationType","onChangeRowSelection","rowActionButtons","rowActionMenuItems","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSorting","bulkActionMenuItems","errorMessage","errorMessageProp","emptyPlaceholder","noResultsPlaceholder","data","setData","pagination","setPagination","pageIndex","pageSize","draggingRow","setDraggingRow","isTableContainerScrolledToStart","setIsTableContainerScrolledToStart","isTableContainerScrolledToEnd","setIsTableContainerScrolledToEnd","tableInnerContainerWidth","setTableInnerContainerWidth","tableOuterContainerRef","tableInnerContainerRef","tableContentRef","columnSorting","setColumnSorting","columnVisibility","setColumnVisibility","rowDensity","setRowDensity","rowSelection","setRowSelection","search","setSearch","filters","setFilters","initialFilters","setInitialFilters","isLoading","setIsLoading","isEmpty","setIsEmpty","setErrorMessage","tableOuterContainer","current","tableInnerContainer","dragHandleStyles","dragHandleText","draggableTableBodyRowClassName","handleDragHandleKeyDown","handleDragHandleOnDragCapture","handleDragHandleOnDragEnd","resetDraggingAndHoveredRow","updateRowOrder","page","row","id","rowDensityCellClassName","renderRowActions","currentIndex","index","rowIndex","undefined","dataTableFilters","filter","column","enableColumnFilter","map","accessorKey","label","variant","filterVariant","options","filterSelectOptions","defaultCell","cell","value","getValue","whiteSpace","textOverflow","emptyState","noResultsInnerContent","heading","text","emptyStateInnerContent","dataTable","state","density","sorting","globalFilter","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","enableColumnActions","enableColumnResizing","enableDensityToggle","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","selectAllMode","defaultColumn","Cell","enableRowOrdering","Boolean","enableRowDragging","muiTableBodyRowProps","table","currentRowId","draggingRowId","hoveredRowId","getState","hoveredRow","muiRowDragHandleProps","onKeyDown","event","onBlur","onDragEnd","onDragCapture","enableRowActions","positionActionsColumn","enableRowSelection","onRowSelectionChange","enableSorting","onSortingChange","currentColumn","find","sortedColumn","enableRowVirtualization","rowVirtualizerInstanceRef","rowVirtualizerOptions","overscan","renderEmptyRowsFallback","muiTableProps","ref","muiTableContainerProps","bulkActionMenuButton","buttonVariant","endIcon","isDisabled","Object","keys","length","ariaLabel","incomingData","sort","error","marginBottom","onChangeSearch","onChangeFilters","additionalActions","severity","MemoizedDataTable","displayName"],"sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n ReactNode,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n MRT_Cell,\n MRT_DensityState,\n MRT_Row,\n MRT_RowData,\n MRT_SortingState,\n MRT_TableOptions,\n MRT_RowSelectionState,\n MRT_RowVirtualizer,\n MRT_VisibilityState,\n useMaterialReactTable,\n MRT_TableContainer,\n} from \"material-react-table\";\nimport {\n ArrowDownIcon,\n ArrowUnsortedIcon,\n DragIndicatorIcon,\n MoreIcon,\n} from \"../icons.generated\";\nimport { densityValues, paginationTypeValues } from \"./constants\";\nimport { DataTablePagination } from \"./DataTablePagination\";\nimport { DataFilter, DataFilters } from \"../labs/DataFilters\";\nimport {\n DataTableRowActions,\n DataTableRowActionsProps,\n} from \"./DataTableRowActions\";\nimport { useRowReordering } from \"./useRowReordering\";\nimport { DataTableSettings } from \"./DataTableSettings\";\nimport { MenuButton, MenuButtonProps } from \"../MenuButton\";\nimport { Box } from \"../Box\";\nimport { DataTableRowSelectionState } from \".\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { useScrollIndication } from \"./useScrollIndication\";\nimport styled from \"@emotion/styled\";\nimport { DataTableEmptyState } from \"./DataTableEmptyState\";\nimport { Callout } from \"../Callout\";\nimport { t } from \"i18next\";\n\nexport type DataTableGetDataType = {\n page?: number;\n resultsPerPage?: number;\n search?: string;\n filters?: DataFilter[];\n sort?: MRT_SortingState;\n};\n\nexport type DataTableOnReorderRowsType = {\n rowId: string;\n newRowIndex: number;\n};\n\nexport type DataTableProps = {\n /**\n * The columns that make up the table\n */\n columns: MRT_TableOptions<MRT_RowData>[\"columns\"];\n /**\n * The total number of rows in the table. Optional, because it's sometimes impossible\n * to calculate. Used in table pagination to know when to disable the \"next\"/\"more\" button.\n */\n totalRows?: number;\n /**\n * The function to get the ID of a row\n */\n getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n /**\n * The initial density (height & padding) of the table rows. This is available even if the\n * table density isn't changeable by the end user via hasChangeableDensity.\n */\n initialDensity?: (typeof densityValues)[number];\n /**\n * If true, the end user will be able to change the table density.\n */\n hasChangeableDensity?: boolean;\n /**\n * If true, the end user can resize individual columns.\n */\n hasColumnResizing?: boolean;\n /**\n * If true, the end user will be able to show/hide columns.\n */\n hasColumnVisibility?: boolean;\n /**\n * If true, the end user will be able to filter columns.\n */\n hasFilters?: boolean;\n /**\n * If true, the table will include pagination controls.\n */\n hasPagination?: boolean;\n /**\n * If true, the table will include checkboxes on each row, enabling\n * the user to select some or all rows.\n */\n hasRowSelection?: boolean;\n /**\n * If true, the global table search controls will be shown.\n */\n hasSearch?: boolean;\n /**\n * If true, the end user can sort columns (ascending, descending, or neither)\n */\n hasSorting?: boolean;\n /**\n * If true, the end user can reorder rows via a drag-and-drop interface\n */\n hasRowReordering?: boolean;\n /**\n * If true, the search field will include a Search button, rather than\n * firing on input change.\n */\n hasSearchSubmitButton?: boolean;\n /**\n * The debounce time, in milliseconds, for the search input firing\n * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,\n * this doesn't do anything.\n */\n searchDelayTime?: number;\n /**\n * Callback that fires when a row (or rows) is selected or unselected.\n */\n onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;\n /**\n * Callback that fires whenever the table needs to fetch new data, due to changes in\n * page, results per page, search input, filters, or sorting\n */\n getData: ({\n page,\n resultsPerPage,\n search,\n filters,\n sort,\n }: DataTableGetDataType) =>\n | MRT_TableOptions<MRT_RowData>[\"data\"]\n | Promise<MRT_TableOptions<MRT_RowData>[\"data\"]>;\n /**\n * Callback that fires when the user reorders rows within the table. Can be used\n * to propogate order change to the backend.\n */\n onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;\n /**\n * The current page number.\n */\n currentPage?: number;\n /**\n * The number of results per page.\n */\n resultsPerPage?: number;\n /**\n * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n * set to a simple \"Load more\" button by setting to \"loadMore\".\n */\n paginationType?: (typeof paginationTypeValues)[number];\n /**\n * Action buttons to display in each row\n */\n rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n /**\n * Menu items to include in the optional actions menu on each row.\n */\n rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n /**\n * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected\n */\n bulkActionMenuItems?: (\n selectedRows: MRT_RowSelectionState,\n ) => MenuButtonProps[\"children\"];\n /**\n * If `error` is not undefined, the DataTable will indicate an error.\n */\n errorMessage?: string;\n /**\n * The component to display when the table is displaying the initial empty state\n */\n emptyPlaceholder?: ReactNode;\n /**\n * The component to display when the query returns no results\n */\n noResultsPlaceholder?: ReactNode;\n};\n\nconst displayColumnDefOptions = {\n \"mrt-row-actions\": {\n header: \"\",\n grow: true,\n muiTableBodyCellProps: {\n align: \"right\",\n sx: {\n overflow: \"visible\",\n width: \"unset\",\n },\n className: \"ods-actions-cell\",\n },\n muiTableHeadCellProps: {\n align: \"right\",\n sx: {\n width: \"unset\",\n },\n className: \"ods-actions-cell\",\n },\n },\n \"mrt-row-drag\": {\n header: \"\",\n muiTableBodyCellProps: {\n sx: {\n minWidth: 0,\n width: \"auto\",\n },\n className: \"ods-drag-handle\",\n },\n muiTableHeadCellProps: {\n sx: {\n minWidth: 0,\n width: \"auto\",\n },\n children: (\n // Add a spacer to simulate the width of the drag handle in the column.\n // Without this, the head cells are offset from their body cell counterparts\n <Box sx={{ marginInline: \"-0.1rem\" }}>\n <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n </Box>\n ),\n },\n },\n \"mrt-row-select\": {\n muiTableHeadCellProps: {\n padding: \"checkbox\",\n },\n muiTableBodyCellProps: {\n padding: \"checkbox\",\n },\n },\n};\n\nconst ScrollableTableContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isScrollableStart\" &&\n prop !== \"isScrollableEnd\",\n})(\n ({\n odysseyDesignTokens,\n isScrollableStart,\n isScrollableEnd,\n }: {\n odysseyDesignTokens: DesignTokens;\n isScrollableStart: boolean;\n isScrollableEnd: boolean;\n }) => ({\n borderBlockEndColor: odysseyDesignTokens.HueNeutral100,\n borderBlockEndStyle: \"solid\",\n borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,\n marginBlockEnd: odysseyDesignTokens.Spacing4,\n position: \"relative\",\n borderInlineStartColor: isScrollableStart\n ? odysseyDesignTokens.HueNeutral200\n : \"transparent\",\n borderInlineStartStyle: \"solid\",\n borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,\n \"::before\": {\n background:\n \"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n content: '\"\"',\n opacity: isScrollableStart ? \"0.075\" : \"0\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n left: 0,\n bottom: 0,\n width: odysseyDesignTokens.Spacing6,\n zIndex: 100,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n },\n borderInlineEndColor: isScrollableEnd\n ? odysseyDesignTokens.HueNeutral200\n : \"transparent\",\n borderInlineEndStyle: \"solid\",\n borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,\n \"::after\": {\n background:\n \"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n content: '\"\"',\n opacity: isScrollableEnd ? \"0.075\" : \"0\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n right: 0,\n bottom: 0,\n width: odysseyDesignTokens.Spacing6,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n },\n }),\n);\n\nconst DataTable = ({\n columns,\n getRowId: getRowIdProp,\n currentPage = 1,\n initialDensity = densityValues[0],\n resultsPerPage = 20,\n getData,\n onReorderRows,\n totalRows,\n hasSearchSubmitButton,\n searchDelayTime,\n paginationType = \"paged\",\n onChangeRowSelection,\n rowActionButtons,\n rowActionMenuItems,\n hasChangeableDensity,\n hasColumnResizing,\n hasColumnVisibility,\n hasFilters,\n hasPagination,\n hasRowReordering,\n hasRowSelection,\n hasSearch,\n hasSorting,\n bulkActionMenuItems,\n errorMessage: errorMessageProp,\n emptyPlaceholder,\n noResultsPlaceholder,\n}: DataTableProps) => {\n const [data, setData] = useState<MRT_RowData[]>([]);\n const [pagination, setPagination] = useState({\n pageIndex: currentPage,\n pageSize: resultsPerPage,\n });\n const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =\n useState(true);\n const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =\n useState(true);\n const [tableInnerContainerWidth, setTableInnerContainerWidth] =\n useState<string>(\"100%\");\n const tableOuterContainerRef = useRef<HTMLDivElement>(null);\n const tableInnerContainerRef = useRef<HTMLDivElement>(null);\n const tableContentRef = useRef<HTMLTableElement>(null);\n\n // Table states\n const [columnSorting, setColumnSorting] = useState<MRT_SortingState>([]);\n const [columnVisibility, setColumnVisibility] =\n useState<MRT_VisibilityState>();\n const [rowDensity, setRowDensity] =\n useState<MRT_DensityState>(initialDensity);\n const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n const [search, setSearch] = useState<string>(\"\");\n const [filters, setFilters] = useState<DataFilter[]>();\n const [initialFilters, setInitialFilters] = useState<DataFilter[]>();\n const [isLoading, setIsLoading] = useState<boolean | undefined>(true);\n const [isEmpty, setIsEmpty] = useState<boolean | undefined>();\n const [errorMessage, setErrorMessage] = useState<string | undefined>(\n errorMessageProp,\n );\n\n useScrollIndication({\n tableOuterContainer: tableOuterContainerRef.current,\n tableInnerContainer: tableInnerContainerRef.current,\n setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,\n setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,\n setTableInnerContainerWidth: setTableInnerContainerWidth,\n });\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const {\n dragHandleStyles,\n dragHandleText,\n draggableTableBodyRowClassName,\n handleDragHandleKeyDown,\n handleDragHandleOnDragCapture,\n handleDragHandleOnDragEnd,\n resetDraggingAndHoveredRow,\n updateRowOrder,\n } = useRowReordering({\n totalRows,\n onReorderRows,\n data,\n setData,\n draggingRow,\n setDraggingRow,\n resultsPerPage: pagination.pageSize,\n page: pagination.pageIndex,\n });\n\n const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n const rowDensityCellClassName = useMemo(() => {\n return rowDensity === \"spacious\"\n ? \"MuiTableCell-spacious\"\n : rowDensity === \"compact\"\n ? \"MuiTableCell-compact\"\n : \"MuiTableCell-default\";\n }, [rowDensity]);\n\n const renderRowActions = useCallback(\n ({ row }: { row: MRT_Row<MRT_RowData> }) => {\n const currentIndex =\n row.index + (pagination.pageIndex - 1) * pagination.pageSize;\n return (\n <DataTableRowActions\n row={row}\n rowIndex={currentIndex}\n rowActionButtons={rowActionButtons}\n rowActionMenuItems={rowActionMenuItems}\n totalRows={totalRows}\n updateRowOrder={\n hasRowReordering && onReorderRows ? updateRowOrder : undefined\n }\n />\n );\n },\n [\n pagination,\n rowActionButtons,\n rowActionMenuItems,\n hasRowReordering,\n onReorderRows,\n totalRows,\n updateRowOrder,\n ],\n );\n\n const dataTableFilters = useMemo(\n () =>\n columns\n .filter((column) => column.enableColumnFilter !== false)\n .map((column) => {\n return {\n id: column.accessorKey as string,\n label: column.header,\n variant: column.filterVariant ?? \"text\",\n options: column.filterSelectOptions,\n } as DataFilter;\n }),\n [columns],\n );\n\n const defaultCell = useCallback(\n ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {\n const value = cell.getValue<string>();\n return (\n <Box\n sx={{\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n }}\n >\n {value}\n </Box>\n );\n },\n [],\n );\n\n const emptyState = useCallback(() => {\n const noResultsInnerContent = noResultsPlaceholder || (\n <DataTableEmptyState\n heading={t(\"table.noresults.heading\")}\n text={t(\"table.noresults.text\")}\n />\n );\n\n const emptyStateInnerContent =\n emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;\n\n return (\n <Box sx={{ width: tableInnerContainerWidth }}>\n {emptyStateInnerContent}\n </Box>\n );\n }, [\n tableInnerContainerWidth,\n emptyPlaceholder,\n noResultsPlaceholder,\n isEmpty,\n ]);\n\n const dataTable = useMaterialReactTable({\n columns: columns,\n data: data,\n getRowId: getRowId,\n state: {\n density: rowDensity,\n sorting: columnSorting,\n globalFilter: search,\n columnVisibility,\n isLoading,\n rowSelection,\n },\n icons: {\n ArrowDownwardIcon: ArrowDownIcon,\n DragHandleIcon: DragIndicatorIcon,\n SyncAltIcon: ArrowUnsortedIcon,\n },\n\n // Base table settings\n enableColumnActions: false,\n enableColumnResizing: hasColumnResizing,\n enableDensityToggle: false,\n enableFilters: false,\n enableFullScreenToggle: false,\n enableGlobalFilter: false,\n enableHiding: false,\n enablePagination: false,\n layoutMode: \"grid-no-grow\",\n manualFiltering: true,\n manualSorting: true,\n muiTablePaperProps: {\n elevation: 0,\n sx: {\n overflow: \"visible\",\n },\n },\n selectAllMode: \"all\",\n displayColumnDefOptions:\n displayColumnDefOptions as MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"],\n muiTableBodyCellProps: () => ({\n className: rowDensityCellClassName,\n }),\n defaultColumn: {\n Cell: defaultCell,\n },\n\n // Reordering\n enableRowOrdering: hasRowReordering && Boolean(onReorderRows),\n enableRowDragging: hasRowReordering && Boolean(onReorderRows),\n muiTableBodyRowProps: ({ table, row }) => ({\n className: draggableTableBodyRowClassName({\n currentRowId: row.id,\n draggingRowId: draggingRow?.id,\n hoveredRowId: table.getState().hoveredRow?.id,\n }),\n }),\n muiRowDragHandleProps: ({ table, row }) => ({\n onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),\n onBlur: () => resetDraggingAndHoveredRow(table),\n onDragEnd: () => handleDragHandleOnDragEnd(table),\n onDragCapture: () => handleDragHandleOnDragCapture(table),\n sx: dragHandleStyles,\n ...dragHandleText,\n }),\n\n // Row actions\n enableRowActions:\n (hasRowReordering === true && onReorderRows) ||\n rowActionButtons ||\n rowActionMenuItems\n ? true\n : false,\n positionActionsColumn:\n \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n renderRowActions: ({ row }) => renderRowActions({ row }),\n\n // Row selection\n enableRowSelection: hasRowSelection,\n onRowSelectionChange: setRowSelection,\n\n // Sorting\n enableSorting: hasSorting,\n onSortingChange: setColumnSorting,\n muiTableHeadCellProps: ({ column: currentColumn }) => ({\n className: columnSorting.find(\n (sortedColumn) => sortedColumn.id === currentColumn.id,\n )\n ? \"isSorted\"\n : \"isUnsorted\",\n }),\n\n // Virtualization\n enableRowVirtualization:\n paginationType !== \"loadMore\" && pagination.pageSize > 50,\n rowVirtualizerInstanceRef:\n useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null),\n rowVirtualizerOptions: {\n overscan: 4,\n },\n\n // States\n renderEmptyRowsFallback: emptyState,\n\n // Refs\n muiTableProps: {\n ref: tableContentRef,\n },\n\n muiTableContainerProps: {\n ref: tableInnerContainerRef,\n },\n });\n\n // Effects\n const bulkActionMenuButton = useMemo(\n () => (\n <>\n <MenuButton\n buttonVariant=\"secondary\"\n endIcon={<MoreIcon />}\n isDisabled={Object.keys(rowSelection).length === 0}\n ariaLabel=\"More actions\"\n >\n {bulkActionMenuItems?.(rowSelection)}\n </MenuButton>\n </>\n ),\n [bulkActionMenuItems, rowSelection],\n );\n\n useEffect(() => {\n (async () => {\n setIsLoading(true);\n setErrorMessage(errorMessageProp);\n try {\n const incomingData = await getData?.({\n page: pagination.pageIndex,\n resultsPerPage: pagination.pageSize,\n search,\n filters,\n sort: columnSorting,\n });\n setData(incomingData);\n } catch (error) {\n setErrorMessage(typeof error === \"string\" ? error : t(\"table.error\"));\n } finally {\n setIsLoading(false);\n }\n })();\n }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);\n\n useEffect(() => {\n if (!initialFilters && filters) {\n setInitialFilters(filters);\n }\n\n setIsEmpty(\n pagination.pageIndex === currentPage &&\n pagination.pageSize === resultsPerPage &&\n search === \"\" &&\n filters === initialFilters &&\n data.length === 0,\n );\n }, [\n filters,\n pagination,\n search,\n data,\n currentPage,\n initialFilters,\n resultsPerPage,\n ]);\n\n useEffect(() => {\n onChangeRowSelection?.(rowSelection);\n }, [rowSelection, onChangeRowSelection]);\n\n // Render the table\n return (\n <>\n {(hasSearch ||\n hasFilters ||\n hasChangeableDensity ||\n hasColumnVisibility ||\n bulkActionMenuItems) && (\n <Box sx={{ marginBottom: 5 }}>\n <DataFilters\n onChangeSearch={hasSearch ? setSearch : undefined}\n onChangeFilters={hasFilters ? setFilters : undefined}\n hasSearchSubmitButton={hasSearchSubmitButton}\n searchDelayTime={searchDelayTime}\n filters={hasFilters ? dataTableFilters : undefined}\n isDisabled={isEmpty}\n additionalActions={\n <>\n <DataTableSettings\n hasChangeableDensity={hasChangeableDensity}\n rowDensity={rowDensity}\n setRowDensity={setRowDensity}\n hasColumnVisibility={hasColumnVisibility}\n columns={columns}\n columnVisibility={columnVisibility}\n setColumnVisibility={setColumnVisibility}\n />\n {bulkActionMenuItems && bulkActionMenuButton}\n </>\n }\n />\n </Box>\n )}\n\n {errorMessage && (\n <Box sx={{ marginBlockEnd: 2 }}>\n <Callout severity=\"error\" text={errorMessage} />\n </Box>\n )}\n\n <ScrollableTableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n isScrollableStart={!isTableContainerScrolledToStart}\n isScrollableEnd={!isTableContainerScrolledToEnd}\n ref={tableOuterContainerRef}\n >\n <MRT_TableContainer table={dataTable} />\n </ScrollableTableContainer>\n\n {hasPagination && (\n <DataTablePagination\n pagination={pagination}\n setPagination={setPagination}\n totalRows={totalRows}\n isDisabled={isEmpty}\n variant={paginationType}\n />\n )}\n </>\n );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"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"}
@@ -0,0 +1,55 @@
1
+ /*!
2
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
+ *
5
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
+ * Unless required by applicable law or agreed to in writing, software
7
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
+ *
10
+ * See the License for the specific language governing permissions and limitations under the License.
11
+ */
12
+
13
+ import { memo } from "react";
14
+ import { Heading4, Paragraph } from "../Typography.js";
15
+ import { Box } from "../Box.js";
16
+ import styled from "@emotion/styled";
17
+ import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
18
+ import { jsx as _jsx } from "react/jsx-runtime";
19
+ import { jsxs as _jsxs } from "react/jsx-runtime";
20
+ const EmptyContainer = styled("div", {
21
+ shouldForwardProp: prop => prop !== "odysseyDesignTokens"
22
+ })(({
23
+ odysseyDesignTokens
24
+ }) => ({
25
+ display: "flex",
26
+ flexDirection: "column",
27
+ marginBlock: odysseyDesignTokens.Spacing9,
28
+ padding: odysseyDesignTokens.Spacing5,
29
+ textAlign: "center",
30
+ width: "100%"
31
+ }));
32
+ const DataTableEmptyState = ({
33
+ heading,
34
+ text,
35
+ primaryButton,
36
+ secondaryButton
37
+ }) => {
38
+ const odysseyDesignTokens = useOdysseyDesignTokens();
39
+ return _jsxs(EmptyContainer, {
40
+ odysseyDesignTokens: odysseyDesignTokens,
41
+ children: [_jsx(Heading4, {
42
+ children: heading
43
+ }), _jsx(Paragraph, {
44
+ children: text
45
+ }), (primaryButton || secondaryButton) && _jsxs(Box, {
46
+ sx: {
47
+ marginBlockStart: 5
48
+ },
49
+ children: [secondaryButton, primaryButton]
50
+ })]
51
+ });
52
+ };
53
+ const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
54
+ export { MemoizedDataTableEmptyState as DataTableEmptyState };
55
+ //# sourceMappingURL=DataTableEmptyState.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTableEmptyState.js","names":["memo","Heading4","Paragraph","Box","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","EmptyContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","DataTableEmptyState","heading","text","primaryButton","secondaryButton","children","sx","marginBlockStart","MemoizedDataTableEmptyState"],"sources":["../../src/DataTable/DataTableEmptyState.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, memo } from \"react\";\nimport { Heading4, Paragraph } from \"../Typography\";\nimport { Box } from \"../Box\";\nimport styled from \"@emotion/styled\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst EmptyContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n display: \"flex\",\n flexDirection: \"column\",\n marginBlock: odysseyDesignTokens.Spacing9,\n padding: odysseyDesignTokens.Spacing5,\n textAlign: \"center\",\n width: \"100%\",\n}));\n\nexport type DataTableEmptyStateProps = {\n heading: string;\n text: string;\n primaryButton?: ReactNode;\n secondaryButton?: ReactNode;\n};\n\nconst DataTableEmptyState = ({\n heading,\n text,\n primaryButton,\n secondaryButton,\n}: DataTableEmptyStateProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n return (\n <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading4>{heading}</Heading4>\n <Paragraph>{text}</Paragraph>\n {(primaryButton || secondaryButton) && (\n <Box sx={{ marginBlockStart: 5 }}>\n {secondaryButton}\n {primaryButton}\n </Box>\n )}\n </EmptyContainer>\n );\n};\n\nconst MemoizedDataTableEmptyState = memo(DataTableEmptyState);\nexport { MemoizedDataTableEmptyState as DataTableEmptyState };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAC/BC,QAAQ,EAAEC,SAAS;AAAA,SACnBC,GAAG;AACZ,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAEnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,cAAc,GAAGN,MAAM,CAAC,KAAK,EAAE;EACnCO,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,WAAW,EAAEH,mBAAmB,CAACI,QAAQ;EACzCC,OAAO,EAAEL,mBAAmB,CAACM,QAAQ;EACrCC,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AASH,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,OAAO;EACPC,IAAI;EACJC,aAAa;EACbC;AACwB,CAAC,KAAK;EAC9B,MAAMb,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,OACEI,KAAA,CAACC,cAAc;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAc,QAAA,GACvDpB,IAAA,CAACN,QAAQ;MAAA0B,QAAA,EAAEJ;IAAO,CAAW,CAAC,EAC9BhB,IAAA,CAACL,SAAS;MAAAyB,QAAA,EAAEH;IAAI,CAAY,CAAC,EAC5B,CAACC,aAAa,IAAIC,eAAe,KAChCjB,KAAA,CAACN,GAAG;MAACyB,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAF,QAAA,GAC9BD,eAAe,EACfD,aAAa;IAAA,CACX,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMK,2BAA2B,GAAG9B,IAAI,CAACsB,mBAAmB,CAAC;AAC7D,SAASQ,2BAA2B,IAAIR,mBAAmB"}