@alaarab/ogrid-react-fluent 2.4.2 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/esm/index.css +1 -1406
  2. package/dist/esm/index.js +1 -1275
  3. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -1,1275 +1 @@
1
- import './index.css';
2
- import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
3
- 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';
4
- import * as React2 from 'react';
5
- import { useCallback, useRef, useEffect } from 'react';
6
- import { createPortal } from 'react-dom';
7
- import { Popover, PopoverSurface, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, Select, Button, TableBody } from '@fluentui/react-components';
8
- import { FilterRegular, SearchRegular, ChevronUpRegular, ChevronDownRegular, TableSettingsRegular, ChevronDoubleRightRegular, ChevronRightRegular, ChevronLeftRegular, ChevronDoubleLeftRegular } from '@fluentui/react-icons';
9
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
10
-
11
- // src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss
12
- var ColumnHeaderFilter_module_default = {
13
- "columnHeader": "ogrid-fluent__ColumnHeaderFilter-module__columnHeader",
14
- "headerContent": "ogrid-fluent__ColumnHeaderFilter-module__headerContent",
15
- "columnName": "ogrid-fluent__ColumnHeaderFilter-module__columnName",
16
- "headerActions": "ogrid-fluent__ColumnHeaderFilter-module__headerActions",
17
- "filterIcon": "ogrid-fluent__ColumnHeaderFilter-module__filterIcon",
18
- "filterActive": "ogrid-fluent__ColumnHeaderFilter-module__filterActive",
19
- "filterOpen": "ogrid-fluent__ColumnHeaderFilter-module__filterOpen",
20
- "filterBadge": "ogrid-fluent__ColumnHeaderFilter-module__filterBadge",
21
- "filterPopover": "ogrid-fluent__ColumnHeaderFilter-module__filterPopover",
22
- "popoverHeader": "ogrid-fluent__ColumnHeaderFilter-module__popoverHeader",
23
- "popoverSearch": "ogrid-fluent__ColumnHeaderFilter-module__popoverSearch",
24
- "nativeInputWrapper": "ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper",
25
- "nativeInputIcon": "ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon",
26
- "nativeInput": "ogrid-fluent__ColumnHeaderFilter-module__nativeInput",
27
- "resultCount": "ogrid-fluent__ColumnHeaderFilter-module__resultCount",
28
- "selectAllRow": "ogrid-fluent__ColumnHeaderFilter-module__selectAllRow",
29
- "selectAllButton": "ogrid-fluent__ColumnHeaderFilter-module__selectAllButton",
30
- "popoverOptions": "ogrid-fluent__ColumnHeaderFilter-module__popoverOptions",
31
- "popoverOption": "ogrid-fluent__ColumnHeaderFilter-module__popoverOption",
32
- "nativeCheckbox": "ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox",
33
- "checkboxLabel": "ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel",
34
- "personOption": "ogrid-fluent__ColumnHeaderFilter-module__personOption",
35
- "loadingContainer": "ogrid-fluent__ColumnHeaderFilter-module__loadingContainer",
36
- "filterSpinner": "ogrid-fluent__ColumnHeaderFilter-module__filterSpinner",
37
- "noResults": "ogrid-fluent__ColumnHeaderFilter-module__noResults",
38
- "selectedUserSection": "ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection",
39
- "selectedUserLabel": "ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel",
40
- "selectedUser": "ogrid-fluent__ColumnHeaderFilter-module__selectedUser",
41
- "userInfo": "ogrid-fluent__ColumnHeaderFilter-module__userInfo",
42
- "avatar": "ogrid-fluent__ColumnHeaderFilter-module__avatar",
43
- "avatarImg": "ogrid-fluent__ColumnHeaderFilter-module__avatarImg",
44
- "avatarInitials": "ogrid-fluent__ColumnHeaderFilter-module__avatarInitials",
45
- "userText": "ogrid-fluent__ColumnHeaderFilter-module__userText",
46
- "userSecondary": "ogrid-fluent__ColumnHeaderFilter-module__userSecondary",
47
- "removeUserButton": "ogrid-fluent__ColumnHeaderFilter-module__removeUserButton",
48
- "popoverActions": "ogrid-fluent__ColumnHeaderFilter-module__popoverActions",
49
- "clearButton": "ogrid-fluent__ColumnHeaderFilter-module__clearButton",
50
- "applyButton": "ogrid-fluent__ColumnHeaderFilter-module__applyButton"
51
- };
52
- var TextFilterPopover = ({
53
- value,
54
- onValueChange,
55
- onApply,
56
- onClear,
57
- onPopoverClick,
58
- onInputFocus,
59
- onInputMouseDown,
60
- onInputClick,
61
- onInputKeyDown
62
- }) => /* @__PURE__ */ jsxs(Fragment, { children: [
63
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
64
- /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
65
- /* @__PURE__ */ jsx(
66
- "input",
67
- {
68
- type: "text",
69
- placeholder: "Enter search term...",
70
- value,
71
- onChange: (e) => onValueChange(e.target.value),
72
- onKeyDown: (e) => {
73
- onInputKeyDown(e);
74
- if (e.key === "Enter") {
75
- e.preventDefault();
76
- onApply();
77
- }
78
- },
79
- onFocus: onInputFocus,
80
- onMouseDown: onInputMouseDown,
81
- onClick: onInputClick,
82
- autoComplete: "off",
83
- className: ColumnHeaderFilter_module_default.nativeInput
84
- }
85
- )
86
- ] }) }),
87
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: [
88
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClear, disabled: !value, children: "Clear" }),
89
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.applyButton, onClick: onApply, children: "Apply" })
90
- ] })
91
- ] });
92
- TextFilterPopover.displayName = "TextFilterPopover";
93
- var ITEM_HEIGHT = 40;
94
- var MultiSelectFilterPopover = ({
95
- searchText,
96
- onSearchChange,
97
- options,
98
- filteredOptions,
99
- selected,
100
- onOptionToggle,
101
- onSelectAll,
102
- onClearSelection,
103
- onApply,
104
- isLoading,
105
- onPopoverClick,
106
- onInputFocus,
107
- onInputMouseDown,
108
- onInputClick,
109
- onInputKeyDown
110
- }) => {
111
- const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT });
112
- return /* @__PURE__ */ jsxs(Fragment, { children: [
113
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: [
114
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
115
- /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
116
- /* @__PURE__ */ jsx(
117
- "input",
118
- {
119
- type: "text",
120
- placeholder: "Search...",
121
- value: searchText,
122
- onChange: (e) => onSearchChange(e.target.value),
123
- onFocus: onInputFocus,
124
- onMouseDown: onInputMouseDown,
125
- onClick: onInputClick,
126
- onKeyDown: onInputKeyDown,
127
- autoComplete: "off",
128
- className: ColumnHeaderFilter_module_default.nativeInput
129
- }
130
- )
131
- ] }),
132
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.resultCount, children: [
133
- filteredOptions.length,
134
- " of ",
135
- options.length,
136
- " options"
137
- ] })
138
- ] }),
139
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectAllRow, onClick: onPopoverClick, children: [
140
- /* @__PURE__ */ jsxs("button", { type: "button", className: ColumnHeaderFilter_module_default.selectAllButton, onClick: onSelectAll, children: [
141
- "Select All (",
142
- filteredOptions.length,
143
- ")"
144
- ] }),
145
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.selectAllButton, onClick: onClearSelection, children: "Clear" })
146
- ] }),
147
- /* @__PURE__ */ jsx(
148
- "div",
149
- {
150
- ref: virt.containerRef,
151
- onScroll: virt.onScroll,
152
- className: ColumnHeaderFilter_module_default.popoverOptions,
153
- onClick: onPopoverClick,
154
- children: isLoading ? /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.loadingContainer, children: [
155
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.filterSpinner }),
156
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--colorNeutralForeground2, #616161)" }, children: "Loading..." })
157
- ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "No options found" }) : /* @__PURE__ */ jsx("div", { style: { height: virt.totalHeight, position: "relative" }, children: virt.visibleItems.map(({ index, offsetTop }) => {
158
- const option = filteredOptions[index];
159
- const isChecked = selected.has(option);
160
- return /* @__PURE__ */ jsxs(
161
- "label",
162
- {
163
- className: ColumnHeaderFilter_module_default.popoverOption,
164
- style: { position: "absolute", top: offsetTop, width: "100%", height: ITEM_HEIGHT, boxSizing: "border-box", display: "flex", alignItems: "center" },
165
- children: [
166
- /* @__PURE__ */ jsx(
167
- "input",
168
- {
169
- type: "checkbox",
170
- checked: isChecked,
171
- onChange: (ev) => {
172
- ev.stopPropagation();
173
- onOptionToggle(option, ev.target.checked);
174
- },
175
- className: ColumnHeaderFilter_module_default.nativeCheckbox
176
- }
177
- ),
178
- /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.checkboxLabel, children: option })
179
- ]
180
- },
181
- option
182
- );
183
- }) })
184
- }
185
- ),
186
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: [
187
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClearSelection, children: "Clear" }),
188
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.applyButton, onClick: onApply, children: "Apply" })
189
- ] })
190
- ] });
191
- };
192
- MultiSelectFilterPopover.displayName = "MultiSelectFilterPopover";
193
- function getInitials(name) {
194
- const parts = name.trim().split(/\s+/);
195
- if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
196
- return (parts[0]?.[0] ?? "").toUpperCase();
197
- }
198
- var PeopleFilterPopover = ({
199
- selectedUser,
200
- searchText,
201
- onSearchChange,
202
- suggestions,
203
- isLoading,
204
- onUserSelect,
205
- onClearUser,
206
- onPopoverClick,
207
- inputRef
208
- }) => /* @__PURE__ */ jsxs(Fragment, { children: [
209
- selectedUser && /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectedUserSection, onClick: onPopoverClick, children: [
210
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.selectedUserLabel, children: "Currently filtered by:" }),
211
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectedUser, children: [
212
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userInfo, children: [
213
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.avatar, children: selectedUser.photo ? /* @__PURE__ */ jsx("img", { src: selectedUser.photo, alt: "", className: ColumnHeaderFilter_module_default.avatarImg }) : /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.avatarInitials, children: getInitials(selectedUser.displayName) }) }),
214
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userText, children: [
215
- /* @__PURE__ */ jsx("div", { children: selectedUser.displayName }),
216
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.userSecondary, children: selectedUser.email })
217
- ] })
218
- ] }),
219
- /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.removeUserButton, onClick: onClearUser, "aria-label": "Remove filter", children: /* @__PURE__ */ jsx(FilterRegular, {}) })
220
- ] })
221
- ] }),
222
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
223
- /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
224
- /* @__PURE__ */ jsx(
225
- "input",
226
- {
227
- ref: inputRef,
228
- type: "text",
229
- placeholder: "Search for a person...",
230
- value: searchText,
231
- onChange: (e) => onSearchChange(e.target.value),
232
- onFocus: (e) => e.stopPropagation(),
233
- onMouseDown: (e) => e.stopPropagation(),
234
- onClick: (e) => e.stopPropagation(),
235
- onKeyDown: (e) => e.stopPropagation(),
236
- autoComplete: "off",
237
- className: ColumnHeaderFilter_module_default.nativeInput
238
- }
239
- )
240
- ] }) }),
241
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverOptions, onClick: onPopoverClick, children: isLoading && searchText.trim() ? /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.loadingContainer, children: [
242
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.filterSpinner }),
243
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--colorNeutralForeground2, #616161)" }, children: "Searching..." })
244
- ] }) : suggestions.length === 0 && searchText.trim() ? /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "No results found" }) : searchText.trim() ? suggestions.map((user) => /* @__PURE__ */ jsx(
245
- "div",
246
- {
247
- className: ColumnHeaderFilter_module_default.personOption,
248
- onClick: (e) => {
249
- e.stopPropagation();
250
- onUserSelect(user);
251
- },
252
- children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userInfo, children: [
253
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.avatar, children: user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: "", className: ColumnHeaderFilter_module_default.avatarImg }) : /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.avatarInitials, children: getInitials(user.displayName) }) }),
254
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userText, children: [
255
- /* @__PURE__ */ jsx("div", { children: user.displayName }),
256
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.userSecondary, children: user.email })
257
- ] })
258
- ] })
259
- },
260
- user.id ?? user.email ?? user.displayName
261
- )) : /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "Type to search..." }) }),
262
- selectedUser && /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClearUser, children: "Clear Filter" }) })
263
- ] });
264
- PeopleFilterPopover.displayName = "PeopleFilterPopover";
265
- var ColumnHeaderFilter = React2.memo((props) => {
266
- const {
267
- columnName,
268
- filterType,
269
- options,
270
- isLoadingOptions = false,
271
- selectedUser
272
- } = props;
273
- const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
274
- const {
275
- headerRef,
276
- popoverRef,
277
- isFilterOpen,
278
- setFilterOpen,
279
- hasActiveFilter,
280
- handlers
281
- } = state;
282
- const {
283
- handlePopoverClick,
284
- handleInputFocus,
285
- handleInputMouseDown,
286
- handleInputClick,
287
- handleInputKeyDown
288
- } = handlers;
289
- const filterBtnRef = React2.useRef(null);
290
- const fluentRenderers = React2.useMemo(() => ({
291
- renderMultiSelect: (p) => /* @__PURE__ */ jsx(
292
- MultiSelectFilterPopover,
293
- {
294
- searchText: p.searchText,
295
- onSearchChange: p.onSearchChange,
296
- options: p.options,
297
- filteredOptions: p.filteredOptions,
298
- selected: p.selected,
299
- onOptionToggle: p.onOptionToggle,
300
- onSelectAll: p.onSelectAll,
301
- onClearSelection: p.onClearSelection,
302
- onApply: p.onApply,
303
- isLoading: p.isLoading,
304
- onPopoverClick: handlePopoverClick,
305
- onInputFocus: handleInputFocus,
306
- onInputMouseDown: handleInputMouseDown,
307
- onInputClick: handleInputClick,
308
- onInputKeyDown: handleInputKeyDown
309
- }
310
- ),
311
- renderText: (p) => /* @__PURE__ */ jsx(
312
- TextFilterPopover,
313
- {
314
- value: p.value,
315
- onValueChange: p.onValueChange,
316
- onApply: p.onApply,
317
- onClear: p.onClear,
318
- onPopoverClick: handlePopoverClick,
319
- onInputFocus: handleInputFocus,
320
- onInputMouseDown: handleInputMouseDown,
321
- onInputClick: handleInputClick,
322
- onInputKeyDown: handleInputKeyDown
323
- }
324
- ),
325
- renderPeople: (p) => /* @__PURE__ */ jsx(
326
- PeopleFilterPopover,
327
- {
328
- selectedUser: p.selectedUser,
329
- searchText: p.searchText,
330
- onSearchChange: p.onSearchChange,
331
- suggestions: p.suggestions,
332
- isLoading: p.isLoading,
333
- onUserSelect: p.onUserSelect,
334
- onClearUser: p.onClearUser,
335
- onPopoverClick: handlePopoverClick,
336
- inputRef: p.inputRef
337
- }
338
- ),
339
- renderDate: (p) => /* @__PURE__ */ jsx("div", { onClick: handlePopoverClick, children: /* @__PURE__ */ jsx(
340
- DateFilterContent,
341
- {
342
- tempDateFrom: p.tempDateFrom,
343
- setTempDateFrom: p.setTempDateFrom,
344
- tempDateTo: p.tempDateTo,
345
- setTempDateTo: p.setTempDateTo,
346
- onApply: p.onApply,
347
- onClear: p.onClear,
348
- classNames: {
349
- popoverActions: ColumnHeaderFilter_module_default.popoverActions,
350
- clearButton: ColumnHeaderFilter_module_default.clearButton,
351
- applyButton: ColumnHeaderFilter_module_default.applyButton
352
- }
353
- }
354
- ) })
355
- }), [handlePopoverClick, handleInputFocus, handleInputMouseDown, handleInputClick, handleInputKeyDown]);
356
- return /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.columnHeader, ref: headerRef, children: [
357
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.headerContent, children: /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.columnName, title: columnName, "data-header-label": true, children: columnName }) }),
358
- /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.headerActions, children: filterType !== "none" && /* @__PURE__ */ jsxs(Fragment, { children: [
359
- /* @__PURE__ */ jsxs(
360
- "button",
361
- {
362
- ref: filterBtnRef,
363
- type: "button",
364
- className: `${ColumnHeaderFilter_module_default.filterIcon} ${hasActiveFilter ? ColumnHeaderFilter_module_default.filterActive : ""} ${isFilterOpen ? ColumnHeaderFilter_module_default.filterOpen : ""}`,
365
- onClick: handlers.handleFilterIconClick,
366
- "aria-label": `Filter ${columnName}`,
367
- "aria-expanded": isFilterOpen,
368
- "aria-haspopup": "dialog",
369
- title: `Filter ${columnName}`,
370
- children: [
371
- /* @__PURE__ */ jsx(FilterRegular, {}),
372
- hasActiveFilter && /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.filterBadge })
373
- ]
374
- }
375
- ),
376
- /* @__PURE__ */ jsx(
377
- Popover,
378
- {
379
- open: isFilterOpen,
380
- onOpenChange: (_, data) => {
381
- if (!data.open) setFilterOpen(false);
382
- },
383
- positioning: { target: filterBtnRef.current ?? void 0, position: "below", align: "start", offset: 4 },
384
- trapFocus: false,
385
- children: /* @__PURE__ */ jsxs(
386
- PopoverSurface,
387
- {
388
- ref: popoverRef,
389
- className: ColumnHeaderFilter_module_default.filterPopover,
390
- onClick: handlers.handlePopoverClick,
391
- style: { padding: 0 },
392
- children: [
393
- /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverHeader, children: [
394
- "Filter: ",
395
- columnName
396
- ] }),
397
- renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, fluentRenderers)
398
- ]
399
- }
400
- )
401
- }
402
- )
403
- ] }) })
404
- ] });
405
- });
406
- ColumnHeaderFilter.displayName = "ColumnHeaderFilter";
407
-
408
- // src/ColumnHeaderMenu/ColumnHeaderMenu.module.scss
409
- var ColumnHeaderMenu_module_default = {
410
- "content": "ogrid-fluent__ColumnHeaderMenu-module__content",
411
- "item": "ogrid-fluent__ColumnHeaderMenu-module__item",
412
- "separator": "ogrid-fluent__ColumnHeaderMenu-module__separator"
413
- };
414
- var getFluentPortalTarget = (anchorElement) => anchorElement.closest(".fui-FluentProvider") ?? document.body;
415
- function ColumnHeaderMenu(props) {
416
- return /* @__PURE__ */ jsx(
417
- BaseColumnHeaderMenu,
418
- {
419
- ...props,
420
- classNames: ColumnHeaderMenu_module_default,
421
- getPortalTarget: getFluentPortalTarget
422
- }
423
- );
424
- }
425
- function InlineCellEditor(props) {
426
- return /* @__PURE__ */ jsx(
427
- BaseInlineCellEditor,
428
- {
429
- ...props,
430
- renderCheckbox: (checked, onCommit, onCancel) => /* @__PURE__ */ jsx(
431
- Checkbox,
432
- {
433
- checked,
434
- onChange: (_, data) => onCommit(!!data.checked),
435
- onKeyDown: (e) => e.key === "Escape" && (e.preventDefault(), onCancel())
436
- }
437
- )
438
- }
439
- );
440
- }
441
-
442
- // src/DataGridTable/DataGridTable.module.scss
443
- var DataGridTable_module_default = {
444
- "tableScrollContent": "ogrid-fluent__DataGridTable-module__tableScrollContent",
445
- "tableWidthAnchor": "ogrid-fluent__DataGridTable-module__tableWidthAnchor",
446
- "tableWrapper": "ogrid-fluent__DataGridTable-module__tableWrapper",
447
- "dataTable": "ogrid-fluent__DataGridTable-module__dataTable",
448
- "groupHeaderCell": "ogrid-fluent__DataGridTable-module__groupHeaderCell",
449
- "headerCellContent": "ogrid-fluent__DataGridTable-module__headerCellContent",
450
- "headerMenuTrigger": "ogrid-fluent__DataGridTable-module__headerMenuTrigger",
451
- "dropIndicator": "ogrid-fluent__DataGridTable-module__dropIndicator",
452
- "resizeHandle": "ogrid-fluent__DataGridTable-module__resizeHandle",
453
- "pinnedColLeft": "ogrid-fluent__DataGridTable-module__pinnedColLeft",
454
- "pinnedColRight": "ogrid-fluent__DataGridTable-module__pinnedColRight",
455
- "cellContent": "ogrid-fluent__DataGridTable-module__cellContent",
456
- "activeCellContent": "ogrid-fluent__DataGridTable-module__activeCellContent",
457
- "editingCellContent": "ogrid-fluent__DataGridTable-module__editingCellContent",
458
- "cellInRange": "ogrid-fluent__DataGridTable-module__cellInRange",
459
- "inRange": "ogrid-fluent__DataGridTable-module__inRange",
460
- "cellCut": "ogrid-fluent__DataGridTable-module__cellCut",
461
- "fillHandle": "ogrid-fluent__DataGridTable-module__fillHandle",
462
- "selectionHeaderCellInner": "ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",
463
- "selectionCellInner": "ogrid-fluent__DataGridTable-module__selectionCellInner",
464
- "rowNumberHeaderCellInner": "ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",
465
- "rowNumberCellInner": "ogrid-fluent__DataGridTable-module__rowNumberCellInner",
466
- "columnLetterRow": "ogrid-fluent__DataGridTable-module__columnLetterRow",
467
- "columnLetterCell": "ogrid-fluent__DataGridTable-module__columnLetterCell",
468
- "statusBar": "ogrid-fluent__DataGridTable-module__statusBar",
469
- "statusBarItem": "ogrid-fluent__DataGridTable-module__statusBarItem",
470
- "statusBarLabel": "ogrid-fluent__DataGridTable-module__statusBarLabel",
471
- "statusBarValue": "ogrid-fluent__DataGridTable-module__statusBarValue",
472
- "contextMenu": "ogrid-fluent__DataGridTable-module__contextMenu",
473
- "contextMenuItem": "ogrid-fluent__DataGridTable-module__contextMenuItem",
474
- "contextMenuItemLabel": "ogrid-fluent__DataGridTable-module__contextMenuItemLabel",
475
- "contextMenuItemShortcut": "ogrid-fluent__DataGridTable-module__contextMenuItemShortcut",
476
- "contextMenuDivider": "ogrid-fluent__DataGridTable-module__contextMenuDivider",
477
- "loadingOverlay": "ogrid-fluent__DataGridTable-module__loadingOverlay",
478
- "loadingOverlayContent": "ogrid-fluent__DataGridTable-module__loadingOverlayContent",
479
- "loadingOverlayText": "ogrid-fluent__DataGridTable-module__loadingOverlayText",
480
- "loadingDimmed": "ogrid-fluent__DataGridTable-module__loadingDimmed",
481
- "emptyStateInGrid": "ogrid-fluent__DataGridTable-module__emptyStateInGrid",
482
- "emptyStateInGridTitle": "ogrid-fluent__DataGridTable-module__emptyStateInGridTitle",
483
- "emptyStateInGridMessage": "ogrid-fluent__DataGridTable-module__emptyStateInGridMessage",
484
- "emptyStateInGridLink": "ogrid-fluent__DataGridTable-module__emptyStateInGridLink",
485
- "spinner": "ogrid-fluent__DataGridTable-module__spinner",
486
- "ogrid-spin": "ogrid-fluent__DataGridTable-module__ogrid-spin",
487
- "leafHeaderCellSpan": "ogrid-fluent__DataGridTable-module__leafHeaderCellSpan",
488
- "selectionHeaderCellWrapper": "ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper",
489
- "selectionCellWrapper": "ogrid-fluent__DataGridTable-module__selectionCellWrapper",
490
- "rowNumberHeaderCellWrapper": "ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper",
491
- "rowNumberCellWrapper": "ogrid-fluent__DataGridTable-module__rowNumberCellWrapper",
492
- "selectedRow": "ogrid-fluent__DataGridTable-module__selectedRow",
493
- "selectableGrid": "ogrid-fluent__DataGridTable-module__selectableGrid",
494
- "stickyHeader": "ogrid-fluent__DataGridTable-module__stickyHeader",
495
- "emptyStateInGridMessageSticky": "ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky",
496
- "emptyStateInGridIcon": "ogrid-fluent__DataGridTable-module__emptyStateInGridIcon",
497
- "density-compact": "ogrid-fluent__DataGridTable-module__density-compact",
498
- "density-comfortable": "ogrid-fluent__DataGridTable-module__density-comfortable"
499
- };
500
- var statusBarClassNames = {
501
- statusBar: DataGridTable_module_default.statusBar,
502
- statusBarItem: DataGridTable_module_default.statusBarItem,
503
- statusBarLabel: DataGridTable_module_default.statusBarLabel,
504
- statusBarValue: DataGridTable_module_default.statusBarValue
505
- };
506
- function StatusBar(props) {
507
- return /* @__PURE__ */ jsx(StatusBar$1, { ...props, classNames: statusBarClassNames });
508
- }
509
- var classNames = {
510
- contextMenu: DataGridTable_module_default.contextMenu,
511
- contextMenuItem: DataGridTable_module_default.contextMenuItem,
512
- contextMenuItemLabel: DataGridTable_module_default.contextMenuItemLabel,
513
- contextMenuItemShortcut: DataGridTable_module_default.contextMenuItemShortcut,
514
- contextMenuDivider: DataGridTable_module_default.contextMenuDivider
515
- };
516
- function GridContextMenu(props) {
517
- return /* @__PURE__ */ jsx(GridContextMenu$1, { ...props, classNames });
518
- }
519
- var classNames2 = {
520
- emptyStateInGrid: DataGridTable_module_default.emptyStateInGrid,
521
- emptyStateInGridInner: DataGridTable_module_default.emptyStateInGridMessageSticky,
522
- emptyStateInGridIcon: DataGridTable_module_default.emptyStateInGridIcon,
523
- emptyStateInGridTitle: DataGridTable_module_default.emptyStateInGridTitle,
524
- emptyStateInGridMessage: DataGridTable_module_default.emptyStateInGridMessage,
525
- emptyStateInGridLink: DataGridTable_module_default.emptyStateInGridLink
526
- };
527
- function EmptyState({ emptyState }) {
528
- return /* @__PURE__ */ jsx(BaseEmptyState, { emptyState, classNames: classNames2, icon: "\u{1F4CB}" });
529
- }
530
- var classNames3 = {
531
- loadingOverlay: DataGridTable_module_default.loadingOverlay,
532
- loadingOverlayContent: DataGridTable_module_default.loadingOverlayContent,
533
- spinner: DataGridTable_module_default.spinner,
534
- loadingOverlayText: DataGridTable_module_default.loadingOverlayText
535
- };
536
- function LoadingOverlay({ message }) {
537
- return /* @__PURE__ */ jsx(BaseLoadingOverlay, { message, classNames: classNames3 });
538
- }
539
- function DropIndicator({ dropIndicatorX, wrapperLeft }) {
540
- return /* @__PURE__ */ jsx(BaseDropIndicator, { dropIndicatorX, wrapperLeft, className: DataGridTable_module_default.dropIndicator });
541
- }
542
- var SPACER_TD_STYLE = { padding: 0, border: "none" };
543
- function GridRowInner(props) {
544
- const {
545
- item,
546
- rowIndex,
547
- rowId,
548
- isSelected,
549
- visibleCols,
550
- columnMeta,
551
- renderCellContent,
552
- handleSingleRowClick,
553
- handleRowCheckboxChange,
554
- lastMouseShiftRef,
555
- hasCheckboxCol,
556
- hasRowNumbersCol,
557
- rowNumberOffset,
558
- leftSpacerWidth,
559
- rightSpacerWidth,
560
- globalColIndexMap,
561
- rowNumWidth
562
- } = props;
563
- return /* @__PURE__ */ jsxs(
564
- TableRow,
565
- {
566
- className: isSelected ? DataGridTable_module_default.selectedRow : void 0,
567
- "data-row-id": rowId,
568
- onClick: handleSingleRowClick,
569
- "aria-selected": isSelected || void 0,
570
- children: [
571
- hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.selectionCellWrapper, children: /* @__PURE__ */ jsx(
572
- "div",
573
- {
574
- className: DataGridTable_module_default.selectionCellInner,
575
- "data-row-index": rowIndex,
576
- "data-col-index": 0,
577
- onClick: STOP_PROPAGATION,
578
- children: /* @__PURE__ */ jsx(
579
- Checkbox,
580
- {
581
- checked: isSelected,
582
- onChange: (e, data) => {
583
- handleRowCheckboxChange(rowId, !!data.checked, rowIndex, lastMouseShiftRef.current);
584
- },
585
- "aria-label": `Select row ${rowIndex + 1}`
586
- }
587
- )
588
- }
589
- ) }),
590
- hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, style: rowNumWidth ? { width: rowNumWidth, minWidth: rowNumWidth, maxWidth: rowNumWidth } : void 0, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
591
- leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
592
- visibleCols.map((col, colIdx) => {
593
- const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
594
- return /* @__PURE__ */ jsx(
595
- TableCell,
596
- {
597
- "data-column-id": col.columnId,
598
- className: columnMeta.cellClasses[col.columnId] || void 0,
599
- style: columnMeta.cellStyles[col.columnId],
600
- children: renderCellContent(item, col, rowIndex, globalIdx)
601
- },
602
- col.columnId
603
- );
604
- }),
605
- rightSpacerWidth != null && rightSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: rightSpacerWidth, minWidth: rightSpacerWidth }, "aria-hidden": true })
606
- ]
607
- }
608
- );
609
- }
610
- var GridRow = React2.memo(GridRowInner, areGridRowPropsEqual);
611
- function FluentTableBody(props) {
612
- const {
613
- virtualScrollEnabled,
614
- visibleRange,
615
- columnRange,
616
- items,
617
- getRowId,
618
- selectedRowIds,
619
- visibleCols,
620
- columnMeta,
621
- renderCellContent,
622
- handleSingleRowClick,
623
- handleRowCheckboxChange,
624
- lastMouseShiftRef,
625
- hasCheckboxCol,
626
- hasRowNumbersCol,
627
- rowNumberOffset,
628
- selectionRange,
629
- activeCell,
630
- cutRange,
631
- copyRange,
632
- isDragging,
633
- editingCell,
634
- pinnedColumns,
635
- rowNumWidth
636
- } = props;
637
- const partition = React2.useMemo(() => {
638
- if (!columnRange) return null;
639
- const p = partitionColumnsForVirtualization(
640
- visibleCols,
641
- columnRange,
642
- pinnedColumns
643
- );
644
- return p;
645
- }, [visibleCols, columnRange, pinnedColumns]);
646
- const { rowCols, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React2.useMemo(() => {
647
- if (!partition) {
648
- return { rowCols: visibleCols, globalColIndexMap: void 0, leftSpacerWidth: void 0, rightSpacerWidth: void 0 };
649
- }
650
- const combined = [...partition.pinnedLeft, ...partition.virtualizedUnpinned, ...partition.pinnedRight];
651
- const idxMap = combined.map((col) => visibleCols.indexOf(col));
652
- return {
653
- rowCols: combined,
654
- globalColIndexMap: idxMap,
655
- leftSpacerWidth: partition.leftSpacerWidth,
656
- rightSpacerWidth: partition.rightSpacerWidth
657
- };
658
- }, [partition, visibleCols]);
659
- const renderRow = (item, rowIndex) => {
660
- const rowIdStr = getRowId(item);
661
- return /* @__PURE__ */ jsx(
662
- GridRow,
663
- {
664
- item,
665
- rowIndex,
666
- rowId: rowIdStr,
667
- isSelected: selectedRowIds.has(rowIdStr),
668
- visibleCols: rowCols,
669
- columnMeta,
670
- renderCellContent,
671
- handleSingleRowClick,
672
- handleRowCheckboxChange,
673
- lastMouseShiftRef,
674
- hasCheckboxCol,
675
- hasRowNumbersCol,
676
- rowNumberOffset,
677
- selectionRange,
678
- activeCell,
679
- cutRange,
680
- copyRange,
681
- isDragging,
682
- editingRowId: editingCell?.rowId ?? null,
683
- leftSpacerWidth,
684
- rightSpacerWidth,
685
- globalColIndexMap,
686
- rowNumWidth
687
- },
688
- rowIdStr
689
- );
690
- };
691
- return /* @__PURE__ */ jsxs(TableBody, { children: [
692
- virtualScrollEnabled && visibleRange.offsetTop > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true }),
693
- virtualScrollEnabled ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map(
694
- (item, i) => renderRow(item, visibleRange.startIndex + i)
695
- ) : items.map((item, rowIndex) => renderRow(item, rowIndex)),
696
- virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
697
- ] });
698
- }
699
- function DataGridTableInner(props) {
700
- const o = useDataGridTableOrchestration({ props });
701
- const {
702
- wrapperRef,
703
- tableContainerRef,
704
- lastMouseShiftRef,
705
- interaction,
706
- pinning,
707
- handleResizeStart,
708
- handleResizeDoubleClick,
709
- getColumnWidth,
710
- isReorderDragging,
711
- dropIndicatorX,
712
- handleHeaderMouseDown,
713
- virtualScrollEnabled,
714
- visibleRange,
715
- columnRange,
716
- onHorizontalScroll,
717
- items,
718
- getRowId,
719
- emptyState,
720
- rowSelection,
721
- isLoading,
722
- loadingMessage,
723
- ariaLabel,
724
- ariaLabelledBy,
725
- visibleColumns,
726
- columnOrder,
727
- columnReorder,
728
- density,
729
- rowHeight,
730
- rowNumberOffset,
731
- headerRows,
732
- allowOverflowX,
733
- fitToContent,
734
- showColumnLetters,
735
- editCallbacks,
736
- interactionHandlers,
737
- cellDescriptorInputRef,
738
- cellDescriptorCacheRef,
739
- pendingEditorValueRef,
740
- popoverAnchorElRef,
741
- handleSingleRowClick,
742
- handlePasteVoid,
743
- visibleCols,
744
- totalColCount,
745
- hasCheckboxCol,
746
- hasRowNumbersCol,
747
- colOffset,
748
- containerWidth,
749
- minTableWidth,
750
- columnSizingOverrides,
751
- measuredColumnWidths,
752
- selectedRowIds,
753
- handleRowCheckboxChange,
754
- handleSelectAll,
755
- allSelected,
756
- someSelected,
757
- editingCell,
758
- setPopoverAnchorEl,
759
- cancelPopoverEdit,
760
- setActiveCell,
761
- selectionRange,
762
- hasCellSelection,
763
- handleGridKeyDown,
764
- handleFillHandleMouseDown,
765
- handleCopy,
766
- handleCut,
767
- cutRange,
768
- copyRange,
769
- canUndo,
770
- canRedo,
771
- onUndo,
772
- onRedo,
773
- isDragging,
774
- menuPosition,
775
- closeContextMenu,
776
- headerFilterInput,
777
- statusBarConfig,
778
- showEmptyInGrid,
779
- onCellError,
780
- headerMenu
781
- } = o;
782
- const columnMeta = useColumnMeta({
783
- visibleCols,
784
- getColumnWidth,
785
- columnSizingOverrides,
786
- measuredColumnWidths,
787
- pinnedColumns: pinning.pinnedColumns,
788
- leftOffsets: pinning.leftOffsets,
789
- rightOffsets: pinning.rightOffsets,
790
- pinnedColLeftClass: DataGridTable_module_default.pinnedColLeft,
791
- pinnedColRightClass: DataGridTable_module_default.pinnedColRight,
792
- addStickyPosition: true
793
- });
794
- const renderCellContent = useCallback(
795
- (item, col, rowIndex, colIdx) => {
796
- const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current, cellDescriptorCacheRef.current);
797
- const rowId = getRowId(item);
798
- let content;
799
- if (descriptor.mode === "editing-inline") {
800
- content = /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.editingCellContent, children: /* @__PURE__ */ jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) });
801
- } else if (descriptor.mode === "editing-popover" && typeof col.cellEditor === "function") {
802
- const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
803
- const CustomEditor = col.cellEditor;
804
- content = /* @__PURE__ */ jsxs(Fragment, { children: [
805
- /* @__PURE__ */ jsx(
806
- "div",
807
- {
808
- ref: (el) => {
809
- if (el) setPopoverAnchorEl(el);
810
- },
811
- style: POPOVER_ANCHOR_STYLE,
812
- "aria-hidden": true
813
- }
814
- ),
815
- /* @__PURE__ */ jsx(
816
- Popover,
817
- {
818
- open: !!popoverAnchorElRef.current,
819
- onOpenChange: (_, data) => {
820
- if (!data.open) cancelPopoverEdit();
821
- },
822
- positioning: { target: popoverAnchorElRef.current ?? void 0 },
823
- children: /* @__PURE__ */ jsx(PopoverSurface, { children: /* @__PURE__ */ jsx(CustomEditor, { ...editorProps }) })
824
- }
825
- )
826
- ] });
827
- } else {
828
- let displayNode;
829
- if (descriptor.columnType === "boolean") {
830
- displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
831
- } else {
832
- const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
833
- const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
834
- displayNode = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
835
- }
836
- const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isActive && descriptor.isInRange ? ` ${DataGridTable_module_default.inRange}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
837
- const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
838
- content = /* @__PURE__ */ jsxs(
839
- "div",
840
- {
841
- className: cellClassNames,
842
- ...interactionProps,
843
- style: descriptor.canEditAny ? CURSOR_CELL_STYLE : void 0,
844
- children: [
845
- displayNode,
846
- descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx(
847
- "div",
848
- {
849
- className: DataGridTable_module_default.fillHandle,
850
- onMouseDown: handleFillHandleMouseDown,
851
- "aria-label": "Fill handle"
852
- }
853
- )
854
- ]
855
- }
856
- );
857
- }
858
- return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`);
859
- },
860
- [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDescriptorCacheRef, pendingEditorValueRef, popoverAnchorElRef]
861
- );
862
- return /* @__PURE__ */ jsxs("div", { style: GRID_ROOT_STYLE, children: [
863
- /* @__PURE__ */ jsxs(
864
- "div",
865
- {
866
- ref: wrapperRef,
867
- tabIndex: 0,
868
- onMouseDown: (e) => {
869
- lastMouseShiftRef.current = e.shiftKey;
870
- },
871
- onScroll: onHorizontalScroll ? (e) => onHorizontalScroll(e.target.scrollLeft) : void 0,
872
- className: `${DataGridTable_module_default.tableWrapper} ${rowSelection !== "none" ? DataGridTable_module_default.selectableGrid : ""} ${DataGridTable_module_default[`density-${density}`] || ""}`,
873
- role: "region",
874
- "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
875
- "aria-labelledby": ariaLabelledBy,
876
- "data-empty": showEmptyInGrid ? "true" : void 0,
877
- "data-loading": isLoading && items.length === 0 ? "true" : void 0,
878
- "data-column-count": totalColCount,
879
- "data-overflow-x": allowOverflowX ? "true" : "false",
880
- "data-container-width": containerWidth,
881
- "data-min-table-width": Math.round(minTableWidth),
882
- "data-has-selection": rowSelection !== "none" ? "true" : void 0,
883
- onContextMenu: PREVENT_DEFAULT,
884
- onKeyDown: handleGridKeyDown,
885
- style: {
886
- ["--data-table-column-count"]: totalColCount,
887
- ["--data-table-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "fit-content" : fitToContent ? "fit-content" : "100%",
888
- ["--data-table-min-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "max-content" : fitToContent ? "max-content" : "100%",
889
- ["--data-table-total-min-width"]: `${minTableWidth}px`,
890
- ...rowHeight ? { ["--ogrid-row-height"]: `${rowHeight}px` } : {}
891
- },
892
- children: [
893
- /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.tableScrollContent, children: /* @__PURE__ */ jsx("div", { className: isLoading && items.length > 0 ? DataGridTable_module_default.loadingDimmed : void 0, children: /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.tableWidthAnchor, ref: tableContainerRef, children: [
894
- /* @__PURE__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, "data-virtual-scroll": virtualScrollEnabled ? "" : void 0, children: [
895
- /* @__PURE__ */ jsxs(
896
- TableHeader,
897
- {
898
- className: o.stickyHeader ? DataGridTable_module_default.stickyHeader : void 0,
899
- children: [
900
- showColumnLetters && /* @__PURE__ */ jsxs(TableRow, { children: [
901
- hasCheckboxCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
902
- hasRowNumbersCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
903
- visibleCols.map((col, colIdx) => /* @__PURE__ */ jsx(
904
- "th",
905
- {
906
- className: `${DataGridTable_module_default.columnLetterCell}${columnMeta.hdrClasses[col.columnId] ? ` ${columnMeta.hdrClasses[col.columnId]}` : ""}`,
907
- style: columnMeta.hdrStyles[col.columnId],
908
- children: indexToColumnLetter(colIdx)
909
- },
910
- col.columnId
911
- ))
912
- ] }),
913
- headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
914
- rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
915
- Checkbox,
916
- {
917
- checked: allSelected ? true : someSelected ? "mixed" : false,
918
- onChange: (_, data) => handleSelectAll(!!data.checked),
919
- "aria-label": "Select all rows"
920
- }
921
- ) }) }, "__selection__"),
922
- rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
923
- rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
924
- const rowNumW = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
925
- return /* @__PURE__ */ jsxs(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, style: { width: rowNumW, minWidth: rowNumW, maxWidth: rowNumW }, children: [
926
- /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }),
927
- /* @__PURE__ */ jsx(
928
- "div",
929
- {
930
- className: DataGridTable_module_default.resizeHandle,
931
- role: "separator",
932
- "aria-orientation": "vertical",
933
- "aria-label": "Resize row number column",
934
- onMouseDown: (e) => {
935
- setActiveCell(null);
936
- interaction.setSelectionRange(null);
937
- wrapperRef.current?.focus({ preventScroll: true });
938
- handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
939
- }
940
- }
941
- )
942
- ] }, "__row_number__");
943
- })(),
944
- rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
945
- row.map((cell, cellIdx) => {
946
- if (cell.isGroup) {
947
- return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
948
- }
949
- if (!cell.columnDef) return null;
950
- const col = cell.columnDef;
951
- const isSorted = props.sortBy === col.columnId;
952
- const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
953
- return /* @__PURE__ */ jsxs(
954
- TableHeaderCell,
955
- {
956
- scope: "col",
957
- "data-column-id": col.columnId,
958
- className: columnMeta.hdrClasses[col.columnId] || void 0,
959
- style: {
960
- ...columnMeta.hdrStyles[col.columnId],
961
- ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
962
- },
963
- "aria-sort": ariaSort,
964
- onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
965
- children: [
966
- /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
967
- /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
968
- /* @__PURE__ */ jsx(
969
- "button",
970
- {
971
- className: DataGridTable_module_default.headerMenuTrigger,
972
- onClick: (e) => {
973
- e.stopPropagation();
974
- if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
975
- headerMenu.close();
976
- } else {
977
- headerMenu.open(col.columnId, e.currentTarget);
978
- }
979
- },
980
- "aria-label": "Column options",
981
- title: "Column options",
982
- children: "\u22EE"
983
- }
984
- )
985
- ] }),
986
- /* @__PURE__ */ jsx(
987
- "div",
988
- {
989
- className: DataGridTable_module_default.resizeHandle,
990
- role: "separator",
991
- "aria-orientation": "vertical",
992
- onMouseDown: (e) => {
993
- setActiveCell(null);
994
- interaction.setSelectionRange(null);
995
- wrapperRef.current?.focus({ preventScroll: true });
996
- handleResizeStart(e, col);
997
- },
998
- onDoubleClick: (e) => handleResizeDoubleClick(e, col),
999
- "aria-label": `Resize ${col.name}`
1000
- }
1001
- )
1002
- ]
1003
- },
1004
- col.columnId
1005
- );
1006
- })
1007
- ] }, rowIdx))
1008
- ]
1009
- }
1010
- ),
1011
- !showEmptyInGrid && /* @__PURE__ */ jsx(
1012
- FluentTableBody,
1013
- {
1014
- virtualScrollEnabled,
1015
- visibleRange,
1016
- columnRange,
1017
- items,
1018
- getRowId,
1019
- selectedRowIds,
1020
- visibleCols,
1021
- columnMeta,
1022
- renderCellContent,
1023
- handleSingleRowClick,
1024
- handleRowCheckboxChange,
1025
- lastMouseShiftRef,
1026
- hasCheckboxCol,
1027
- hasRowNumbersCol,
1028
- rowNumberOffset,
1029
- selectionRange,
1030
- activeCell: interaction.activeCell,
1031
- cutRange,
1032
- copyRange,
1033
- isDragging,
1034
- editingCell,
1035
- pinnedColumns: pinning.pinnedColumns,
1036
- rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
1037
- }
1038
- )
1039
- ] }),
1040
- isReorderDragging && dropIndicatorX != null && /* @__PURE__ */ jsx(DropIndicator, { dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 }),
1041
- /* @__PURE__ */ jsx(
1042
- MarchingAntsOverlay,
1043
- {
1044
- containerRef: tableContainerRef,
1045
- selectionRange,
1046
- copyRange,
1047
- cutRange,
1048
- colOffset,
1049
- items,
1050
- visibleColumns,
1051
- columnSizingOverrides,
1052
- columnOrder,
1053
- isDragging
1054
- }
1055
- ),
1056
- props.formulaReferences && props.formulaReferences.length > 0 && /* @__PURE__ */ jsx(
1057
- FormulaRefOverlay,
1058
- {
1059
- containerRef: tableContainerRef,
1060
- references: props.formulaReferences,
1061
- colOffset
1062
- }
1063
- ),
1064
- showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
1065
- ] }) }) }),
1066
- menuPosition && createPortal(
1067
- /* @__PURE__ */ jsx(
1068
- GridContextMenu,
1069
- {
1070
- x: menuPosition.x,
1071
- y: menuPosition.y,
1072
- hasSelection: hasCellSelection,
1073
- canUndo,
1074
- canRedo,
1075
- onUndo: onUndo ?? NOOP,
1076
- onRedo: onRedo ?? NOOP,
1077
- onCopy: handleCopy,
1078
- onCut: handleCut,
1079
- onPaste: handlePasteVoid,
1080
- onSelectAll: o.interaction.handleSelectAllCells,
1081
- onClose: closeContextMenu
1082
- }
1083
- ),
1084
- wrapperRef.current?.closest(".fui-FluentProvider") ?? document.body
1085
- ),
1086
- /* @__PURE__ */ jsx(ColumnHeaderMenu, { ...getColumnHeaderMenuProps(headerMenu) })
1087
- ]
1088
- }
1089
- ),
1090
- statusBarConfig && /* @__PURE__ */ jsx(
1091
- StatusBar,
1092
- {
1093
- totalCount: statusBarConfig.totalCount,
1094
- filteredCount: statusBarConfig.filteredCount,
1095
- selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
1096
- selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : void 0,
1097
- aggregation: statusBarConfig.aggregation,
1098
- suppressRowCount: statusBarConfig.suppressRowCount
1099
- }
1100
- ),
1101
- isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { message: loadingMessage })
1102
- ] });
1103
- }
1104
- var DataGridTable = React2.memo(DataGridTableInner);
1105
-
1106
- // src/ColumnChooser/ColumnChooser.module.scss
1107
- var ColumnChooser_module_default = {
1108
- "container": "ogrid-fluent__ColumnChooser-module__container",
1109
- "dropdown": "ogrid-fluent__ColumnChooser-module__dropdown",
1110
- "header": "ogrid-fluent__ColumnChooser-module__header",
1111
- "optionsList": "ogrid-fluent__ColumnChooser-module__optionsList",
1112
- "optionItem": "ogrid-fluent__ColumnChooser-module__optionItem",
1113
- "actions": "ogrid-fluent__ColumnChooser-module__actions"
1114
- };
1115
- var CheckboxItem = ({ columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
1116
- Checkbox,
1117
- {
1118
- id: `col-${columnId}`,
1119
- label: columnName,
1120
- checked,
1121
- onChange: (_ev, data) => onChange(data.checked === true),
1122
- disabled
1123
- }
1124
- );
1125
- var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.actions, children: [
1126
- /* @__PURE__ */ jsx(Button, { appearance: "subtle", size: "small", onClick: onClearAll, children: "Clear All" }),
1127
- /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: onSelectAll, children: "Select All" })
1128
- ] });
1129
- var CLASS_NAMES = {
1130
- header: ColumnChooser_module_default.header,
1131
- optionsList: ColumnChooser_module_default.optionsList,
1132
- optionItem: ColumnChooser_module_default.optionItem
1133
- };
1134
- var ColumnChooser = (props) => {
1135
- const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
1136
- const buttonRef = useRef(null);
1137
- const dropdownRef = useRef(null);
1138
- const {
1139
- open,
1140
- handleToggle,
1141
- handleClose,
1142
- handleCheckboxChange: setColumnVisible,
1143
- handleSelectAll,
1144
- handleClearAll,
1145
- visibleCount,
1146
- totalCount
1147
- } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
1148
- useEffect(() => {
1149
- if (!open) return;
1150
- const handleClickOutside = (event) => {
1151
- const target = event.target;
1152
- if (dropdownRef.current && !dropdownRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
1153
- handleClose();
1154
- }
1155
- };
1156
- const timeoutId = setTimeout(() => {
1157
- document.addEventListener("mousedown", handleClickOutside);
1158
- }, 0);
1159
- return () => {
1160
- clearTimeout(timeoutId);
1161
- document.removeEventListener("mousedown", handleClickOutside);
1162
- };
1163
- }, [open, handleClose]);
1164
- const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
1165
- return /* @__PURE__ */ jsxs("div", { className: `${ColumnChooser_module_default.container} ${className || ""}`, children: [
1166
- /* @__PURE__ */ jsxs(
1167
- Button,
1168
- {
1169
- ref: buttonRef,
1170
- appearance: "outline",
1171
- icon: /* @__PURE__ */ jsx(TableSettingsRegular, {}),
1172
- onClick: handleToggle,
1173
- "aria-expanded": open,
1174
- "aria-haspopup": "listbox",
1175
- children: [
1176
- "Column Visibility (",
1177
- visibleCount,
1178
- " of ",
1179
- totalCount,
1180
- ")",
1181
- open ? /* @__PURE__ */ jsx(ChevronUpRegular, {}) : /* @__PURE__ */ jsx(ChevronDownRegular, {})
1182
- ]
1183
- }
1184
- ),
1185
- open && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: /* @__PURE__ */ jsx(
1186
- ColumnChooserContent,
1187
- {
1188
- columns,
1189
- visibleColumns,
1190
- visibleCount,
1191
- totalCount,
1192
- handleSelectAll,
1193
- handleClearAll,
1194
- handleCheckboxChange,
1195
- CheckboxItem,
1196
- classNames: CLASS_NAMES,
1197
- Actions
1198
- }
1199
- ) })
1200
- ] });
1201
- };
1202
-
1203
- // src/PaginationControls/PaginationControls.module.scss
1204
- var PaginationControls_module_default = {
1205
- "pagination": "ogrid-fluent__PaginationControls-module__pagination",
1206
- "paginationInfo": "ogrid-fluent__PaginationControls-module__paginationInfo",
1207
- "paginationControls": "ogrid-fluent__PaginationControls-module__paginationControls",
1208
- "navBtn": "ogrid-fluent__PaginationControls-module__navBtn",
1209
- "pageNumbers": "ogrid-fluent__PaginationControls-module__pageNumbers",
1210
- "pageBtn": "ogrid-fluent__PaginationControls-module__pageBtn",
1211
- "ellipsis": "ogrid-fluent__PaginationControls-module__ellipsis",
1212
- "pageSizeSelector": "ogrid-fluent__PaginationControls-module__pageSizeSelector",
1213
- "pageSizeLabel": "ogrid-fluent__PaginationControls-module__pageSizeLabel",
1214
- "pageSizeSelect": "ogrid-fluent__PaginationControls-module__pageSizeSelect"
1215
- };
1216
- var FLUENT_NAV_ICONS = {
1217
- first: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}),
1218
- prev: /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
1219
- next: /* @__PURE__ */ jsx(ChevronRightRegular, {}),
1220
- last: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {})
1221
- };
1222
- var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel, className }) => /* @__PURE__ */ jsx(
1223
- Button,
1224
- {
1225
- appearance: "outline",
1226
- shape: "circular",
1227
- size: "small",
1228
- icon: FLUENT_NAV_ICONS[variant],
1229
- onClick,
1230
- disabled,
1231
- "aria-label": ariaLabel,
1232
- className
1233
- }
1234
- );
1235
- var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children, className }) => /* @__PURE__ */ jsx(
1236
- Button,
1237
- {
1238
- appearance: active ? "primary" : "outline",
1239
- size: "small",
1240
- shape: "rounded",
1241
- onClick,
1242
- "aria-label": ariaLabel,
1243
- "aria-current": ariaCurrent,
1244
- className,
1245
- children
1246
- }
1247
- );
1248
- var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel, className }) => {
1249
- const handleChange = (_e, data) => onChange(Number(data.value));
1250
- return /* @__PURE__ */ jsx(Select, { value: String(value), onChange: handleChange, size: "small", appearance: "outline", "aria-label": ariaLabel, className, children: options.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n)) });
1251
- };
1252
- var SLOTS = { NavButton, PageButton, PageSizeSelect };
1253
- var CLASS_NAMES2 = {
1254
- pagination: PaginationControls_module_default.pagination,
1255
- paginationInfo: PaginationControls_module_default.paginationInfo,
1256
- paginationControls: PaginationControls_module_default.paginationControls,
1257
- pageNumbers: PaginationControls_module_default.pageNumbers,
1258
- ellipsis: PaginationControls_module_default.ellipsis,
1259
- navBtn: PaginationControls_module_default.navBtn,
1260
- pageBtn: PaginationControls_module_default.pageBtn,
1261
- pageSizeSelector: PaginationControls_module_default.pageSizeSelector,
1262
- pageSizeLabel: PaginationControls_module_default.pageSizeLabel,
1263
- pageSizeSelect: PaginationControls_module_default.pageSizeSelect
1264
- };
1265
- var PaginationControls = React2.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS, classNames: CLASS_NAMES2 }));
1266
- PaginationControls.displayName = "PaginationControls";
1267
-
1268
- // src/OGrid/OGrid.tsx
1269
- var OGrid = createOGrid({
1270
- DataGridTable,
1271
- ColumnChooser,
1272
- PaginationControls
1273
- });
1274
-
1275
- export { ColumnChooser, ColumnHeaderFilter, ColumnHeaderMenu, DataGridTable, OGrid, PaginationControls };
1
+ import'./index.css';import {useColumnHeaderFilterState,getColumnHeaderFilterStateParams,DateFilterContent,renderFilterContent,areGridRowPropsEqual,PaginationControlsBase,createOGrid,useListVirtualizer,STOP_PROPAGATION,useDataGridTableOrchestration,useColumnMeta,getCellRenderDescriptor,buildInlineEditorProps,buildPopoverEditorProps,POPOVER_ANCHOR_STYLE,resolveCellDisplayContent,resolveCellStyle,getCellInteractionProps,CURSOR_CELL_STYLE,CellErrorBoundary,GRID_ROOT_STYLE,PREVENT_DEFAULT,indexToColumnLetter,ROW_NUMBER_COLUMN_ID,ROW_NUMBER_COLUMN_WIDTH,getHeaderFilterConfig,MarchingAntsOverlay,FormulaRefOverlay,NOOP,getColumnHeaderMenuProps,useColumnChooserState,ColumnChooserContent,BaseInlineCellEditor,partitionColumnsForVirtualization,BaseDropIndicator,BaseEmptyState,GridContextMenu,BaseColumnHeaderMenu,StatusBar,BaseLoadingOverlay}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*as q from'react';import {useCallback,useRef,useEffect}from'react';import {createPortal}from'react-dom';import {Popover,PopoverSurface,TableRow,TableCell,Checkbox,Table,TableHeader,TableHeaderCell,Select,Button,TableBody}from'@fluentui/react-components';import {FilterRegular,ChevronDoubleRightRegular,ChevronRightRegular,ChevronLeftRegular,ChevronDoubleLeftRegular,SearchRegular,ChevronUpRegular,ChevronDownRegular,TableSettingsRegular}from'@fluentui/react-icons';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var e={columnHeader:"ogrid-fluent__ColumnHeaderFilter-module__columnHeader",headerContent:"ogrid-fluent__ColumnHeaderFilter-module__headerContent",columnName:"ogrid-fluent__ColumnHeaderFilter-module__columnName",headerActions:"ogrid-fluent__ColumnHeaderFilter-module__headerActions",filterIcon:"ogrid-fluent__ColumnHeaderFilter-module__filterIcon",filterActive:"ogrid-fluent__ColumnHeaderFilter-module__filterActive",filterOpen:"ogrid-fluent__ColumnHeaderFilter-module__filterOpen",filterBadge:"ogrid-fluent__ColumnHeaderFilter-module__filterBadge",filterPopover:"ogrid-fluent__ColumnHeaderFilter-module__filterPopover",popoverHeader:"ogrid-fluent__ColumnHeaderFilter-module__popoverHeader",popoverSearch:"ogrid-fluent__ColumnHeaderFilter-module__popoverSearch",nativeInputWrapper:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper",nativeInputIcon:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon",nativeInput:"ogrid-fluent__ColumnHeaderFilter-module__nativeInput",resultCount:"ogrid-fluent__ColumnHeaderFilter-module__resultCount",selectAllRow:"ogrid-fluent__ColumnHeaderFilter-module__selectAllRow",selectAllButton:"ogrid-fluent__ColumnHeaderFilter-module__selectAllButton",popoverOptions:"ogrid-fluent__ColumnHeaderFilter-module__popoverOptions",popoverOption:"ogrid-fluent__ColumnHeaderFilter-module__popoverOption",nativeCheckbox:"ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox",checkboxLabel:"ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel",personOption:"ogrid-fluent__ColumnHeaderFilter-module__personOption",loadingContainer:"ogrid-fluent__ColumnHeaderFilter-module__loadingContainer",filterSpinner:"ogrid-fluent__ColumnHeaderFilter-module__filterSpinner",noResults:"ogrid-fluent__ColumnHeaderFilter-module__noResults",selectedUserSection:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection",selectedUserLabel:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel",selectedUser:"ogrid-fluent__ColumnHeaderFilter-module__selectedUser",userInfo:"ogrid-fluent__ColumnHeaderFilter-module__userInfo",avatar:"ogrid-fluent__ColumnHeaderFilter-module__avatar",avatarImg:"ogrid-fluent__ColumnHeaderFilter-module__avatarImg",avatarInitials:"ogrid-fluent__ColumnHeaderFilter-module__avatarInitials",userText:"ogrid-fluent__ColumnHeaderFilter-module__userText",userSecondary:"ogrid-fluent__ColumnHeaderFilter-module__userSecondary",removeUserButton:"ogrid-fluent__ColumnHeaderFilter-module__removeUserButton",popoverActions:"ogrid-fluent__ColumnHeaderFilter-module__popoverActions",clearButton:"ogrid-fluent__ColumnHeaderFilter-module__clearButton",applyButton:"ogrid-fluent__ColumnHeaderFilter-module__applyButton"};var Te=({value:r,onValueChange:t,onApply:n,onClear:d,onPopoverClick:s,onInputFocus:p,onInputMouseDown:g,onInputClick:c,onInputKeyDown:C})=>jsxs(Fragment,{children:[jsx("div",{className:e.popoverSearch,onClick:s,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Enter search term...",value:r,onChange:i=>t(i.target.value),onKeyDown:i=>{C(i),i.key==="Enter"&&(i.preventDefault(),n());},onFocus:p,onMouseDown:g,onClick:c,autoComplete:"off",className:e.nativeInput})]})}),jsxs("div",{className:e.popoverActions,onClick:s,children:[jsx("button",{type:"button",className:e.clearButton,onClick:d,disabled:!r,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:n,children:"Apply"})]})]});Te.displayName="TextFilterPopover";var Je=40,ye=({searchText:r,onSearchChange:t,options:n,filteredOptions:d,selected:s,onOptionToggle:p,onSelectAll:g,onClearSelection:c,onApply:C,isLoading:i,onPopoverClick:h,onInputFocus:R,onInputMouseDown:G,onInputClick:S,onInputKeyDown:x})=>{let b=useListVirtualizer({count:d.length,itemHeight:Je});return jsxs(Fragment,{children:[jsxs("div",{className:e.popoverSearch,onClick:h,children:[jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Search...",value:r,onChange:T=>t(T.target.value),onFocus:R,onMouseDown:G,onClick:S,onKeyDown:x,autoComplete:"off",className:e.nativeInput})]}),jsxs("div",{className:e.resultCount,children:[d.length," of ",n.length," options"]})]}),jsxs("div",{className:e.selectAllRow,onClick:h,children:[jsxs("button",{type:"button",className:e.selectAllButton,onClick:g,children:["Select All (",d.length,")"]}),jsx("button",{type:"button",className:e.selectAllButton,onClick:c,children:"Clear"})]}),jsx("div",{ref:b.containerRef,onScroll:b.onScroll,className:e.popoverOptions,onClick:h,children:i?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Loading..."})]}):d.length===0?jsx("div",{className:e.noResults,children:"No options found"}):jsx("div",{style:{height:b.totalHeight,position:"relative"},children:b.visibleItems.map(({index:T,offsetTop:f})=>{let m=d[T],D=s.has(m);return jsxs("label",{className:e.popoverOption,style:{position:"absolute",top:f,width:"100%",height:Je,boxSizing:"border-box",display:"flex",alignItems:"center"},children:[jsx("input",{type:"checkbox",checked:D,onChange:l=>{l.stopPropagation(),p(m,l.target.checked);},className:e.nativeCheckbox}),jsx("span",{className:e.checkboxLabel,children:m})]},m)})})}),jsxs("div",{className:e.popoverActions,onClick:h,children:[jsx("button",{type:"button",className:e.clearButton,onClick:c,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:C,children:"Apply"})]})]})};ye.displayName="MultiSelectFilterPopover";function Qe(r){let t=r.trim().split(/\s+/);return t.length>=2?(t[0][0]+t[t.length-1][0]).toUpperCase():(t[0]?.[0]??"").toUpperCase()}var Se=({selectedUser:r,searchText:t,onSearchChange:n,suggestions:d,isLoading:s,onUserSelect:p,onClearUser:g,onPopoverClick:c,inputRef:C})=>jsxs(Fragment,{children:[r&&jsxs("div",{className:e.selectedUserSection,onClick:c,children:[jsx("div",{className:e.selectedUserLabel,children:"Currently filtered by:"}),jsxs("div",{className:e.selectedUser,children:[jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:r.photo?jsx("img",{src:r.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(r.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:r.displayName}),jsx("div",{className:e.userSecondary,children:r.email})]})]}),jsx("button",{type:"button",className:e.removeUserButton,onClick:g,"aria-label":"Remove filter",children:jsx(FilterRegular,{})})]})]}),jsx("div",{className:e.popoverSearch,onClick:c,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{ref:C,type:"text",placeholder:"Search for a person...",value:t,onChange:i=>n(i.target.value),onFocus:i=>i.stopPropagation(),onMouseDown:i=>i.stopPropagation(),onClick:i=>i.stopPropagation(),onKeyDown:i=>i.stopPropagation(),autoComplete:"off",className:e.nativeInput})]})}),jsx("div",{className:e.popoverOptions,onClick:c,children:s&&t.trim()?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Searching..."})]}):d.length===0&&t.trim()?jsx("div",{className:e.noResults,children:"No results found"}):t.trim()?d.map(i=>jsx("div",{className:e.personOption,onClick:h=>{h.stopPropagation(),p(i);},children:jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:i.photo?jsx("img",{src:i.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(i.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:i.displayName}),jsx("div",{className:e.userSecondary,children:i.email})]})]})},i.id??i.email??i.displayName)):jsx("div",{className:e.noResults,children:"Type to search..."})}),r&&jsx("div",{className:e.popoverActions,onClick:c,children:jsx("button",{type:"button",className:e.clearButton,onClick:g,children:"Clear Filter"})})]});Se.displayName="PeopleFilterPopover";var ae=q.memo(r=>{let{columnName:t,filterType:n,options:d,isLoadingOptions:s=false,selectedUser:p}=r,g=useColumnHeaderFilterState(getColumnHeaderFilterStateParams(r)),{headerRef:c,popoverRef:C,isFilterOpen:i,setFilterOpen:h,hasActiveFilter:R,handlers:G}=g,{handlePopoverClick:S,handleInputFocus:x,handleInputMouseDown:b,handleInputClick:T,handleInputKeyDown:f}=G,m=q.useRef(null),D=q.useMemo(()=>({renderMultiSelect:l=>jsx(ye,{searchText:l.searchText,onSearchChange:l.onSearchChange,options:l.options,filteredOptions:l.filteredOptions,selected:l.selected,onOptionToggle:l.onOptionToggle,onSelectAll:l.onSelectAll,onClearSelection:l.onClearSelection,onApply:l.onApply,isLoading:l.isLoading,onPopoverClick:S,onInputFocus:x,onInputMouseDown:b,onInputClick:T,onInputKeyDown:f}),renderText:l=>jsx(Te,{value:l.value,onValueChange:l.onValueChange,onApply:l.onApply,onClear:l.onClear,onPopoverClick:S,onInputFocus:x,onInputMouseDown:b,onInputClick:T,onInputKeyDown:f}),renderPeople:l=>jsx(Se,{selectedUser:l.selectedUser,searchText:l.searchText,onSearchChange:l.onSearchChange,suggestions:l.suggestions,isLoading:l.isLoading,onUserSelect:l.onUserSelect,onClearUser:l.onClearUser,onPopoverClick:S,inputRef:l.inputRef}),renderDate:l=>jsx("div",{onClick:S,children:jsx(DateFilterContent,{tempDateFrom:l.tempDateFrom,setTempDateFrom:l.setTempDateFrom,tempDateTo:l.tempDateTo,setTempDateTo:l.setTempDateTo,onApply:l.onApply,onClear:l.onClear,classNames:{popoverActions:e.popoverActions,clearButton:e.clearButton,applyButton:e.applyButton}})})}),[S,x,b,T,f]);return jsxs("div",{className:e.columnHeader,ref:c,children:[jsx("div",{className:e.headerContent,children:jsx("span",{className:e.columnName,title:t,"data-header-label":true,children:t})}),jsx("div",{className:e.headerActions,children:n!=="none"&&jsxs(Fragment,{children:[jsxs("button",{ref:m,type:"button",className:`${e.filterIcon} ${R?e.filterActive:""} ${i?e.filterOpen:""}`,onClick:G.handleFilterIconClick,"aria-label":`Filter ${t}`,"aria-expanded":i,"aria-haspopup":"dialog",title:`Filter ${t}`,children:[jsx(FilterRegular,{}),R&&jsx("span",{className:e.filterBadge})]}),jsx(Popover,{open:i,onOpenChange:(l,A)=>{A.open||h(false);},positioning:{target:m.current??void 0,position:"below",align:"start",offset:4},trapFocus:false,children:jsxs(PopoverSurface,{ref:C,className:e.filterPopover,onClick:G.handlePopoverClick,style:{padding:0},children:[jsxs("div",{className:e.popoverHeader,children:["Filter: ",t]}),renderFilterContent(n,g,d??[],s,p,D)]})})]})})]})});ae.displayName="ColumnHeaderFilter";var eo={content:"ogrid-fluent__ColumnHeaderMenu-module__content",item:"ogrid-fluent__ColumnHeaderMenu-module__item",separator:"ogrid-fluent__ColumnHeaderMenu-module__separator"};var or=r=>r.closest(".fui-FluentProvider")??document.body;function se(r){return jsx(BaseColumnHeaderMenu,{...r,classNames:eo,getPortalTarget:or})}function ro(r){return jsx(BaseInlineCellEditor,{...r,renderCheckbox:(t,n,d)=>jsx(Checkbox,{checked:t,onChange:(s,p)=>n(!!p.checked),onKeyDown:s=>s.key==="Escape"&&(s.preventDefault(),d())})})}var o={tableScrollContent:"ogrid-fluent__DataGridTable-module__tableScrollContent",tableWidthAnchor:"ogrid-fluent__DataGridTable-module__tableWidthAnchor",tableWrapper:"ogrid-fluent__DataGridTable-module__tableWrapper",dataTable:"ogrid-fluent__DataGridTable-module__dataTable",groupHeaderCell:"ogrid-fluent__DataGridTable-module__groupHeaderCell",headerCellContent:"ogrid-fluent__DataGridTable-module__headerCellContent",headerMenuTrigger:"ogrid-fluent__DataGridTable-module__headerMenuTrigger",dropIndicator:"ogrid-fluent__DataGridTable-module__dropIndicator",resizeHandle:"ogrid-fluent__DataGridTable-module__resizeHandle",pinnedColLeft:"ogrid-fluent__DataGridTable-module__pinnedColLeft",pinnedColRight:"ogrid-fluent__DataGridTable-module__pinnedColRight",cellContent:"ogrid-fluent__DataGridTable-module__cellContent",activeCellContent:"ogrid-fluent__DataGridTable-module__activeCellContent",editingCellContent:"ogrid-fluent__DataGridTable-module__editingCellContent",cellInRange:"ogrid-fluent__DataGridTable-module__cellInRange",inRange:"ogrid-fluent__DataGridTable-module__inRange",cellCut:"ogrid-fluent__DataGridTable-module__cellCut",fillHandle:"ogrid-fluent__DataGridTable-module__fillHandle",selectionHeaderCellInner:"ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",selectionCellInner:"ogrid-fluent__DataGridTable-module__selectionCellInner",rowNumberHeaderCellInner:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",rowNumberCellInner:"ogrid-fluent__DataGridTable-module__rowNumberCellInner",columnLetterRow:"ogrid-fluent__DataGridTable-module__columnLetterRow",columnLetterCell:"ogrid-fluent__DataGridTable-module__columnLetterCell",statusBar:"ogrid-fluent__DataGridTable-module__statusBar",statusBarItem:"ogrid-fluent__DataGridTable-module__statusBarItem",statusBarLabel:"ogrid-fluent__DataGridTable-module__statusBarLabel",statusBarValue:"ogrid-fluent__DataGridTable-module__statusBarValue",contextMenu:"ogrid-fluent__DataGridTable-module__contextMenu",contextMenuItem:"ogrid-fluent__DataGridTable-module__contextMenuItem",contextMenuItemLabel:"ogrid-fluent__DataGridTable-module__contextMenuItemLabel",contextMenuItemShortcut:"ogrid-fluent__DataGridTable-module__contextMenuItemShortcut",contextMenuDivider:"ogrid-fluent__DataGridTable-module__contextMenuDivider",loadingOverlay:"ogrid-fluent__DataGridTable-module__loadingOverlay",loadingOverlayContent:"ogrid-fluent__DataGridTable-module__loadingOverlayContent",loadingOverlayText:"ogrid-fluent__DataGridTable-module__loadingOverlayText",loadingDimmed:"ogrid-fluent__DataGridTable-module__loadingDimmed",emptyStateInGrid:"ogrid-fluent__DataGridTable-module__emptyStateInGrid",emptyStateInGridTitle:"ogrid-fluent__DataGridTable-module__emptyStateInGridTitle",emptyStateInGridMessage:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessage",emptyStateInGridLink:"ogrid-fluent__DataGridTable-module__emptyStateInGridLink",spinner:"ogrid-fluent__DataGridTable-module__spinner","ogrid-spin":"ogrid-fluent__DataGridTable-module__ogrid-spin",paginationNav:"ogrid-fluent__DataGridTable-module__paginationNav",paginationInfo:"ogrid-fluent__DataGridTable-module__paginationInfo",paginationSize:"ogrid-fluent__DataGridTable-module__paginationSize",leafHeaderCellSpan:"ogrid-fluent__DataGridTable-module__leafHeaderCellSpan",selectionHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper",selectionCellWrapper:"ogrid-fluent__DataGridTable-module__selectionCellWrapper",rowNumberHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper",rowNumberCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberCellWrapper",selectedRow:"ogrid-fluent__DataGridTable-module__selectedRow",selectableGrid:"ogrid-fluent__DataGridTable-module__selectableGrid",stickyHeader:"ogrid-fluent__DataGridTable-module__stickyHeader",emptyStateInGridMessageSticky:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky",emptyStateInGridIcon:"ogrid-fluent__DataGridTable-module__emptyStateInGridIcon","density-compact":"ogrid-fluent__DataGridTable-module__density-compact","density-comfortable":"ogrid-fluent__DataGridTable-module__density-comfortable"};var nr={statusBar:o.statusBar,statusBarItem:o.statusBarItem,statusBarLabel:o.statusBarLabel,statusBarValue:o.statusBarValue};function to(r){return jsx(StatusBar,{...r,classNames:nr})}var ur={contextMenu:o.contextMenu,contextMenuItem:o.contextMenuItem,contextMenuItemLabel:o.contextMenuItemLabel,contextMenuItemShortcut:o.contextMenuItemShortcut,contextMenuDivider:o.contextMenuDivider};function ao(r){return jsx(GridContextMenu,{...r,classNames:ur})}var cr={emptyStateInGrid:o.emptyStateInGrid,emptyStateInGridInner:o.emptyStateInGridMessageSticky,emptyStateInGridIcon:o.emptyStateInGridIcon,emptyStateInGridTitle:o.emptyStateInGridTitle,emptyStateInGridMessage:o.emptyStateInGridMessage,emptyStateInGridLink:o.emptyStateInGridLink};function lo({emptyState:r}){return jsx(BaseEmptyState,{emptyState:r,classNames:cr,icon:"\u{1F4CB}"})}var _r={loadingOverlay:o.loadingOverlay,loadingOverlayContent:o.loadingOverlayContent,spinner:o.spinner,loadingOverlayText:o.loadingOverlayText};function no({message:r}){return jsx(BaseLoadingOverlay,{message:r,classNames:_r})}function io({dropIndicatorX:r,wrapperLeft:t}){return jsx(BaseDropIndicator,{dropIndicatorX:r,wrapperLeft:t,className:o.dropIndicator})}var go={padding:0,border:"none"};function Xr(r){let{item:t,rowIndex:n,rowId:d,isSelected:s,visibleCols:p,columnMeta:g,renderCellContent:c,handleSingleRowClick:C,handleRowCheckboxChange:i,lastMouseShiftRef:h,hasCheckboxCol:R,hasRowNumbersCol:G,rowNumberOffset:S,leftSpacerWidth:x,rightSpacerWidth:b,globalColIndexMap:T,rowNumWidth:f}=r;return jsxs(TableRow,{className:s?o.selectedRow:void 0,"data-row-id":d,onClick:C,"aria-selected":s||void 0,children:[R&&jsx(TableCell,{className:o.selectionCellWrapper,children:jsx("div",{className:o.selectionCellInner,"data-row-index":n,"data-col-index":0,onClick:STOP_PROPAGATION,children:jsx(Checkbox,{checked:s,onChange:(m,D)=>{i(d,!!D.checked,n,h.current);},"aria-label":`Select row ${n+1}`})})}),G&&jsx(TableCell,{className:o.rowNumberCellWrapper,style:f?{width:f,minWidth:f,maxWidth:f}:void 0,children:jsx("div",{className:o.rowNumberCellInner,children:S+n+1})}),x!=null&&x>0&&jsx("td",{style:{...go,width:x,minWidth:x},"aria-hidden":true}),p.map((m,D)=>{let l=T?T[D]:D;return jsx(TableCell,{"data-column-id":m.columnId,className:g.cellClasses[m.columnId]||void 0,style:g.cellStyles[m.columnId],children:c(t,m,n,l)},m.columnId)}),b!=null&&b>0&&jsx("td",{style:{...go,width:b,minWidth:b},"aria-hidden":true})]})}var jr=q.memo(Xr,areGridRowPropsEqual);function Yr(r){let{virtualScrollEnabled:t,visibleRange:n,columnRange:d,items:s,getRowId:p,selectedRowIds:g,visibleCols:c,columnMeta:C,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:x,rowNumberOffset:b,selectionRange:T,activeCell:f,cutRange:m,copyRange:D,isDragging:l,editingCell:A,pinnedColumns:le,rowNumWidth:ce}=r,M=q.useMemo(()=>d?partitionColumnsForVirtualization(c,d,le):null,[c,d,le]),{rowCols:pe,globalColIndexMap:me,leftSpacerWidth:ne,rightSpacerWidth:_e}=q.useMemo(()=>{if(!M)return {rowCols:c,globalColIndexMap:void 0,leftSpacerWidth:void 0,rightSpacerWidth:void 0};let N=[...M.pinnedLeft,...M.virtualizedUnpinned,...M.pinnedRight],w=N.map(z=>c.indexOf(z));return {rowCols:N,globalColIndexMap:w,leftSpacerWidth:M.leftSpacerWidth,rightSpacerWidth:M.rightSpacerWidth}},[M,c]),Z=(N,w)=>{let z=p(N);return jsx(jr,{item:N,rowIndex:w,rowId:z,isSelected:g.has(z),visibleCols:pe,columnMeta:C,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:x,rowNumberOffset:b,selectionRange:T,activeCell:f,cutRange:m,copyRange:D,isDragging:l,editingRowId:A?.rowId??null,leftSpacerWidth:ne,rightSpacerWidth:_e,globalColIndexMap:me,rowNumWidth:ce},z)};return jsxs(TableBody,{children:[t&&n.offsetTop>0&&jsx("tr",{style:{height:n.offsetTop},"aria-hidden":true}),t?s.slice(n.startIndex,n.endIndex+1).map((N,w)=>Z(N,n.startIndex+w)):s.map((N,w)=>Z(N,w)),t&&n.offsetBottom>0&&jsx("tr",{style:{height:n.offsetBottom},"aria-hidden":true})]})}function qr(r){let t=useDataGridTableOrchestration({props:r}),{wrapperRef:n,tableContainerRef:d,lastMouseShiftRef:s,interaction:p,pinning:g,handleResizeStart:c,handleResizeDoubleClick:C,getColumnWidth:i,isReorderDragging:h,dropIndicatorX:R,handleHeaderMouseDown:G,virtualScrollEnabled:S,visibleRange:x,columnRange:b,onHorizontalScroll:T,items:f,getRowId:m,emptyState:D,rowSelection:l,isLoading:A,loadingMessage:le,ariaLabel:ce,ariaLabelledBy:M,visibleColumns:pe,columnOrder:me,columnReorder:ne,density:_e,rowHeight:Z,rowNumberOffset:N,headerRows:w,allowOverflowX:z,fitToContent:Fe,showColumnLetters:bo,editCallbacks:fe,interactionHandlers:He,cellDescriptorInputRef:Be,cellDescriptorCacheRef:Me,pendingEditorValueRef:ze,popoverAnchorElRef:be,handleSingleRowClick:Co,handlePasteVoid:vo,visibleCols:Ce,totalColCount:Oe,hasCheckboxCol:ie,hasRowNumbersCol:J,colOffset:Ee,containerWidth:ho,minTableWidth:Le,columnSizingOverrides:de,measuredColumnWidths:xo,selectedRowIds:Ue,handleRowCheckboxChange:To,handleSelectAll:yo,allSelected:So,someSelected:Do,editingCell:wo,setPopoverAnchorEl:Ae,cancelPopoverEdit:We,setActiveCell:Ve,selectionRange:W,hasCellSelection:ko,handleGridKeyDown:Io,handleFillHandleMouseDown:$e,handleCopy:Ro,handleCut:Go,cutRange:Ke,copyRange:Xe,canUndo:No,canRedo:Po,onUndo:Fo,onRedo:Ho,isDragging:je,menuPosition:ve,closeContextMenu:Bo,headerFilterInput:Mo,statusBarConfig:K,showEmptyInGrid:Q,onCellError:Ye,headerMenu:ee}=t,X=useColumnMeta({visibleCols:Ce,getColumnWidth:i,columnSizingOverrides:de,measuredColumnWidths:xo,pinnedColumns:g.pinnedColumns,leftOffsets:g.leftOffsets,rightOffsets:g.rightOffsets,pinnedColLeftClass:o.pinnedColLeft,pinnedColRightClass:o.pinnedColRight,addStickyPosition:true}),zo=useCallback((y,v,P,V)=>{let u=getCellRenderDescriptor(y,v,P,V,Be.current,Me.current),qe=m(y),j;if(u.mode==="editing-inline")j=jsx("div",{className:o.editingCellContent,children:jsx(ro,{...buildInlineEditorProps(y,v,u,fe)})});else if(u.mode==="editing-popover"&&typeof v.cellEditor=="function"){let k=buildPopoverEditorProps(y,v,u,ze.current,fe),he=v.cellEditor;j=jsxs(Fragment,{children:[jsx("div",{ref:oe=>{oe&&Ae(oe);},style:POPOVER_ANCHOR_STYLE,"aria-hidden":true}),jsx(Popover,{open:!!be.current,onOpenChange:(oe,ue)=>{ue.open||We();},positioning:{target:be.current??void 0},children:jsx(PopoverSurface,{children:jsx(he,{...k})})})]});}else {let k;if(u.columnType==="boolean")k=jsx("input",{type:"checkbox",checked:!!u.displayValue,disabled:true,style:{margin:0,pointerEvents:"none"},"aria-label":u.displayValue?"True":"False"});else {let ue=resolveCellDisplayContent(v,y,u.displayValue),Ze=resolveCellStyle(v,y,u.displayValue);k=Ze?jsx("span",{style:Ze,children:ue}):ue;}let he=`${o.cellContent}${u.isActive?` ${o.activeCellContent}`:""}${u.isActive&&u.isInRange?` ${o.inRange}`:""}${u.isInRange&&!u.isActive?` ${o.cellInRange}`:""}${u.isInCutRange?` ${o.cellCut}`:""}${u.isInCopyRange?` ${o.cellCopied}`:""}`,oe=getCellInteractionProps(u,v.columnId,He);j=jsxs("div",{className:he,...oe,style:u.canEditAny?CURSOR_CELL_STYLE:void 0,children:[k,u.canEditAny&&u.isSelectionEndCell&&jsx("div",{className:o.fillHandle,onPointerDown:$e,"aria-label":"Fill handle"})]});}return jsx(CellErrorBoundary,{onError:Ye,children:j},`${qe}-${v.columnId}`)},[fe,He,$e,Ae,We,m,Ye,Be,Me,ze,be]);return jsxs("div",{style:GRID_ROOT_STYLE,children:[jsxs("div",{ref:n,tabIndex:0,onMouseDown:y=>{s.current=y.shiftKey;},onScroll:T?y=>T(y.target.scrollLeft):void 0,className:`${o.tableWrapper} ${l!=="none"?o.selectableGrid:""} ${o[`density-${_e}`]||""}`,role:"region","aria-label":ce??(M?void 0:"Data grid"),"aria-labelledby":M,"data-empty":Q?"true":void 0,"data-loading":A&&f.length===0?"true":void 0,"data-column-count":Oe,"data-overflow-x":z?"true":"false","data-container-width":ho,"data-min-table-width":Math.round(Le),"data-has-selection":l!=="none"?"true":void 0,onContextMenu:PREVENT_DEFAULT,onKeyDown:Io,style:{"--data-table-column-count":Oe,"--data-table-width":Q?"100%":z||Fe?"fit-content":"100%","--data-table-min-width":Q?"100%":z||Fe?"max-content":"100%","--data-table-total-min-width":`${Le}px`,...Z?{"--ogrid-row-height":`${Z}px`}:{}},children:[jsx("div",{className:o.tableScrollContent,children:jsx("div",{className:A&&f.length>0?o.loadingDimmed:void 0,children:jsxs("div",{className:o.tableWidthAnchor,ref:d,children:[jsxs(Table,{role:"grid",className:o.dataTable,"data-virtual-scroll":S?"":void 0,children:[jsxs(TableHeader,{className:t.stickyHeader?o.stickyHeader:void 0,children:[bo&&jsxs(TableRow,{children:[ie&&jsx("th",{className:o.columnLetterCell}),J&&jsx("th",{className:o.columnLetterCell}),Ce.map((y,v)=>jsx("th",{className:`${o.columnLetterCell}${X.hdrClasses[y.columnId]?` ${X.hdrClasses[y.columnId]}`:""}`,style:X.hdrStyles[y.columnId],children:indexToColumnLetter(v)},y.columnId))]}),w.map((y,v)=>jsxs(TableRow,{children:[v===w.length-1&&ie&&jsx(TableHeaderCell,{className:o.selectionHeaderCellWrapper,children:jsx("div",{className:o.selectionHeaderCellInner,children:jsx(Checkbox,{checked:So?true:Do?"mixed":false,onChange:(P,V)=>yo(!!V.checked),"aria-label":"Select all rows"})})},"__selection__"),v===0&&v<w.length-1&&ie&&jsx("th",{rowSpan:w.length-1},"__selection_placeholder__"),v===w.length-1&&J&&(()=>{let P=de?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH;return jsxs(TableHeaderCell,{className:o.rowNumberHeaderCellWrapper,style:{width:P,minWidth:P,maxWidth:P},children:[jsx("div",{className:o.rowNumberHeaderCellInner,children:"#"}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical","aria-label":"Resize row number column",onPointerDown:V=>{Ve(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c(V,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}})]},"__row_number__")})(),v===0&&v<w.length-1&&J&&jsx("th",{rowSpan:w.length-1},"__row_number_placeholder__"),y.map((P,V)=>{if(P.isGroup)return jsx("th",{colSpan:P.colSpan,className:o.groupHeaderCell,scope:"colgroup",children:P.label},V);if(!P.columnDef)return null;let u=P.columnDef,j=r.sortBy===u.columnId?r.sortDirection==="asc"?"ascending":"descending":void 0;return jsxs(TableHeaderCell,{scope:"col","data-column-id":u.columnId,className:X.hdrClasses[u.columnId]||void 0,style:{...X.hdrStyles[u.columnId],...ne?{cursor:h?"grabbing":"grab"}:void 0},"aria-sort":j,onPointerDown:ne?k=>G(u.columnId,k):void 0,children:[jsxs("div",{className:o.headerCellContent,children:[jsx(ae,{...getHeaderFilterConfig(u,Mo)}),jsx("button",{className:o.headerMenuTrigger,onClick:k=>{k.stopPropagation(),ee.isOpen&&ee.openForColumn===u.columnId?ee.close():ee.open(u.columnId,k.currentTarget);},"aria-label":"Column options",title:"Column options",children:"\u22EE"})]}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical",onPointerDown:k=>{Ve(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c(k,u);},onDoubleClick:k=>C(k,u),"aria-label":`Resize ${u.name}`})]},u.columnId)})]},v))]}),!Q&&jsx(Yr,{virtualScrollEnabled:S,visibleRange:x,columnRange:b,items:f,getRowId:m,selectedRowIds:Ue,visibleCols:Ce,columnMeta:X,renderCellContent:zo,handleSingleRowClick:Co,handleRowCheckboxChange:To,lastMouseShiftRef:s,hasCheckboxCol:ie,hasRowNumbersCol:J,rowNumberOffset:N,selectionRange:W,activeCell:p.activeCell,cutRange:Ke,copyRange:Xe,isDragging:je,editingCell:wo,pinnedColumns:g.pinnedColumns,rowNumWidth:J?de?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH:void 0})]}),h&&R!=null&&jsx(io,{dropIndicatorX:R,wrapperLeft:n.current?.getBoundingClientRect().left??0}),jsx(MarchingAntsOverlay,{containerRef:d,selectionRange:W,copyRange:Xe,cutRange:Ke,colOffset:Ee,items:f,visibleColumns:pe,columnSizingOverrides:de,columnOrder:me,isDragging:je}),r.formulaReferences&&r.formulaReferences.length>0&&jsx(FormulaRefOverlay,{containerRef:d,references:r.formulaReferences,colOffset:Ee}),Q&&D&&jsx(lo,{emptyState:D})]})})}),ve&&createPortal(jsx(ao,{x:ve.x,y:ve.y,hasSelection:ko,canUndo:No,canRedo:Po,onUndo:Fo??NOOP,onRedo:Ho??NOOP,onCopy:Ro,onCut:Go,onPaste:vo,onSelectAll:t.interaction.handleSelectAllCells,onClose:Bo}),n.current?.closest(".fui-FluentProvider")??document.body),jsx(se,{...getColumnHeaderMenuProps(ee)})]}),K&&jsx(to,{totalCount:K.totalCount,filteredCount:K.filteredCount,selectedCount:K.selectedCount??Ue.size,selectedCellCount:W?(Math.abs(W.endRow-W.startRow)+1)*(Math.abs(W.endCol-W.startCol)+1):void 0,aggregation:K.aggregation,suppressRowCount:K.suppressRowCount}),A&&jsx(no,{message:le})]})}var Re=q.memo(qr);var $={container:"ogrid-fluent__ColumnChooser-module__container",dropdown:"ogrid-fluent__ColumnChooser-module__dropdown",header:"ogrid-fluent__ColumnChooser-module__header",optionsList:"ogrid-fluent__ColumnChooser-module__optionsList",optionItem:"ogrid-fluent__ColumnChooser-module__optionItem",actions:"ogrid-fluent__ColumnChooser-module__actions"};var lt=({columnId:r,columnName:t,checked:n,disabled:d,onChange:s})=>jsx(Checkbox,{id:`col-${r}`,label:t,checked:n,onChange:(p,g)=>s(g.checked===true),disabled:d}),nt=({onClearAll:r,onSelectAll:t})=>jsxs("div",{className:$.actions,children:[jsx(Button,{appearance:"subtle",size:"small",onClick:r,children:"Clear All"}),jsx(Button,{appearance:"primary",size:"small",onClick:t,children:"Select All"})]}),it={header:$.header,optionsList:$.optionsList,optionItem:$.optionItem},Pe=r=>{let{columns:t,visibleColumns:n,onVisibilityChange:d,onSetVisibleColumns:s,className:p}=r,g=useRef(null),c=useRef(null),{open:C,handleToggle:i,handleClose:h,handleCheckboxChange:R,handleSelectAll:G,handleClearAll:S,visibleCount:x,totalCount:b}=useColumnChooserState({columns:t,visibleColumns:n,onVisibilityChange:d,onSetVisibleColumns:s});useEffect(()=>{if(!C)return;let f=D=>{let l=D.target;c.current&&!c.current.contains(l)&&g.current&&!g.current.contains(l)&&h();},m=setTimeout(()=>{document.addEventListener("mousedown",f);},0);return ()=>{clearTimeout(m),document.removeEventListener("mousedown",f);}},[C,h]);let T=f=>m=>R(f)(m);return jsxs("div",{className:`${$.container} ${p||""}`,children:[jsxs(Button,{ref:g,appearance:"outline",icon:jsx(TableSettingsRegular,{}),onClick:i,"aria-expanded":C,"aria-haspopup":"listbox",children:["Column Visibility (",x," of ",b,")",C?jsx(ChevronUpRegular,{}):jsx(ChevronDownRegular,{})]}),C&&jsx("div",{ref:c,className:$.dropdown,children:jsx(ColumnChooserContent,{columns:t,visibleColumns:n,visibleCount:x,totalCount:b,handleSelectAll:G,handleClearAll:S,handleCheckboxChange:T,CheckboxItem:lt,classNames:it,Actions:nt})})]})};var B={pagination:"ogrid-fluent__PaginationControls-module__pagination",paginationInfo:"ogrid-fluent__PaginationControls-module__paginationInfo",paginationControls:"ogrid-fluent__PaginationControls-module__paginationControls",navBtn:"ogrid-fluent__PaginationControls-module__navBtn",pageNumbers:"ogrid-fluent__PaginationControls-module__pageNumbers",pageBtn:"ogrid-fluent__PaginationControls-module__pageBtn",ellipsis:"ogrid-fluent__PaginationControls-module__ellipsis",pageSizeSelector:"ogrid-fluent__PaginationControls-module__pageSizeSelector",pageSizeLabel:"ogrid-fluent__PaginationControls-module__pageSizeLabel",pageSizeSelect:"ogrid-fluent__PaginationControls-module__pageSizeSelect"};var mt={first:jsx(ChevronDoubleLeftRegular,{}),prev:jsx(ChevronLeftRegular,{}),next:jsx(ChevronRightRegular,{}),last:jsx(ChevronDoubleRightRegular,{})},_t=({variant:r,onClick:t,disabled:n,"aria-label":d,className:s})=>jsx(Button,{appearance:"outline",shape:"circular",size:"small",icon:mt[r],onClick:t,disabled:n,"aria-label":d,className:s}),ft=({onClick:r,active:t,"aria-label":n,"aria-current":d,children:s,className:p})=>jsx(Button,{appearance:t?"primary":"outline",size:"small",shape:"rounded",onClick:r,"aria-label":n,"aria-current":d,className:p,children:s}),bt=({value:r,options:t,onChange:n,"aria-label":d,className:s})=>{let p=(g,c)=>n(Number(c.value));return jsx(Select,{value:String(r),onChange:p,size:"small",appearance:"outline","aria-label":d,className:s,children:t.map(g=>jsx("option",{value:g,children:g},g))})},Ct={NavButton:_t,PageButton:ft,PageSizeSelect:bt},vt={pagination:B.pagination,paginationInfo:B.paginationInfo,paginationControls:B.paginationControls,pageNumbers:B.pageNumbers,ellipsis:B.ellipsis,navBtn:B.navBtn,pageBtn:B.pageBtn,pageSizeSelector:B.pageSizeSelector,pageSizeLabel:B.pageSizeLabel,pageSizeSelect:B.pageSizeSelect},ge=q.memo(r=>jsx(PaginationControlsBase,{...r,slots:Ct,classNames:vt}));ge.displayName="PaginationControls";var fo=createOGrid({DataGridTable:Re,ColumnChooser:Pe,PaginationControls:ge});export{Pe as ColumnChooser,ae as ColumnHeaderFilter,se as ColumnHeaderMenu,Re as DataGridTable,fo as OGrid,ge as PaginationControls};