impact-ui 4.0.1-alpha.20 → 4.0.1-alpha.21

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 (82) hide show
  1. package/dist/_virtual/index13.js +2 -2
  2. package/dist/_virtual/index14.js +2 -2
  3. package/dist/_virtual/index15.js +2 -2
  4. package/dist/_virtual/index16.js +2 -2
  5. package/dist/components/DateRangePicker/index.d.ts.map +1 -1
  6. package/dist/components/DateRangePicker/index.js +4 -0
  7. package/dist/components/Modal/Modal.types.d.ts +1 -1
  8. package/dist/components/Modal/Modal.types.d.ts.map +1 -1
  9. package/dist/components/Modal/index.js +1 -1
  10. package/dist/components/Notification/NotificationBody/NotificationList/NotificationListItem.d.ts.map +1 -1
  11. package/dist/components/Notification/NotificationBody/NotificationList/NotificationListItem.js +4 -1
  12. package/dist/components/Table/index.js +1 -1
  13. package/dist/components/TableChat/components/TableChatRightSection/ChatEditedMessageType /ChatEditedMessageType.d.ts.map +1 -0
  14. package/dist/components/TableChat/components/TableChatRightSection/ChatMessages/ChatMessage.js +1 -1
  15. package/dist/components/TableOld/index.js +1 -1
  16. package/dist/components/index.d.ts +0 -1
  17. package/dist/components/index.d.ts.map +1 -1
  18. package/dist/components/index.js +0 -2
  19. package/dist/mcp-component-registry.json +1 -1
  20. package/dist/node_modules/call-bind/index.js +1 -1
  21. package/dist/node_modules/hoist-non-react-statics/node_modules/react-is/index.js +1 -1
  22. package/dist/node_modules/is-symbol/index.js +1 -1
  23. package/dist/node_modules/react-with-styles-interface-css/dist/index.js +1 -1
  24. package/package.json +5 -5
  25. package/dist/components/TableChat/components/TableChatRightSection/ChatEditedMessageType/ChatEditedMessageType.d.ts.map +0 -1
  26. package/dist/components/TableV36/AdvanceSearchModalItem.d.ts +0 -27
  27. package/dist/components/TableV36/AdvanceSearchModalItem.d.ts.map +0 -1
  28. package/dist/components/TableV36/AdvanceSortModal.d.ts +0 -8
  29. package/dist/components/TableV36/AdvanceSortModal.d.ts.map +0 -1
  30. package/dist/components/TableV36/AdvanceSortModal.js +0 -297
  31. package/dist/components/TableV36/AgGridHeader.d.ts +0 -13
  32. package/dist/components/TableV36/AgGridHeader.d.ts.map +0 -1
  33. package/dist/components/TableV36/AgGridHeader.js +0 -781
  34. package/dist/components/TableV36/CommentsPortal.d.ts +0 -31
  35. package/dist/components/TableV36/CommentsPortal.d.ts.map +0 -1
  36. package/dist/components/TableV36/CommentsPortal.js +0 -362
  37. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModal.d.ts +0 -13
  38. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModal.d.ts.map +0 -1
  39. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModal.js +0 -282
  40. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModalItem.d.ts +0 -16
  41. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModalItem.d.ts.map +0 -1
  42. package/dist/components/TableV36/NewAdvanceSearchModal/NewAdvanceSearchModalItem.js +0 -302
  43. package/dist/components/TableV36/NoComments.d.ts +0 -16
  44. package/dist/components/TableV36/NoComments.d.ts.map +0 -1
  45. package/dist/components/TableV36/NoComments.js +0 -237
  46. package/dist/components/TableV36/Table.types.d.ts +0 -45
  47. package/dist/components/TableV36/Table.types.d.ts.map +0 -1
  48. package/dist/components/TableV36/actionBar.d.ts +0 -7
  49. package/dist/components/TableV36/actionBar.d.ts.map +0 -1
  50. package/dist/components/TableV36/actionBar.js +0 -31
  51. package/dist/components/TableV36/advanceSearchModal.d.ts +0 -20
  52. package/dist/components/TableV36/advanceSearchModal.d.ts.map +0 -1
  53. package/dist/components/TableV36/filterUtils.d.ts +0 -133
  54. package/dist/components/TableV36/filterUtils.d.ts.map +0 -1
  55. package/dist/components/TableV36/filterUtils.js +0 -478
  56. package/dist/components/TableV36/index.d.ts +0 -3
  57. package/dist/components/TableV36/index.d.ts.map +0 -1
  58. package/dist/components/TableV36/index.js +0 -1430
  59. package/dist/components/TableV36/mockData.d.ts +0 -39
  60. package/dist/components/TableV36/mockData.d.ts.map +0 -1
  61. package/dist/components/TableV36/tableFunctions.d.ts +0 -63
  62. package/dist/components/TableV36/tableFunctions.d.ts.map +0 -1
  63. package/dist/components/TableV36/tableFunctions.js +0 -1384
  64. package/dist/components/TableV36/tableHeader.d.ts +0 -80
  65. package/dist/components/TableV36/tableHeader.d.ts.map +0 -1
  66. package/dist/components/TableV36/tableHeader.js +0 -396
  67. package/dist/components/TableV36/tableIcons.d.ts +0 -3
  68. package/dist/components/TableV36/tableIcons.d.ts.map +0 -1
  69. package/dist/components/TableV36/tableMoreOptions.d.ts +0 -52
  70. package/dist/components/TableV36/tableMoreOptions.d.ts.map +0 -1
  71. package/dist/components/TableV36/tableMoreOptions.js +0 -324
  72. package/dist/components/TableV36/tablePagination.d.ts +0 -7
  73. package/dist/components/TableV36/tablePagination.d.ts.map +0 -1
  74. package/dist/components/TableV36/tablePagination.js +0 -67
  75. package/dist/components/TableV36/tableSettings.d.ts +0 -41
  76. package/dist/components/TableV36/tableSettings.d.ts.map +0 -1
  77. package/dist/components/TableV36/tableSettings.js +0 -278
  78. package/dist/components/TableV36/withCommentIcon.d.ts +0 -2
  79. package/dist/components/TableV36/withCommentIcon.d.ts.map +0 -1
  80. package/dist/components/TableV36/withCommentIcon.js +0 -83
  81. /package/dist/components/TableChat/components/TableChatRightSection/{ChatEditedMessageType → ChatEditedMessageType }/ChatEditedMessageType.d.ts +0 -0
  82. /package/dist/components/TableChat/components/TableChatRightSection/{ChatEditedMessageType → ChatEditedMessageType }/ChatEditedMessageType.js +0 -0
@@ -1,1384 +0,0 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
- import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from "react";
3
- import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter } from "@dnd-kit/core";
4
- import { SortableContext, arrayMove, useSortable } from "@dnd-kit/sortable";
5
- import { CSS } from "@dnd-kit/utilities";
6
- import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
7
- import default_1$3 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
8
- import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
9
- import default_1$2 from "../../node_modules/@mui/icons-material/Search.js";
10
- import { getAssetUrl } from "../../utils/assetBase.js";
11
- import { debounce } from "../../utils/debounce.js";
12
- import { isViewNameUnique } from "../../utils/helper.js";
13
- import { Badge } from "../Badge/index.js";
14
- import { Button } from "../Button/index.js";
15
- import { Checkbox } from "../Checkbox/index.js";
16
- import { Input } from "../Input/index.js";
17
- import { Modal } from "../Modal/index.js";
18
- import { Prompt } from "../Prompt/index.js";
19
- import { RadioButtonGroup } from "../RadioButtonGroup/index.js";
20
- import { Select } from "../Select/index.js";
21
- import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
22
- import DragIndicator from "../../node_modules/@mui/icons-material/esm/DragIndicator.js";
23
- const saveViewIcon = getAssetUrl("icons/saveViewIcon.svg");
24
- const saveViewEditIcon = getAssetUrl("icons/saveViewEditIcon.svg");
25
- const saveViewDeleteIcon = getAssetUrl("icons/saveViewDeleteIcon.svg");
26
- const defaultViewIcon = getAssetUrl("icons/defaultViewIcon.svg");
27
- const defaultViewActiveIcon = getAssetUrl("icons/defaultViewIconActive.svg");
28
- const globeIcon = getAssetUrl("icons/Globe.svg");
29
- const personUserIcon = getAssetUrl("icons/PersonUser.svg");
30
- const DEFAULT_VIEW_TYPE_ICONS = {
31
- global: /* @__PURE__ */ jsx("img", { alt: "", src: globeIcon }),
32
- personal: /* @__PURE__ */ jsx("img", { alt: "", src: personUserIcon })
33
- };
34
- const getViewTypeIcon = (viewType, viewTypeOptions) => {
35
- var _a;
36
- const customIcon = (_a = viewTypeOptions == null ? void 0 : viewTypeOptions.find((option) => option.value === viewType)) == null ? void 0 : _a.icon;
37
- return customIcon || DEFAULT_VIEW_TYPE_ICONS[viewType] || null;
38
- };
39
- const onColMenuFreezeClick = (params) => {
40
- const { pinned } = params.column;
41
- if (pinned) {
42
- freezeColumn(params, false);
43
- } else {
44
- freezeColumn(params, true);
45
- }
46
- };
47
- const getTableMeta = (api) => {
48
- if (!api) return null;
49
- if (!api.__impactTableMeta) {
50
- api.__impactTableMeta = {};
51
- }
52
- return api.__impactTableMeta;
53
- };
54
- const freezeColumn = (params, isPinned) => {
55
- const { colId } = params.column;
56
- params.api.applyColumnState({
57
- state: [{ colId, pinned: isPinned ? "left" : null }]
58
- });
59
- };
60
- const onColMenuAutoAdjustClick = (params) => {
61
- const colDefExtra = { ...params.column.colDef.extra };
62
- params.column.colDef.extra = colDefExtra;
63
- params.api.autoSizeColumns([params.column]);
64
- };
65
- const sortFunc = (columnData, sortBy, api) => {
66
- api.api.applyColumnState({
67
- state: [{ colId: columnData.colId, sort: sortBy }],
68
- defaultState: { sort: null }
69
- });
70
- };
71
- const getMainMenuItems = (params) => {
72
- var _a, _b, _c;
73
- if (!(params == null ? void 0 : params.column)) {
74
- return [];
75
- }
76
- const { onFontSizeChange, onNumberFormatChange } = params;
77
- const { colDef, pinned, sort, actualWidth } = params.column;
78
- const columnMenuItems = [];
79
- columnMenuItems.push(
80
- {
81
- name: "Column Settings",
82
- cssClasses: ["settings-main-container"]
83
- },
84
- "separator"
85
- );
86
- columnMenuItems.push({
87
- name: "Sort",
88
- subMenu: [
89
- {
90
- name: "Sort A to Z",
91
- action: () => {
92
- sortFunc(params.column, "asc", params);
93
- },
94
- checked: sort === "asc"
95
- },
96
- {
97
- name: "Sort Z to A",
98
- checked: sort === "desc",
99
- action: () => {
100
- sortFunc(params.column, "desc", params);
101
- }
102
- },
103
- {
104
- name: "Reset",
105
- action: () => {
106
- sortFunc(params.column, null, params);
107
- }
108
- }
109
- ],
110
- disabled: !(colDef == null ? void 0 : colDef.sortable)
111
- });
112
- columnMenuItems.push({
113
- name: pinned ? "Unfreeze Column" : "Freeze Column",
114
- action: () => {
115
- onColMenuFreezeClick(params);
116
- }
117
- });
118
- columnMenuItems.push({
119
- name: "Column width",
120
- subMenu: [
121
- {
122
- name: "Auto Adjust",
123
- action: () => {
124
- onColMenuAutoAdjustClick(params);
125
- },
126
- // if extra.width property is not present- column is auto adjusted
127
- checked: actualWidth !== ((_a = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a.width)
128
- },
129
- {
130
- name: "Custom width",
131
- action: () => {
132
- var _a2;
133
- params.api.setColumnWidths([
134
- { key: params.column.colId, newWidth: (_a2 = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a2.width }
135
- ]);
136
- },
137
- // if extra.width property is present- column has custom width
138
- checked: ((_b = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _b.width) === actualWidth,
139
- disabled: !((_c = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _c.width)
140
- }
141
- ]
142
- });
143
- columnMenuItems.push({
144
- name: "Wrap Text",
145
- disabled: true
146
- });
147
- columnMenuItems.push(
148
- {
149
- name: "Format",
150
- cssClasses: ["format-main-container"]
151
- },
152
- "separator"
153
- );
154
- columnMenuItems.push({
155
- name: "Numeric Values",
156
- subMenu: [
157
- {
158
- name: "Full Number",
159
- action: () => onNumberFormatChange("full")
160
- },
161
- {
162
- name: "In K",
163
- action: () => onNumberFormatChange("thousand")
164
- },
165
- {
166
- name: "In Mn",
167
- action: () => onNumberFormatChange("million")
168
- },
169
- {
170
- name: "In Bn",
171
- action: () => onNumberFormatChange("billion")
172
- }
173
- ],
174
- disabled: !onFontSizeChange
175
- });
176
- columnMenuItems.push({
177
- name: "Font Size",
178
- subMenu: [
179
- {
180
- name: "Small Font",
181
- action: () => onFontSizeChange("small")
182
- },
183
- {
184
- name: "Medium Font",
185
- action: () => onFontSizeChange("medium")
186
- },
187
- {
188
- name: "Large Font",
189
- action: () => onFontSizeChange("large")
190
- }
191
- ],
192
- disabled: !onNumberFormatChange
193
- });
194
- return columnMenuItems;
195
- };
196
- const SortableColumnItem = ({ column, level, renderFn, dragIconClass, onToggle, ...props }) => {
197
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
198
- id: column.colId
199
- });
200
- const style = {
201
- transform: CSS.Transform.toString(transform),
202
- transition,
203
- opacity: isDragging ? 0.5 : 1,
204
- // background: isDragging ? '#f0f0f0' : undefined,
205
- zIndex: isDragging ? 100 : void 0
206
- };
207
- return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, children: renderFn({
208
- column,
209
- level,
210
- dragProps: { ...attributes, ...listeners },
211
- dragIconClass,
212
- onToggle
213
- }) });
214
- };
215
- const Columns = forwardRef((props, ref) => {
216
- var _a, _b, _c, _d, _e, _f;
217
- const [searchText, setSearchText] = useState("");
218
- const [collapsedScrollable, setCollapsedScrollable] = useState(false);
219
- const [collapsedColumn, setCollapsedcolumn] = useState(false);
220
- const [frozenColumn, setFrozenColumn] = useState([]);
221
- const [scrollableColumn, setScrollableColumn] = useState([]);
222
- const [filteredFrozenColumns, setFilteredFrozenColumns] = useState([]);
223
- const [filteredScrollableColumns, setFilteredScrollableColumns] = useState([]);
224
- const [allColumnVisibility, setAllColumnvisisbility] = useState(true);
225
- const [mainChecked, setMainChecked] = useState(true);
226
- const [collapsedScrollColumns, setCollapsedScrollColumns] = useState({});
227
- const [collapsedFrozenColumns, setCollapsedFrozenColumns] = useState({});
228
- const [openSaveViewModal, setOpenSaveViewModal] = useState(false);
229
- const [isDefaultView, setIsDefaultView] = useState(false);
230
- const [selectedViewType, setSelectedViewType] = useState(
231
- (_a = props.saveViewCustomFilter) == null ? void 0 : _a.selectedOption
232
- );
233
- const [savedViewsOptions, setSavedViewsOptions] = useState(props.savedViewsOptions || []);
234
- const [filteredSavedViewsOptions, setFilteredSavedViewsOptions] = useState(
235
- props.savedViewsOptions || []
236
- );
237
- const [currentSaveViewOptions, setCurrentSaveViewOptions] = useState([]);
238
- const [selectedSavedView, setSelectedSavedView] = useState(null);
239
- const [inputValue, setInputValue] = useState("");
240
- const [isOpen, setIsOpen] = useState(false);
241
- const [openSaveViewMenu, setOpenSaveViewMenu] = useState(false);
242
- const [selectedBadge, setSelectedBadge] = useState("All");
243
- const [isEditView, setIsEditView] = useState(false);
244
- const [editedView, setEditedView] = useState(null);
245
- const [saveViewSearchText, setSaveViewSearchText] = useState("");
246
- const [openDeletePrompt, setOpenDeletePrompt] = useState(false);
247
- const [deleteView, setDeleteView] = useState(null);
248
- const [selectedView, setSelectedView] = useState(null);
249
- const isColumnPinnedRef = useRef(false);
250
- useEffect(() => {
251
- const views = props.savedViewsOptions ?? [];
252
- setSavedViewsOptions(views);
253
- setFilteredSavedViewsOptions(views);
254
- setSelectedView(views.filter((view) => view.isActive));
255
- if (views.length === 0) {
256
- setOpenSaveViewMenu(false);
257
- setSaveViewSearchText("");
258
- }
259
- const matchingViews = views.filter(
260
- (view) => !selectedViewType || view.viewType === selectedViewType
261
- );
262
- setCurrentSaveViewOptions(
263
- views.map((view) => {
264
- var _a2;
265
- return {
266
- label: /* @__PURE__ */ jsxs("span", { className: "save-view-select-option-label", children: [
267
- /* @__PURE__ */ jsx("span", { className: "save-view-select-option-icon", children: getViewTypeIcon(view.viewType, (_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.options) }),
268
- view.viewName
269
- ] }),
270
- value: view.viewName,
271
- disabled: view == null ? void 0 : view.isDisabled,
272
- viewType: view.viewType,
273
- isDefaultView: view.isDefaultView
274
- };
275
- })
276
- );
277
- setSelectedSavedView(
278
- (prev) => (prev == null ? void 0 : prev.value) && matchingViews.some((view) => view.viewName === prev.value) ? prev : null
279
- );
280
- }, [props.savedViewsOptions, selectedViewType]);
281
- useEffect(() => {
282
- if (selectedSavedView == null ? void 0 : selectedSavedView.value) {
283
- setInputValue(selectedSavedView.value);
284
- setSelectedViewType(selectedSavedView.viewType);
285
- setIsDefaultView(!!selectedSavedView.isDefaultView);
286
- } else {
287
- setInputValue("");
288
- setIsDefaultView(false);
289
- }
290
- }, [selectedSavedView]);
291
- const isReplaceViewSelected = !!(selectedSavedView == null ? void 0 : selectedSavedView.value);
292
- const isInputValueEmpty = !inputValue.trim();
293
- const getColumnDefs = useCallback((columns) => {
294
- return columns.map((column) => {
295
- if (column.children) {
296
- const updatedChildren = getColumnDefs(column.children);
297
- const allChildrenHidden = updatedChildren.every((child) => child.hide === true);
298
- return {
299
- ...column,
300
- children: updatedChildren,
301
- hide: allChildrenHidden
302
- };
303
- }
304
- return column;
305
- });
306
- }, []);
307
- const updateColumnState = useCallback(() => {
308
- var _a2, _b2;
309
- const getColumnState = (columns) => {
310
- return columns.map((column) => {
311
- var _a3;
312
- const columnState2 = {
313
- colId: column.colId || column.field || column.headerName,
314
- headerName: column.headerName || column.field || "N/A",
315
- isVisible: !(column == null ? void 0 : column.hide),
316
- isPinned: column.pinned ? true : false,
317
- children: ((_a3 = column == null ? void 0 : column.children) == null ? void 0 : _a3.length) > 0 ? getColumnState(column.children) : null,
318
- // Recursively handle child columns
319
- disabled: column == null ? void 0 : column.disableColumnCheckboxInSettings
320
- };
321
- return columnState2;
322
- });
323
- };
324
- const columnDefs = getColumnDefs(((_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api) == null ? void 0 : _b2.getColumnDefs()) || props.column);
325
- const columnState = getColumnState(columnDefs);
326
- const { frozColumn, scrollColumn } = (columnState || []).reduce(
327
- (acc, column) => {
328
- if (column.isPinned) {
329
- acc.frozColumn.push(column);
330
- } else {
331
- acc.scrollColumn.push(column);
332
- }
333
- return acc;
334
- },
335
- { frozColumn: [], scrollColumn: [] }
336
- );
337
- setFrozenColumn(frozColumn);
338
- setFilteredFrozenColumns(frozColumn);
339
- setScrollableColumn(scrollColumn);
340
- setFilteredScrollableColumns(scrollColumn);
341
- }, [getColumnDefs, ref, props.column]);
342
- const debouncedUpdateColumnState = useMemo(
343
- () => debounce(updateColumnState, 100),
344
- [updateColumnState]
345
- );
346
- useEffect(() => {
347
- var _a2, _b2, _c2, _d2, _e2, _f2;
348
- if (props.showMenu || isColumnPinnedRef.current) {
349
- isColumnPinnedRef.current = false;
350
- updateColumnState();
351
- const onColumnPinned = () => {
352
- isColumnPinnedRef.current = true;
353
- debouncedUpdateColumnState();
354
- };
355
- if (ref == null ? void 0 : ref.current) {
356
- (_b2 = (_a2 = ref.current) == null ? void 0 : _a2.api) == null ? void 0 : _b2.addEventListener("columnPinned", onColumnPinned);
357
- (_d2 = (_c2 = ref.current) == null ? void 0 : _c2.api) == null ? void 0 : _d2.addEventListener("columnMoved", onColumnPinned);
358
- (_f2 = (_e2 = ref.current) == null ? void 0 : _e2.api) == null ? void 0 : _f2.addEventListener("columnVisible", onColumnPinned);
359
- }
360
- return () => {
361
- var _a3, _b3, _c3, _d3, _e3, _f3;
362
- if (ref == null ? void 0 : ref.current) {
363
- (_b3 = (_a3 = ref.current) == null ? void 0 : _a3.api) == null ? void 0 : _b3.removeEventListener("columnPinned", onColumnPinned);
364
- (_d3 = (_c3 = ref.current) == null ? void 0 : _c3.api) == null ? void 0 : _d3.removeEventListener("columnMoved", onColumnPinned);
365
- (_f3 = (_e3 = ref.current) == null ? void 0 : _e3.api) == null ? void 0 : _f3.removeEventListener("columnVisible", onColumnPinned);
366
- }
367
- };
368
- }
369
- }, [props.showMenu]);
370
- const [frozenColumnOrder, setFrozenColumnOrder] = useState([]);
371
- const [scrollableColumnOrder, setScrollableColumnOrder] = useState([]);
372
- const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
373
- const getAllColumnIds = (columns) => {
374
- let ids = [];
375
- columns.forEach((col) => {
376
- ids.push(col.colId);
377
- if (col.children && col.children.length > 0) {
378
- ids = ids.concat(getAllColumnIds(col.children));
379
- }
380
- });
381
- return ids;
382
- };
383
- useEffect(() => {
384
- setFrozenColumnOrder(getAllColumnIds(filteredFrozenColumns));
385
- setScrollableColumnOrder(getAllColumnIds(filteredScrollableColumns));
386
- }, [filteredFrozenColumns, filteredScrollableColumns]);
387
- const handleSearchChange = (e) => {
388
- const searchText2 = e.target.value.toLowerCase();
389
- const filterColumns = (columns, searchText3) => {
390
- return columns.map((column) => {
391
- const matches = column.headerName.toLowerCase().includes(searchText3);
392
- const filteredChildren = column.children ? filterColumns(column.children, searchText3) : null;
393
- if (matches || (filteredChildren == null ? void 0 : filteredChildren.length) > 0) {
394
- return {
395
- ...column,
396
- children: filteredChildren,
397
- isVisible: column.isVisible
398
- };
399
- }
400
- return null;
401
- }).filter(Boolean);
402
- };
403
- const filteredFrozenColumns2 = filterColumns(frozenColumn, searchText2);
404
- const filteredScrollableColumns2 = filterColumns(scrollableColumn, searchText2);
405
- setSearchText(searchText2);
406
- setFilteredFrozenColumns(filteredFrozenColumns2);
407
- setFilteredScrollableColumns(filteredScrollableColumns2);
408
- };
409
- useEffect(() => {
410
- const isAnyScrollableColumnVisible = filteredScrollableColumns.some((column) => {
411
- if (column.children) {
412
- return column.children.some((child) => child.isVisible);
413
- }
414
- return column.isVisible;
415
- });
416
- const isAnyFrozenColumnVisible = filteredFrozenColumns.some((column) => {
417
- if (column.children) {
418
- return column.children.some((child) => child.isVisible);
419
- }
420
- return column.isVisible;
421
- });
422
- setMainChecked(isAnyScrollableColumnVisible);
423
- setAllColumnvisisbility(isAnyFrozenColumnVisible || isAnyScrollableColumnVisible);
424
- }, [filteredFrozenColumns, filteredScrollableColumns]);
425
- const toggleColumnVisibilityFrozen = (colId) => {
426
- const updateChildrenVisibility = (columns, parentVisibility = null) => columns.map((column) => {
427
- var _a2;
428
- const updatedChildren = column.children ? updateChildrenVisibility(column.children, parentVisibility) : null;
429
- (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api.setColumnsVisible([column.colId], parentVisibility);
430
- return {
431
- ...column,
432
- isVisible: parentVisibility,
433
- children: updatedChildren
434
- };
435
- });
436
- const updateVisibility = (columns, parentVisibility = null) => columns.map((column) => {
437
- var _a2, _b2;
438
- if (column.colId === colId) {
439
- const newVisibility = parentVisibility !== null ? parentVisibility : !column.isVisible;
440
- const updatedChildren = column.children ? updateChildrenVisibility(column.children, newVisibility) : null;
441
- (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api.setColumnsVisible([column.colId], newVisibility);
442
- return {
443
- ...column,
444
- isVisible: newVisibility,
445
- children: updatedChildren
446
- };
447
- }
448
- if (column.children) {
449
- const updatedChildren = updateVisibility(column.children);
450
- const isAnyChildVisible = updatedChildren.some((child) => child.isVisible);
451
- (_b2 = ref == null ? void 0 : ref.current) == null ? void 0 : _b2.api.setColumnsVisible([column.colId], isAnyChildVisible);
452
- return {
453
- ...column,
454
- isVisible: isAnyChildVisible,
455
- children: updatedChildren
456
- };
457
- }
458
- return column;
459
- });
460
- const updatedColumns = updateVisibility(filteredFrozenColumns);
461
- setFilteredFrozenColumns(updatedColumns);
462
- setFrozenColumn((prev) => {
463
- const updatedMap = Object.fromEntries(updatedColumns.map((col) => [col.colId, col]));
464
- const merged = prev.map((col) => updatedMap[col.colId] ? updatedMap[col.colId] : col);
465
- const prevColIds = new Set(prev.map((col) => col.colId));
466
- const newCols = updatedColumns.filter((col) => !prevColIds.has(col.colId));
467
- return [...merged, ...newCols];
468
- });
469
- };
470
- const toggleColumnVisibilityScroll = (colId) => {
471
- const updateChildrenVisibility = (columns, parentVisibility = null) => columns.map((column) => {
472
- var _a2;
473
- const updatedChildren = column.children ? updateChildrenVisibility(column.children, parentVisibility) : null;
474
- (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api.setColumnsVisible([column.colId], parentVisibility);
475
- return {
476
- ...column,
477
- isVisible: parentVisibility,
478
- children: updatedChildren
479
- };
480
- });
481
- const updateVisibility = (columns, parentVisibility = null) => columns.map((column) => {
482
- var _a2, _b2;
483
- if (column.colId === colId) {
484
- const newVisibility = parentVisibility !== null ? parentVisibility : !column.isVisible;
485
- const updatedChildren = column.children ? updateChildrenVisibility(column.children, newVisibility) : null;
486
- (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api.setColumnsVisible([column.colId], newVisibility);
487
- return {
488
- ...column,
489
- isVisible: newVisibility,
490
- children: updatedChildren
491
- };
492
- }
493
- if (column.children) {
494
- const updatedChildren = updateVisibility(column.children);
495
- const isAnyChildVisible = updatedChildren.some((child) => child.isVisible);
496
- (_b2 = ref == null ? void 0 : ref.current) == null ? void 0 : _b2.api.setColumnsVisible([column.colId], isAnyChildVisible);
497
- return {
498
- ...column,
499
- isVisible: isAnyChildVisible,
500
- children: updatedChildren
501
- };
502
- }
503
- return column;
504
- });
505
- const updatedColumns = updateVisibility(filteredScrollableColumns);
506
- setFilteredScrollableColumns(updatedColumns);
507
- setScrollableColumn((prev) => {
508
- const updatedMap = Object.fromEntries(updatedColumns.map((col) => [col.colId, col]));
509
- const merged = prev.map((col) => updatedMap[col.colId] ? updatedMap[col.colId] : col);
510
- const prevColIds = new Set(prev.map((col) => col.colId));
511
- const newCols = updatedColumns.filter((col) => !prevColIds.has(col.colId));
512
- return [...merged, ...newCols];
513
- });
514
- };
515
- const toggleScrollableCollapse = (e) => {
516
- e.stopPropagation();
517
- setCollapsedScrollable(!collapsedScrollable);
518
- };
519
- const toggleColumnCollapse = (e) => {
520
- e.stopPropagation();
521
- setCollapsedcolumn(!collapsedColumn);
522
- };
523
- const onMainCheckboxChange = () => {
524
- setMainChecked((prev) => !prev);
525
- const updateVisibility = (columns, visibility) => {
526
- return columns.map((column) => {
527
- var _a2, _b2;
528
- (_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api) == null ? void 0 : _b2.setColumnsVisible([column.colId], visibility);
529
- if (column.children) {
530
- updateVisibility(column.children, visibility);
531
- }
532
- return {
533
- ...column,
534
- isVisible: visibility,
535
- children: column.children ? updateVisibility(column.children, visibility) : null
536
- };
537
- });
538
- };
539
- const updatedColumns = updateVisibility(filteredScrollableColumns, !mainChecked);
540
- setFilteredScrollableColumns(updatedColumns);
541
- setScrollableColumn((prev) => {
542
- const updatedMap = Object.fromEntries(updatedColumns.map((col) => [col.colId, col]));
543
- const merged = prev.map((col) => updatedMap[col.colId] ? updatedMap[col.colId] : col);
544
- const prevColIds = new Set(prev.map((col) => col.colId));
545
- const newCols = updatedColumns.filter((col) => !prevColIds.has(col.colId));
546
- return [...merged, ...newCols];
547
- });
548
- };
549
- const onAllColumnCheckBoxChange = () => {
550
- setAllColumnvisisbility((prev) => !prev);
551
- setMainChecked(!allColumnVisibility);
552
- const updateColumnVisibility = (columns, visibility) => {
553
- return columns.map((column) => {
554
- var _a2, _b2;
555
- (_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api) == null ? void 0 : _b2.setColumnsVisible([column.colId], visibility);
556
- if (column.children) {
557
- updateColumnVisibility(column.children, visibility);
558
- }
559
- return {
560
- ...column,
561
- isVisible: visibility,
562
- children: column.children ? updateColumnVisibility(column.children, visibility) : null
563
- };
564
- });
565
- };
566
- const updatedFrozenColumns = updateColumnVisibility(
567
- filteredFrozenColumns,
568
- !allColumnVisibility
569
- );
570
- const updatedScrollableColumns = updateColumnVisibility(
571
- filteredScrollableColumns,
572
- !allColumnVisibility
573
- );
574
- setFilteredFrozenColumns(updatedFrozenColumns);
575
- setFilteredScrollableColumns(updatedScrollableColumns);
576
- setFrozenColumn((prev) => {
577
- const updatedMap = Object.fromEntries(updatedFrozenColumns.map((col) => [col.colId, col]));
578
- const merged = prev.map((col) => updatedMap[col.colId] ? updatedMap[col.colId] : col);
579
- const prevColIds = new Set(prev.map((col) => col.colId));
580
- const newCols = updatedFrozenColumns.filter((col) => !prevColIds.has(col.colId));
581
- return [...merged, ...newCols];
582
- });
583
- setScrollableColumn((prev) => {
584
- const updatedMap = Object.fromEntries(
585
- updatedScrollableColumns.map((col) => [col.colId, col])
586
- );
587
- const merged = prev.map((col) => updatedMap[col.colId] ? updatedMap[col.colId] : col);
588
- const prevColIds = new Set(prev.map((col) => col.colId));
589
- const newCols = updatedScrollableColumns.filter((col) => !prevColIds.has(col.colId));
590
- return [...merged, ...newCols];
591
- });
592
- };
593
- const toggleScrollColumnCollapse = (colId) => {
594
- setCollapsedScrollColumns((prev) => ({
595
- ...prev,
596
- [colId]: !prev[colId]
597
- // Toggle collapse state for the specific column
598
- }));
599
- };
600
- const toggleFrozenColumnCollapse = (colId) => {
601
- setCollapsedFrozenColumns((prev) => ({
602
- ...prev,
603
- [colId]: !prev[colId]
604
- // Toggle collapse state for the specific frozen column
605
- }));
606
- };
607
- const reorderColDefsByColId = (colDefs, newOrder, type = "scrollable") => {
608
- const reorder = (columns) => {
609
- let filteredCols = [];
610
- if (type === "frozen") {
611
- filteredCols = columns.filter((col) => col.pinned === "left");
612
- } else {
613
- filteredCols = columns.filter((col) => col.pinned !== "left");
614
- }
615
- const sorted = [...filteredCols].filter((col) => newOrder.includes(col.colId || col.field || col.headerName)).sort(
616
- (a, b) => newOrder.indexOf(a.colId || a.field || a.headerName) - newOrder.indexOf(b.colId || b.field || b.headerName)
617
- ).map((col) => {
618
- if (col.children && col.children.length > 0) {
619
- return {
620
- ...col,
621
- children: reorder(col.children)
622
- };
623
- }
624
- return col;
625
- });
626
- return sorted;
627
- };
628
- let otherCols = [];
629
- if (type === "frozen") {
630
- otherCols = colDefs.filter((col) => col.pinned !== "left");
631
- } else {
632
- otherCols = colDefs.filter((col) => col.pinned === "left");
633
- }
634
- return [...otherCols, ...reorder(colDefs)];
635
- };
636
- const updateColumnDefs = (order, type, movedId, pinDirection) => {
637
- var _a2, _b2, _c2, _d2;
638
- const colDefs = (_b2 = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api) == null ? void 0 : _b2.getColumnDefs();
639
- if (!colDefs) return;
640
- const newColDefs = reorderColDefsByColId(colDefs, order, type);
641
- if (movedId) {
642
- const colDefToUpdate = newColDefs.find((c) => c.colId === movedId);
643
- if (colDefToUpdate) {
644
- colDefToUpdate.pinned = pinDirection;
645
- }
646
- }
647
- (_d2 = (_c2 = ref == null ? void 0 : ref.current) == null ? void 0 : _c2.api) == null ? void 0 : _d2.setGridOption("columnDefs", newColDefs);
648
- };
649
- const handleDragEnd = (event) => {
650
- const { active, over } = event;
651
- if (!over) return;
652
- const activeId = active.id;
653
- const overId = over.id;
654
- const isFrozenSource = frozenColumnOrder.includes(activeId);
655
- const isFrozenTarget = frozenColumnOrder.includes(overId);
656
- if (isFrozenSource && isFrozenTarget) {
657
- const oldIndex = frozenColumnOrder.indexOf(activeId);
658
- const newIndex = frozenColumnOrder.indexOf(overId);
659
- const newOrder = arrayMove(frozenColumnOrder, oldIndex, newIndex);
660
- setFrozenColumnOrder(newOrder);
661
- const reordered = newOrder.map((id) => {
662
- frozenColumn.find((c) => c.colId === id);
663
- }).filter(Boolean);
664
- setFrozenColumn(reordered);
665
- setFilteredFrozenColumns(reordered);
666
- updateColumnDefs(newOrder, "frozen");
667
- } else if (!isFrozenSource && !isFrozenTarget) {
668
- const oldIndex = scrollableColumnOrder.indexOf(activeId);
669
- const newIndex = scrollableColumnOrder.indexOf(overId);
670
- const newOrder = arrayMove(scrollableColumnOrder, oldIndex, newIndex);
671
- setScrollableColumnOrder(newOrder);
672
- const reordered = newOrder.map((id) => {
673
- filteredScrollableColumns.find((c) => c.colId === id);
674
- }).filter(Boolean);
675
- setScrollableColumn(reordered);
676
- setFilteredScrollableColumns(reordered);
677
- updateColumnDefs(newOrder, "scrollable");
678
- } else {
679
- if (isFrozenSource) {
680
- const updatedFrozenOrder = frozenColumnOrder.filter((id) => id !== activeId);
681
- const updatedFrozenCols = updatedFrozenOrder.map((id) => {
682
- frozenColumn.find((c) => c.colId === id);
683
- }).filter(Boolean);
684
- setFrozenColumnOrder(updatedFrozenOrder);
685
- setFrozenColumn(updatedFrozenCols);
686
- setFilteredFrozenColumns(updatedFrozenCols);
687
- const overIndex = scrollableColumnOrder.findIndex((id) => id === overId);
688
- const insertAt = overIndex === -1 ? scrollableColumnOrder.length : overIndex;
689
- const newScrollableOrder = [...scrollableColumnOrder];
690
- newScrollableOrder.splice(insertAt, 0, activeId);
691
- const allColumns = [...filteredFrozenColumns, ...filteredScrollableColumns];
692
- const updatedScrollableCols = newScrollableOrder.map((id) => {
693
- allColumns.find((c) => c.colId === id);
694
- }).filter(Boolean);
695
- setScrollableColumnOrder(newScrollableOrder);
696
- setScrollableColumn(updatedScrollableCols);
697
- setFilteredScrollableColumns(updatedScrollableCols);
698
- updateColumnDefs(newScrollableOrder, "scrollable", activeId, null);
699
- } else {
700
- const newScrollable = scrollableColumnOrder.filter((id) => id !== activeId);
701
- const updatedScrollable = newScrollable.map((id) => {
702
- scrollableColumn.find((c) => c.colId === id);
703
- }).filter(Boolean);
704
- setScrollableColumnOrder(newScrollable);
705
- setScrollableColumn(updatedScrollable);
706
- setFilteredScrollableColumns(updatedScrollable);
707
- const overIndex = frozenColumnOrder.findIndex((id) => id === overId);
708
- const insertAt = overIndex === -1 ? frozenColumnOrder.length : overIndex;
709
- const newFrozen = [...frozenColumnOrder];
710
- newFrozen.splice(insertAt, 0, activeId);
711
- const newFrozenCols = newFrozen.map((id) => {
712
- [...filteredFrozenColumns, ...filteredScrollableColumns].find((c) => c.colId === id);
713
- }).filter(Boolean);
714
- setFrozenColumnOrder(newFrozen);
715
- setFrozenColumn(newFrozenCols);
716
- setFilteredFrozenColumns(newFrozenCols);
717
- updateColumnDefs(newFrozen, "frozen", activeId, "left");
718
- }
719
- }
720
- };
721
- const renderScrollColumn = (column, level = 0) => {
722
- const isCollapsed = collapsedScrollColumns[column.colId] || false;
723
- return /* @__PURE__ */ jsx(
724
- SortableColumnItem,
725
- {
726
- column,
727
- dragIconClass: "table-setting-scroll-columns-list-drag-icon",
728
- level,
729
- renderFn: ({ column: column2, level: level2, dragProps, dragIconClass, onToggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [
730
- /* @__PURE__ */ jsxs(
731
- "div",
732
- {
733
- className: "table-setting-scroll-inner-column",
734
- style: { marginLeft: `${level2 * 20}px` },
735
- children: [
736
- Array.isArray(column2.children) && column2.children.length > 0 && /* @__PURE__ */ jsx(
737
- IconButton,
738
- {
739
- style: { padding: "0px" },
740
- onClick: (e) => {
741
- e.stopPropagation();
742
- toggleScrollColumnCollapse(column2.colId);
743
- },
744
- children: isCollapsed ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {})
745
- }
746
- ),
747
- /* @__PURE__ */ jsx(
748
- Checkbox,
749
- {
750
- checked: column2.isVisible,
751
- disabled: column2.disabled,
752
- onChange: () => {
753
- toggleColumnVisibilityScroll(column2.colId);
754
- }
755
- }
756
- ),
757
- /* @__PURE__ */ jsx("span", { ...dragProps, style: { cursor: "grab", display: "inline-flex" }, children: /* @__PURE__ */ jsx(DragIndicator, { className: "table-setting-scroll-columns-list-drag-icon" }) }),
758
- column2.headerName.charAt(0).toUpperCase() + column2.headerName.slice(1)
759
- ]
760
- }
761
- ),
762
- Array.isArray(column2.children) && column2.children.length > 0 && !isCollapsed && /* @__PURE__ */ jsx(
763
- "div",
764
- {
765
- style: {
766
- marginLeft: "20px",
767
- display: "flex",
768
- flexDirection: "column",
769
- gap: "4px",
770
- marginTop: "4px"
771
- },
772
- children: column2.children.map((child) => /* @__PURE__ */ jsx("div", { children: renderScrollColumn(child, level2 + 1) }, child.colId))
773
- }
774
- )
775
- ] }),
776
- onToggle: toggleScrollColumnCollapse
777
- },
778
- column.colId
779
- );
780
- };
781
- const renderFrozencolumn = (column, level = 0) => {
782
- const isCollapsed = collapsedFrozenColumns[column.colId] || false;
783
- return /* @__PURE__ */ jsx(
784
- SortableColumnItem,
785
- {
786
- column,
787
- dragIconClass: "table-setting-frozen-columns-list-drag-icon",
788
- level,
789
- renderFn: ({ column: column2, level: level2, dragProps, dragIconClass, onToggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [
790
- /* @__PURE__ */ jsxs(
791
- "div",
792
- {
793
- className: "table-setting-frozen-columns-list-item",
794
- style: { marginLeft: `${level2 * 20}px` },
795
- children: [
796
- Array.isArray(column2.children) && column2.children.length > 0 && /* @__PURE__ */ jsx(
797
- IconButton,
798
- {
799
- style: { padding: "0px" },
800
- onClick: (e) => {
801
- e.stopPropagation();
802
- toggleFrozenColumnCollapse(column2.colId);
803
- },
804
- children: isCollapsed ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {})
805
- }
806
- ),
807
- /* @__PURE__ */ jsx(
808
- Checkbox,
809
- {
810
- checked: column2.isVisible,
811
- disabled: column2 == null ? void 0 : column2.disabled,
812
- onChange: () => {
813
- toggleColumnVisibilityFrozen(column2.colId);
814
- }
815
- }
816
- ),
817
- /* @__PURE__ */ jsx("span", { ...dragProps, style: { cursor: "grab", display: "inline-flex" }, children: /* @__PURE__ */ jsx(DragIndicator, { className: "table-setting-frozen-columns-list-drag-icon" }) }),
818
- column2.headerName.charAt(0).toUpperCase() + column2.headerName.slice(1)
819
- ]
820
- }
821
- ),
822
- Array.isArray(column2.children) && column2.children.length > 0 && !isCollapsed && /* @__PURE__ */ jsx(
823
- "div",
824
- {
825
- style: {
826
- marginLeft: "20px",
827
- display: "flex",
828
- flexDirection: "column",
829
- gap: "4px",
830
- marginTop: "4px"
831
- },
832
- children: column2.children.map((child) => /* @__PURE__ */ jsx("div", { children: renderFrozencolumn(child, level2 + 1) }, child.colId))
833
- }
834
- )
835
- ] }),
836
- onToggle: toggleFrozenColumnCollapse
837
- },
838
- column.colId
839
- );
840
- };
841
- const handleSaveAndApply = () => {
842
- var _a2, _b2;
843
- if (isEditView) {
844
- const newView2 = {
845
- ...editedView,
846
- viewName: inputValue,
847
- viewType: selectedViewType,
848
- isDefaultView,
849
- isActive: false
850
- };
851
- props.handleEditSaveView(newView2, editedView);
852
- if (!props.isSavingViewLoading) {
853
- setIsEditView(false);
854
- setEditedView(null);
855
- setOpenSaveViewModal(false);
856
- setInputValue("");
857
- setSelectedViewType((_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.selectedOption);
858
- setIsDefaultView(false);
859
- }
860
- return;
861
- }
862
- const replaceViewName = selectedSavedView == null ? void 0 : selectedSavedView.value;
863
- const isReplacing = isInputValueEmpty && !!replaceViewName;
864
- const newView = {
865
- viewName: isReplacing ? replaceViewName : inputValue,
866
- viewType: selectedViewType,
867
- isDefaultView,
868
- isActive: true
869
- };
870
- const applyToViews = (prev) => isReplacing ? prev.map(
871
- (view) => view.viewName === replaceViewName && view.viewType === selectedViewType ? { ...view, ...newView } : { ...view, isActive: false }
872
- ) : [...prev.map((view) => ({ ...view, isActive: false })), newView];
873
- setSavedViewsOptions(applyToViews);
874
- setFilteredSavedViewsOptions(applyToViews);
875
- (_b2 = props.handleSaveAndApply) == null ? void 0 : _b2.call(props, newView, replaceViewName);
876
- };
877
- useEffect(() => {
878
- var _a2;
879
- if (!props.isSavingViewLoading) {
880
- setOpenSaveViewModal(false);
881
- setSelectedSavedView(null);
882
- setInputValue("");
883
- setSelectedViewType((_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.selectedOption);
884
- setIsDefaultView(false);
885
- setOpenDeletePrompt(false);
886
- setDeleteView(null);
887
- setEditedView(null);
888
- }
889
- }, [props.isSavingViewLoading]);
890
- const handleEditView = (view, e) => {
891
- e.stopPropagation();
892
- e.preventDefault();
893
- setIsEditView(true);
894
- setOpenSaveViewModal(true);
895
- setInputValue(view.viewName);
896
- setSelectedViewType(view.viewType);
897
- setIsDefaultView(view.isDefaultView);
898
- setEditedView(view);
899
- };
900
- const handleCloseSaveViewModal = () => {
901
- var _a2;
902
- setOpenSaveViewModal(false);
903
- setSelectedSavedView(null);
904
- setInputValue("");
905
- setSelectedViewType((_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.selectedOption);
906
- setIsDefaultView(false);
907
- setIsEditView(false);
908
- };
909
- const handleSaveViewSearchChange = (e) => {
910
- setSaveViewSearchText(e.target.value);
911
- const filteredViews = savedViewsOptions.filter(
912
- (view) => view.viewName.toLowerCase().includes(e.target.value.toLowerCase())
913
- );
914
- setFilteredSavedViewsOptions(filteredViews);
915
- };
916
- const handleDeleteView = (view, e) => {
917
- e.stopPropagation();
918
- e.preventDefault();
919
- setOpenDeletePrompt(true);
920
- setDeleteView(view);
921
- };
922
- useEffect(() => {
923
- if (!props.isDeleteViewLoading) {
924
- setOpenDeletePrompt(false);
925
- }
926
- }, [props.isDeleteViewLoading]);
927
- useEffect(() => {
928
- if (selectedBadge === "All") {
929
- setFilteredSavedViewsOptions([...savedViewsOptions]);
930
- } else {
931
- setFilteredSavedViewsOptions(
932
- savedViewsOptions.filter((view) => view.viewType === selectedBadge)
933
- );
934
- }
935
- }, [selectedBadge, savedViewsOptions]);
936
- const handleSaveViewClick = (view) => {
937
- setFilteredSavedViewsOptions(
938
- (prev) => prev.map((item) => {
939
- if (item.viewName === view.viewName) {
940
- return {
941
- ...item,
942
- isActive: true
943
- };
944
- }
945
- return {
946
- ...item,
947
- isActive: false
948
- };
949
- })
950
- );
951
- setSelectedView(view);
952
- };
953
- const nameConflictExcludeView = isEditView ? editedView : (selectedSavedView == null ? void 0 : selectedSavedView.value) ? {
954
- viewName: selectedSavedView.value,
955
- viewType: selectedSavedView.viewType
956
- } : null;
957
- const nameConflict = !props.isSavingViewLoading && !isInputValueEmpty && !isViewNameUnique(
958
- inputValue,
959
- selectedViewType,
960
- isDefaultView,
961
- savedViewsOptions,
962
- nameConflictExcludeView,
963
- props.isViewNameUniqueAcrossTypes
964
- );
965
- return /* @__PURE__ */ jsxs("div", { className: "table-setting-columns-settings", children: [
966
- props.isSaveViewEnabled && /* @__PURE__ */ jsxs("div", { className: "table-setting-save-view-container", children: [
967
- savedViewsOptions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "save-view-icon-title", children: [
968
- /* @__PURE__ */ jsx("img", { alt: "save-view-icon", src: saveViewIcon }),
969
- /* @__PURE__ */ jsx("span", { className: "save-view-title", children: "No views saved yet" })
970
- ] }) : /* @__PURE__ */ jsxs("div", { className: "save-view-container-active-view", children: [
971
- /* @__PURE__ */ jsx(
972
- Badge,
973
- {
974
- color: "success",
975
- label: `${((_b = savedViewsOptions.find((view) => view.isActive)) == null ? void 0 : _b.viewName) || "Not Applicable"}`,
976
- variant: "stroke"
977
- }
978
- ),
979
- /* @__PURE__ */ jsx(
980
- Button,
981
- {
982
- icon: openSaveViewMenu ? /* @__PURE__ */ jsx(default_1, {}) : /* @__PURE__ */ jsx(default_1$1, {}),
983
- size: "small",
984
- variant: "tertiary",
985
- onClick: () => {
986
- setOpenSaveViewMenu(!openSaveViewMenu);
987
- setFilteredSavedViewsOptions([...savedViewsOptions]);
988
- }
989
- }
990
- )
991
- ] }),
992
- /* @__PURE__ */ jsx(
993
- Button,
994
- {
995
- size: "small",
996
- variant: "tertiary",
997
- onClick: () => {
998
- setOpenSaveViewModal(true);
999
- },
1000
- children: "Save View"
1001
- }
1002
- )
1003
- ] }),
1004
- openSaveViewMenu && /* @__PURE__ */ jsxs("div", { className: "save-view-menu", children: [
1005
- /* @__PURE__ */ jsxs("div", { className: "save-view-menu-title", children: [
1006
- /* @__PURE__ */ jsx("span", { children: "Saved views" }),
1007
- /* @__PURE__ */ jsxs("div", { className: "save-view-menu-default-view", children: [
1008
- /* @__PURE__ */ jsx("img", { alt: "default-view-icon", src: defaultViewActiveIcon }),
1009
- /* @__PURE__ */ jsx("span", { className: "save-view-menu-default-view-text", children: "Default" })
1010
- ] })
1011
- ] }),
1012
- /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-type", children: [
1013
- /* @__PURE__ */ jsx(
1014
- Badge,
1015
- {
1016
- color: selectedBadge === "All" ? "info" : "default",
1017
- label: "All",
1018
- size: "small",
1019
- variant: "stroke",
1020
- onClick: () => {
1021
- setSelectedBadge("All");
1022
- setFilteredSavedViewsOptions([...savedViewsOptions]);
1023
- }
1024
- }
1025
- ),
1026
- (_d = (_c = props.saveViewCustomFilter) == null ? void 0 : _c.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ jsx(
1027
- Badge,
1028
- {
1029
- isIcon: true,
1030
- color: selectedBadge === option.value ? "info" : "default",
1031
- icon: getViewTypeIcon(option.value),
1032
- label: option.label,
1033
- size: "small",
1034
- variant: "stroke",
1035
- onClick: () => {
1036
- setSelectedBadge(option.value);
1037
- setFilteredSavedViewsOptions(
1038
- savedViewsOptions.filter((view) => view.viewType === option.value)
1039
- );
1040
- }
1041
- }
1042
- ))
1043
- ] }),
1044
- /* @__PURE__ */ jsx("div", { className: "save-view-menu-search-container", children: /* @__PURE__ */ jsx(
1045
- Input,
1046
- {
1047
- leftIcon: /* @__PURE__ */ jsx(default_1$2, {}),
1048
- placeholder: "Search here...",
1049
- value: saveViewSearchText,
1050
- onChange: handleSaveViewSearchChange
1051
- }
1052
- ) }),
1053
- /* @__PURE__ */ jsx("div", { className: "save-view-menu-view-list-container", children: props.customRenderSaveViewContent ? props.customRenderSaveViewContent : filteredSavedViewsOptions.length > 0 && filteredSavedViewsOptions.map((view, idx) => {
1054
- var _a2;
1055
- return /* @__PURE__ */ jsxs(
1056
- "div",
1057
- {
1058
- "aria-label": `Saved view ${view.viewName}`,
1059
- className: `save-view-menu-view-list-item ${view.isActive ? "active" : ""}`,
1060
- role: "button",
1061
- tabIndex: idx === 0 ? 0 : -1,
1062
- onClick: () => {
1063
- handleSaveViewClick(view);
1064
- },
1065
- onKeyDown: (e) => {
1066
- const current = e.currentTarget;
1067
- switch (e.key) {
1068
- case "Enter":
1069
- case " ":
1070
- e.preventDefault();
1071
- handleSaveViewClick(view);
1072
- break;
1073
- case "ArrowDown": {
1074
- e.preventDefault();
1075
- const next = current.nextElementSibling;
1076
- if (next) {
1077
- next.focus();
1078
- }
1079
- break;
1080
- }
1081
- case "ArrowUp": {
1082
- e.preventDefault();
1083
- const prev = current.previousElementSibling;
1084
- if (prev) {
1085
- prev.focus();
1086
- }
1087
- break;
1088
- }
1089
- }
1090
- },
1091
- children: [
1092
- /* @__PURE__ */ jsxs("span", { className: "save-view-menu-view-list-item-name", children: [
1093
- /* @__PURE__ */ jsx(
1094
- "span",
1095
- {
1096
- "aria-hidden": "true",
1097
- className: "save-view-menu-view-list-item-type-icon",
1098
- title: view.viewType,
1099
- children: getViewTypeIcon(view.viewType, (_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.options)
1100
- }
1101
- ),
1102
- /* @__PURE__ */ jsx("span", { className: "save-view-menu-view-list-item-name-text", children: view.viewName })
1103
- ] }),
1104
- /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-list-item-actions", children: [
1105
- (view == null ? void 0 : view.isEditable) && /* @__PURE__ */ jsx(
1106
- "img",
1107
- {
1108
- alt: "save-view-edit-icon",
1109
- src: saveViewEditIcon,
1110
- onClick: (e) => {
1111
- handleEditView(view, e);
1112
- }
1113
- }
1114
- ),
1115
- (view == null ? void 0 : view.isDeletable) && /* @__PURE__ */ jsx(
1116
- "img",
1117
- {
1118
- alt: "save-view-delete-icon",
1119
- src: saveViewDeleteIcon,
1120
- onClick: (e) => {
1121
- handleDeleteView(view, e);
1122
- }
1123
- }
1124
- ),
1125
- !(view == null ? void 0 : view.notReqDefaultView) && ((view == null ? void 0 : view.isDefaultView) ? /* @__PURE__ */ jsx(
1126
- "img",
1127
- {
1128
- alt: "default-view-icon",
1129
- className: "default-view-active-icon",
1130
- src: defaultViewActiveIcon,
1131
- onClick: (e) => {
1132
- e.stopPropagation();
1133
- e.preventDefault();
1134
- props.handleSetDefaultView(view);
1135
- }
1136
- }
1137
- ) : /* @__PURE__ */ jsx(
1138
- "img",
1139
- {
1140
- alt: "default-view-icon",
1141
- src: defaultViewIcon,
1142
- onClick: (e) => {
1143
- e.stopPropagation();
1144
- e.preventDefault();
1145
- props.handleSetDefaultView(view);
1146
- }
1147
- }
1148
- ))
1149
- ] })
1150
- ]
1151
- },
1152
- view.viewName + idx
1153
- );
1154
- }) }),
1155
- /* @__PURE__ */ jsx("hr", { className: "save-view-menu-view-list-item-divider" }),
1156
- /* @__PURE__ */ jsxs("div", { className: "save-view-menu-footer", children: [
1157
- /* @__PURE__ */ jsx(
1158
- Button,
1159
- {
1160
- size: "medium",
1161
- variant: "tertiary",
1162
- onClick: () => {
1163
- setOpenSaveViewMenu(false);
1164
- setFilteredSavedViewsOptions([...savedViewsOptions]);
1165
- },
1166
- children: "Cancel"
1167
- }
1168
- ),
1169
- /* @__PURE__ */ jsx(
1170
- Button,
1171
- {
1172
- disabled: props.customRenderSaveViewContent,
1173
- size: "medium",
1174
- variant: "primary",
1175
- onClick: () => {
1176
- var _a2;
1177
- (_a2 = props.handleSavedViewClick) == null ? void 0 : _a2.call(props, selectedView);
1178
- updateColumnState();
1179
- setOpenSaveViewMenu(false);
1180
- },
1181
- children: "Apply"
1182
- }
1183
- )
1184
- ] })
1185
- ] }),
1186
- /* @__PURE__ */ jsx(
1187
- Modal,
1188
- {
1189
- className: "save-view-modal",
1190
- height: "542px",
1191
- open: openSaveViewModal,
1192
- primaryButtonLabel: props.isSavingViewLoading ? "Saving..." : "Save",
1193
- primaryButtonProps: {
1194
- disabled: (isInputValueEmpty || props.maxSavedViews != null && savedViewsOptions.length >= props.maxSavedViews) && !isReplaceViewSelected || nameConflict || props.isSavingViewLoading,
1195
- loading: props.isSavingViewLoading,
1196
- iconPlacement: "right"
1197
- },
1198
- secondaryButtonLabel: "Cancel",
1199
- title: isEditView ? "Edit view" : "Save view",
1200
- width: "422px",
1201
- onClose: handleCloseSaveViewModal,
1202
- onPrimaryButtonClick: handleSaveAndApply,
1203
- onSecondaryButtonClick: handleCloseSaveViewModal,
1204
- children: /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children", children: [
1205
- props.maxSavedViews != null && /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-header", children: /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-header-text", children: `${props.maxSavedViews - savedViewsOptions.length}/${props.maxSavedViews} views remaining` }) }),
1206
- /* @__PURE__ */ jsxs(
1207
- "div",
1208
- {
1209
- className: `save-view-modal-children-body${props.maxSavedViews == null ? " save-view-modal-children-body-no-header" : ""}`,
1210
- children: [
1211
- /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-input", children: /* @__PURE__ */ jsx(
1212
- Input,
1213
- {
1214
- helperText: nameConflict ? "A view with this name already exists" : "",
1215
- isDisabled: isReplaceViewSelected,
1216
- isError: nameConflict,
1217
- isHelperText: nameConflict,
1218
- label: "New view name",
1219
- placeholder: "Enter here",
1220
- readOnly: isReplaceViewSelected,
1221
- value: inputValue,
1222
- onChange: (e) => {
1223
- setInputValue(e.target.value);
1224
- setSelectedSavedView(null);
1225
- }
1226
- }
1227
- ) }),
1228
- !isEditView && /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children-body-radio-group", children: [
1229
- /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-body-radio-group-text", children: "View type" }),
1230
- /* @__PURE__ */ jsx(
1231
- RadioButtonGroup,
1232
- {
1233
- isDisabled: isReplaceViewSelected,
1234
- options: (_f = (_e = props.saveViewCustomFilter) == null ? void 0 : _e.options) == null ? void 0 : _f.filter(
1235
- (option) => !(option == null ? void 0 : option.notReqInSaveView)
1236
- ),
1237
- orientation: "row",
1238
- selectedOption: selectedViewType,
1239
- onChange: (event) => {
1240
- setSelectedViewType(event.target.value);
1241
- }
1242
- }
1243
- )
1244
- ] }),
1245
- /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-checkbox", children: /* @__PURE__ */ jsx(
1246
- Checkbox,
1247
- {
1248
- checked: isDefaultView,
1249
- disabled: isReplaceViewSelected,
1250
- label: "Make it default view",
1251
- onChange: () => {
1252
- setIsDefaultView(!isDefaultView);
1253
- }
1254
- }
1255
- ) }),
1256
- /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view", children: /* @__PURE__ */ jsx("span", { children: "Or replace with saved view" }) }),
1257
- /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view-select", children: /* @__PURE__ */ jsx(
1258
- Select,
1259
- {
1260
- isClearable: true,
1261
- withPortal: true,
1262
- currentOptions: currentSaveViewOptions,
1263
- initialOptions: currentSaveViewOptions,
1264
- isDisabled: savedViewsOptions.length === 0 || !isInputValueEmpty && !isReplaceViewSelected || isEditView,
1265
- isOpen,
1266
- label: "Replace with",
1267
- minWidth: "100%",
1268
- selectedOptions: selectedSavedView,
1269
- setCurrentOptions: setCurrentSaveViewOptions,
1270
- setIsOpen,
1271
- setSelectedOptions: setSelectedSavedView
1272
- }
1273
- ) })
1274
- ]
1275
- }
1276
- )
1277
- ] })
1278
- }
1279
- ),
1280
- /* @__PURE__ */ jsx(
1281
- Prompt,
1282
- {
1283
- handleClose: (e) => {
1284
- e.stopPropagation();
1285
- setOpenDeletePrompt(false);
1286
- },
1287
- isOpen: openDeletePrompt,
1288
- primaryButtonLabel: "Yes,Delete",
1289
- primaryButtonProps: {
1290
- loading: props.isDeleteViewLoading,
1291
- iconPlacement: "right"
1292
- },
1293
- secondaryButtonLabel: "Cancel",
1294
- title: "Delete, Are you sure?",
1295
- variant: "error",
1296
- onPrimaryButtonClick: (e) => {
1297
- var _a2;
1298
- e.stopPropagation();
1299
- (_a2 = props.handleDeleteViewClick) == null ? void 0 : _a2.call(props, deleteView);
1300
- },
1301
- onSecondaryButtonClick: (e) => {
1302
- e.stopPropagation();
1303
- setOpenDeletePrompt(false);
1304
- },
1305
- children: props.deleteViewPromptText
1306
- }
1307
- ),
1308
- /* @__PURE__ */ jsxs("div", { className: "table-setting-column-search-container", children: [
1309
- /* @__PURE__ */ jsx(IconButton, { style: { padding: "5px" }, onClick: toggleColumnCollapse, children: collapsedColumn ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {}) }),
1310
- /* @__PURE__ */ jsx(Checkbox, { checked: allColumnVisibility, onChange: onAllColumnCheckBoxChange }),
1311
- /* @__PURE__ */ jsx(
1312
- Input,
1313
- {
1314
- placeholder: "Search",
1315
- rightIcon: /* @__PURE__ */ jsx(default_1$2, {}),
1316
- value: searchText,
1317
- onChange: handleSearchChange
1318
- }
1319
- )
1320
- ] }),
1321
- !collapsedColumn && /* @__PURE__ */ jsx(
1322
- "div",
1323
- {
1324
- className: `table-setting-column-collapse-container ${props.isSaveViewEnabled ? "save-view-enabled" : ""}`,
1325
- children: /* @__PURE__ */ jsx(
1326
- DndContext,
1327
- {
1328
- collisionDetection: closestCenter,
1329
- sensors,
1330
- onDragEnd: handleDragEnd,
1331
- children: /* @__PURE__ */ jsxs(SortableContext, { items: [...scrollableColumnOrder, ...frozenColumnOrder], children: [
1332
- frozenColumn.length > 0 && !(frozenColumn.length === 1 && frozenColumn[0].headerName === "N/A") && /* @__PURE__ */ jsxs("div", { className: "table-setting-collapse-columns-container", children: [
1333
- /* @__PURE__ */ jsx("h3", { children: "Frozen columns" }),
1334
- /* @__PURE__ */ jsx("div", { className: "table-setting-frozen-columns-list", children: filteredFrozenColumns.map(
1335
- (column) => column.headerName !== "N/A" && renderFrozencolumn(column)
1336
- ) })
1337
- ] }),
1338
- /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-columns-container", children: [
1339
- /* @__PURE__ */ jsx("h3", { children: "Scrollable Columns" }),
1340
- /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column-list", children: [
1341
- /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column", children: [
1342
- /* @__PURE__ */ jsx(IconButton, { style: { padding: "0px" }, onClick: toggleScrollableCollapse, children: collapsedScrollable ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {}) }),
1343
- /* @__PURE__ */ jsx(Checkbox, { checked: mainChecked, onChange: onMainCheckboxChange }),
1344
- "Main Column"
1345
- ] }),
1346
- /* @__PURE__ */ jsx("div", { className: "table-setting-scroll-inner-column-list", children: !collapsedScrollable && filteredScrollableColumns.map(
1347
- (column) => column.headerName !== "N/A" && renderScrollColumn(column)
1348
- ) })
1349
- ] })
1350
- ] })
1351
- ] })
1352
- }
1353
- )
1354
- }
1355
- )
1356
- ] });
1357
- });
1358
- const updateFontSizeOnToolPanel = (fontSizeType) => {
1359
- let fontSize;
1360
- switch (fontSizeType) {
1361
- case "small":
1362
- fontSize = "12px";
1363
- break;
1364
- case "medium":
1365
- fontSize = "14px";
1366
- break;
1367
- case "large":
1368
- fontSize = "16px";
1369
- break;
1370
- default:
1371
- fontSize = "14px";
1372
- }
1373
- return fontSize;
1374
- };
1375
- export {
1376
- Columns,
1377
- freezeColumn,
1378
- getMainMenuItems,
1379
- getTableMeta,
1380
- onColMenuAutoAdjustClick,
1381
- onColMenuFreezeClick,
1382
- sortFunc,
1383
- updateFontSizeOnToolPanel
1384
- };