@alaarab/ogrid-react-material 2.4.2 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/esm/index.js +3 -1575
  2. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -1,16 +1,4 @@
1
- import * as React4 from 'react';
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
 
@@ -27,7 +15,7 @@ table:not([data-virtual-scroll]) .ogrid-mat-tbody tr { content-visibility: auto;
27
15
  .ogrid-mat-cell--boolean { justify-content: center; text-align: center; }
28
16
  .ogrid-mat-cell--editable { cursor: cell; }
29
17
 
30
- .ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: var(--ogrid-z-active-cell, 2); position: relative; overflow: visible; background-color: var(--ogrid-hover-bg); }
18
+ .ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: var(--ogrid-z-active-cell, 2); position: relative; overflow: visible; contain: none; background-color: var(--ogrid-hover-bg); }
31
19
  .ogrid-mat-cell--active:focus-visible { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; }
32
20
  .ogrid-mat-cell--active-in-range { outline: none; background-color: var(--ogrid-bg, #fff); }
33
21
  .ogrid-mat-cell--range { background-color: var(--ogrid-bg-range, rgba(33,115,70,0.12)); }
@@ -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};