@alaarab/ogrid-react-material 2.4.1 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +2 -1574
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -1,16 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
|
|
3
|
-
import { Box, Tooltip, Typography, IconButton, Popover, useTheme, TextField, InputAdornment, Button, CircularProgress, FormControlLabel, Checkbox, Avatar, Table, TableHead, TableRow, TableCell, Select, MenuItem, Menu, Divider } from '@mui/material';
|
|
4
|
-
import { createBaseFilterRenderers, useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
|
|
5
|
-
export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
|
|
6
|
-
import { createPortal } from 'react-dom';
|
|
7
|
-
import { FilterList, Search, Clear, ExpandLess, ExpandMore, ViewColumn, LastPage, ChevronRight, ChevronLeft, FirstPage } from '@mui/icons-material';
|
|
8
|
-
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
9
|
-
|
|
10
|
-
// src/OGrid/OGrid.tsx
|
|
11
|
-
|
|
12
|
-
// src/DataGridTable/DataGridTable.styles.ts
|
|
13
|
-
var STYLES = `
|
|
1
|
+
import*as be from'react';import {useMemo,useCallback,useState,useRef,useEffect}from'react';import {Box,Tooltip,Typography,IconButton,Popover,useTheme,TextField,InputAdornment,Button,CircularProgress,FormControlLabel,Checkbox,Avatar,Table,TableHead,TableRow,TableCell,Select,MenuItem,Menu,Divider}from'@mui/material';import {createBaseFilterRenderers,useColumnHeaderFilterState,getColumnHeaderFilterStateParams,renderFilterContent,areGridRowPropsEqual,PaginationControlsBase,createOGrid,useListVirtualizer,CHECKBOX_COLUMN_WIDTH,STOP_PROPAGATION,ROW_NUMBER_COLUMN_WIDTH,useDataGridTableOrchestration,useColumnMeta,getCellRenderDescriptor,buildInlineEditorProps,buildPopoverEditorProps,resolveCellDisplayContent,resolveCellStyle,getCellInteractionProps,CellErrorBoundary,PREVENT_DEFAULT,indexToColumnLetter,ROW_NUMBER_COLUMN_ID,getHeaderFilterConfig,MarchingAntsOverlay,FormulaRefOverlay,NOOP,getColumnHeaderMenuProps,useColumnChooserState,ColumnChooserContent,BaseInlineCellEditor,partitionColumnsForVirtualization,getContextMenuHandlers,GRID_CONTEXT_MENU_ITEMS,formatShortcut,getColumnHeaderMenuItems,getStatusBarParts}from'@alaarab/ogrid-react';export{BaseColumnHeaderMenu,BaseDropIndicator,BaseEmptyState,BaseInlineCellEditor,BaseLoadingOverlay,CELL_PADDING,CHECKBOX_COLUMN_WIDTH,COLUMN_HEADER_MENU_ITEMS,CURSOR_CELL_STYLE,CellErrorBoundary,DEFAULT_MIN_COLUMN_WIDTH,DateFilterContent,EmptyState,GRID_BORDER_RADIUS,GRID_CONTEXT_MENU_ITEMS,GRID_ROOT_STYLE,GridContextMenu,MAX_PAGE_BUTTONS,MarchingAntsOverlay,NOOP,OGridLayout,PAGE_SIZE_OPTIONS,POPOVER_ANCHOR_STYLE,PREVENT_DEFAULT,ROW_NUMBER_COLUMN_WIDTH,STOP_PROPAGATION,SideBar,StatusBar,UndoRedoStack,areGridRowPropsEqual,booleanParser,buildCsvHeader,buildCsvRows,buildHeaderRows,buildInlineEditorProps,buildPopoverEditorProps,clampSelectionToBounds,computeAggregations,computeAutoScrollSpeed,computeTabNavigation,createOGrid,currencyParser,dateParser,deriveFilterOptionsFromData,editorInputStyle,editorWrapperStyle,emailParser,escapeCsvValue,exportToCsv,findCtrlArrowTarget,flattenColumns,formatCellValueForTsv,formatSelectionAsTsv,formatShortcut,getCellInteractionProps,getCellRenderDescriptor,getCellValue,getColumnHeaderFilterStateParams,getColumnHeaderMenuItems,getContextMenuHandlers,getDataGridStatusBarConfig,getDateFilterContentProps,getFilterField,getHeaderFilterConfig,getMultiSelectFilterFields,getPaginationViewModel,getStatusBarParts,isInSelectionRange,isRowInRange,mergeFilter,normalizeSelectionRange,numberParser,parseTsvClipboard,parseValue,processClientSideData,rangesEqual,renderFilterContent,resolveCellDisplayContent,resolveCellStyle,richSelectDropdownStyle,richSelectNoMatchesStyle,richSelectOptionHighlightedStyle,richSelectOptionStyle,richSelectWrapperStyle,selectChevronStyle,selectDisplayStyle,selectEditorStyle,toUserLike,triggerCsvDownload,useActiveCell,useCellEditing,useCellSelection,useClipboard,useColumnChooserState,useColumnHeaderFilterState,useColumnMeta,useColumnReorder,useColumnResize,useContextMenu,useDataGridState,useDataGridTableOrchestration,useDateFilterState,useDebounce,useFillHandle,useFilterOptions,useInlineCellEditorState,useKeyboardNavigation,useLatestRef,useListVirtualizer,useMultiSelectFilterState,useOGrid,usePaginationControls,usePeopleFilterState,useRichSelectState,useRowSelection,useSelectState,useSideBarState,useTableLayout,useTextFilterState,useUndoRedo,useVirtualScroll}from'@alaarab/ogrid-react';import {createPortal}from'react-dom';import {FilterList,LastPage,ChevronRight,ChevronLeft,FirstPage,Search,Clear,ExpandLess,ExpandMore,ViewColumn}from'@mui/icons-material';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var ht=`
|
|
14
2
|
.ogrid-mat-row:hover > td { background-color: var(--ogrid-hover-bg); }
|
|
15
3
|
.ogrid-mat-row--selected > td { background-color: var(--ogrid-selection-bg, rgba(25, 118, 210, 0.08)); }
|
|
16
4
|
|
|
@@ -44,1564 +32,4 @@ table:not([data-virtual-scroll]) .ogrid-mat-tbody tr { content-visibility: auto;
|
|
|
44
32
|
|
|
45
33
|
.ogrid-mat-wrapper [data-drag-range] { background-color: rgba(33,115,70,0.12); }
|
|
46
34
|
.ogrid-mat-wrapper [data-drag-anchor] { background-color: var(--ogrid-paper-bg, #fff); }
|
|
47
|
-
`;
|
|
48
|
-
var injected = false;
|
|
49
|
-
function injectDataGridStyles() {
|
|
50
|
-
if (injected || typeof document === "undefined") return;
|
|
51
|
-
injected = true;
|
|
52
|
-
const style = document.createElement("style");
|
|
53
|
-
style.setAttribute("data-ogrid-mat", "");
|
|
54
|
-
style.textContent = STYLES;
|
|
55
|
-
document.head.appendChild(style);
|
|
56
|
-
}
|
|
57
|
-
var TextFilterPopover = ({
|
|
58
|
-
value,
|
|
59
|
-
onValueChange,
|
|
60
|
-
onApply,
|
|
61
|
-
onClear
|
|
62
|
-
}) => /* @__PURE__ */ jsxs(Box, { sx: { width: 260 }, children: [
|
|
63
|
-
/* @__PURE__ */ jsx(Box, { sx: { p: 1.5 }, children: /* @__PURE__ */ jsx(
|
|
64
|
-
TextField,
|
|
65
|
-
{
|
|
66
|
-
placeholder: "Enter search term...",
|
|
67
|
-
value,
|
|
68
|
-
onChange: (e) => onValueChange(e.target.value),
|
|
69
|
-
onKeyDown: (e) => {
|
|
70
|
-
e.stopPropagation();
|
|
71
|
-
if (e.key === "Enter") {
|
|
72
|
-
e.preventDefault();
|
|
73
|
-
onApply();
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
autoComplete: "off",
|
|
77
|
-
size: "small",
|
|
78
|
-
fullWidth: true,
|
|
79
|
-
slotProps: {
|
|
80
|
-
input: {
|
|
81
|
-
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
) }),
|
|
86
|
-
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, p: 1.5, pt: 0 }, children: [
|
|
87
|
-
/* @__PURE__ */ jsx(Button, { size: "small", disabled: !value, onClick: onClear, children: "Clear" }),
|
|
88
|
-
/* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })
|
|
89
|
-
] })
|
|
90
|
-
] });
|
|
91
|
-
TextFilterPopover.displayName = "TextFilterPopover";
|
|
92
|
-
var ITEM_HEIGHT = 40;
|
|
93
|
-
var MultiSelectFilterPopover = ({
|
|
94
|
-
searchText,
|
|
95
|
-
onSearchChange,
|
|
96
|
-
options,
|
|
97
|
-
filteredOptions,
|
|
98
|
-
selected,
|
|
99
|
-
onOptionToggle,
|
|
100
|
-
onSelectAll,
|
|
101
|
-
onClearSelection,
|
|
102
|
-
onApply,
|
|
103
|
-
isLoading
|
|
104
|
-
}) => {
|
|
105
|
-
const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT, containerHeight: 240 });
|
|
106
|
-
return /* @__PURE__ */ jsxs(Box, { sx: { width: 280 }, children: [
|
|
107
|
-
/* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [
|
|
108
|
-
/* @__PURE__ */ jsx(
|
|
109
|
-
TextField,
|
|
110
|
-
{
|
|
111
|
-
placeholder: "Search...",
|
|
112
|
-
value: searchText,
|
|
113
|
-
onChange: (e) => onSearchChange(e.target.value),
|
|
114
|
-
onKeyDown: (e) => e.stopPropagation(),
|
|
115
|
-
autoComplete: "off",
|
|
116
|
-
size: "small",
|
|
117
|
-
fullWidth: true,
|
|
118
|
-
slotProps: {
|
|
119
|
-
input: {
|
|
120
|
-
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
),
|
|
125
|
-
/* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block" }, children: [
|
|
126
|
-
filteredOptions.length,
|
|
127
|
-
" of ",
|
|
128
|
-
options.length,
|
|
129
|
-
" options"
|
|
130
|
-
] })
|
|
131
|
-
] }),
|
|
132
|
-
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", px: 1.5, py: 0.5 }, children: [
|
|
133
|
-
/* @__PURE__ */ jsxs(Button, { size: "small", onClick: onSelectAll, children: [
|
|
134
|
-
"Select All (",
|
|
135
|
-
filteredOptions.length,
|
|
136
|
-
")"
|
|
137
|
-
] }),
|
|
138
|
-
/* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" })
|
|
139
|
-
] }),
|
|
140
|
-
/* @__PURE__ */ jsx(Box, { ref: virt.containerRef, onScroll: virt.onScroll, sx: { maxHeight: 240, overflowY: "auto", px: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "No options found" }) : /* @__PURE__ */ jsx(Box, { sx: { height: virt.totalHeight, position: "relative" }, children: virt.visibleItems.map(({ index, offsetTop }) => {
|
|
141
|
-
const option = filteredOptions[index];
|
|
142
|
-
return /* @__PURE__ */ jsx(
|
|
143
|
-
FormControlLabel,
|
|
144
|
-
{
|
|
145
|
-
control: /* @__PURE__ */ jsx(
|
|
146
|
-
Checkbox,
|
|
147
|
-
{
|
|
148
|
-
size: "small",
|
|
149
|
-
checked: selected.has(option),
|
|
150
|
-
onChange: (e) => onOptionToggle(option, e.target.checked)
|
|
151
|
-
}
|
|
152
|
-
),
|
|
153
|
-
label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: option }),
|
|
154
|
-
sx: { position: "absolute", top: offsetTop, width: "100%", height: ITEM_HEIGHT, boxSizing: "border-box", display: "flex", alignItems: "center", mx: 0, "& .MuiFormControlLabel-label": { flex: 1, minWidth: 0 } }
|
|
155
|
-
},
|
|
156
|
-
option
|
|
157
|
-
);
|
|
158
|
-
}) }) }),
|
|
159
|
-
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: [
|
|
160
|
-
/* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" }),
|
|
161
|
-
/* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })
|
|
162
|
-
] })
|
|
163
|
-
] });
|
|
164
|
-
};
|
|
165
|
-
MultiSelectFilterPopover.displayName = "MultiSelectFilterPopover";
|
|
166
|
-
var PeopleFilterPopover = ({
|
|
167
|
-
selectedUser,
|
|
168
|
-
searchText,
|
|
169
|
-
onSearchChange,
|
|
170
|
-
suggestions,
|
|
171
|
-
isLoading,
|
|
172
|
-
onUserSelect,
|
|
173
|
-
onClearUser,
|
|
174
|
-
inputRef
|
|
175
|
-
}) => /* @__PURE__ */ jsxs(Box, { sx: { width: 300 }, children: [
|
|
176
|
-
selectedUser && /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, pb: 1, borderBottom: 1, borderColor: "divider" }, children: [
|
|
177
|
-
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Currently filtered by:" }),
|
|
178
|
-
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.5 }, children: [
|
|
179
|
-
/* @__PURE__ */ jsx(Avatar, { src: selectedUser.photo, alt: selectedUser.displayName, sx: { width: 32, height: 32 }, children: selectedUser.displayName?.[0] }),
|
|
180
|
-
/* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
181
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: selectedUser.displayName }),
|
|
182
|
-
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: selectedUser.email })
|
|
183
|
-
] }),
|
|
184
|
-
/* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClearUser, "aria-label": "Remove filter", children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) })
|
|
185
|
-
] })
|
|
186
|
-
] }),
|
|
187
|
-
/* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: /* @__PURE__ */ jsx(
|
|
188
|
-
TextField,
|
|
189
|
-
{
|
|
190
|
-
inputRef,
|
|
191
|
-
placeholder: "Search for a person...",
|
|
192
|
-
value: searchText,
|
|
193
|
-
onChange: (e) => onSearchChange(e.target.value),
|
|
194
|
-
onKeyDown: (e) => e.stopPropagation(),
|
|
195
|
-
autoComplete: "off",
|
|
196
|
-
size: "small",
|
|
197
|
-
fullWidth: true,
|
|
198
|
-
slotProps: {
|
|
199
|
-
input: {
|
|
200
|
-
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
) }),
|
|
205
|
-
/* @__PURE__ */ jsx(Box, { sx: { maxHeight: 240, overflowY: "auto" }, children: isLoading && searchText.trim() ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) }) : suggestions.length === 0 && searchText.trim() ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "No results found" }) : searchText.trim() ? suggestions.map((user) => /* @__PURE__ */ jsxs(
|
|
206
|
-
Box,
|
|
207
|
-
{
|
|
208
|
-
onClick: () => onUserSelect(user),
|
|
209
|
-
sx: {
|
|
210
|
-
display: "flex",
|
|
211
|
-
alignItems: "center",
|
|
212
|
-
gap: 1,
|
|
213
|
-
px: 1.5,
|
|
214
|
-
py: 1,
|
|
215
|
-
cursor: "pointer",
|
|
216
|
-
"&:hover": { bgcolor: "action.hover" }
|
|
217
|
-
},
|
|
218
|
-
children: [
|
|
219
|
-
/* @__PURE__ */ jsx(Avatar, { src: user.photo, alt: user.displayName, sx: { width: 32, height: 32 }, children: user.displayName?.[0] }),
|
|
220
|
-
/* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
221
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: user.displayName }),
|
|
222
|
-
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: user.email })
|
|
223
|
-
] })
|
|
224
|
-
]
|
|
225
|
-
},
|
|
226
|
-
user.id || user.email || user.displayName
|
|
227
|
-
)) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "Type to search..." }) }),
|
|
228
|
-
selectedUser && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) })
|
|
229
|
-
] });
|
|
230
|
-
PeopleFilterPopover.displayName = "PeopleFilterPopover";
|
|
231
|
-
var materialRenderers = createBaseFilterRenderers(
|
|
232
|
-
{ MultiSelectFilterPopover, TextFilterPopover, PeopleFilterPopover }
|
|
233
|
-
);
|
|
234
|
-
var ColumnHeaderFilter = React4.memo((props) => {
|
|
235
|
-
const {
|
|
236
|
-
columnName,
|
|
237
|
-
filterType,
|
|
238
|
-
options = [],
|
|
239
|
-
isLoadingOptions = false,
|
|
240
|
-
selectedUser
|
|
241
|
-
} = props;
|
|
242
|
-
const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
|
|
243
|
-
const {
|
|
244
|
-
headerRef,
|
|
245
|
-
isFilterOpen,
|
|
246
|
-
setFilterOpen,
|
|
247
|
-
hasActiveFilter,
|
|
248
|
-
popoverPosition,
|
|
249
|
-
handlers
|
|
250
|
-
} = state;
|
|
251
|
-
return /* @__PURE__ */ jsxs(Box, { ref: headerRef, sx: { display: "flex", alignItems: "center", width: "100%", minWidth: 0 }, children: [
|
|
252
|
-
/* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(Tooltip, { title: columnName, arrow: true, children: /* @__PURE__ */ jsx(
|
|
253
|
-
Typography,
|
|
254
|
-
{
|
|
255
|
-
variant: "body2",
|
|
256
|
-
fontWeight: 600,
|
|
257
|
-
noWrap: true,
|
|
258
|
-
"data-header-label": true,
|
|
259
|
-
sx: { lineHeight: 1.4 },
|
|
260
|
-
children: columnName
|
|
261
|
-
}
|
|
262
|
-
) }) }),
|
|
263
|
-
/* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", ml: 0.5, flexShrink: 0 }, children: filterType !== "none" && /* @__PURE__ */ jsxs(
|
|
264
|
-
IconButton,
|
|
265
|
-
{
|
|
266
|
-
size: "small",
|
|
267
|
-
onClick: handlers.handleFilterIconClick,
|
|
268
|
-
"aria-label": `Filter ${columnName}`,
|
|
269
|
-
"aria-expanded": isFilterOpen,
|
|
270
|
-
"aria-haspopup": "dialog",
|
|
271
|
-
title: `Filter ${columnName}`,
|
|
272
|
-
color: hasActiveFilter || isFilterOpen ? "primary" : "default",
|
|
273
|
-
sx: { p: 0.25, position: "relative" },
|
|
274
|
-
children: [
|
|
275
|
-
/* @__PURE__ */ jsx(FilterList, { sx: { fontSize: 16 } }),
|
|
276
|
-
hasActiveFilter && /* @__PURE__ */ jsx(
|
|
277
|
-
Box,
|
|
278
|
-
{
|
|
279
|
-
sx: {
|
|
280
|
-
position: "absolute",
|
|
281
|
-
top: 2,
|
|
282
|
-
right: 2,
|
|
283
|
-
width: 6,
|
|
284
|
-
height: 6,
|
|
285
|
-
borderRadius: "50%",
|
|
286
|
-
bgcolor: "primary.main"
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
)
|
|
290
|
-
]
|
|
291
|
-
}
|
|
292
|
-
) }),
|
|
293
|
-
/* @__PURE__ */ jsxs(
|
|
294
|
-
Popover,
|
|
295
|
-
{
|
|
296
|
-
open: isFilterOpen && filterType !== "none",
|
|
297
|
-
onClose: () => setFilterOpen(false),
|
|
298
|
-
anchorReference: "anchorPosition",
|
|
299
|
-
anchorPosition: popoverPosition ?? { top: 0, left: 0 },
|
|
300
|
-
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
301
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
302
|
-
slotProps: {
|
|
303
|
-
paper: {
|
|
304
|
-
sx: { mt: 0.5, overflow: "visible" },
|
|
305
|
-
onClick: (e) => e.stopPropagation()
|
|
306
|
-
}
|
|
307
|
-
},
|
|
308
|
-
children: [
|
|
309
|
-
/* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider", px: 1.5, py: 1 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
|
|
310
|
-
"Filter: ",
|
|
311
|
-
columnName
|
|
312
|
-
] }) }),
|
|
313
|
-
renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, materialRenderers)
|
|
314
|
-
]
|
|
315
|
-
}
|
|
316
|
-
)
|
|
317
|
-
] });
|
|
318
|
-
});
|
|
319
|
-
ColumnHeaderFilter.displayName = "ColumnHeaderFilter";
|
|
320
|
-
function ColumnHeaderMenu(props) {
|
|
321
|
-
const {
|
|
322
|
-
isOpen,
|
|
323
|
-
anchorElement,
|
|
324
|
-
onClose,
|
|
325
|
-
onPinLeft,
|
|
326
|
-
onPinRight,
|
|
327
|
-
onUnpin,
|
|
328
|
-
onSortAsc,
|
|
329
|
-
onSortDesc,
|
|
330
|
-
onClearSort,
|
|
331
|
-
onAutosizeThis,
|
|
332
|
-
onAutosizeAll,
|
|
333
|
-
canPinLeft,
|
|
334
|
-
canPinRight,
|
|
335
|
-
canUnpin,
|
|
336
|
-
currentSort,
|
|
337
|
-
isSortable,
|
|
338
|
-
isResizable
|
|
339
|
-
} = props;
|
|
340
|
-
const [anchorPosition, setAnchorPosition] = useState(void 0);
|
|
341
|
-
useEffect(() => {
|
|
342
|
-
if (isOpen && anchorElement) {
|
|
343
|
-
const rect = anchorElement.getBoundingClientRect();
|
|
344
|
-
setAnchorPosition({
|
|
345
|
-
top: rect.bottom + 4,
|
|
346
|
-
left: rect.left
|
|
347
|
-
});
|
|
348
|
-
} else {
|
|
349
|
-
setAnchorPosition(void 0);
|
|
350
|
-
}
|
|
351
|
-
}, [isOpen, anchorElement]);
|
|
352
|
-
const menuInput = useMemo(
|
|
353
|
-
() => ({
|
|
354
|
-
canPinLeft,
|
|
355
|
-
canPinRight,
|
|
356
|
-
canUnpin,
|
|
357
|
-
currentSort,
|
|
358
|
-
isSortable,
|
|
359
|
-
isResizable
|
|
360
|
-
}),
|
|
361
|
-
[canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]
|
|
362
|
-
);
|
|
363
|
-
const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
|
|
364
|
-
const handlers = useMemo(
|
|
365
|
-
() => ({
|
|
366
|
-
pinLeft: onPinLeft,
|
|
367
|
-
pinRight: onPinRight,
|
|
368
|
-
unpin: onUnpin,
|
|
369
|
-
sortAsc: onSortAsc,
|
|
370
|
-
sortDesc: onSortDesc,
|
|
371
|
-
clearSort: onClearSort,
|
|
372
|
-
autosizeThis: onAutosizeThis,
|
|
373
|
-
autosizeAll: onAutosizeAll
|
|
374
|
-
}),
|
|
375
|
-
[onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]
|
|
376
|
-
);
|
|
377
|
-
return /* @__PURE__ */ jsx(
|
|
378
|
-
Menu,
|
|
379
|
-
{
|
|
380
|
-
open: isOpen && !!anchorPosition,
|
|
381
|
-
onClose,
|
|
382
|
-
anchorReference: "anchorPosition",
|
|
383
|
-
anchorPosition,
|
|
384
|
-
slotProps: {
|
|
385
|
-
paper: {
|
|
386
|
-
sx: {
|
|
387
|
-
minWidth: 140
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
},
|
|
391
|
-
children: items.flatMap((item, idx) => {
|
|
392
|
-
const elements = [
|
|
393
|
-
/* @__PURE__ */ jsx(
|
|
394
|
-
MenuItem,
|
|
395
|
-
{
|
|
396
|
-
disabled: item.disabled,
|
|
397
|
-
onClick: () => {
|
|
398
|
-
handlers[item.id]();
|
|
399
|
-
onClose();
|
|
400
|
-
},
|
|
401
|
-
children: item.label
|
|
402
|
-
},
|
|
403
|
-
item.id
|
|
404
|
-
)
|
|
405
|
-
];
|
|
406
|
-
if (item.divider && idx < items.length - 1) {
|
|
407
|
-
elements.push(/* @__PURE__ */ jsx(Divider, {}, `${item.id}-divider`));
|
|
408
|
-
}
|
|
409
|
-
return elements;
|
|
410
|
-
})
|
|
411
|
-
}
|
|
412
|
-
);
|
|
413
|
-
}
|
|
414
|
-
function InlineCellEditor(props) {
|
|
415
|
-
return /* @__PURE__ */ jsx(
|
|
416
|
-
BaseInlineCellEditor,
|
|
417
|
-
{
|
|
418
|
-
...props,
|
|
419
|
-
renderCheckbox: (checked, onCommit, onCancel) => /* @__PURE__ */ jsx(
|
|
420
|
-
Checkbox,
|
|
421
|
-
{
|
|
422
|
-
checked,
|
|
423
|
-
onChange: (_, c) => onCommit(c),
|
|
424
|
-
onKeyDown: (e) => e.key === "Escape" && (e.preventDefault(), onCancel()),
|
|
425
|
-
size: "small"
|
|
426
|
-
}
|
|
427
|
-
)
|
|
428
|
-
}
|
|
429
|
-
);
|
|
430
|
-
}
|
|
431
|
-
var partSx = (isLast) => ({
|
|
432
|
-
display: "inline-flex",
|
|
433
|
-
alignItems: "center",
|
|
434
|
-
gap: 0.5,
|
|
435
|
-
...isLast ? {} : { mr: 2, "&::after": { content: '"|"', ml: 2, color: "divider" } }
|
|
436
|
-
});
|
|
437
|
-
function StatusBar(props) {
|
|
438
|
-
const parts = getStatusBarParts(props);
|
|
439
|
-
return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", sx: { mt: "auto", px: 1.5, py: 0.75, borderTop: 1, borderColor: "divider", bgcolor: "action.hover" }, children: parts.map((p, i) => /* @__PURE__ */ jsxs(Typography, { component: "span", variant: "body2", sx: partSx(i === parts.length - 1), children: [
|
|
440
|
-
/* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", children: p.label }),
|
|
441
|
-
/* @__PURE__ */ jsx(Typography, { component: "span", fontWeight: 600, children: p.value.toLocaleString() })
|
|
442
|
-
] }, p.key)) });
|
|
443
|
-
}
|
|
444
|
-
function GridContextMenu(props) {
|
|
445
|
-
const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
|
|
446
|
-
const handlers = React4.useMemo(() => getContextMenuHandlers(props), [props]);
|
|
447
|
-
const isDisabled = React4.useCallback(
|
|
448
|
-
(item) => {
|
|
449
|
-
if (item.disabledWhenNoSelection && !hasSelection) return true;
|
|
450
|
-
if (item.id === "undo" && !canUndo) return true;
|
|
451
|
-
if (item.id === "redo" && !canRedo) return true;
|
|
452
|
-
return false;
|
|
453
|
-
},
|
|
454
|
-
[hasSelection, canUndo, canRedo]
|
|
455
|
-
);
|
|
456
|
-
return /* @__PURE__ */ jsx(
|
|
457
|
-
Menu,
|
|
458
|
-
{
|
|
459
|
-
open: true,
|
|
460
|
-
onClose,
|
|
461
|
-
anchorReference: "anchorPosition",
|
|
462
|
-
anchorPosition: { top: y, left: x },
|
|
463
|
-
MenuListProps: { dense: true, "aria-label": "Grid context menu" },
|
|
464
|
-
children: GRID_CONTEXT_MENU_ITEMS.flatMap((item) => {
|
|
465
|
-
const elements = [];
|
|
466
|
-
if (item.dividerBefore) {
|
|
467
|
-
elements.push(/* @__PURE__ */ jsx(Divider, {}, `${item.id}-divider`));
|
|
468
|
-
}
|
|
469
|
-
elements.push(
|
|
470
|
-
/* @__PURE__ */ jsxs(
|
|
471
|
-
MenuItem,
|
|
472
|
-
{
|
|
473
|
-
onClick: handlers[item.id],
|
|
474
|
-
disabled: isDisabled(item),
|
|
475
|
-
children: [
|
|
476
|
-
/* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.label }),
|
|
477
|
-
item.shortcut && /* @__PURE__ */ jsx("span", { style: { marginLeft: 24, color: "var(--ogrid-fg-muted, rgba(0,0,0,0.4))", fontSize: "0.8em" }, children: formatShortcut(item.shortcut) })
|
|
478
|
-
]
|
|
479
|
-
},
|
|
480
|
-
item.id
|
|
481
|
-
)
|
|
482
|
-
);
|
|
483
|
-
return elements;
|
|
484
|
-
})
|
|
485
|
-
}
|
|
486
|
-
);
|
|
487
|
-
}
|
|
488
|
-
var EMPTY_STATE_SX = { py: 4, px: 2, textAlign: "center", borderTop: 1, borderColor: "divider", bgcolor: "action.hover" };
|
|
489
|
-
function EmptyState({ emptyState }) {
|
|
490
|
-
return /* @__PURE__ */ jsx(Box, { sx: EMPTY_STATE_SX, children: emptyState.render ? emptyState.render() : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
491
|
-
/* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }),
|
|
492
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyState.message != null ? emptyState.message : emptyState.hasActiveFilters ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
493
|
-
"No items match your current filters. Try adjusting your search or",
|
|
494
|
-
" ",
|
|
495
|
-
/* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, children: "clear all filters" }),
|
|
496
|
-
" ",
|
|
497
|
-
"to see all items."
|
|
498
|
-
] }) : "There are no items available at this time." })
|
|
499
|
-
] }) });
|
|
500
|
-
}
|
|
501
|
-
var LOADING_OVERLAY_SX = {
|
|
502
|
-
position: "absolute",
|
|
503
|
-
inset: 0,
|
|
504
|
-
zIndex: 2,
|
|
505
|
-
display: "flex",
|
|
506
|
-
alignItems: "center",
|
|
507
|
-
justifyContent: "center",
|
|
508
|
-
background: "var(--ogrid-loading-bg, rgba(255,255,255,0.7))"
|
|
509
|
-
};
|
|
510
|
-
var LOADING_INNER_SX = {
|
|
511
|
-
display: "flex",
|
|
512
|
-
flexDirection: "column",
|
|
513
|
-
alignItems: "center",
|
|
514
|
-
gap: 1,
|
|
515
|
-
p: 2,
|
|
516
|
-
bgcolor: "background.paper",
|
|
517
|
-
border: 1,
|
|
518
|
-
borderColor: "divider",
|
|
519
|
-
borderRadius: 1
|
|
520
|
-
};
|
|
521
|
-
function LoadingOverlay({ message }) {
|
|
522
|
-
return /* @__PURE__ */ jsx(Box, { sx: LOADING_OVERLAY_SX, children: /* @__PURE__ */ jsxs(Box, { sx: LOADING_INNER_SX, children: [
|
|
523
|
-
/* @__PURE__ */ jsx(CircularProgress, { size: 24 }),
|
|
524
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
|
|
525
|
-
] }) });
|
|
526
|
-
}
|
|
527
|
-
function DropIndicator({ dropIndicatorX, wrapperLeft }) {
|
|
528
|
-
return /* @__PURE__ */ jsx(
|
|
529
|
-
Box,
|
|
530
|
-
{
|
|
531
|
-
sx: {
|
|
532
|
-
position: "absolute",
|
|
533
|
-
top: 0,
|
|
534
|
-
bottom: 0,
|
|
535
|
-
width: 3,
|
|
536
|
-
bgcolor: "var(--ogrid-primary, #217346)",
|
|
537
|
-
pointerEvents: "none",
|
|
538
|
-
zIndex: 100,
|
|
539
|
-
transition: "left 0.05s",
|
|
540
|
-
left: dropIndicatorX - wrapperLeft
|
|
541
|
-
}
|
|
542
|
-
}
|
|
543
|
-
);
|
|
544
|
-
}
|
|
545
|
-
var gridRootSx = { position: "relative", flex: 1, minHeight: 0, display: "flex", flexDirection: "column" };
|
|
546
|
-
var EDITING_CELL_STYLE = {
|
|
547
|
-
width: "100%",
|
|
548
|
-
height: "100%",
|
|
549
|
-
display: "flex",
|
|
550
|
-
alignItems: "center",
|
|
551
|
-
boxSizing: "border-box",
|
|
552
|
-
outline: "2px solid var(--ogrid-selection-color, #217346)",
|
|
553
|
-
outlineOffset: "-1px",
|
|
554
|
-
zIndex: 2,
|
|
555
|
-
position: "relative",
|
|
556
|
-
background: "var(--ogrid-bg, #fff)",
|
|
557
|
-
overflow: "visible",
|
|
558
|
-
padding: 0
|
|
559
|
-
};
|
|
560
|
-
var CHECKBOX_CELL_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, maxWidth: CHECKBOX_COLUMN_WIDTH, textAlign: "center" };
|
|
561
|
-
var CHECKBOX_PLACEHOLDER_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, p: 0 };
|
|
562
|
-
var CHECKBOX_TD_STYLE = {
|
|
563
|
-
width: CHECKBOX_COLUMN_WIDTH,
|
|
564
|
-
minWidth: CHECKBOX_COLUMN_WIDTH,
|
|
565
|
-
maxWidth: CHECKBOX_COLUMN_WIDTH,
|
|
566
|
-
textAlign: "center",
|
|
567
|
-
padding: 0,
|
|
568
|
-
position: "relative",
|
|
569
|
-
height: "1px",
|
|
570
|
-
borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
|
|
571
|
-
};
|
|
572
|
-
var HEADER_BG = "var(--ogrid-header-bg, #f5f5f5)";
|
|
573
|
-
var STICKY_HEADER_SX = {
|
|
574
|
-
/* Removed position: 'sticky', top: 0 - breaks horizontal sticky on pinned columns.
|
|
575
|
-
Instead, apply sticky to individual header cells (HEADER_BASE_SX). */
|
|
576
|
-
zIndex: 8,
|
|
577
|
-
bgcolor: HEADER_BG,
|
|
578
|
-
"& th": { bgcolor: HEADER_BG }
|
|
579
|
-
};
|
|
580
|
-
var HEADER_ROW_SX = { bgcolor: HEADER_BG };
|
|
581
|
-
var COLUMN_LETTER_CELL_SX = {
|
|
582
|
-
textAlign: "center",
|
|
583
|
-
fontSize: "11px",
|
|
584
|
-
fontWeight: 500,
|
|
585
|
-
color: "text.secondary",
|
|
586
|
-
py: "2px",
|
|
587
|
-
px: "4px",
|
|
588
|
-
bgcolor: HEADER_BG,
|
|
589
|
-
borderBottom: 1,
|
|
590
|
-
borderColor: "divider",
|
|
591
|
-
userSelect: "none",
|
|
592
|
-
fontVariantNumeric: "tabular-nums"
|
|
593
|
-
};
|
|
594
|
-
var GROUP_HEADER_CELL_SX = { textAlign: "center", fontWeight: 600, borderBottom: 2, borderColor: "divider", py: 0.75 };
|
|
595
|
-
function getDensityPadding(density) {
|
|
596
|
-
switch (density) {
|
|
597
|
-
case "compact":
|
|
598
|
-
return { px: "8px", py: "4px" };
|
|
599
|
-
case "comfortable":
|
|
600
|
-
return { px: "16px", py: "12px" };
|
|
601
|
-
default:
|
|
602
|
-
return { px: "10px", py: "6px" };
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
var DENSITY_CELL_STYLES = {
|
|
606
|
-
compact: { padding: "4px 8px" },
|
|
607
|
-
normal: { padding: "6px 10px" },
|
|
608
|
-
comfortable: { padding: "12px 16px" }
|
|
609
|
-
};
|
|
610
|
-
var HEADER_BASE_SX = {
|
|
611
|
-
fontWeight: 600,
|
|
612
|
-
position: "sticky",
|
|
613
|
-
/* Enables vertical sticky for all headers */
|
|
614
|
-
top: 0,
|
|
615
|
-
/* Sticky vertically */
|
|
616
|
-
zIndex: 8,
|
|
617
|
-
/* Stack above body cells */
|
|
618
|
-
bgcolor: HEADER_BG
|
|
619
|
-
/* Opaque — required for sticky overlap */
|
|
620
|
-
};
|
|
621
|
-
var HEADER_PINNED_LEFT_SX = {
|
|
622
|
-
...HEADER_BASE_SX,
|
|
623
|
-
position: "sticky",
|
|
624
|
-
left: 0,
|
|
625
|
-
top: 0,
|
|
626
|
-
zIndex: 10,
|
|
627
|
-
bgcolor: HEADER_BG,
|
|
628
|
-
willChange: "transform",
|
|
629
|
-
borderRight: "1px solid",
|
|
630
|
-
borderRightColor: "divider",
|
|
631
|
-
boxShadow: "2px 0 4px -1px rgba(0,0,0,0.1)"
|
|
632
|
-
};
|
|
633
|
-
var HEADER_PINNED_RIGHT_SX = {
|
|
634
|
-
...HEADER_BASE_SX,
|
|
635
|
-
position: "sticky",
|
|
636
|
-
right: 0,
|
|
637
|
-
top: 0,
|
|
638
|
-
zIndex: 10,
|
|
639
|
-
bgcolor: HEADER_BG,
|
|
640
|
-
willChange: "transform",
|
|
641
|
-
borderLeft: "1px solid",
|
|
642
|
-
borderLeftColor: "divider",
|
|
643
|
-
boxShadow: "-2px 0 4px -1px rgba(0,0,0,0.1)"
|
|
644
|
-
};
|
|
645
|
-
var HEADER_BASE_NO_STICKY_SX = {
|
|
646
|
-
fontWeight: 600,
|
|
647
|
-
zIndex: 8,
|
|
648
|
-
bgcolor: HEADER_BG
|
|
649
|
-
};
|
|
650
|
-
var HEADER_PINNED_LEFT_NO_STICKY_SX = {
|
|
651
|
-
...HEADER_BASE_NO_STICKY_SX,
|
|
652
|
-
position: "sticky",
|
|
653
|
-
left: 0,
|
|
654
|
-
zIndex: 10,
|
|
655
|
-
bgcolor: HEADER_BG,
|
|
656
|
-
willChange: "transform",
|
|
657
|
-
borderRight: "1px solid",
|
|
658
|
-
borderRightColor: "divider",
|
|
659
|
-
boxShadow: "2px 0 4px -1px rgba(0,0,0,0.1)"
|
|
660
|
-
};
|
|
661
|
-
var HEADER_PINNED_RIGHT_NO_STICKY_SX = {
|
|
662
|
-
...HEADER_BASE_NO_STICKY_SX,
|
|
663
|
-
position: "sticky",
|
|
664
|
-
right: 0,
|
|
665
|
-
zIndex: 10,
|
|
666
|
-
bgcolor: HEADER_BG,
|
|
667
|
-
willChange: "transform",
|
|
668
|
-
borderLeft: "1px solid",
|
|
669
|
-
borderLeftColor: "divider",
|
|
670
|
-
boxShadow: "-2px 0 4px -1px rgba(0,0,0,0.1)"
|
|
671
|
-
};
|
|
672
|
-
var RESIZE_HANDLE_SX = {
|
|
673
|
-
position: "absolute",
|
|
674
|
-
top: 0,
|
|
675
|
-
right: "-3px",
|
|
676
|
-
bottom: 0,
|
|
677
|
-
width: "8px",
|
|
678
|
-
cursor: "col-resize",
|
|
679
|
-
userSelect: "none",
|
|
680
|
-
"&::after": { content: '""', position: "absolute", top: 0, right: "3px", bottom: 0, width: "2px" },
|
|
681
|
-
"&:hover::after": { bgcolor: "primary.main" },
|
|
682
|
-
"&:active::after": { bgcolor: "primary.dark" }
|
|
683
|
-
};
|
|
684
|
-
var POPOVER_ANCHOR_SX = { minHeight: "100%", minWidth: 40 };
|
|
685
|
-
var POPOVER_CONTENT_SX = { p: 1 };
|
|
686
|
-
var WRAPPER_SCROLL_SX = { display: "flex", flexDirection: "column", minHeight: "100%" };
|
|
687
|
-
var HEADER_CONTENT_FLEX_SX = { display: "flex", alignItems: "center", gap: 0.5 };
|
|
688
|
-
var COLUMN_OPTIONS_BUTTON_SX = {
|
|
689
|
-
background: "transparent",
|
|
690
|
-
border: "none",
|
|
691
|
-
cursor: "pointer",
|
|
692
|
-
padding: "2px 4px",
|
|
693
|
-
fontSize: "16px",
|
|
694
|
-
lineHeight: 1,
|
|
695
|
-
color: "text.secondary",
|
|
696
|
-
opacity: 1,
|
|
697
|
-
transition: "background-color 0.15s",
|
|
698
|
-
borderRadius: "3px",
|
|
699
|
-
display: "flex",
|
|
700
|
-
alignItems: "center",
|
|
701
|
-
justifyContent: "center",
|
|
702
|
-
minWidth: "20px",
|
|
703
|
-
height: "20px",
|
|
704
|
-
"&:hover": {
|
|
705
|
-
bgcolor: "action.hover"
|
|
706
|
-
}
|
|
707
|
-
};
|
|
708
|
-
var TABLE_WRAPPER_SX = { position: "relative", opacity: 1 };
|
|
709
|
-
var TABLE_WRAPPER_LOADING_SX = { position: "relative", opacity: 0.6 };
|
|
710
|
-
var SPACER_TD_STYLE = { padding: 0, border: "none" };
|
|
711
|
-
function GridRowInner(props) {
|
|
712
|
-
const {
|
|
713
|
-
item,
|
|
714
|
-
rowIndex,
|
|
715
|
-
rowId,
|
|
716
|
-
isSelected,
|
|
717
|
-
columnLayouts,
|
|
718
|
-
renderCellContent,
|
|
719
|
-
handleSingleRowClick,
|
|
720
|
-
handleRowCheckboxChange,
|
|
721
|
-
lastMouseShiftRef,
|
|
722
|
-
hasCheckboxCol,
|
|
723
|
-
hasRowNumbersCol,
|
|
724
|
-
rowNumberOffset,
|
|
725
|
-
rowHeight,
|
|
726
|
-
leftSpacerWidth,
|
|
727
|
-
rightSpacerWidth,
|
|
728
|
-
globalColIndexMap,
|
|
729
|
-
rowNumWidth
|
|
730
|
-
} = props;
|
|
731
|
-
return /* @__PURE__ */ jsxs(
|
|
732
|
-
"tr",
|
|
733
|
-
{
|
|
734
|
-
"data-row-id": rowId,
|
|
735
|
-
onClick: handleSingleRowClick,
|
|
736
|
-
"aria-selected": isSelected || void 0,
|
|
737
|
-
className: `ogrid-mat-row${isSelected ? " ogrid-mat-row--selected" : ""}`,
|
|
738
|
-
style: rowHeight ? { height: rowHeight } : void 0,
|
|
739
|
-
children: [
|
|
740
|
-
hasCheckboxCol && /* @__PURE__ */ jsx("td", { style: CHECKBOX_TD_STYLE, children: /* @__PURE__ */ jsx(
|
|
741
|
-
"div",
|
|
742
|
-
{
|
|
743
|
-
"data-row-index": rowIndex,
|
|
744
|
-
"data-col-index": 0,
|
|
745
|
-
onClick: STOP_PROPAGATION,
|
|
746
|
-
className: "ogrid-mat-checkbox-wrapper",
|
|
747
|
-
children: /* @__PURE__ */ jsx(
|
|
748
|
-
Checkbox,
|
|
749
|
-
{
|
|
750
|
-
checked: isSelected,
|
|
751
|
-
onChange: (_, checked) => handleRowCheckboxChange(rowId, checked, rowIndex, lastMouseShiftRef.current),
|
|
752
|
-
size: "small",
|
|
753
|
-
"aria-label": `Select row ${rowIndex + 1}`
|
|
754
|
-
}
|
|
755
|
-
)
|
|
756
|
-
}
|
|
757
|
-
) }),
|
|
758
|
-
hasRowNumbersCol && (() => {
|
|
759
|
-
const rnw = rowNumWidth ?? ROW_NUMBER_COLUMN_WIDTH;
|
|
760
|
-
return /* @__PURE__ */ jsx(
|
|
761
|
-
"td",
|
|
762
|
-
{
|
|
763
|
-
className: "ogrid-mat-td ogrid-mat-row-number",
|
|
764
|
-
style: {
|
|
765
|
-
width: rnw,
|
|
766
|
-
minWidth: rnw,
|
|
767
|
-
maxWidth: rnw,
|
|
768
|
-
left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
|
|
769
|
-
borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
|
|
770
|
-
},
|
|
771
|
-
children: rowNumberOffset + rowIndex + 1
|
|
772
|
-
}
|
|
773
|
-
);
|
|
774
|
-
})(),
|
|
775
|
-
leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
|
|
776
|
-
columnLayouts.map((cl, colIdx) => {
|
|
777
|
-
const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
|
|
778
|
-
return /* @__PURE__ */ jsx(
|
|
779
|
-
"td",
|
|
780
|
-
{
|
|
781
|
-
"data-column-id": cl.col.columnId,
|
|
782
|
-
className: cl.tdClassName,
|
|
783
|
-
style: { ...cl.tdStyle, minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth },
|
|
784
|
-
children: renderCellContent(item, cl.col, rowIndex, globalIdx)
|
|
785
|
-
},
|
|
786
|
-
cl.col.columnId
|
|
787
|
-
);
|
|
788
|
-
}),
|
|
789
|
-
rightSpacerWidth != null && rightSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: rightSpacerWidth, minWidth: rightSpacerWidth }, "aria-hidden": true })
|
|
790
|
-
]
|
|
791
|
-
}
|
|
792
|
-
);
|
|
793
|
-
}
|
|
794
|
-
var GridRow = React4.memo(GridRowInner, areGridRowPropsEqual);
|
|
795
|
-
injectDataGridStyles();
|
|
796
|
-
function MaterialTableBody(props) {
|
|
797
|
-
const {
|
|
798
|
-
virtualScrollEnabled,
|
|
799
|
-
visibleRange,
|
|
800
|
-
columnRange,
|
|
801
|
-
items,
|
|
802
|
-
getRowId,
|
|
803
|
-
selectedRowIds,
|
|
804
|
-
visibleCols,
|
|
805
|
-
columnLayouts,
|
|
806
|
-
renderCellContent,
|
|
807
|
-
handleSingleRowClick,
|
|
808
|
-
handleRowCheckboxChange,
|
|
809
|
-
lastMouseShiftRef,
|
|
810
|
-
hasCheckboxCol,
|
|
811
|
-
hasRowNumbersCol,
|
|
812
|
-
rowNumberOffset,
|
|
813
|
-
rowHeight,
|
|
814
|
-
selectionRange,
|
|
815
|
-
activeCell,
|
|
816
|
-
cutRange,
|
|
817
|
-
copyRange,
|
|
818
|
-
isDragging,
|
|
819
|
-
editingCell,
|
|
820
|
-
pinnedColumns,
|
|
821
|
-
rowNumWidth
|
|
822
|
-
} = props;
|
|
823
|
-
const { rowLayouts, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React4.useMemo(() => {
|
|
824
|
-
if (!columnRange) {
|
|
825
|
-
return { rowLayouts: columnLayouts, globalColIndexMap: void 0, leftSpacerWidth: void 0, rightSpacerWidth: void 0 };
|
|
826
|
-
}
|
|
827
|
-
const partition = partitionColumnsForVirtualization(
|
|
828
|
-
visibleCols,
|
|
829
|
-
columnRange,
|
|
830
|
-
pinnedColumns
|
|
831
|
-
);
|
|
832
|
-
const combined = [...partition.pinnedLeft, ...partition.virtualizedUnpinned, ...partition.pinnedRight];
|
|
833
|
-
const layoutMap = new Map(columnLayouts.map((cl) => [cl.col.columnId, cl]));
|
|
834
|
-
const partitionedLayouts = [];
|
|
835
|
-
const idxMap = [];
|
|
836
|
-
for (const col of combined) {
|
|
837
|
-
const layout = layoutMap.get(col.columnId);
|
|
838
|
-
if (layout) {
|
|
839
|
-
partitionedLayouts.push(layout);
|
|
840
|
-
idxMap.push(visibleCols.indexOf(col));
|
|
841
|
-
}
|
|
842
|
-
}
|
|
843
|
-
return {
|
|
844
|
-
rowLayouts: partitionedLayouts,
|
|
845
|
-
globalColIndexMap: idxMap,
|
|
846
|
-
leftSpacerWidth: partition.leftSpacerWidth,
|
|
847
|
-
rightSpacerWidth: partition.rightSpacerWidth
|
|
848
|
-
};
|
|
849
|
-
}, [columnRange, visibleCols, columnLayouts, pinnedColumns]);
|
|
850
|
-
const renderRow = (item, rowIndex) => {
|
|
851
|
-
const rowIdStr = getRowId(item);
|
|
852
|
-
return /* @__PURE__ */ jsx(
|
|
853
|
-
GridRow,
|
|
854
|
-
{
|
|
855
|
-
item,
|
|
856
|
-
rowIndex,
|
|
857
|
-
rowId: rowIdStr,
|
|
858
|
-
isSelected: selectedRowIds.has(rowIdStr),
|
|
859
|
-
columnLayouts: rowLayouts,
|
|
860
|
-
renderCellContent,
|
|
861
|
-
handleSingleRowClick,
|
|
862
|
-
handleRowCheckboxChange,
|
|
863
|
-
lastMouseShiftRef,
|
|
864
|
-
hasCheckboxCol,
|
|
865
|
-
hasRowNumbersCol,
|
|
866
|
-
rowNumberOffset,
|
|
867
|
-
selectionRange,
|
|
868
|
-
activeCell,
|
|
869
|
-
cutRange,
|
|
870
|
-
copyRange,
|
|
871
|
-
isDragging,
|
|
872
|
-
rowHeight,
|
|
873
|
-
editingRowId: editingCell?.rowId ?? null,
|
|
874
|
-
leftSpacerWidth,
|
|
875
|
-
rightSpacerWidth,
|
|
876
|
-
globalColIndexMap,
|
|
877
|
-
rowNumWidth
|
|
878
|
-
},
|
|
879
|
-
rowIdStr
|
|
880
|
-
);
|
|
881
|
-
};
|
|
882
|
-
return /* @__PURE__ */ jsxs("tbody", { className: "ogrid-mat-tbody", children: [
|
|
883
|
-
virtualScrollEnabled && visibleRange.offsetTop > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true }),
|
|
884
|
-
virtualScrollEnabled ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map(
|
|
885
|
-
(item, i) => renderRow(item, visibleRange.startIndex + i)
|
|
886
|
-
) : items.map((item, rowIndex) => renderRow(item, rowIndex)),
|
|
887
|
-
virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
|
|
888
|
-
] });
|
|
889
|
-
}
|
|
890
|
-
function DataGridTableInner(props) {
|
|
891
|
-
const o = useDataGridTableOrchestration({ props });
|
|
892
|
-
const {
|
|
893
|
-
wrapperRef,
|
|
894
|
-
tableContainerRef,
|
|
895
|
-
lastMouseShiftRef,
|
|
896
|
-
interaction,
|
|
897
|
-
pinning,
|
|
898
|
-
handleResizeStart,
|
|
899
|
-
handleResizeDoubleClick,
|
|
900
|
-
getColumnWidth,
|
|
901
|
-
isReorderDragging,
|
|
902
|
-
dropIndicatorX,
|
|
903
|
-
handleHeaderMouseDown,
|
|
904
|
-
virtualScrollEnabled,
|
|
905
|
-
visibleRange,
|
|
906
|
-
columnRange,
|
|
907
|
-
onHorizontalScroll,
|
|
908
|
-
items,
|
|
909
|
-
getRowId,
|
|
910
|
-
emptyState,
|
|
911
|
-
suppressHorizontalScroll,
|
|
912
|
-
isLoading,
|
|
913
|
-
loadingMessage,
|
|
914
|
-
ariaLabel,
|
|
915
|
-
ariaLabelledBy,
|
|
916
|
-
columnReorder,
|
|
917
|
-
density,
|
|
918
|
-
rowHeight,
|
|
919
|
-
rowNumberOffset,
|
|
920
|
-
headerRows,
|
|
921
|
-
allowOverflowX,
|
|
922
|
-
fitToContent,
|
|
923
|
-
showColumnLetters,
|
|
924
|
-
editCallbacks,
|
|
925
|
-
interactionHandlers,
|
|
926
|
-
cellDescriptorInputRef,
|
|
927
|
-
cellDescriptorCacheRef,
|
|
928
|
-
pendingEditorValueRef,
|
|
929
|
-
popoverAnchorElRef,
|
|
930
|
-
handleSingleRowClick,
|
|
931
|
-
handlePasteVoid,
|
|
932
|
-
visibleCols,
|
|
933
|
-
hasCheckboxCol,
|
|
934
|
-
hasRowNumbersCol,
|
|
935
|
-
colOffset,
|
|
936
|
-
minTableWidth,
|
|
937
|
-
columnSizingOverrides,
|
|
938
|
-
measuredColumnWidths,
|
|
939
|
-
selectedRowIds,
|
|
940
|
-
handleRowCheckboxChange,
|
|
941
|
-
handleSelectAll,
|
|
942
|
-
allSelected,
|
|
943
|
-
someSelected,
|
|
944
|
-
editingCell,
|
|
945
|
-
setPopoverAnchorEl,
|
|
946
|
-
cancelPopoverEdit,
|
|
947
|
-
setActiveCell,
|
|
948
|
-
selectionRange,
|
|
949
|
-
hasCellSelection,
|
|
950
|
-
handleGridKeyDown,
|
|
951
|
-
handleFillHandleMouseDown,
|
|
952
|
-
handleCopy,
|
|
953
|
-
handleCut,
|
|
954
|
-
cutRange,
|
|
955
|
-
copyRange,
|
|
956
|
-
canUndo,
|
|
957
|
-
canRedo,
|
|
958
|
-
onUndo,
|
|
959
|
-
onRedo,
|
|
960
|
-
isDragging,
|
|
961
|
-
menuPosition,
|
|
962
|
-
closeContextMenu,
|
|
963
|
-
headerFilterInput,
|
|
964
|
-
statusBarConfig,
|
|
965
|
-
showEmptyInGrid,
|
|
966
|
-
onCellError,
|
|
967
|
-
headerMenu
|
|
968
|
-
} = o;
|
|
969
|
-
const densityPadding = useMemo(() => getDensityPadding(density), [density]);
|
|
970
|
-
const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
|
|
971
|
-
const columnMeta = useColumnMeta({
|
|
972
|
-
visibleCols,
|
|
973
|
-
getColumnWidth,
|
|
974
|
-
columnSizingOverrides,
|
|
975
|
-
measuredColumnWidths,
|
|
976
|
-
pinnedColumns: pinning.pinnedColumns,
|
|
977
|
-
leftOffsets: pinning.leftOffsets,
|
|
978
|
-
rightOffsets: pinning.rightOffsets,
|
|
979
|
-
pinnedColLeftClass: "",
|
|
980
|
-
pinnedColRightClass: ""
|
|
981
|
-
});
|
|
982
|
-
const columnLayouts = useMemo(
|
|
983
|
-
() => visibleCols.map((col) => {
|
|
984
|
-
const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
|
|
985
|
-
const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
|
|
986
|
-
let tdClassName = "ogrid-mat-td";
|
|
987
|
-
const tdStyle = {};
|
|
988
|
-
if (isPinnedLeft) {
|
|
989
|
-
tdClassName += " ogrid-mat-td--pinned-left";
|
|
990
|
-
if (pinning.leftOffsets[col.columnId] != null) tdStyle.left = pinning.leftOffsets[col.columnId];
|
|
991
|
-
} else if (isPinnedRight) {
|
|
992
|
-
tdClassName += " ogrid-mat-td--pinned-right";
|
|
993
|
-
if (pinning.rightOffsets[col.columnId] != null) tdStyle.right = pinning.rightOffsets[col.columnId];
|
|
994
|
-
}
|
|
995
|
-
const cellMeta = columnMeta.cellStyles[col.columnId];
|
|
996
|
-
return {
|
|
997
|
-
col,
|
|
998
|
-
tdClassName,
|
|
999
|
-
tdStyle,
|
|
1000
|
-
minWidth: cellMeta?.minWidth ?? 0,
|
|
1001
|
-
width: cellMeta?.width ?? getColumnWidth(col),
|
|
1002
|
-
maxWidth: cellMeta?.maxWidth ?? getColumnWidth(col)
|
|
1003
|
-
};
|
|
1004
|
-
}),
|
|
1005
|
-
[visibleCols, columnMeta, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets, getColumnWidth]
|
|
1006
|
-
);
|
|
1007
|
-
const wrapperSx = useMemo(() => ({
|
|
1008
|
-
position: "relative",
|
|
1009
|
-
flex: 1,
|
|
1010
|
-
minHeight: isLoading && items.length === 0 ? 200 : 0,
|
|
1011
|
-
width: fitToContent ? "fit-content" : "100%",
|
|
1012
|
-
maxWidth: "100%",
|
|
1013
|
-
overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
|
|
1014
|
-
overflowY: "auto",
|
|
1015
|
-
bgcolor: "background.paper",
|
|
1016
|
-
willChange: "scroll-position"
|
|
1017
|
-
}), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length]);
|
|
1018
|
-
const cellDensityStyle = DENSITY_CELL_STYLES[density] ?? DENSITY_CELL_STYLES.normal;
|
|
1019
|
-
const renderCellContent = useCallback(
|
|
1020
|
-
(item, col, rowIndex, colIdx) => {
|
|
1021
|
-
const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current, cellDescriptorCacheRef.current);
|
|
1022
|
-
const rowId = getRowId(item);
|
|
1023
|
-
let cellContent;
|
|
1024
|
-
if (descriptor.mode === "editing-inline") {
|
|
1025
|
-
cellContent = /* @__PURE__ */ jsx("div", { style: EDITING_CELL_STYLE, children: /* @__PURE__ */ jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) });
|
|
1026
|
-
} else if (descriptor.mode === "editing-popover" && typeof col.cellEditor === "function") {
|
|
1027
|
-
const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
|
|
1028
|
-
const CustomEditor = col.cellEditor;
|
|
1029
|
-
cellContent = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1030
|
-
/* @__PURE__ */ jsx(Box, { ref: (el) => {
|
|
1031
|
-
if (el) setPopoverAnchorEl(el);
|
|
1032
|
-
}, sx: POPOVER_ANCHOR_SX, "aria-hidden": true }),
|
|
1033
|
-
/* @__PURE__ */ jsx(
|
|
1034
|
-
Popover,
|
|
1035
|
-
{
|
|
1036
|
-
open: !!popoverAnchorElRef.current,
|
|
1037
|
-
anchorEl: popoverAnchorElRef.current,
|
|
1038
|
-
onClose: cancelPopoverEdit,
|
|
1039
|
-
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1040
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
1041
|
-
children: /* @__PURE__ */ jsx(Box, { sx: POPOVER_CONTENT_SX, children: /* @__PURE__ */ jsx(CustomEditor, { ...editorProps }) })
|
|
1042
|
-
}
|
|
1043
|
-
)
|
|
1044
|
-
] });
|
|
1045
|
-
} else {
|
|
1046
|
-
let displayNode;
|
|
1047
|
-
if (descriptor.columnType === "boolean") {
|
|
1048
|
-
displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
|
|
1049
|
-
} else {
|
|
1050
|
-
const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
|
|
1051
|
-
const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
|
|
1052
|
-
displayNode = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
|
|
1053
|
-
}
|
|
1054
|
-
let cls = "ogrid-mat-cell";
|
|
1055
|
-
if (col.type === "numeric") cls += " ogrid-mat-cell--numeric";
|
|
1056
|
-
else if (col.type === "boolean") cls += " ogrid-mat-cell--boolean";
|
|
1057
|
-
if (descriptor.canEditAny) cls += " ogrid-mat-cell--editable";
|
|
1058
|
-
if (descriptor.isActive) cls += " ogrid-mat-cell--active";
|
|
1059
|
-
if (descriptor.isActive && descriptor.isInRange) cls += " ogrid-mat-cell--active-in-range";
|
|
1060
|
-
if (descriptor.isInRange && !descriptor.isActive) cls += " ogrid-mat-cell--range";
|
|
1061
|
-
if (descriptor.isInCutRange) cls += " ogrid-mat-cell--cut";
|
|
1062
|
-
const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
|
|
1063
|
-
cellContent = /* @__PURE__ */ jsxs(
|
|
1064
|
-
"div",
|
|
1065
|
-
{
|
|
1066
|
-
className: cls,
|
|
1067
|
-
...interactionProps,
|
|
1068
|
-
style: cellDensityStyle,
|
|
1069
|
-
children: [
|
|
1070
|
-
displayNode,
|
|
1071
|
-
descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx("div", { className: "ogrid-mat-fill-handle", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" })
|
|
1072
|
-
]
|
|
1073
|
-
}
|
|
1074
|
-
);
|
|
1075
|
-
}
|
|
1076
|
-
return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`);
|
|
1077
|
-
},
|
|
1078
|
-
[editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDescriptorCacheRef, cellDensityStyle, pendingEditorValueRef, popoverAnchorElRef]
|
|
1079
|
-
);
|
|
1080
|
-
return /* @__PURE__ */ jsxs(Box, { sx: gridRootSx, children: [
|
|
1081
|
-
/* @__PURE__ */ jsxs(
|
|
1082
|
-
Box,
|
|
1083
|
-
{
|
|
1084
|
-
ref: wrapperRef,
|
|
1085
|
-
tabIndex: 0,
|
|
1086
|
-
role: "region",
|
|
1087
|
-
"aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
|
|
1088
|
-
"aria-labelledby": ariaLabelledBy,
|
|
1089
|
-
onMouseDown: (e) => {
|
|
1090
|
-
lastMouseShiftRef.current = e.shiftKey;
|
|
1091
|
-
},
|
|
1092
|
-
onScroll: onHorizontalScroll ? (e) => onHorizontalScroll(e.target.scrollLeft) : void 0,
|
|
1093
|
-
onKeyDown: handleGridKeyDown,
|
|
1094
|
-
onContextMenu: PREVENT_DEFAULT,
|
|
1095
|
-
"data-density": density,
|
|
1096
|
-
"data-overflow-x": allowOverflowX ? "true" : "false",
|
|
1097
|
-
className: "ogrid-mat-wrapper",
|
|
1098
|
-
sx: wrapperSx,
|
|
1099
|
-
children: [
|
|
1100
|
-
/* @__PURE__ */ jsx(Box, { sx: WRAPPER_SCROLL_SX, children: /* @__PURE__ */ jsx("div", { style: { minWidth: allowOverflowX ? minTableWidth : void 0, overflowX: "clip" }, children: /* @__PURE__ */ jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [
|
|
1101
|
-
/* @__PURE__ */ jsxs(
|
|
1102
|
-
Table,
|
|
1103
|
-
{
|
|
1104
|
-
size: "small",
|
|
1105
|
-
role: "grid",
|
|
1106
|
-
sx: { minWidth: minTableWidth, borderCollapse: "separate", borderSpacing: 0 },
|
|
1107
|
-
"data-virtual-scroll": virtualScrollEnabled ? "" : void 0,
|
|
1108
|
-
children: [
|
|
1109
|
-
/* @__PURE__ */ jsxs(TableHead, { sx: STICKY_HEADER_SX, children: [
|
|
1110
|
-
showColumnLetters && /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
|
|
1111
|
-
hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { sx: COLUMN_LETTER_CELL_SX }),
|
|
1112
|
-
hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { sx: COLUMN_LETTER_CELL_SX }),
|
|
1113
|
-
visibleCols.map((col, colIdx) => {
|
|
1114
|
-
const hdrStyle = columnMeta.hdrStyles[col.columnId];
|
|
1115
|
-
return /* @__PURE__ */ jsx(
|
|
1116
|
-
TableCell,
|
|
1117
|
-
{
|
|
1118
|
-
...{
|
|
1119
|
-
component: "th",
|
|
1120
|
-
sx: {
|
|
1121
|
-
...COLUMN_LETTER_CELL_SX,
|
|
1122
|
-
minWidth: hdrStyle?.minWidth,
|
|
1123
|
-
width: hdrStyle?.width,
|
|
1124
|
-
maxWidth: hdrStyle?.maxWidth
|
|
1125
|
-
}
|
|
1126
|
-
},
|
|
1127
|
-
children: indexToColumnLetter(colIdx)
|
|
1128
|
-
},
|
|
1129
|
-
col.columnId
|
|
1130
|
-
);
|
|
1131
|
-
})
|
|
1132
|
-
] }),
|
|
1133
|
-
headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
|
|
1134
|
-
rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(
|
|
1135
|
-
TableCell,
|
|
1136
|
-
{
|
|
1137
|
-
...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : void 0, sx: CHECKBOX_CELL_SX },
|
|
1138
|
-
children: /* @__PURE__ */ jsx(
|
|
1139
|
-
Checkbox,
|
|
1140
|
-
{
|
|
1141
|
-
checked: allSelected,
|
|
1142
|
-
indeterminate: someSelected,
|
|
1143
|
-
onChange: (_, c) => handleSelectAll(!!c),
|
|
1144
|
-
size: "small",
|
|
1145
|
-
"aria-label": "Select all rows"
|
|
1146
|
-
}
|
|
1147
|
-
)
|
|
1148
|
-
}
|
|
1149
|
-
),
|
|
1150
|
-
rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } }),
|
|
1151
|
-
rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
|
|
1152
|
-
const rnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
|
|
1153
|
-
return /* @__PURE__ */ jsxs(
|
|
1154
|
-
TableCell,
|
|
1155
|
-
{
|
|
1156
|
-
...{
|
|
1157
|
-
component: "th",
|
|
1158
|
-
scope: "col",
|
|
1159
|
-
rowSpan: headerRows.length > 1 ? 1 : void 0,
|
|
1160
|
-
sx: {
|
|
1161
|
-
width: rnw,
|
|
1162
|
-
minWidth: rnw,
|
|
1163
|
-
maxWidth: rnw,
|
|
1164
|
-
textAlign: "center",
|
|
1165
|
-
fontWeight: 600,
|
|
1166
|
-
backgroundColor: HEADER_BG,
|
|
1167
|
-
position: "sticky",
|
|
1168
|
-
left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
|
|
1169
|
-
zIndex: 4,
|
|
1170
|
-
...headerCellSx
|
|
1171
|
-
}
|
|
1172
|
-
},
|
|
1173
|
-
children: [
|
|
1174
|
-
"#",
|
|
1175
|
-
/* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
|
|
1176
|
-
setActiveCell(null);
|
|
1177
|
-
interaction.setSelectionRange(null);
|
|
1178
|
-
wrapperRef.current?.focus({ preventScroll: true });
|
|
1179
|
-
handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
|
|
1180
|
-
}, sx: RESIZE_HANDLE_SX })
|
|
1181
|
-
]
|
|
1182
|
-
}
|
|
1183
|
-
);
|
|
1184
|
-
})(),
|
|
1185
|
-
rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (() => {
|
|
1186
|
-
const spacerRnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
|
|
1187
|
-
return /* @__PURE__ */ jsx(
|
|
1188
|
-
TableCell,
|
|
1189
|
-
{
|
|
1190
|
-
...{
|
|
1191
|
-
rowSpan: headerRows.length - 1,
|
|
1192
|
-
sx: {
|
|
1193
|
-
width: spacerRnw,
|
|
1194
|
-
minWidth: spacerRnw,
|
|
1195
|
-
position: "sticky",
|
|
1196
|
-
left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
|
|
1197
|
-
zIndex: 4,
|
|
1198
|
-
backgroundColor: "background.paper"
|
|
1199
|
-
}
|
|
1200
|
-
}
|
|
1201
|
-
}
|
|
1202
|
-
);
|
|
1203
|
-
})(),
|
|
1204
|
-
row.map((cell, cellIdx) => {
|
|
1205
|
-
if (cell.isGroup) {
|
|
1206
|
-
return /* @__PURE__ */ jsx(
|
|
1207
|
-
TableCell,
|
|
1208
|
-
{
|
|
1209
|
-
...{
|
|
1210
|
-
colSpan: cell.colSpan,
|
|
1211
|
-
component: "th",
|
|
1212
|
-
scope: "colgroup",
|
|
1213
|
-
sx: GROUP_HEADER_CELL_SX
|
|
1214
|
-
},
|
|
1215
|
-
children: cell.label
|
|
1216
|
-
},
|
|
1217
|
-
cellIdx
|
|
1218
|
-
);
|
|
1219
|
-
}
|
|
1220
|
-
if (!cell.columnDef) return null;
|
|
1221
|
-
const col = cell.columnDef;
|
|
1222
|
-
const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
|
|
1223
|
-
const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
|
|
1224
|
-
const baseHeaderSx = o.stickyHeader ? isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX : isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX;
|
|
1225
|
-
const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { ...baseHeaderSx, left: pinning.leftOffsets[col.columnId] } : isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { ...baseHeaderSx, right: pinning.rightOffsets[col.columnId] } : baseHeaderSx;
|
|
1226
|
-
const hdrStyle = columnMeta.hdrStyles[col.columnId];
|
|
1227
|
-
const isSorted = props.sortBy === col.columnId;
|
|
1228
|
-
const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
|
|
1229
|
-
return /* @__PURE__ */ jsxs(
|
|
1230
|
-
TableCell,
|
|
1231
|
-
{
|
|
1232
|
-
...{
|
|
1233
|
-
component: "th",
|
|
1234
|
-
scope: "col",
|
|
1235
|
-
"data-column-id": col.columnId,
|
|
1236
|
-
rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
|
|
1237
|
-
"aria-sort": ariaSort,
|
|
1238
|
-
sx: {
|
|
1239
|
-
...headerSx,
|
|
1240
|
-
...headerCellSx,
|
|
1241
|
-
minWidth: hdrStyle?.minWidth,
|
|
1242
|
-
width: hdrStyle?.width,
|
|
1243
|
-
maxWidth: hdrStyle?.maxWidth,
|
|
1244
|
-
...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : {},
|
|
1245
|
-
"&:focus-visible": {
|
|
1246
|
-
outline: "2px solid",
|
|
1247
|
-
outlineColor: "primary.main",
|
|
1248
|
-
outlineOffset: "-2px",
|
|
1249
|
-
zIndex: 11
|
|
1250
|
-
}
|
|
1251
|
-
},
|
|
1252
|
-
onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0
|
|
1253
|
-
},
|
|
1254
|
-
children: [
|
|
1255
|
-
/* @__PURE__ */ jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [
|
|
1256
|
-
/* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
|
|
1257
|
-
/* @__PURE__ */ jsx(
|
|
1258
|
-
Box,
|
|
1259
|
-
{
|
|
1260
|
-
component: "button",
|
|
1261
|
-
onClick: (e) => {
|
|
1262
|
-
e.stopPropagation();
|
|
1263
|
-
if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
|
|
1264
|
-
headerMenu.close();
|
|
1265
|
-
} else {
|
|
1266
|
-
headerMenu.open(col.columnId, e.currentTarget);
|
|
1267
|
-
}
|
|
1268
|
-
},
|
|
1269
|
-
"aria-label": "Column options",
|
|
1270
|
-
title: "Column options",
|
|
1271
|
-
sx: COLUMN_OPTIONS_BUTTON_SX,
|
|
1272
|
-
children: "\u22EE"
|
|
1273
|
-
}
|
|
1274
|
-
)
|
|
1275
|
-
] }),
|
|
1276
|
-
/* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
|
|
1277
|
-
setActiveCell(null);
|
|
1278
|
-
interaction.setSelectionRange(null);
|
|
1279
|
-
wrapperRef.current?.focus({ preventScroll: true });
|
|
1280
|
-
handleResizeStart(e, col);
|
|
1281
|
-
}, onDoubleClick: (e) => handleResizeDoubleClick(e, col), sx: RESIZE_HANDLE_SX })
|
|
1282
|
-
]
|
|
1283
|
-
},
|
|
1284
|
-
col.columnId
|
|
1285
|
-
);
|
|
1286
|
-
})
|
|
1287
|
-
] }, rowIdx))
|
|
1288
|
-
] }),
|
|
1289
|
-
!showEmptyInGrid && /* @__PURE__ */ jsx(
|
|
1290
|
-
MaterialTableBody,
|
|
1291
|
-
{
|
|
1292
|
-
virtualScrollEnabled,
|
|
1293
|
-
visibleRange,
|
|
1294
|
-
columnRange,
|
|
1295
|
-
items,
|
|
1296
|
-
getRowId,
|
|
1297
|
-
selectedRowIds,
|
|
1298
|
-
visibleCols,
|
|
1299
|
-
columnLayouts,
|
|
1300
|
-
renderCellContent,
|
|
1301
|
-
handleSingleRowClick,
|
|
1302
|
-
handleRowCheckboxChange,
|
|
1303
|
-
lastMouseShiftRef,
|
|
1304
|
-
hasCheckboxCol,
|
|
1305
|
-
hasRowNumbersCol,
|
|
1306
|
-
rowNumberOffset,
|
|
1307
|
-
rowHeight,
|
|
1308
|
-
selectionRange,
|
|
1309
|
-
activeCell: interaction.activeCell,
|
|
1310
|
-
cutRange,
|
|
1311
|
-
copyRange,
|
|
1312
|
-
isDragging,
|
|
1313
|
-
editingCell,
|
|
1314
|
-
pinnedColumns: pinning.pinnedColumns,
|
|
1315
|
-
rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
|
|
1316
|
-
}
|
|
1317
|
-
)
|
|
1318
|
-
]
|
|
1319
|
-
}
|
|
1320
|
-
),
|
|
1321
|
-
isReorderDragging && dropIndicatorX != null && /* @__PURE__ */ jsx(DropIndicator, { dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 }),
|
|
1322
|
-
/* @__PURE__ */ jsx(
|
|
1323
|
-
MarchingAntsOverlay,
|
|
1324
|
-
{
|
|
1325
|
-
containerRef: tableContainerRef,
|
|
1326
|
-
selectionRange,
|
|
1327
|
-
copyRange,
|
|
1328
|
-
cutRange,
|
|
1329
|
-
colOffset,
|
|
1330
|
-
items,
|
|
1331
|
-
visibleColumns: props.visibleColumns,
|
|
1332
|
-
columnSizingOverrides,
|
|
1333
|
-
columnOrder: props.columnOrder,
|
|
1334
|
-
isDragging
|
|
1335
|
-
}
|
|
1336
|
-
),
|
|
1337
|
-
props.formulaReferences && props.formulaReferences.length > 0 && /* @__PURE__ */ jsx(
|
|
1338
|
-
FormulaRefOverlay,
|
|
1339
|
-
{
|
|
1340
|
-
containerRef: tableContainerRef,
|
|
1341
|
-
references: props.formulaReferences,
|
|
1342
|
-
colOffset
|
|
1343
|
-
}
|
|
1344
|
-
),
|
|
1345
|
-
showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
|
|
1346
|
-
] }) }) }),
|
|
1347
|
-
menuPosition && createPortal(
|
|
1348
|
-
/* @__PURE__ */ jsx(
|
|
1349
|
-
GridContextMenu,
|
|
1350
|
-
{
|
|
1351
|
-
x: menuPosition.x,
|
|
1352
|
-
y: menuPosition.y,
|
|
1353
|
-
hasSelection: hasCellSelection,
|
|
1354
|
-
canUndo,
|
|
1355
|
-
canRedo,
|
|
1356
|
-
onUndo: onUndo ?? NOOP,
|
|
1357
|
-
onRedo: onRedo ?? NOOP,
|
|
1358
|
-
onCopy: handleCopy,
|
|
1359
|
-
onCut: handleCut,
|
|
1360
|
-
onPaste: handlePasteVoid,
|
|
1361
|
-
onSelectAll: o.interaction.handleSelectAllCells,
|
|
1362
|
-
onClose: closeContextMenu
|
|
1363
|
-
}
|
|
1364
|
-
),
|
|
1365
|
-
document.body
|
|
1366
|
-
),
|
|
1367
|
-
/* @__PURE__ */ jsx(ColumnHeaderMenu, { ...getColumnHeaderMenuProps(headerMenu) })
|
|
1368
|
-
]
|
|
1369
|
-
}
|
|
1370
|
-
),
|
|
1371
|
-
statusBarConfig && /* @__PURE__ */ jsx(
|
|
1372
|
-
StatusBar,
|
|
1373
|
-
{
|
|
1374
|
-
totalCount: statusBarConfig.totalCount,
|
|
1375
|
-
filteredCount: statusBarConfig.filteredCount,
|
|
1376
|
-
selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
|
|
1377
|
-
selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : void 0,
|
|
1378
|
-
aggregation: statusBarConfig.aggregation,
|
|
1379
|
-
suppressRowCount: statusBarConfig.suppressRowCount
|
|
1380
|
-
}
|
|
1381
|
-
),
|
|
1382
|
-
isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { message: loadingMessage })
|
|
1383
|
-
] });
|
|
1384
|
-
}
|
|
1385
|
-
var DataGridTable = React4.memo(DataGridTableInner);
|
|
1386
|
-
var CheckboxItem = ({ columnId: _columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
|
|
1387
|
-
FormControlLabel,
|
|
1388
|
-
{
|
|
1389
|
-
control: /* @__PURE__ */ jsx(
|
|
1390
|
-
Checkbox,
|
|
1391
|
-
{
|
|
1392
|
-
size: "small",
|
|
1393
|
-
checked,
|
|
1394
|
-
onChange: (ev) => {
|
|
1395
|
-
ev.stopPropagation();
|
|
1396
|
-
onChange(ev.target.checked);
|
|
1397
|
-
},
|
|
1398
|
-
disabled
|
|
1399
|
-
}
|
|
1400
|
-
),
|
|
1401
|
-
label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: columnName }),
|
|
1402
|
-
sx: { m: 0 }
|
|
1403
|
-
}
|
|
1404
|
-
);
|
|
1405
|
-
var Header = ({ visibleCount, totalCount }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 1, borderBottom: 1, borderColor: "divider", bgcolor: "action.hover" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
|
|
1406
|
-
"Select Columns (",
|
|
1407
|
-
visibleCount,
|
|
1408
|
-
" of ",
|
|
1409
|
-
totalCount,
|
|
1410
|
-
")"
|
|
1411
|
-
] }) });
|
|
1412
|
-
var OptionsListContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children });
|
|
1413
|
-
var OptionItemContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children });
|
|
1414
|
-
var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs(
|
|
1415
|
-
Box,
|
|
1416
|
-
{
|
|
1417
|
-
sx: {
|
|
1418
|
-
display: "flex",
|
|
1419
|
-
justifyContent: "flex-end",
|
|
1420
|
-
gap: 1,
|
|
1421
|
-
px: 1.5,
|
|
1422
|
-
py: 1,
|
|
1423
|
-
borderTop: 1,
|
|
1424
|
-
borderColor: "divider",
|
|
1425
|
-
bgcolor: "action.hover"
|
|
1426
|
-
},
|
|
1427
|
-
children: [
|
|
1428
|
-
/* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
|
|
1429
|
-
/* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onSelectAll, sx: { textTransform: "none" }, children: "Select All" })
|
|
1430
|
-
]
|
|
1431
|
-
}
|
|
1432
|
-
);
|
|
1433
|
-
var ColumnChooser = (props) => {
|
|
1434
|
-
const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
|
|
1435
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
1436
|
-
const buttonRef = useRef(null);
|
|
1437
|
-
const {
|
|
1438
|
-
open: isOpen,
|
|
1439
|
-
setOpen,
|
|
1440
|
-
handleClose,
|
|
1441
|
-
handleCheckboxChange: setColumnVisible,
|
|
1442
|
-
handleSelectAll,
|
|
1443
|
-
handleClearAll,
|
|
1444
|
-
visibleCount,
|
|
1445
|
-
totalCount
|
|
1446
|
-
} = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
|
|
1447
|
-
const handleToggle = (e) => {
|
|
1448
|
-
if (isOpen) {
|
|
1449
|
-
handleClose();
|
|
1450
|
-
setAnchorEl(null);
|
|
1451
|
-
} else {
|
|
1452
|
-
setAnchorEl(e.currentTarget);
|
|
1453
|
-
setOpen(true);
|
|
1454
|
-
}
|
|
1455
|
-
};
|
|
1456
|
-
const handlePopoverClose = () => {
|
|
1457
|
-
handleClose();
|
|
1458
|
-
setAnchorEl(null);
|
|
1459
|
-
};
|
|
1460
|
-
const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
|
|
1461
|
-
return /* @__PURE__ */ jsxs(Box, { className, sx: { display: "inline-flex" }, children: [
|
|
1462
|
-
/* @__PURE__ */ jsxs(
|
|
1463
|
-
Button,
|
|
1464
|
-
{
|
|
1465
|
-
ref: buttonRef,
|
|
1466
|
-
variant: "outlined",
|
|
1467
|
-
size: "small",
|
|
1468
|
-
color: "inherit",
|
|
1469
|
-
startIcon: /* @__PURE__ */ jsx(ViewColumn, {}),
|
|
1470
|
-
endIcon: isOpen ? /* @__PURE__ */ jsx(ExpandLess, {}) : /* @__PURE__ */ jsx(ExpandMore, {}),
|
|
1471
|
-
onClick: handleToggle,
|
|
1472
|
-
"aria-expanded": isOpen,
|
|
1473
|
-
"aria-haspopup": "listbox",
|
|
1474
|
-
sx: {
|
|
1475
|
-
textTransform: "none",
|
|
1476
|
-
fontWeight: 600,
|
|
1477
|
-
borderColor: isOpen ? "primary.main" : "divider"
|
|
1478
|
-
},
|
|
1479
|
-
children: [
|
|
1480
|
-
"Column Visibility (",
|
|
1481
|
-
visibleCount,
|
|
1482
|
-
" of ",
|
|
1483
|
-
totalCount,
|
|
1484
|
-
")"
|
|
1485
|
-
]
|
|
1486
|
-
}
|
|
1487
|
-
),
|
|
1488
|
-
/* @__PURE__ */ jsx(
|
|
1489
|
-
Popover,
|
|
1490
|
-
{
|
|
1491
|
-
open: isOpen,
|
|
1492
|
-
anchorEl,
|
|
1493
|
-
onClose: handlePopoverClose,
|
|
1494
|
-
anchorOrigin: { vertical: "bottom", horizontal: "right" },
|
|
1495
|
-
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
1496
|
-
slotProps: { paper: { sx: { mt: 0.5, minWidth: 220 } } },
|
|
1497
|
-
children: /* @__PURE__ */ jsx(
|
|
1498
|
-
ColumnChooserContent,
|
|
1499
|
-
{
|
|
1500
|
-
columns,
|
|
1501
|
-
visibleColumns,
|
|
1502
|
-
visibleCount,
|
|
1503
|
-
totalCount,
|
|
1504
|
-
handleSelectAll,
|
|
1505
|
-
handleClearAll,
|
|
1506
|
-
handleCheckboxChange,
|
|
1507
|
-
CheckboxItem,
|
|
1508
|
-
Header,
|
|
1509
|
-
OptionsListContainer,
|
|
1510
|
-
OptionItemContainer,
|
|
1511
|
-
Actions
|
|
1512
|
-
}
|
|
1513
|
-
)
|
|
1514
|
-
}
|
|
1515
|
-
)
|
|
1516
|
-
] });
|
|
1517
|
-
};
|
|
1518
|
-
var MUI_NAV_ICONS = {
|
|
1519
|
-
first: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" }),
|
|
1520
|
-
prev: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" }),
|
|
1521
|
-
next: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" }),
|
|
1522
|
-
last: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
|
|
1523
|
-
};
|
|
1524
|
-
var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(IconButton, { size: "small", onClick, disabled, "aria-label": ariaLabel, children: MUI_NAV_ICONS[variant] });
|
|
1525
|
-
var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children }) => /* @__PURE__ */ jsx(
|
|
1526
|
-
Button,
|
|
1527
|
-
{
|
|
1528
|
-
variant: active ? "contained" : "outlined",
|
|
1529
|
-
size: "small",
|
|
1530
|
-
onClick,
|
|
1531
|
-
"aria-label": ariaLabel,
|
|
1532
|
-
"aria-current": ariaCurrent,
|
|
1533
|
-
sx: { minWidth: 32, px: 0.5 },
|
|
1534
|
-
children
|
|
1535
|
-
}
|
|
1536
|
-
);
|
|
1537
|
-
var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel }) => {
|
|
1538
|
-
const handleChange = (event) => onChange(Number(event.target.value));
|
|
1539
|
-
return /* @__PURE__ */ jsx(Select, { value, onChange: handleChange, size: "small", "aria-label": ariaLabel, sx: { minWidth: 70 }, children: options.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n)) });
|
|
1540
|
-
};
|
|
1541
|
-
var OuterContainer = ({ children, className, role, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(
|
|
1542
|
-
Box,
|
|
1543
|
-
{
|
|
1544
|
-
className,
|
|
1545
|
-
role,
|
|
1546
|
-
"aria-label": ariaLabel,
|
|
1547
|
-
sx: {
|
|
1548
|
-
display: "flex",
|
|
1549
|
-
alignItems: "center",
|
|
1550
|
-
justifyContent: "space-between",
|
|
1551
|
-
flexWrap: "wrap",
|
|
1552
|
-
gap: 2,
|
|
1553
|
-
px: 1.5,
|
|
1554
|
-
width: "100%",
|
|
1555
|
-
minWidth: 0,
|
|
1556
|
-
boxSizing: "border-box"
|
|
1557
|
-
},
|
|
1558
|
-
children
|
|
1559
|
-
}
|
|
1560
|
-
);
|
|
1561
|
-
var InfoText = ({ children }) => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children });
|
|
1562
|
-
var NavButtonsContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children });
|
|
1563
|
-
var PageSizeContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children });
|
|
1564
|
-
var PageSizeLabel = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" });
|
|
1565
|
-
var Ellipsis = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" });
|
|
1566
|
-
var SLOTS = {
|
|
1567
|
-
NavButton,
|
|
1568
|
-
PageButton,
|
|
1569
|
-
PageSizeSelect,
|
|
1570
|
-
OuterContainer,
|
|
1571
|
-
InfoText,
|
|
1572
|
-
NavButtonsContainer,
|
|
1573
|
-
PageSizeContainer,
|
|
1574
|
-
PageSizeLabel,
|
|
1575
|
-
Ellipsis
|
|
1576
|
-
};
|
|
1577
|
-
var PaginationControls = React4.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS }));
|
|
1578
|
-
PaginationControls.displayName = "PaginationControls";
|
|
1579
|
-
var MuiThemeContainer = React4.forwardRef(
|
|
1580
|
-
function MuiThemeContainer2(props, ref) {
|
|
1581
|
-
const theme = useTheme();
|
|
1582
|
-
const sx = React4.useMemo(() => ({
|
|
1583
|
-
display: "flex",
|
|
1584
|
-
flexDirection: "column",
|
|
1585
|
-
gap: 1,
|
|
1586
|
-
"--ogrid-bg": theme.palette.background.default,
|
|
1587
|
-
"--ogrid-border": theme.palette.divider,
|
|
1588
|
-
"--ogrid-header-bg": theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100],
|
|
1589
|
-
"--ogrid-fg": theme.palette.text.primary,
|
|
1590
|
-
"--ogrid-fg-secondary": theme.palette.text.secondary,
|
|
1591
|
-
"--ogrid-fg-muted": theme.palette.text.disabled,
|
|
1592
|
-
"--ogrid-hover-bg": theme.palette.action.hover,
|
|
1593
|
-
"--ogrid-paper-bg": theme.palette.background.paper,
|
|
1594
|
-
"--ogrid-primary": theme.palette.primary.main,
|
|
1595
|
-
"--ogrid-selection-bg": theme.palette.action.selected
|
|
1596
|
-
}), [theme]);
|
|
1597
|
-
return /* @__PURE__ */ jsx(Box, { ref, sx, ...props });
|
|
1598
|
-
}
|
|
1599
|
-
);
|
|
1600
|
-
var OGrid = createOGrid({
|
|
1601
|
-
DataGridTable,
|
|
1602
|
-
ColumnChooser,
|
|
1603
|
-
PaginationControls,
|
|
1604
|
-
containerComponent: MuiThemeContainer
|
|
1605
|
-
});
|
|
1606
|
-
|
|
1607
|
-
export { ColumnChooser, ColumnHeaderFilter, ColumnHeaderMenu, DataGridTable, OGrid, PaginationControls };
|
|
35
|
+
`,yo=false;function Ro(){if(yo||typeof document>"u")return;yo=true;let e=document.createElement("style");e.setAttribute("data-ogrid-mat",""),e.textContent=ht,document.head.appendChild(e);}var ze=({value:e,onValueChange:t,onApply:r,onClear:o})=>jsxs(Box,{sx:{width:260},children:[jsx(Box,{sx:{p:1.5},children:jsx(TextField,{placeholder:"Enter search term...",value:e,onChange:a=>t(a.target.value),onKeyDown:a=>{a.stopPropagation(),a.key==="Enter"&&(a.preventDefault(),r());},autoComplete:"off",size:"small",fullWidth:true,slotProps:{input:{startAdornment:jsx(InputAdornment,{position:"start",children:jsx(Search,{fontSize:"small"})})}}})}),jsxs(Box,{sx:{display:"flex",justifyContent:"flex-end",gap:1,p:1.5,pt:0},children:[jsx(Button,{size:"small",disabled:!e,onClick:o,children:"Clear"}),jsx(Button,{size:"small",variant:"contained",onClick:r,children:"Apply"})]})]});ze.displayName="TextFilterPopover";var Io=40,Ge=({searchText:e,onSearchChange:t,options:r,filteredOptions:o,selected:a,onOptionToggle:c,onSelectAll:i,onClearSelection:u,onApply:s,isLoading:d})=>{let m=useListVirtualizer({count:o.length,itemHeight:Io,containerHeight:240});return jsxs(Box,{sx:{width:280},children:[jsxs(Box,{sx:{p:1.5,pb:.5},children:[jsx(TextField,{placeholder:"Search...",value:e,onChange:f=>t(f.target.value),onKeyDown:f=>f.stopPropagation(),autoComplete:"off",size:"small",fullWidth:true,slotProps:{input:{startAdornment:jsx(InputAdornment,{position:"start",children:jsx(Search,{fontSize:"small"})})}}}),jsxs(Typography,{variant:"caption",color:"text.secondary",sx:{mt:.5,display:"block"},children:[o.length," of ",r.length," options"]})]}),jsxs(Box,{sx:{display:"flex",justifyContent:"space-between",px:1.5,py:.5},children:[jsxs(Button,{size:"small",onClick:i,children:["Select All (",o.length,")"]}),jsx(Button,{size:"small",onClick:u,children:"Clear"})]}),jsx(Box,{ref:m.containerRef,onScroll:m.onScroll,sx:{maxHeight:240,overflowY:"auto",px:.5},children:d?jsx(Box,{sx:{display:"flex",justifyContent:"center",py:2},children:jsx(CircularProgress,{size:24})}):o.length===0?jsx(Typography,{variant:"body2",color:"text.secondary",sx:{py:2,textAlign:"center"},children:"No options found"}):jsx(Box,{sx:{height:m.totalHeight,position:"relative"},children:m.visibleItems.map(({index:f,offsetTop:v})=>{let x=o[f];return jsx(FormControlLabel,{control:jsx(Checkbox,{size:"small",checked:a.has(x),onChange:R=>c(x,R.target.checked)}),label:jsx(Typography,{variant:"body2",children:x}),sx:{position:"absolute",top:v,width:"100%",height:Io,boxSizing:"border-box",display:"flex",alignItems:"center",mx:0,"& .MuiFormControlLabel-label":{flex:1,minWidth:0}}},x)})})}),jsxs(Box,{sx:{display:"flex",justifyContent:"flex-end",gap:1,p:1.5,pt:1,borderTop:1,borderColor:"divider"},children:[jsx(Button,{size:"small",onClick:u,children:"Clear"}),jsx(Button,{size:"small",variant:"contained",onClick:s,children:"Apply"})]})]})};Ge.displayName="MultiSelectFilterPopover";var Ve=({selectedUser:e,searchText:t,onSearchChange:r,suggestions:o,isLoading:a,onUserSelect:c,onClearUser:i,inputRef:u})=>jsxs(Box,{sx:{width:300},children:[e&&jsxs(Box,{sx:{p:1.5,pb:1,borderBottom:1,borderColor:"divider"},children:[jsx(Typography,{variant:"caption",color:"text.secondary",children:"Currently filtered by:"}),jsxs(Box,{sx:{display:"flex",alignItems:"center",gap:1,mt:.5},children:[jsx(Avatar,{src:e.photo,alt:e.displayName,sx:{width:32,height:32},children:e.displayName?.[0]}),jsxs(Box,{sx:{flex:1,minWidth:0},children:[jsx(Typography,{variant:"body2",noWrap:true,children:e.displayName}),jsx(Typography,{variant:"caption",color:"text.secondary",noWrap:true,children:e.email})]}),jsx(IconButton,{size:"small",onClick:i,"aria-label":"Remove filter",children:jsx(Clear,{fontSize:"small"})})]})]}),jsx(Box,{sx:{p:1.5,pb:.5},children:jsx(TextField,{inputRef:u,placeholder:"Search for a person...",value:t,onChange:s=>r(s.target.value),onKeyDown:s=>s.stopPropagation(),autoComplete:"off",size:"small",fullWidth:true,slotProps:{input:{startAdornment:jsx(InputAdornment,{position:"start",children:jsx(Search,{fontSize:"small"})})}}})}),jsx(Box,{sx:{maxHeight:240,overflowY:"auto"},children:a&&t.trim()?jsx(Box,{sx:{display:"flex",justifyContent:"center",py:2},children:jsx(CircularProgress,{size:24})}):o.length===0&&t.trim()?jsx(Typography,{variant:"body2",color:"text.secondary",sx:{py:2,textAlign:"center"},children:"No results found"}):t.trim()?o.map(s=>jsxs(Box,{onClick:()=>c(s),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:1,cursor:"pointer","&:hover":{bgcolor:"action.hover"}},children:[jsx(Avatar,{src:s.photo,alt:s.displayName,sx:{width:32,height:32},children:s.displayName?.[0]}),jsxs(Box,{sx:{flex:1,minWidth:0},children:[jsx(Typography,{variant:"body2",noWrap:true,children:s.displayName}),jsx(Typography,{variant:"caption",color:"text.secondary",noWrap:true,children:s.email})]})]},s.id||s.email||s.displayName)):jsx(Typography,{variant:"body2",color:"text.secondary",sx:{py:2,textAlign:"center"},children:"Type to search..."})}),e&&jsx(Box,{sx:{p:1.5,pt:1,borderTop:1,borderColor:"divider"},children:jsx(Button,{size:"small",fullWidth:true,onClick:i,children:"Clear Filter"})})]});Ve.displayName="PeopleFilterPopover";var Ut=createBaseFilterRenderers({MultiSelectFilterPopover:Ge,TextFilterPopover:ze,PeopleFilterPopover:Ve}),fe=be.memo(e=>{let{columnName:t,filterType:r,options:o=[],isLoadingOptions:a=false,selectedUser:c}=e,i=useColumnHeaderFilterState(getColumnHeaderFilterStateParams(e)),{headerRef:u,isFilterOpen:s,setFilterOpen:d,hasActiveFilter:m,popoverPosition:f,handlers:v}=i;return jsxs(Box,{ref:u,sx:{display:"flex",alignItems:"center",width:"100%",minWidth:0},children:[jsx(Box,{sx:{flex:1,minWidth:0,overflow:"hidden"},children:jsx(Tooltip,{title:t,arrow:true,children:jsx(Typography,{variant:"body2",fontWeight:600,noWrap:true,"data-header-label":true,sx:{lineHeight:1.4},children:t})})}),jsx(Box,{sx:{display:"flex",alignItems:"center",ml:.5,flexShrink:0},children:r!=="none"&&jsxs(IconButton,{size:"small",onClick:v.handleFilterIconClick,"aria-label":`Filter ${t}`,"aria-expanded":s,"aria-haspopup":"dialog",title:`Filter ${t}`,color:m||s?"primary":"default",sx:{p:.25,position:"relative"},children:[jsx(FilterList,{sx:{fontSize:16}}),m&&jsx(Box,{sx:{position:"absolute",top:2,right:2,width:6,height:6,borderRadius:"50%",bgcolor:"primary.main"}})]})}),jsxs(Popover,{open:s&&r!=="none",onClose:()=>d(false),anchorReference:"anchorPosition",anchorPosition:f??{top:0,left:0},anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},slotProps:{paper:{sx:{mt:.5,overflow:"visible"},onClick:x=>x.stopPropagation()}},children:[jsx(Box,{sx:{borderBottom:1,borderColor:"divider",px:1.5,py:1},children:jsxs(Typography,{variant:"subtitle2",children:["Filter: ",t]})}),renderFilterContent(r,i,o??[],a,c,Ut)]})]})});fe.displayName="ColumnHeaderFilter";function Ie(e){let{isOpen:t,anchorElement:r,onClose:o,onPinLeft:a,onPinRight:c,onUnpin:i,onSortAsc:u,onSortDesc:s,onClearSort:d,onAutosizeThis:m,onAutosizeAll:f,canPinLeft:v,canPinRight:x,canUnpin:R,currentSort:I,isSortable:B,isResizable:M}=e,[C,O]=useState(void 0);useEffect(()=>{if(t&&r){let P=r.getBoundingClientRect();O({top:P.bottom+4,left:P.left});}else O(void 0);},[t,r]);let D=useMemo(()=>({canPinLeft:v,canPinRight:x,canUnpin:R,currentSort:I,isSortable:B,isResizable:M}),[v,x,R,I,B,M]),H=useMemo(()=>getColumnHeaderMenuItems(D),[D]),de=useMemo(()=>({pinLeft:a,pinRight:c,unpin:i,sortAsc:u,sortDesc:s,clearSort:d,autosizeThis:m,autosizeAll:f}),[a,c,i,u,s,d,m,f]);return jsx(Menu,{open:t&&!!C,onClose:o,anchorReference:"anchorPosition",anchorPosition:C,slotProps:{paper:{sx:{minWidth:140}}},children:H.flatMap((P,oe)=>{let j=[jsx(MenuItem,{disabled:P.disabled,onClick:()=>{de[P.id](),o();},children:P.label},P.id)];return P.divider&&oe<H.length-1&&j.push(jsx(Divider,{},`${P.id}-divider`)),j})})}function Bo(e){return jsx(BaseInlineCellEditor,{...e,renderCheckbox:(t,r,o)=>jsx(Checkbox,{checked:t,onChange:(a,c)=>r(c),onKeyDown:a=>a.key==="Escape"&&(a.preventDefault(),o()),size:"small"})})}var Qt=e=>({display:"inline-flex",alignItems:"center",gap:.5,...e?{}:{mr:2,"&::after":{content:'"|"',ml:2,color:"divider"}}});function Mo(e){let t=getStatusBarParts(e);return jsx(Box,{role:"status","aria-live":"polite",sx:{mt:"auto",px:1.5,py:.75,borderTop:1,borderColor:"divider",bgcolor:"action.hover"},children:t.map((r,o)=>jsxs(Typography,{component:"span",variant:"body2",sx:Qt(o===t.length-1),children:[jsx(Typography,{component:"span",color:"text.secondary",children:r.label}),jsx(Typography,{component:"span",fontWeight:600,children:r.value.toLocaleString()})]},r.key))})}function Oo(e){let{x:t,y:r,hasSelection:o,canUndo:a,canRedo:c,onClose:i}=e,u=be.useMemo(()=>getContextMenuHandlers(e),[e]),s=be.useCallback(d=>!!(d.disabledWhenNoSelection&&!o||d.id==="undo"&&!a||d.id==="redo"&&!c),[o,a,c]);return jsx(Menu,{open:true,onClose:i,anchorReference:"anchorPosition",anchorPosition:{top:r,left:t},MenuListProps:{dense:true,"aria-label":"Grid context menu"},children:GRID_CONTEXT_MENU_ITEMS.flatMap(d=>{let m=[];return d.dividerBefore&&m.push(jsx(Divider,{},`${d.id}-divider`)),m.push(jsxs(MenuItem,{onClick:u[d.id],disabled:s(d),children:[jsx("span",{style:{flex:1},children:d.label}),d.shortcut&&jsx("span",{style:{marginLeft:24,color:"var(--ogrid-fg-muted, rgba(0,0,0,0.4))",fontSize:"0.8em"},children:formatShortcut(d.shortcut)})]},d.id)),m})})}var cr={py:4,px:2,textAlign:"center",borderTop:1,borderColor:"divider",bgcolor:"action.hover"};function Ho({emptyState:e}){return jsx(Box,{sx:cr,children:e.render?e.render():jsxs(Fragment,{children:[jsx(Typography,{variant:"h6",gutterBottom:true,children:"No results found"}),jsx(Typography,{variant:"body2",color:"text.secondary",children:e.message!=null?e.message:e.hasActiveFilters?jsxs(Fragment,{children:["No items match your current filters. Try adjusting your search or"," ",jsx(Button,{variant:"text",size:"small",onClick:e.onClearAll,children:"clear all filters"})," ","to see all items."]}):"There are no items available at this time."})]})})}var mr={position:"absolute",inset:0,zIndex:2,display:"flex",alignItems:"center",justifyContent:"center",background:"var(--ogrid-loading-bg, rgba(255,255,255,0.7))"},gr={display:"flex",flexDirection:"column",alignItems:"center",gap:1,p:2,bgcolor:"background.paper",border:1,borderColor:"divider",borderRadius:1};function Fo({message:e}){return jsx(Box,{sx:mr,children:jsxs(Box,{sx:gr,children:[jsx(CircularProgress,{size:24}),jsx(Typography,{variant:"body2",color:"text.secondary",children:e})]})})}function _o({dropIndicatorX:e,wrapperLeft:t}){return jsx(Box,{sx:{position:"absolute",top:0,bottom:0,width:3,bgcolor:"var(--ogrid-primary, #217346)",pointerEvents:"none",zIndex:100,transition:"left 0.05s",left:e-t}})}var zr={position:"relative",flex:1,minHeight:0,display:"flex",flexDirection:"column"},Ur={width:"100%",height:"100%",display:"flex",alignItems:"center",boxSizing:"border-box",outline:"2px solid var(--ogrid-selection-color, #217346)",outlineOffset:"-1px",zIndex:2,position:"relative",background:"var(--ogrid-bg, #fff)",overflow:"visible",padding:0},Gr={width:CHECKBOX_COLUMN_WIDTH,minWidth:CHECKBOX_COLUMN_WIDTH,maxWidth:CHECKBOX_COLUMN_WIDTH,textAlign:"center"},Vr={width:CHECKBOX_COLUMN_WIDTH,minWidth:CHECKBOX_COLUMN_WIDTH,p:0},Xr={width:CHECKBOX_COLUMN_WIDTH,minWidth:CHECKBOX_COLUMN_WIDTH,maxWidth:CHECKBOX_COLUMN_WIDTH,textAlign:"center",padding:0,position:"relative",height:"1px",borderBottom:"1px solid var(--ogrid-border, rgba(224,224,224,1))"},_="var(--ogrid-header-bg, #f5f5f5)",Kr={zIndex:8,bgcolor:_,"& th":{bgcolor:_}},zo={bgcolor:_},qe={textAlign:"center",fontSize:"11px",fontWeight:500,color:"text.secondary",py:"2px",px:"4px",bgcolor:_,borderBottom:1,borderColor:"divider",userSelect:"none",fontVariantNumeric:"tabular-nums"},Yr={textAlign:"center",fontWeight:600,borderBottom:2,borderColor:"divider",py:.75};function $r(e){switch(e){case "compact":return {px:"8px",py:"4px"};case "comfortable":return {px:"16px",py:"12px"};default:return {px:"10px",py:"6px"}}}var Uo={compact:{padding:"4px 8px"},normal:{padding:"6px 10px"},comfortable:{padding:"12px 16px"}},Ze={fontWeight:600,position:"sticky",top:0,zIndex:8,bgcolor:_},jr={...Ze,position:"sticky",left:0,top:0,zIndex:10,bgcolor:_,willChange:"transform",borderRight:"1px solid",borderRightColor:"divider",boxShadow:"2px 0 4px -1px rgba(0,0,0,0.1)"},qr={...Ze,position:"sticky",right:0,top:0,zIndex:10,bgcolor:_,willChange:"transform",borderLeft:"1px solid",borderLeftColor:"divider",boxShadow:"-2px 0 4px -1px rgba(0,0,0,0.1)"},Je={fontWeight:600,zIndex:8,bgcolor:_},Zr={...Je,position:"sticky",left:0,zIndex:10,bgcolor:_,willChange:"transform",borderRight:"1px solid",borderRightColor:"divider",boxShadow:"2px 0 4px -1px rgba(0,0,0,0.1)"},Jr={...Je,position:"sticky",right:0,zIndex:10,bgcolor:_,willChange:"transform",borderLeft:"1px solid",borderLeftColor:"divider",boxShadow:"-2px 0 4px -1px rgba(0,0,0,0.1)"},Go={position:"absolute",top:0,right:"-3px",bottom:0,width:"8px",cursor:"col-resize",userSelect:"none","&::after":{content:'""',position:"absolute",top:0,right:"3px",bottom:0,width:"2px"},"&:hover::after":{bgcolor:"primary.main"},"&:active::after":{bgcolor:"primary.dark"}},Qr={minHeight:"100%",minWidth:40},en={p:1},on={display:"flex",flexDirection:"column",minHeight:"100%"},tn={display:"flex",alignItems:"center",gap:.5},rn={background:"transparent",border:"none",cursor:"pointer",padding:"2px 4px",fontSize:"16px",lineHeight:1,color:"text.secondary",opacity:1,transition:"background-color 0.15s",borderRadius:"3px",display:"flex",alignItems:"center",justifyContent:"center",minWidth:"20px",height:"20px","&:hover":{bgcolor:"action.hover"}},nn={position:"relative",opacity:1},an={position:"relative",opacity:.6},Vo={padding:0,border:"none"};function ln(e){let{item:t,rowIndex:r,rowId:o,isSelected:a,columnLayouts:c,renderCellContent:i,handleSingleRowClick:u,handleRowCheckboxChange:s,lastMouseShiftRef:d,hasCheckboxCol:m,hasRowNumbersCol:f,rowNumberOffset:v,rowHeight:x,leftSpacerWidth:R,rightSpacerWidth:I,globalColIndexMap:B,rowNumWidth:M}=e;return jsxs("tr",{"data-row-id":o,onClick:u,"aria-selected":a||void 0,className:`ogrid-mat-row${a?" ogrid-mat-row--selected":""}`,style:x?{height:x}:void 0,children:[m&&jsx("td",{style:Xr,children:jsx("div",{"data-row-index":r,"data-col-index":0,onClick:STOP_PROPAGATION,className:"ogrid-mat-checkbox-wrapper",children:jsx(Checkbox,{checked:a,onChange:(C,O)=>s(o,O,r,d.current),size:"small","aria-label":`Select row ${r+1}`})})}),f&&(()=>{let C=M??ROW_NUMBER_COLUMN_WIDTH;return jsx("td",{className:"ogrid-mat-td ogrid-mat-row-number",style:{width:C,minWidth:C,maxWidth:C,left:m?CHECKBOX_COLUMN_WIDTH:0,borderBottom:"1px solid var(--ogrid-border, rgba(224,224,224,1))"},children:v+r+1})})(),R!=null&&R>0&&jsx("td",{style:{...Vo,width:R,minWidth:R},"aria-hidden":true}),c.map((C,O)=>{let D=B?B[O]:O;return jsx("td",{"data-column-id":C.col.columnId,className:C.tdClassName,style:{...C.tdStyle,minWidth:C.minWidth,width:C.width,maxWidth:C.maxWidth},children:i(t,C.col,r,D)},C.col.columnId)}),I!=null&&I>0&&jsx("td",{style:{...Vo,width:I,minWidth:I},"aria-hidden":true})]})}var sn=be.memo(ln,areGridRowPropsEqual);Ro();function dn(e){let{virtualScrollEnabled:t,visibleRange:r,columnRange:o,items:a,getRowId:c,selectedRowIds:i,visibleCols:u,columnLayouts:s,renderCellContent:d,handleSingleRowClick:m,handleRowCheckboxChange:f,lastMouseShiftRef:v,hasCheckboxCol:x,hasRowNumbersCol:R,rowNumberOffset:I,rowHeight:B,selectionRange:M,activeCell:C,cutRange:O,copyRange:D,isDragging:H,editingCell:de,pinnedColumns:P,rowNumWidth:oe}=e,{rowLayouts:j,globalColIndexMap:te,leftSpacerWidth:ke,rightSpacerWidth:He}=be.useMemo(()=>{if(!o)return {rowLayouts:s,globalColIndexMap:void 0,leftSpacerWidth:void 0,rightSpacerWidth:void 0};let y=partitionColumnsForVirtualization(u,o,P),A=[...y.pinnedLeft,...y.virtualizedUnpinned,...y.pinnedRight],q=new Map(s.map(X=>[X.col.columnId,X])),re=[],ce=[];for(let X of A){let pe=q.get(X.columnId);pe&&(re.push(pe),ce.push(u.indexOf(X)));}return {rowLayouts:re,globalColIndexMap:ce,leftSpacerWidth:y.leftSpacerWidth,rightSpacerWidth:y.rightSpacerWidth}},[o,u,s,P]),w=(y,A)=>{let q=c(y);return jsx(sn,{item:y,rowIndex:A,rowId:q,isSelected:i.has(q),columnLayouts:j,renderCellContent:d,handleSingleRowClick:m,handleRowCheckboxChange:f,lastMouseShiftRef:v,hasCheckboxCol:x,hasRowNumbersCol:R,rowNumberOffset:I,selectionRange:M,activeCell:C,cutRange:O,copyRange:D,isDragging:H,rowHeight:B,editingRowId:de?.rowId??null,leftSpacerWidth:ke,rightSpacerWidth:He,globalColIndexMap:te,rowNumWidth:oe},q)};return jsxs("tbody",{className:"ogrid-mat-tbody",children:[t&&r.offsetTop>0&&jsx("tr",{style:{height:r.offsetTop},"aria-hidden":true}),t?a.slice(r.startIndex,r.endIndex+1).map((y,A)=>w(y,r.startIndex+A)):a.map((y,A)=>w(y,A)),t&&r.offsetBottom>0&&jsx("tr",{style:{height:r.offsetBottom},"aria-hidden":true})]})}function cn(e){let t=useDataGridTableOrchestration({props:e}),{wrapperRef:r,tableContainerRef:o,lastMouseShiftRef:a,interaction:c,pinning:i,handleResizeStart:u,handleResizeDoubleClick:s,getColumnWidth:d,isReorderDragging:m,dropIndicatorX:f,handleHeaderMouseDown:v,virtualScrollEnabled:x,visibleRange:R,columnRange:I,onHorizontalScroll:B,items:M,getRowId:C,emptyState:O,suppressHorizontalScroll:D,isLoading:H,loadingMessage:de,ariaLabel:P,ariaLabelledBy:oe,columnReorder:j,density:te,rowHeight:ke,rowNumberOffset:He,headerRows:w,allowOverflowX:y,fitToContent:A,showColumnLetters:q,editCallbacks:re,interactionHandlers:ce,cellDescriptorInputRef:X,cellDescriptorCacheRef:pe,pendingEditorValueRef:no,popoverAnchorElRef:Ne,handleSingleRowClick:jo,handlePasteVoid:qo,visibleCols:ue,hasCheckboxCol:ne,hasRowNumbersCol:me,colOffset:ao,minTableWidth:lo,columnSizingOverrides:ge,measuredColumnWidths:Zo,selectedRowIds:io,handleRowCheckboxChange:Jo,handleSelectAll:Qo,allSelected:et,someSelected:ot,editingCell:tt,setPopoverAnchorEl:so,cancelPopoverEdit:co,setActiveCell:po,selectionRange:Z,hasCellSelection:rt,handleGridKeyDown:nt,handleFillHandleMouseDown:uo,handleCopy:at,handleCut:lt,cutRange:mo,copyRange:go,canUndo:it,canRedo:st,onUndo:dt,onRedo:ct,isDragging:Co,menuPosition:Fe,closeContextMenu:pt,headerFilterInput:ut,statusBarConfig:ae,showEmptyInGrid:ho,onCellError:fo,headerMenu:Ce}=t,_e=useMemo(()=>$r(te),[te]),bo=useMemo(()=>({px:_e.px,py:_e.py}),[_e]),ye=useColumnMeta({visibleCols:ue,getColumnWidth:d,columnSizingOverrides:ge,measuredColumnWidths:Zo,pinnedColumns:i.pinnedColumns,leftOffsets:i.leftOffsets,rightOffsets:i.rightOffsets,pinnedColLeftClass:"",pinnedColRightClass:""}),mt=useMemo(()=>ue.map(p=>{let g=i.pinnedColumns[p.columnId]==="left",h=i.pinnedColumns[p.columnId]==="right",N="ogrid-mat-td",l={};g?(N+=" ogrid-mat-td--pinned-left",i.leftOffsets[p.columnId]!=null&&(l.left=i.leftOffsets[p.columnId])):h&&(N+=" ogrid-mat-td--pinned-right",i.rightOffsets[p.columnId]!=null&&(l.right=i.rightOffsets[p.columnId]));let U=ye.cellStyles[p.columnId];return {col:p,tdClassName:N,tdStyle:l,minWidth:U?.minWidth??0,width:U?.width??d(p),maxWidth:U?.maxWidth??d(p)}}),[ue,ye,i.pinnedColumns,i.leftOffsets,i.rightOffsets,d]),gt=useMemo(()=>({position:"relative",flex:1,minHeight:H&&M.length===0?200:0,width:A?"fit-content":"100%",maxWidth:"100%",overflowX:D?"hidden":y?"auto":"hidden",overflowY:"auto",bgcolor:"background.paper",willChange:"scroll-position"}),[A,D,y,H,M.length]),xo=Uo[te]??Uo.normal,Ct=useCallback((p,g,h,N)=>{let l=getCellRenderDescriptor(p,g,h,N,X.current,pe.current),U=C(p),K;if(l.mode==="editing-inline")K=jsx("div",{style:Ur,children:jsx(Bo,{...buildInlineEditorProps(p,g,l,re)})});else if(l.mode==="editing-popover"&&typeof g.cellEditor=="function"){let G=buildPopoverEditorProps(p,g,l,no.current,re),k=g.cellEditor;K=jsxs(Fragment,{children:[jsx(Box,{ref:Y=>{Y&&so(Y);},sx:Qr,"aria-hidden":true}),jsx(Popover,{open:!!Ne.current,anchorEl:Ne.current,onClose:co,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},children:jsx(Box,{sx:en,children:jsx(k,{...G})})})]});}else {let G;if(l.columnType==="boolean")G=jsx("input",{type:"checkbox",checked:!!l.displayValue,disabled:true,style:{margin:0,pointerEvents:"none"},"aria-label":l.displayValue?"True":"False"});else {let Ae=resolveCellDisplayContent(g,p,l.displayValue),Re=resolveCellStyle(g,p,l.displayValue);G=Re?jsx("span",{style:Re,children:Ae}):Ae;}let k="ogrid-mat-cell";g.type==="numeric"?k+=" ogrid-mat-cell--numeric":g.type==="boolean"&&(k+=" ogrid-mat-cell--boolean"),l.canEditAny&&(k+=" ogrid-mat-cell--editable"),l.isActive&&(k+=" ogrid-mat-cell--active"),l.isActive&&l.isInRange&&(k+=" ogrid-mat-cell--active-in-range"),l.isInRange&&!l.isActive&&(k+=" ogrid-mat-cell--range"),l.isInCutRange&&(k+=" ogrid-mat-cell--cut");let Y=getCellInteractionProps(l,g.columnId,ce);K=jsxs("div",{className:k,...Y,style:xo,children:[G,l.canEditAny&&l.isSelectionEndCell&&jsx("div",{className:"ogrid-mat-fill-handle",onPointerDown:uo,"aria-label":"Fill handle"})]});}return jsx(CellErrorBoundary,{onError:fo,children:K},`${U}-${g.columnId}`)},[re,ce,uo,so,co,C,fo,X,pe,xo,no,Ne]);return jsxs(Box,{sx:zr,children:[jsxs(Box,{ref:r,tabIndex:0,role:"region","aria-label":P??(oe?void 0:"Data grid"),"aria-labelledby":oe,onMouseDown:p=>{a.current=p.shiftKey;},onScroll:B?p=>B(p.target.scrollLeft):void 0,onKeyDown:nt,onContextMenu:PREVENT_DEFAULT,"data-density":te,"data-overflow-x":y?"true":"false",className:"ogrid-mat-wrapper",sx:gt,children:[jsx(Box,{sx:on,children:jsx("div",{style:{minWidth:y?lo:void 0,overflowX:"clip"},children:jsxs(Box,{ref:o,sx:H&&M.length>0?an:nn,children:[jsxs(Table,{size:"small",role:"grid",sx:{minWidth:lo,borderCollapse:"separate",borderSpacing:0},"data-virtual-scroll":x?"":void 0,children:[jsxs(TableHead,{sx:Kr,children:[q&&jsxs(TableRow,{sx:zo,children:[ne&&jsx(TableCell,{sx:qe}),me&&jsx(TableCell,{sx:qe}),ue.map((p,g)=>{let h=ye.hdrStyles[p.columnId];return jsx(TableCell,{component:"th",sx:{...qe,minWidth:h?.minWidth,width:h?.width,maxWidth:h?.maxWidth},children:indexToColumnLetter(g)},p.columnId)})]}),w.map((p,g)=>jsxs(TableRow,{sx:zo,children:[g===w.length-1&&ne&&jsx(TableCell,{padding:"checkbox",rowSpan:w.length>1?1:void 0,sx:Gr,children:jsx(Checkbox,{checked:et,indeterminate:ot,onChange:(h,N)=>Qo(!!N),size:"small","aria-label":"Select all rows"})}),g===0&&g<w.length-1&&ne&&jsx(TableCell,{rowSpan:w.length-1,sx:Vr}),g===w.length-1&&me&&(()=>{let h=ge?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH;return jsxs(TableCell,{component:"th",scope:"col",rowSpan:w.length>1?1:void 0,sx:{width:h,minWidth:h,maxWidth:h,textAlign:"center",fontWeight:600,backgroundColor:_,position:"sticky",left:ne?CHECKBOX_COLUMN_WIDTH:0,zIndex:4,...bo},children:["#",jsx(Box,{onPointerDown:N=>{po(null),c.setSelectionRange(null),r.current?.focus({preventScroll:true}),u(N,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});},sx:Go})]})})(),g===0&&g<w.length-1&&me&&(()=>{let h=ge?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH;return jsx(TableCell,{rowSpan:w.length-1,sx:{width:h,minWidth:h,position:"sticky",left:ne?CHECKBOX_COLUMN_WIDTH:0,zIndex:4,backgroundColor:"background.paper"}})})(),p.map((h,N)=>{if(h.isGroup)return jsx(TableCell,{colSpan:h.colSpan,component:"th",scope:"colgroup",sx:Yr,children:h.label},N);if(!h.columnDef)return null;let l=h.columnDef,U=i.pinnedColumns[l.columnId]==="left",K=i.pinnedColumns[l.columnId]==="right",G=t.stickyHeader?U?jr:K?qr:Ze:U?Zr:K?Jr:Je,k=U&&i.leftOffsets[l.columnId]!=null?{...G,left:i.leftOffsets[l.columnId]}:K&&i.rightOffsets[l.columnId]!=null?{...G,right:i.rightOffsets[l.columnId]}:G,Y=ye.hdrStyles[l.columnId],Re=e.sortBy===l.columnId?e.sortDirection==="asc"?"ascending":"descending":void 0;return jsxs(TableCell,{component:"th",scope:"col","data-column-id":l.columnId,rowSpan:w.length>1?w.length-g:void 0,"aria-sort":Re,sx:{...k,...bo,minWidth:Y?.minWidth,width:Y?.width,maxWidth:Y?.maxWidth,...j?{cursor:m?"grabbing":"grab"}:{},"&:focus-visible":{outline:"2px solid",outlineColor:"primary.main",outlineOffset:"-2px",zIndex:11}},onPointerDown:j?$=>v(l.columnId,$):void 0,children:[jsxs(Box,{sx:tn,children:[jsx(fe,{...getHeaderFilterConfig(l,ut)}),jsx(Box,{component:"button",onClick:$=>{$.stopPropagation(),Ce.isOpen&&Ce.openForColumn===l.columnId?Ce.close():Ce.open(l.columnId,$.currentTarget);},"aria-label":"Column options",title:"Column options",sx:rn,children:"\u22EE"})]}),jsx(Box,{onPointerDown:$=>{po(null),c.setSelectionRange(null),r.current?.focus({preventScroll:true}),u($,l);},onDoubleClick:$=>s($,l),sx:Go})]},l.columnId)})]},g))]}),!ho&&jsx(dn,{virtualScrollEnabled:x,visibleRange:R,columnRange:I,items:M,getRowId:C,selectedRowIds:io,visibleCols:ue,columnLayouts:mt,renderCellContent:Ct,handleSingleRowClick:jo,handleRowCheckboxChange:Jo,lastMouseShiftRef:a,hasCheckboxCol:ne,hasRowNumbersCol:me,rowNumberOffset:He,rowHeight:ke,selectionRange:Z,activeCell:c.activeCell,cutRange:mo,copyRange:go,isDragging:Co,editingCell:tt,pinnedColumns:i.pinnedColumns,rowNumWidth:me?ge?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH:void 0})]}),m&&f!=null&&jsx(_o,{dropIndicatorX:f,wrapperLeft:r.current?.getBoundingClientRect().left??0}),jsx(MarchingAntsOverlay,{containerRef:o,selectionRange:Z,copyRange:go,cutRange:mo,colOffset:ao,items:M,visibleColumns:e.visibleColumns,columnSizingOverrides:ge,columnOrder:e.columnOrder,isDragging:Co}),e.formulaReferences&&e.formulaReferences.length>0&&jsx(FormulaRefOverlay,{containerRef:o,references:e.formulaReferences,colOffset:ao}),ho&&O&&jsx(Ho,{emptyState:O})]})})}),Fe&&createPortal(jsx(Oo,{x:Fe.x,y:Fe.y,hasSelection:rt,canUndo:it,canRedo:st,onUndo:dt??NOOP,onRedo:ct??NOOP,onCopy:at,onCut:lt,onPaste:qo,onSelectAll:t.interaction.handleSelectAllCells,onClose:pt}),document.body),jsx(Ie,{...getColumnHeaderMenuProps(Ce)})]}),ae&&jsx(Mo,{totalCount:ae.totalCount,filteredCount:ae.filteredCount,selectedCount:ae.selectedCount??io.size,selectedCellCount:Z?(Math.abs(Z.endRow-Z.startRow)+1)*(Math.abs(Z.endCol-Z.startCol)+1):void 0,aggregation:ae.aggregation,suppressRowCount:ae.suppressRowCount}),H&&jsx(Fo,{message:de})]})}var Qe=be.memo(cn);var Sn=({columnId:e,columnName:t,checked:r,disabled:o,onChange:a})=>jsx(FormControlLabel,{control:jsx(Checkbox,{size:"small",checked:r,onChange:c=>{c.stopPropagation(),a(c.target.checked);},disabled:o}),label:jsx(Typography,{variant:"body2",children:t}),sx:{m:0}}),vn=({visibleCount:e,totalCount:t})=>jsx(Box,{sx:{px:1.5,py:1,borderBottom:1,borderColor:"divider",bgcolor:"action.hover"},children:jsxs(Typography,{variant:"subtitle2",fontWeight:600,children:["Select Columns (",e," of ",t,")"]})}),In=({children:e})=>jsx(Box,{sx:{maxHeight:320,overflowY:"auto",py:.5},children:e}),Pn=({children:e})=>jsx(Box,{sx:{px:1.5,minHeight:32,display:"flex",alignItems:"center"},children:e}),wn=({onClearAll:e,onSelectAll:t})=>jsxs(Box,{sx:{display:"flex",justifyContent:"flex-end",gap:1,px:1.5,py:1,borderTop:1,borderColor:"divider",bgcolor:"action.hover"},children:[jsx(Button,{size:"small",onClick:e,sx:{textTransform:"none"},children:"Clear All"}),jsx(Button,{size:"small",variant:"contained",onClick:t,sx:{textTransform:"none"},children:"Select All"})]}),oo=e=>{let{columns:t,visibleColumns:r,onVisibilityChange:o,onSetVisibleColumns:a,className:c}=e,[i,u]=useState(null),s=useRef(null),{open:d,setOpen:m,handleClose:f,handleCheckboxChange:v,handleSelectAll:x,handleClearAll:R,visibleCount:I,totalCount:B}=useColumnChooserState({columns:t,visibleColumns:r,onVisibilityChange:o,onSetVisibleColumns:a});return jsxs(Box,{className:c,sx:{display:"inline-flex"},children:[jsxs(Button,{ref:s,variant:"outlined",size:"small",color:"inherit",startIcon:jsx(ViewColumn,{}),endIcon:d?jsx(ExpandLess,{}):jsx(ExpandMore,{}),onClick:D=>{d?(f(),u(null)):(u(D.currentTarget),m(true));},"aria-expanded":d,"aria-haspopup":"listbox",sx:{textTransform:"none",fontWeight:600,borderColor:d?"primary.main":"divider"},children:["Column Visibility (",I," of ",B,")"]}),jsx(Popover,{open:d,anchorEl:i,onClose:()=>{f(),u(null);},anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{mt:.5,minWidth:220}}},children:jsx(ColumnChooserContent,{columns:t,visibleColumns:r,visibleCount:I,totalCount:B,handleSelectAll:x,handleClearAll:R,handleCheckboxChange:D=>H=>v(D)(H),CheckboxItem:Sn,Header:vn,OptionsListContainer:In,OptionItemContainer:Pn,Actions:wn})})]})};var Nn={first:jsx(FirstPage,{fontSize:"small"}),prev:jsx(ChevronLeft,{fontSize:"small"}),next:jsx(ChevronRight,{fontSize:"small"}),last:jsx(LastPage,{fontSize:"small"})},Fn=({variant:e,onClick:t,disabled:r,"aria-label":o})=>jsx(IconButton,{size:"small",onClick:t,disabled:r,"aria-label":o,children:Nn[e]}),_n=({onClick:e,active:t,"aria-label":r,"aria-current":o,children:a})=>jsx(Button,{variant:t?"contained":"outlined",size:"small",onClick:e,"aria-label":r,"aria-current":o,sx:{minWidth:32,px:.5},children:a}),An=({value:e,options:t,onChange:r,"aria-label":o})=>jsx(Select,{value:e,onChange:c=>r(Number(c.target.value)),size:"small","aria-label":o,sx:{minWidth:70},children:t.map(c=>jsx(MenuItem,{value:c,children:c},c))}),Wn=({children:e,className:t,role:r,"aria-label":o})=>jsx(Box,{className:t,role:r,"aria-label":o,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:2,px:1.5,width:"100%",minWidth:0,boxSizing:"border-box"},children:e}),zn=({children:e})=>jsx(Typography,{variant:"body2",color:"text.secondary",children:e}),Un=({children:e})=>jsx(Box,{sx:{display:"flex",alignItems:"center",gap:.5},children:e}),Gn=({children:e})=>jsx(Box,{sx:{display:"flex",alignItems:"center",gap:1},children:e}),Vn=()=>jsx(Typography,{variant:"body2",color:"text.secondary",children:"Rows"}),Xn=()=>jsx(Typography,{variant:"body2",color:"text.secondary",sx:{mx:.5},"aria-hidden":true,children:"\u2026"}),Kn={NavButton:Fn,PageButton:_n,PageSizeSelect:An,OuterContainer:Wn,InfoText:zn,NavButtonsContainer:Un,PageSizeContainer:Gn,PageSizeLabel:Vn,Ellipsis:Xn},De=be.memo(e=>jsx(PaginationControlsBase,{...e,slots:Kn}));De.displayName="PaginationControls";var qn=be.forwardRef(function(t,r){let o=useTheme(),a=be.useMemo(()=>({display:"flex",flexDirection:"column",gap:1,"--ogrid-bg":o.palette.background.default,"--ogrid-border":o.palette.divider,"--ogrid-header-bg":o.palette.mode==="dark"?o.palette.grey[800]:o.palette.grey[100],"--ogrid-fg":o.palette.text.primary,"--ogrid-fg-secondary":o.palette.text.secondary,"--ogrid-fg-muted":o.palette.text.disabled,"--ogrid-hover-bg":o.palette.action.hover,"--ogrid-paper-bg":o.palette.background.paper,"--ogrid-primary":o.palette.primary.main,"--ogrid-selection-bg":o.palette.action.selected}),[o]);return jsx(Box,{ref:r,sx:a,...t})}),$o=createOGrid({DataGridTable:Qe,ColumnChooser:oo,PaginationControls:De,containerComponent:qn});export{oo as ColumnChooser,fe as ColumnHeaderFilter,Ie as ColumnHeaderMenu,Qe as DataGridTable,$o as OGrid,De as PaginationControls};
|