@osdk/react-components 0.40.0 → 0.41.0-main-7e4163b0319ea02499200d07dc4969e11a5cb33c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/build/browser/object-table/ColumnConfigDialog.js +20 -15
- package/build/browser/object-table/ColumnConfigDialog.js.map +1 -1
- package/build/browser/object-table/EditableCell.js +4 -3
- package/build/browser/object-table/EditableCell.js.map +1 -1
- package/build/browser/object-table/MultiColumnSortDialog.js +15 -12
- package/build/browser/object-table/MultiColumnSortDialog.js.map +1 -1
- package/build/browser/object-table/ObjectTable.js +3 -1
- package/build/browser/object-table/ObjectTable.js.map +1 -1
- package/build/browser/object-table/ObjectTableApi.js.map +1 -1
- package/build/browser/object-table/ObjectTableLabels.js +130 -0
- package/build/browser/object-table/ObjectTableLabels.js.map +1 -0
- package/build/browser/object-table/SelectionCells.js +5 -2
- package/build/browser/object-table/SelectionCells.js.map +1 -1
- package/build/browser/object-table/Table.js +7 -3
- package/build/browser/object-table/Table.js.map +1 -1
- package/build/browser/object-table/TableEditContainer.js +8 -6
- package/build/browser/object-table/TableEditContainer.js.map +1 -1
- package/build/browser/object-table/TableHeaderWithPopover.js +11 -9
- package/build/browser/object-table/TableHeaderWithPopover.js.map +1 -1
- package/build/browser/object-table/components/AsyncValueCell.js +4 -2
- package/build/browser/object-table/components/AsyncValueCell.js.map +1 -1
- package/build/browser/public/experimental/object-table.js.map +1 -1
- package/build/browser/util/UserAgent.js +1 -1
- package/build/browser/util/UserAgent.js.map +1 -1
- package/build/cjs/chunk-323YOMG2.cjs +11 -0
- package/build/cjs/{chunk-4YFH7US6.cjs.map → chunk-323YOMG2.cjs.map} +1 -1
- package/build/cjs/{chunk-AY3WIKRW.cjs → chunk-4SGNGOAP.cjs} +490 -397
- package/build/cjs/chunk-4SGNGOAP.cjs.map +1 -0
- package/build/cjs/{chunk-5U23QYOL.cjs → chunk-6UIKJ4X4.cjs} +4 -4
- package/build/cjs/{chunk-5U23QYOL.cjs.map → chunk-6UIKJ4X4.cjs.map} +1 -1
- package/build/cjs/{chunk-PMQT5CIV.cjs → chunk-74V4AJ4A.cjs} +4 -4
- package/build/cjs/{chunk-PMQT5CIV.cjs.map → chunk-74V4AJ4A.cjs.map} +1 -1
- package/build/cjs/chunk-CWOMGAE4.cjs +11 -0
- package/build/cjs/{chunk-GNOUY65C.cjs.map → chunk-CWOMGAE4.cjs.map} +1 -1
- package/build/cjs/chunk-EMR3I6AL.cjs +11 -0
- package/build/cjs/{chunk-6U4W2HH5.cjs.map → chunk-EMR3I6AL.cjs.map} +1 -1
- package/build/cjs/{chunk-CEDJUDDR.cjs → chunk-GIKFNRWU.cjs} +4 -4
- package/build/cjs/{chunk-CEDJUDDR.cjs.map → chunk-GIKFNRWU.cjs.map} +1 -1
- package/build/cjs/{chunk-UQM4DWUN.cjs → chunk-GNXZZXHI.cjs} +3 -3
- package/build/cjs/chunk-GNXZZXHI.cjs.map +1 -0
- package/build/cjs/{chunk-ZKLRFU6R.cjs → chunk-JQAAJFKE.cjs} +4 -4
- package/build/cjs/{chunk-ZKLRFU6R.cjs.map → chunk-JQAAJFKE.cjs.map} +1 -1
- package/build/cjs/{chunk-IA32Z765.cjs → chunk-LIJJHXK6.cjs} +4 -4
- package/build/cjs/{chunk-IA32Z765.cjs.map → chunk-LIJJHXK6.cjs.map} +1 -1
- package/build/cjs/{chunk-MJC5CXYJ.cjs → chunk-LKDGFSTS.cjs} +4 -4
- package/build/cjs/{chunk-MJC5CXYJ.cjs.map → chunk-LKDGFSTS.cjs.map} +1 -1
- package/build/cjs/{chunk-PXCVMAUL.cjs → chunk-V2YDHJFF.cjs} +4 -4
- package/build/cjs/{chunk-PXCVMAUL.cjs.map → chunk-V2YDHJFF.cjs.map} +1 -1
- package/build/cjs/chunk-VOLJ5FDD.cjs +11 -0
- package/build/cjs/{chunk-XEDHHJ5U.cjs.map → chunk-VOLJ5FDD.cjs.map} +1 -1
- package/build/cjs/chunk-YXCVZKTN.cjs +11 -0
- package/build/cjs/{chunk-ACLCVBDB.cjs.map → chunk-YXCVZKTN.cjs.map} +1 -1
- package/build/cjs/public/experimental/action-form.cjs +4 -4
- package/build/cjs/public/experimental/cbac-picker.cjs +11 -11
- package/build/cjs/public/experimental/document-viewer.cjs +4 -4
- package/build/cjs/public/experimental/email-viewer.cjs +3 -3
- package/build/cjs/public/experimental/excel-viewer.cjs +3 -3
- package/build/cjs/public/experimental/filter-list.cjs +15 -15
- package/build/cjs/public/experimental/image-viewer.cjs +3 -3
- package/build/cjs/public/experimental/markdown-renderer.cjs +3 -3
- package/build/cjs/public/experimental/object-table.cjs +21 -21
- package/build/cjs/public/experimental/object-table.d.cts +136 -4
- package/build/cjs/public/experimental/pdf-viewer.cjs +7 -7
- package/build/cjs/public/experimental/tiff-renderer.cjs +3 -3
- package/build/cjs/public/experimental/video-viewer.cjs +3 -3
- package/build/cjs/public/experimental/xml-viewer.cjs +3 -3
- package/build/cjs/public/experimental.cjs +71 -71
- package/build/cjs/public/experimental.d.cts +1 -1
- package/build/esm/object-table/ColumnConfigDialog.js +20 -15
- package/build/esm/object-table/ColumnConfigDialog.js.map +1 -1
- package/build/esm/object-table/EditableCell.js +4 -3
- package/build/esm/object-table/EditableCell.js.map +1 -1
- package/build/esm/object-table/MultiColumnSortDialog.js +15 -12
- package/build/esm/object-table/MultiColumnSortDialog.js.map +1 -1
- package/build/esm/object-table/ObjectTable.js +3 -1
- package/build/esm/object-table/ObjectTable.js.map +1 -1
- package/build/esm/object-table/ObjectTableApi.js.map +1 -1
- package/build/esm/object-table/ObjectTableLabels.js +130 -0
- package/build/esm/object-table/ObjectTableLabels.js.map +1 -0
- package/build/esm/object-table/SelectionCells.js +5 -2
- package/build/esm/object-table/SelectionCells.js.map +1 -1
- package/build/esm/object-table/Table.js +7 -3
- package/build/esm/object-table/Table.js.map +1 -1
- package/build/esm/object-table/TableEditContainer.js +8 -6
- package/build/esm/object-table/TableEditContainer.js.map +1 -1
- package/build/esm/object-table/TableHeaderWithPopover.js +11 -9
- package/build/esm/object-table/TableHeaderWithPopover.js.map +1 -1
- package/build/esm/object-table/components/AsyncValueCell.js +4 -2
- package/build/esm/object-table/components/AsyncValueCell.js.map +1 -1
- package/build/esm/public/experimental/object-table.js.map +1 -1
- package/build/esm/util/UserAgent.js +1 -1
- package/build/esm/util/UserAgent.js.map +1 -1
- package/build/types/object-table/ColumnConfigDialog.d.ts +10 -1
- package/build/types/object-table/ColumnConfigDialog.d.ts.map +1 -1
- package/build/types/object-table/EditableCell.d.ts.map +1 -1
- package/build/types/object-table/MultiColumnSortDialog.d.ts +10 -1
- package/build/types/object-table/MultiColumnSortDialog.d.ts.map +1 -1
- package/build/types/object-table/ObjectTable.d.ts +1 -1
- package/build/types/object-table/ObjectTable.d.ts.map +1 -1
- package/build/types/object-table/ObjectTableApi.d.ts +9 -0
- package/build/types/object-table/ObjectTableApi.d.ts.map +1 -1
- package/build/types/object-table/ObjectTableLabels.d.ts +135 -0
- package/build/types/object-table/ObjectTableLabels.d.ts.map +1 -0
- package/build/types/object-table/SelectionCells.d.ts.map +1 -1
- package/build/types/object-table/Table.d.ts +7 -0
- package/build/types/object-table/Table.d.ts.map +1 -1
- package/build/types/object-table/TableEditContainer.d.ts.map +1 -1
- package/build/types/object-table/TableHeaderWithPopover.d.ts.map +1 -1
- package/build/types/object-table/components/AsyncValueCell.d.ts.map +1 -1
- package/build/types/public/experimental/object-table.d.ts +1 -0
- package/build/types/public/experimental/object-table.d.ts.map +1 -1
- package/docs/ObjectTable.md +1 -0
- package/package.json +6 -6
- package/build/cjs/chunk-4YFH7US6.cjs +0 -11
- package/build/cjs/chunk-6U4W2HH5.cjs +0 -11
- package/build/cjs/chunk-ACLCVBDB.cjs +0 -11
- package/build/cjs/chunk-AY3WIKRW.cjs.map +0 -1
- package/build/cjs/chunk-GNOUY65C.cjs +0 -11
- package/build/cjs/chunk-UQM4DWUN.cjs.map +0 -1
- package/build/cjs/chunk-XEDHHJ5U.cjs +0 -11
|
@@ -10,14 +10,14 @@ var chunkDWNKXV5E_cjs = require('./chunk-DWNKXV5E.cjs');
|
|
|
10
10
|
var chunkHNBSGCSZ_cjs = require('./chunk-HNBSGCSZ.cjs');
|
|
11
11
|
var chunk7LXS66DW_cjs = require('./chunk-7LXS66DW.cjs');
|
|
12
12
|
var chunkQP2LHBCZ_cjs = require('./chunk-QP2LHBCZ.cjs');
|
|
13
|
-
var
|
|
13
|
+
var chunkGNXZZXHI_cjs = require('./chunk-GNXZZXHI.cjs');
|
|
14
14
|
var reactTable = require('@tanstack/react-table');
|
|
15
|
-
var
|
|
15
|
+
var React17 = require('react');
|
|
16
16
|
var react = require('@osdk/react');
|
|
17
17
|
var classNames9 = require('classnames');
|
|
18
|
+
var lodashEs = require('lodash-es');
|
|
18
19
|
var icons = require('@blueprintjs/icons');
|
|
19
20
|
var input = require('@base-ui/react/input');
|
|
20
|
-
var lodashEs = require('lodash-es');
|
|
21
21
|
var collapsible = require('@base-ui/react/collapsible');
|
|
22
22
|
var sortable = require('@dnd-kit/sortable');
|
|
23
23
|
var button = require('@base-ui/react/button');
|
|
@@ -29,7 +29,7 @@ var reactDom = require('react-dom');
|
|
|
29
29
|
|
|
30
30
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var React17__default = /*#__PURE__*/_interopDefault(React17);
|
|
33
33
|
var classNames9__default = /*#__PURE__*/_interopDefault(classNames9);
|
|
34
34
|
|
|
35
35
|
// src/object-table/LoadingCell.module.css
|
|
@@ -40,19 +40,96 @@ var TableCell_default = {};
|
|
|
40
40
|
|
|
41
41
|
// src/object-table/LoadingCell.tsx
|
|
42
42
|
function LoadingCellContent() {
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunk7LXS66DW_cjs.SkeletonBar, {
|
|
44
44
|
className: classNames9__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
function LoadingCell({
|
|
48
48
|
width
|
|
49
49
|
}) {
|
|
50
|
-
return /* @__PURE__ */
|
|
50
|
+
return /* @__PURE__ */ React17__default.default.createElement("td", {
|
|
51
51
|
className: TableCell_default.osdkTableCell,
|
|
52
52
|
style: {
|
|
53
53
|
width
|
|
54
54
|
}
|
|
55
|
-
}, /* @__PURE__ */
|
|
55
|
+
}, /* @__PURE__ */ React17__default.default.createElement(LoadingCellContent, null));
|
|
56
|
+
}
|
|
57
|
+
var DEFAULT_OBJECT_TABLE_LABELS = {
|
|
58
|
+
noData: "No Data",
|
|
59
|
+
errorLoadingData: (errorMessage) => `Error Loading Data: ${errorMessage}`,
|
|
60
|
+
editFooterEditTable: "Edit Table",
|
|
61
|
+
editFooterSubmitEdits: "Submit Edits",
|
|
62
|
+
editFooterCancel: "Cancel",
|
|
63
|
+
editFooterSelectRowToEdit: "Select a row to edit data\u2026",
|
|
64
|
+
editFooterModificationCount: (count) => `${count} modifications`,
|
|
65
|
+
editFooterValidationError: "Validation error",
|
|
66
|
+
cellValidationError: "Validation error",
|
|
67
|
+
columnConfigTitle: "Configure Table Columns",
|
|
68
|
+
columnConfigCancel: "Cancel",
|
|
69
|
+
columnConfigApply: "Apply",
|
|
70
|
+
columnConfigVisibleColumns: "Visible Columns",
|
|
71
|
+
columnConfigDragToReorder: "Drag to reorder",
|
|
72
|
+
columnConfigAddOrRemoveColumns: "Add or Remove Columns",
|
|
73
|
+
columnConfigAllColumns: "All Columns",
|
|
74
|
+
columnConfigNoVisibleColumns: "No visible columns",
|
|
75
|
+
columnConfigNoMatchingColumns: "No matching columns found",
|
|
76
|
+
columnConfigSearchPlaceholder: "Search...",
|
|
77
|
+
columnConfigSearchAriaLabel: "Search available columns",
|
|
78
|
+
sortDialogTitle: "Sort on Multiple Columns",
|
|
79
|
+
sortDialogCancel: "Cancel",
|
|
80
|
+
sortDialogApply: "Apply",
|
|
81
|
+
sortDialogAddColumnToSort: "Add Column to Sort",
|
|
82
|
+
sortDialogSearchPlaceholder: "Search columns",
|
|
83
|
+
sortDialogNoMatchingColumns: "No matching columns",
|
|
84
|
+
sortDialogToggleDirection: (columnName) => `Toggle sort direction for ${columnName}`,
|
|
85
|
+
headerMenuPinColumn: "Pin column",
|
|
86
|
+
headerMenuUnpinColumn: "Unpin Column",
|
|
87
|
+
headerMenuSortAscending: "Sort ascending",
|
|
88
|
+
headerMenuSortDescending: "Sort descending",
|
|
89
|
+
headerMenuSortOnMultipleColumns: "Sort on multiple columns",
|
|
90
|
+
headerMenuClearAllSorts: "Clear all sorts",
|
|
91
|
+
headerMenuResetColumnSize: "Reset Column Size",
|
|
92
|
+
headerMenuConfigureColumns: "Configure Columns",
|
|
93
|
+
headerMenuAriaLabel: (columnId) => `Open header menu for column with id=${columnId}`,
|
|
94
|
+
cellError: "Error",
|
|
95
|
+
cellNoValue: "No value",
|
|
96
|
+
selectAllRows: "Select all rows",
|
|
97
|
+
deselectAllRows: "Deselect all rows",
|
|
98
|
+
selectRow: (rowNumber) => `Select row ${rowNumber}`
|
|
99
|
+
};
|
|
100
|
+
var ObjectTableLabelsContext = /* @__PURE__ */ React17.createContext(DEFAULT_OBJECT_TABLE_LABELS);
|
|
101
|
+
function ObjectTableLabelsProvider({
|
|
102
|
+
labels,
|
|
103
|
+
children
|
|
104
|
+
}) {
|
|
105
|
+
const parent = React17.useContext(ObjectTableLabelsContext);
|
|
106
|
+
const merged = labels != null ? {
|
|
107
|
+
...parent,
|
|
108
|
+
...labels
|
|
109
|
+
} : parent;
|
|
110
|
+
const stableRef = React17.useRef(merged);
|
|
111
|
+
if (!lodashEs.isEqual(stableRef.current, merged)) {
|
|
112
|
+
stableRef.current = merged;
|
|
113
|
+
}
|
|
114
|
+
return /* @__PURE__ */ React17__default.default.createElement(ObjectTableLabelsContext.Provider, {
|
|
115
|
+
value: stableRef.current
|
|
116
|
+
}, children);
|
|
117
|
+
}
|
|
118
|
+
function useObjectTableLabels() {
|
|
119
|
+
return React17.useContext(ObjectTableLabelsContext);
|
|
120
|
+
}
|
|
121
|
+
function withObjectTableLabels(Inner) {
|
|
122
|
+
function LabelledComponent(props) {
|
|
123
|
+
const {
|
|
124
|
+
labels,
|
|
125
|
+
...rest
|
|
126
|
+
} = props;
|
|
127
|
+
return /* @__PURE__ */ React17__default.default.createElement(ObjectTableLabelsProvider, {
|
|
128
|
+
labels
|
|
129
|
+
}, /* @__PURE__ */ React17__default.default.createElement(Inner, rest));
|
|
130
|
+
}
|
|
131
|
+
LabelledComponent.displayName = `withObjectTableLabels(${Inner.displayName})`;
|
|
132
|
+
return LabelledComponent;
|
|
56
133
|
}
|
|
57
134
|
|
|
58
135
|
// src/object-table/components/AsyncValueCell.tsx
|
|
@@ -61,16 +138,17 @@ function AsyncValueCell({
|
|
|
61
138
|
isLoading,
|
|
62
139
|
error
|
|
63
140
|
}) {
|
|
141
|
+
const labels = useObjectTableLabels();
|
|
64
142
|
if (error != null) {
|
|
65
|
-
return
|
|
143
|
+
return labels.cellError;
|
|
66
144
|
}
|
|
67
145
|
if (data != null) {
|
|
68
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, data);
|
|
69
147
|
}
|
|
70
148
|
if (isLoading) {
|
|
71
|
-
return /* @__PURE__ */
|
|
149
|
+
return /* @__PURE__ */ React17__default.default.createElement(LoadingCellContent, null);
|
|
72
150
|
}
|
|
73
|
-
return
|
|
151
|
+
return labels.cellNoValue;
|
|
74
152
|
}
|
|
75
153
|
|
|
76
154
|
// src/object-table/utils/markingValue.ts
|
|
@@ -96,7 +174,7 @@ function CbacMarkingCell({
|
|
|
96
174
|
if (markingIds.length === 0) {
|
|
97
175
|
return null;
|
|
98
176
|
}
|
|
99
|
-
return /* @__PURE__ */
|
|
177
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkZMAWPOG5_cjs.CbacBanner, {
|
|
100
178
|
markingIds
|
|
101
179
|
});
|
|
102
180
|
}
|
|
@@ -112,26 +190,26 @@ function MandatoryMarkingCell({
|
|
|
112
190
|
if (markingIds.length === 0) {
|
|
113
191
|
return null;
|
|
114
192
|
}
|
|
115
|
-
return /* @__PURE__ */
|
|
193
|
+
return /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
116
194
|
className: MandatoryMarkingCell_default.container
|
|
117
|
-
}, markingIds.map((id) => /* @__PURE__ */
|
|
195
|
+
}, markingIds.map((id) => /* @__PURE__ */ React17__default.default.createElement(chunkZMAWPOG5_cjs.CbacBanner, {
|
|
118
196
|
key: id,
|
|
119
197
|
markingIds: [id],
|
|
120
198
|
className: MandatoryMarkingCell_default.pill
|
|
121
199
|
})));
|
|
122
200
|
}
|
|
123
|
-
var PortalTrackerContext = /* @__PURE__ */
|
|
201
|
+
var PortalTrackerContext = /* @__PURE__ */ React17.createContext(void 0);
|
|
124
202
|
function PortalTrackerProvider({
|
|
125
203
|
children
|
|
126
204
|
}) {
|
|
127
|
-
const portalsRef =
|
|
128
|
-
const register =
|
|
205
|
+
const portalsRef = React17.useRef(/* @__PURE__ */ new Set());
|
|
206
|
+
const register = React17.useCallback((element) => {
|
|
129
207
|
portalsRef.current.add(element);
|
|
130
208
|
return () => {
|
|
131
209
|
portalsRef.current.delete(element);
|
|
132
210
|
};
|
|
133
211
|
}, []);
|
|
134
|
-
const containsElement =
|
|
212
|
+
const containsElement = React17.useCallback((node) => {
|
|
135
213
|
for (const portal of portalsRef.current) {
|
|
136
214
|
if (portal.contains(node)) {
|
|
137
215
|
return true;
|
|
@@ -139,21 +217,21 @@ function PortalTrackerProvider({
|
|
|
139
217
|
}
|
|
140
218
|
return false;
|
|
141
219
|
}, []);
|
|
142
|
-
const value =
|
|
220
|
+
const value = React17.useRef({
|
|
143
221
|
register,
|
|
144
222
|
containsElement
|
|
145
223
|
});
|
|
146
|
-
return /* @__PURE__ */
|
|
224
|
+
return /* @__PURE__ */ React17__default.default.createElement(PortalTrackerContext.Provider, {
|
|
147
225
|
value: value.current
|
|
148
226
|
}, children);
|
|
149
227
|
}
|
|
150
228
|
function usePortalTracker() {
|
|
151
|
-
return
|
|
229
|
+
return React17.useContext(PortalTrackerContext);
|
|
152
230
|
}
|
|
153
231
|
function useRegisterPortal() {
|
|
154
|
-
const tracker =
|
|
155
|
-
const cleanupRef =
|
|
156
|
-
return
|
|
232
|
+
const tracker = React17.useContext(PortalTrackerContext);
|
|
233
|
+
const cleanupRef = React17.useRef(null);
|
|
234
|
+
return React17.useCallback((element) => {
|
|
157
235
|
cleanupRef.current?.();
|
|
158
236
|
cleanupRef.current = null;
|
|
159
237
|
if (element && tracker) {
|
|
@@ -194,50 +272,50 @@ function DatePickerCellFieldInner({
|
|
|
194
272
|
dataType
|
|
195
273
|
}) {
|
|
196
274
|
const portalRef = useRegisterPortal();
|
|
197
|
-
const dateValue =
|
|
275
|
+
const dateValue = React17.useMemo(() => parseDateValue(inputValue), [inputValue]);
|
|
198
276
|
const showTime = fieldComponentProps?.showTime ?? dataType === "timestamp";
|
|
199
|
-
const handleChange =
|
|
277
|
+
const handleChange = React17.useCallback((newValue) => {
|
|
200
278
|
if (newValue == null) {
|
|
201
279
|
onChange(null);
|
|
202
280
|
return;
|
|
203
281
|
}
|
|
204
282
|
onChange(showTime ? newValue.toISOString() : chunkCUFFPIPP_cjs.formatDateForInput(newValue));
|
|
205
283
|
}, [onChange, showTime]);
|
|
206
|
-
return /* @__PURE__ */
|
|
284
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
207
285
|
className: classNames9__default.default(EditableCell_default.osdkEditableCellDatePicker, {
|
|
208
286
|
[EditableCell_default.error]: hasValidationError,
|
|
209
287
|
[EditableCell_default.osdkEditedInput]: isEdited
|
|
210
288
|
})
|
|
211
|
-
}, /* @__PURE__ */
|
|
289
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkFDRFBFI7_cjs.DatePicker, _extends({}, fieldComponentProps, {
|
|
212
290
|
showTime,
|
|
213
291
|
value: dateValue,
|
|
214
292
|
onChange: handleChange,
|
|
215
293
|
portalRef,
|
|
216
294
|
modal: false
|
|
217
|
-
})), hasValidationError && /* @__PURE__ */
|
|
295
|
+
})), hasValidationError && /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
218
296
|
className: EditableCell_default.errorIconWrapper
|
|
219
|
-
}, /* @__PURE__ */
|
|
297
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.Error, {
|
|
220
298
|
className: EditableCell_default.errorIcon
|
|
221
299
|
})));
|
|
222
300
|
}
|
|
223
|
-
var DatePickerCellField = /* @__PURE__ */
|
|
301
|
+
var DatePickerCellField = /* @__PURE__ */ React17__default.default.memo(DatePickerCellFieldInner);
|
|
224
302
|
function ReadonlyDisplayCellInner({
|
|
225
303
|
inputValue,
|
|
226
304
|
hasValidationError,
|
|
227
305
|
isEdited
|
|
228
306
|
}) {
|
|
229
|
-
return /* @__PURE__ */
|
|
307
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
230
308
|
className: classNames9__default.default(EditableCell_default.osdkEditableCell, {
|
|
231
309
|
[EditableCell_default.error]: hasValidationError,
|
|
232
310
|
[EditableCell_default.osdkEditedInput]: isEdited
|
|
233
311
|
})
|
|
234
|
-
}, /* @__PURE__ */
|
|
312
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
235
313
|
className: classNames9__default.default(EditableCell_default.osdkEditableInput, EditableCell_default.readonlyDisplayCell)
|
|
236
|
-
}, inputValue), hasValidationError && /* @__PURE__ */
|
|
314
|
+
}, inputValue), hasValidationError && /* @__PURE__ */ React17__default.default.createElement(icons.Error, {
|
|
237
315
|
className: EditableCell_default.errorIcon
|
|
238
316
|
}));
|
|
239
317
|
}
|
|
240
|
-
var ReadonlyDisplayCell = /* @__PURE__ */
|
|
318
|
+
var ReadonlyDisplayCell = /* @__PURE__ */ React17__default.default.memo(ReadonlyDisplayCellInner);
|
|
241
319
|
|
|
242
320
|
// src/object-table/components/DropdownCellField.tsx
|
|
243
321
|
function _extends2() {
|
|
@@ -263,25 +341,25 @@ function DropdownCellFieldInner({
|
|
|
263
341
|
itemToStringLabel
|
|
264
342
|
} = fieldComponentProps;
|
|
265
343
|
if (!isRowFocused) {
|
|
266
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ React17__default.default.createElement(ReadonlyDisplayCell, {
|
|
267
345
|
inputValue: itemToStringLabel ? itemToStringLabel(value) : inputValue,
|
|
268
346
|
hasValidationError,
|
|
269
347
|
isEdited
|
|
270
348
|
});
|
|
271
349
|
}
|
|
272
|
-
return /* @__PURE__ */
|
|
350
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
273
351
|
className: classNames9__default.default(EditableCell_default.osdkEditableCellDropdown, {
|
|
274
352
|
[EditableCell_default.error]: hasValidationError,
|
|
275
353
|
[EditableCell_default.osdkEditedInput]: isEdited
|
|
276
354
|
})
|
|
277
|
-
}, /* @__PURE__ */
|
|
355
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkASBETQHB_cjs.DropdownField, _extends2({}, fieldComponentProps, {
|
|
278
356
|
portalRef,
|
|
279
357
|
value,
|
|
280
358
|
onChange,
|
|
281
359
|
modal: false
|
|
282
360
|
})));
|
|
283
361
|
}
|
|
284
|
-
var DropdownCellField = /* @__PURE__ */
|
|
362
|
+
var DropdownCellField = /* @__PURE__ */ React17__default.default.memo(DropdownCellFieldInner);
|
|
285
363
|
function TextInputCellFieldInner({
|
|
286
364
|
inputType,
|
|
287
365
|
inputValue,
|
|
@@ -291,12 +369,12 @@ function TextInputCellFieldInner({
|
|
|
291
369
|
onBlur,
|
|
292
370
|
onKeyDown
|
|
293
371
|
}) {
|
|
294
|
-
return /* @__PURE__ */
|
|
372
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
295
373
|
className: classNames9__default.default(EditableCell_default.osdkEditableCell, {
|
|
296
374
|
[EditableCell_default.error]: hasValidationError,
|
|
297
375
|
[EditableCell_default.osdkEditedInput]: isEdited
|
|
298
376
|
})
|
|
299
|
-
}, /* @__PURE__ */
|
|
377
|
+
}, /* @__PURE__ */ React17__default.default.createElement(input.Input, {
|
|
300
378
|
type: inputType,
|
|
301
379
|
value: inputValue,
|
|
302
380
|
className: EditableCell_default.osdkEditableInput,
|
|
@@ -304,11 +382,11 @@ function TextInputCellFieldInner({
|
|
|
304
382
|
onBlur,
|
|
305
383
|
onKeyDown,
|
|
306
384
|
"aria-invalid": hasValidationError
|
|
307
|
-
}), hasValidationError && /* @__PURE__ */
|
|
385
|
+
}), hasValidationError && /* @__PURE__ */ React17__default.default.createElement(icons.Error, {
|
|
308
386
|
className: EditableCell_default.errorIcon
|
|
309
387
|
}));
|
|
310
388
|
}
|
|
311
|
-
var TextInputCellField = /* @__PURE__ */
|
|
389
|
+
var TextInputCellField = /* @__PURE__ */ React17__default.default.memo(TextInputCellFieldInner);
|
|
312
390
|
|
|
313
391
|
// src/object-table/utils/editableUtils.ts
|
|
314
392
|
function isColumnDeclaredEditable(editable) {
|
|
@@ -327,7 +405,6 @@ function cellValuesEqual(a, b) {
|
|
|
327
405
|
// src/object-table/EditableCell.tsx
|
|
328
406
|
var NUMBER_TYPES = ["double", "integer", "long", "float", "decimal", "byte", "short"];
|
|
329
407
|
var DATE_TYPES = ["datetime", "timestamp"];
|
|
330
|
-
var VALIDATION_ERROR_MESSAGE = "Validation error";
|
|
331
408
|
function valueToString(value) {
|
|
332
409
|
if (value == null) {
|
|
333
410
|
return "";
|
|
@@ -367,10 +444,11 @@ function EditableCellInner({
|
|
|
367
444
|
rowCellEdits,
|
|
368
445
|
isRowFocused = false
|
|
369
446
|
}) {
|
|
370
|
-
const
|
|
371
|
-
const
|
|
372
|
-
const
|
|
373
|
-
const
|
|
447
|
+
const labels = useObjectTableLabels();
|
|
448
|
+
const [inputValue, setInputValue] = React17.useState(valueToString(currentValue));
|
|
449
|
+
const isCancelled = React17.useRef(false);
|
|
450
|
+
const validationAbortControllerRef = React17.useRef(null);
|
|
451
|
+
const abortValidation = React17.useCallback(() => {
|
|
374
452
|
if (validationAbortControllerRef.current) {
|
|
375
453
|
validationAbortControllerRef.current.abort();
|
|
376
454
|
validationAbortControllerRef.current = null;
|
|
@@ -378,15 +456,15 @@ function EditableCellInner({
|
|
|
378
456
|
}, []);
|
|
379
457
|
const hasValidationError = validationError != null;
|
|
380
458
|
const isEdited = !cellValuesEqual(currentValue, initialValue);
|
|
381
|
-
|
|
459
|
+
React17.useEffect(() => {
|
|
382
460
|
setInputValue(valueToString(currentValue));
|
|
383
461
|
}, [currentValue]);
|
|
384
|
-
|
|
462
|
+
React17.useEffect(() => {
|
|
385
463
|
return () => {
|
|
386
464
|
abortValidation();
|
|
387
465
|
};
|
|
388
466
|
}, [abortValidation]);
|
|
389
|
-
const runValidation =
|
|
467
|
+
const runValidation = React17.useCallback((parsedValue) => {
|
|
390
468
|
if (!validateEdit) {
|
|
391
469
|
return;
|
|
392
470
|
}
|
|
@@ -408,11 +486,11 @@ function EditableCellInner({
|
|
|
408
486
|
}
|
|
409
487
|
}, (error) => {
|
|
410
488
|
if (!controller.signal.aborted && error.name !== "AbortError") {
|
|
411
|
-
onCellValidationError?.(cellId,
|
|
489
|
+
onCellValidationError?.(cellId, labels.cellValidationError);
|
|
412
490
|
}
|
|
413
491
|
});
|
|
414
|
-
}, [validateEdit, onCellValidationError, clearCellValidationError, cellId]);
|
|
415
|
-
const commitEdit =
|
|
492
|
+
}, [validateEdit, onCellValidationError, clearCellValidationError, cellId, labels]);
|
|
493
|
+
const commitEdit = React17.useCallback((newValue) => {
|
|
416
494
|
abortValidation();
|
|
417
495
|
onCellEdit(cellId, {
|
|
418
496
|
rowId,
|
|
@@ -423,7 +501,7 @@ function EditableCellInner({
|
|
|
423
501
|
});
|
|
424
502
|
runValidation(newValue);
|
|
425
503
|
}, [abortValidation, onCellEdit, cellId, rowId, columnId, initialValue, originalRowData, runValidation]);
|
|
426
|
-
const handleBlur =
|
|
504
|
+
const handleBlur = React17.useCallback(() => {
|
|
427
505
|
if (isCancelled.current) {
|
|
428
506
|
isCancelled.current = false;
|
|
429
507
|
return;
|
|
@@ -434,11 +512,11 @@ function EditableCellInner({
|
|
|
434
512
|
const parsedValue = parseValueByType(inputValue, dataType);
|
|
435
513
|
commitEdit(parsedValue);
|
|
436
514
|
}, [inputValue, currentValue, dataType, commitEdit]);
|
|
437
|
-
const handleInputChange =
|
|
515
|
+
const handleInputChange = React17.useCallback((value) => {
|
|
438
516
|
abortValidation();
|
|
439
517
|
setInputValue(value);
|
|
440
518
|
}, [abortValidation]);
|
|
441
|
-
const handleKeyDown =
|
|
519
|
+
const handleKeyDown = React17.useCallback((e) => {
|
|
442
520
|
if (e.key === "Enter") {
|
|
443
521
|
e.currentTarget.blur();
|
|
444
522
|
}
|
|
@@ -448,17 +526,17 @@ function EditableCellInner({
|
|
|
448
526
|
e.currentTarget.blur();
|
|
449
527
|
}
|
|
450
528
|
}, [currentValue]);
|
|
451
|
-
const handleCommit =
|
|
529
|
+
const handleCommit = React17.useCallback((newValue) => {
|
|
452
530
|
if (cellValuesEqual(newValue, currentValue)) return;
|
|
453
531
|
commitEdit(newValue);
|
|
454
532
|
}, [commitEdit, currentValue]);
|
|
455
533
|
const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
|
|
456
|
-
const dropdownFieldProps =
|
|
457
|
-
const datePickerFieldProps =
|
|
534
|
+
const dropdownFieldProps = React17.useMemo(() => editFieldConfig?.fieldComponent === "DROPDOWN" ? editFieldConfig.getFieldComponentProps(originalRowData, rowCellEdits) : void 0, [editFieldConfig, originalRowData, rowCellEdits]);
|
|
535
|
+
const datePickerFieldProps = React17.useMemo(() => editFieldConfig?.fieldComponent === "DATE_PICKER" ? editFieldConfig.getFieldComponentProps(originalRowData, rowCellEdits) : void 0, [editFieldConfig, originalRowData, rowCellEdits]);
|
|
458
536
|
const renderFieldInput = () => {
|
|
459
537
|
switch (editFieldConfig?.fieldComponent) {
|
|
460
538
|
case "DROPDOWN":
|
|
461
|
-
return /* @__PURE__ */
|
|
539
|
+
return /* @__PURE__ */ React17__default.default.createElement(DropdownCellField, {
|
|
462
540
|
fieldComponentProps: dropdownFieldProps,
|
|
463
541
|
isRowFocused,
|
|
464
542
|
inputValue,
|
|
@@ -468,7 +546,7 @@ function EditableCellInner({
|
|
|
468
546
|
onChange: handleCommit
|
|
469
547
|
});
|
|
470
548
|
case "DATE_PICKER":
|
|
471
|
-
return /* @__PURE__ */
|
|
549
|
+
return /* @__PURE__ */ React17__default.default.createElement(DatePickerCellField, {
|
|
472
550
|
fieldComponentProps: datePickerFieldProps,
|
|
473
551
|
inputValue,
|
|
474
552
|
hasValidationError,
|
|
@@ -477,7 +555,7 @@ function EditableCellInner({
|
|
|
477
555
|
});
|
|
478
556
|
default:
|
|
479
557
|
if (dataType != null && DATE_TYPES.includes(dataType)) {
|
|
480
|
-
return /* @__PURE__ */
|
|
558
|
+
return /* @__PURE__ */ React17__default.default.createElement(DatePickerCellField, {
|
|
481
559
|
inputValue,
|
|
482
560
|
hasValidationError,
|
|
483
561
|
isEdited,
|
|
@@ -485,7 +563,7 @@ function EditableCellInner({
|
|
|
485
563
|
dataType
|
|
486
564
|
});
|
|
487
565
|
}
|
|
488
|
-
return /* @__PURE__ */
|
|
566
|
+
return /* @__PURE__ */ React17__default.default.createElement(TextInputCellField, {
|
|
489
567
|
inputType,
|
|
490
568
|
inputValue,
|
|
491
569
|
hasValidationError,
|
|
@@ -496,23 +574,23 @@ function EditableCellInner({
|
|
|
496
574
|
});
|
|
497
575
|
}
|
|
498
576
|
};
|
|
499
|
-
return /* @__PURE__ */
|
|
577
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Provider, null, /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Root, {
|
|
500
578
|
disabled: !hasValidationError
|
|
501
|
-
}, /* @__PURE__ */
|
|
579
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Trigger, {
|
|
502
580
|
className: EditableCell_default.osdkEditableCellTrigger,
|
|
503
|
-
render: /* @__PURE__ */
|
|
581
|
+
render: /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
504
582
|
className: EditableCell_default.osdkTooltipTriggerWrapper
|
|
505
583
|
})
|
|
506
|
-
}, renderFieldInput()), /* @__PURE__ */
|
|
584
|
+
}, renderFieldInput()), /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Portal, null, /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Positioner, {
|
|
507
585
|
sideOffset: 4,
|
|
508
586
|
side: "bottom"
|
|
509
|
-
}, /* @__PURE__ */
|
|
587
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Popup, null, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
510
588
|
className: EditableCell_default.validationError
|
|
511
|
-
}, /* @__PURE__ */
|
|
589
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.Error, {
|
|
512
590
|
className: EditableCell_default.errorIcon
|
|
513
|
-
}), validationError), /* @__PURE__ */
|
|
591
|
+
}), validationError), /* @__PURE__ */ React17__default.default.createElement(chunkHNBSGCSZ_cjs.Tooltip.Arrow, null))))));
|
|
514
592
|
}
|
|
515
|
-
var EditableCell = /* @__PURE__ */
|
|
593
|
+
var EditableCell = /* @__PURE__ */ React17__default.default.memo(EditableCellInner);
|
|
516
594
|
|
|
517
595
|
// src/object-table/utils/AsyncCellData.ts
|
|
518
596
|
var isAsyncCellData = (value) => {
|
|
@@ -563,15 +641,15 @@ function renderDefaultCell(cellContext) {
|
|
|
563
641
|
const cellValue = cellContext.getValue();
|
|
564
642
|
const asyncCellData = isAsyncCellData(cellValue) ? cellValue : void 0;
|
|
565
643
|
if (columnMeta?.isAsyncColumn && asyncCellData) {
|
|
566
|
-
return /* @__PURE__ */
|
|
644
|
+
return /* @__PURE__ */ React17__default.default.createElement(AsyncValueCell, asyncCellData);
|
|
567
645
|
}
|
|
568
646
|
if (columnMeta?.markingType === "CBAC") {
|
|
569
|
-
return /* @__PURE__ */
|
|
647
|
+
return /* @__PURE__ */ React17__default.default.createElement(CbacMarkingCell, {
|
|
570
648
|
value: cellValue
|
|
571
649
|
});
|
|
572
650
|
}
|
|
573
651
|
if (columnMeta?.markingType === "MANDATORY") {
|
|
574
|
-
return /* @__PURE__ */
|
|
652
|
+
return /* @__PURE__ */ React17__default.default.createElement(MandatoryMarkingCell, {
|
|
575
653
|
value: cellValue
|
|
576
654
|
});
|
|
577
655
|
}
|
|
@@ -580,11 +658,11 @@ function renderDefaultCell(cellContext) {
|
|
|
580
658
|
if (!meta?.onCellEdit || // Type guard
|
|
581
659
|
!shouldShowEditableCell(isEditable, meta?.onCellEdit, meta?.isInEditMode)) {
|
|
582
660
|
if (meta?.isInEditMode) {
|
|
583
|
-
return /* @__PURE__ */
|
|
661
|
+
return /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
584
662
|
className: EditableCell_default.nonEditableCellInEditMode
|
|
585
663
|
}, toDisplayValue(cellValue));
|
|
586
664
|
}
|
|
587
|
-
return /* @__PURE__ */
|
|
665
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, toDisplayValue(cellValue));
|
|
588
666
|
}
|
|
589
667
|
const rowId = cellContext.row.id;
|
|
590
668
|
const columnId = cellContext.column.id;
|
|
@@ -598,7 +676,7 @@ function renderDefaultCell(cellContext) {
|
|
|
598
676
|
const validationError = meta.validationErrors?.get(cellId);
|
|
599
677
|
const isRowFocused = meta.focusedRowId === rowId;
|
|
600
678
|
const rowCellEdits = filterCellEditsToRow(cellEdits, rowId);
|
|
601
|
-
return /* @__PURE__ */
|
|
679
|
+
return /* @__PURE__ */ React17__default.default.createElement(EditableCell, {
|
|
602
680
|
initialValue: cellValue,
|
|
603
681
|
currentValue,
|
|
604
682
|
cellId,
|
|
@@ -624,7 +702,7 @@ function useColumnDefs(objectType, columnDefinitions) {
|
|
|
624
702
|
loading,
|
|
625
703
|
error
|
|
626
704
|
} = react.useOsdkMetadata(objectType);
|
|
627
|
-
const columns =
|
|
705
|
+
const columns = React17.useMemo(() => {
|
|
628
706
|
const objectProperties = metadata?.properties;
|
|
629
707
|
if (columnDefinitions) {
|
|
630
708
|
return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
|
|
@@ -725,11 +803,11 @@ var useColumnPinning = ({
|
|
|
725
803
|
hasSelectionColumn,
|
|
726
804
|
onColumnsPinnedChanged
|
|
727
805
|
}) => {
|
|
728
|
-
const [columnPinning, setColumnPinning] =
|
|
806
|
+
const [columnPinning, setColumnPinning] = React17.useState({
|
|
729
807
|
left: [],
|
|
730
808
|
right: []
|
|
731
809
|
});
|
|
732
|
-
|
|
810
|
+
React17.useEffect(() => {
|
|
733
811
|
const defaultState = getColumnPinningStateFromColumnDefs(columnDefinitions);
|
|
734
812
|
const selectionCol = hasSelectionColumn ? [SELECTION_COLUMN_ID] : [];
|
|
735
813
|
setColumnPinning({
|
|
@@ -737,7 +815,7 @@ var useColumnPinning = ({
|
|
|
737
815
|
right: [...defaultState.right ?? []]
|
|
738
816
|
});
|
|
739
817
|
}, [columnDefinitions, hasSelectionColumn]);
|
|
740
|
-
const onColumnPinningChange =
|
|
818
|
+
const onColumnPinningChange = React17.useCallback((updater) => {
|
|
741
819
|
setColumnPinning((prev) => {
|
|
742
820
|
const newPinning = typeof updater === "function" ? updater(prev) : updater;
|
|
743
821
|
if (onColumnsPinnedChanged) {
|
|
@@ -794,8 +872,8 @@ function convertColumnPinningStateToArray(pinningState) {
|
|
|
794
872
|
var useColumnResize = ({
|
|
795
873
|
onColumnResize
|
|
796
874
|
}) => {
|
|
797
|
-
const [columnSizing, setColumnSizing] =
|
|
798
|
-
const onColumnSizingChange =
|
|
875
|
+
const [columnSizing, setColumnSizing] = React17.useState({});
|
|
876
|
+
const onColumnSizingChange = React17.useCallback((updater) => {
|
|
799
877
|
setColumnSizing((prev) => {
|
|
800
878
|
const newState = typeof updater === "function" ? updater(prev) : updater;
|
|
801
879
|
if (onColumnResize) {
|
|
@@ -822,15 +900,15 @@ var useColumnVisibility = ({
|
|
|
822
900
|
allColumns,
|
|
823
901
|
onColumnVisibilityChanged
|
|
824
902
|
}) => {
|
|
825
|
-
const [columnVisibility, setColumnVisibility] =
|
|
826
|
-
const [columnOrder, setColumnOrder] =
|
|
827
|
-
|
|
903
|
+
const [columnVisibility, setColumnVisibility] = React17.useState(() => getColumnVisibilityState(allColumns));
|
|
904
|
+
const [columnOrder, setColumnOrder] = React17.useState(() => getColumnOrder(allColumns));
|
|
905
|
+
React17.useEffect(() => {
|
|
828
906
|
setColumnVisibility(getColumnVisibilityState(allColumns));
|
|
829
907
|
}, [allColumns]);
|
|
830
|
-
|
|
908
|
+
React17.useEffect(() => {
|
|
831
909
|
setColumnOrder(getColumnOrder(allColumns));
|
|
832
910
|
}, [allColumns]);
|
|
833
|
-
const onColumnVisibilityChange =
|
|
911
|
+
const onColumnVisibilityChange = React17.useCallback((updaterOrValue) => {
|
|
834
912
|
setColumnVisibility((prev) => {
|
|
835
913
|
const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
|
|
836
914
|
if (onColumnVisibilityChanged) {
|
|
@@ -843,7 +921,7 @@ var useColumnVisibility = ({
|
|
|
843
921
|
return newState;
|
|
844
922
|
});
|
|
845
923
|
}, [onColumnVisibilityChanged]);
|
|
846
|
-
const onColumnOrderChange =
|
|
924
|
+
const onColumnOrderChange = React17.useCallback((updaterOrValue) => {
|
|
847
925
|
setColumnOrder((prev) => {
|
|
848
926
|
const newState = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
|
|
849
927
|
return newState;
|
|
@@ -876,17 +954,17 @@ function useEditableTable({
|
|
|
876
954
|
onCellValueChanged,
|
|
877
955
|
onSubmitEdits
|
|
878
956
|
}) {
|
|
879
|
-
const [isActive, setActive] =
|
|
880
|
-
const [cellEdits, setCellEdits] =
|
|
881
|
-
const [validationErrors, setValidationErrors] =
|
|
882
|
-
const clearCellValidationError =
|
|
957
|
+
const [isActive, setActive] = React17.useState(editMode === "always");
|
|
958
|
+
const [cellEdits, setCellEdits] = React17.useState({});
|
|
959
|
+
const [validationErrors, setValidationErrors] = React17.useState(/* @__PURE__ */ new Map());
|
|
960
|
+
const clearCellValidationError = React17.useCallback((cellId) => {
|
|
883
961
|
setValidationErrors((prev) => {
|
|
884
962
|
const newErrors = new Map(prev);
|
|
885
963
|
newErrors.delete(cellId);
|
|
886
964
|
return newErrors;
|
|
887
965
|
});
|
|
888
966
|
}, []);
|
|
889
|
-
const handleCellEdit =
|
|
967
|
+
const handleCellEdit = React17.useCallback((cellId, info) => {
|
|
890
968
|
if (cellValuesEqual(info.newValue, info.oldValue)) {
|
|
891
969
|
setCellEdits((prev) => {
|
|
892
970
|
const {
|
|
@@ -903,15 +981,15 @@ function useEditableTable({
|
|
|
903
981
|
}
|
|
904
982
|
onCellValueChanged?.(info);
|
|
905
983
|
}, [onCellValueChanged]);
|
|
906
|
-
const clearEdits =
|
|
984
|
+
const clearEdits = React17.useCallback(() => {
|
|
907
985
|
setCellEdits({});
|
|
908
986
|
setValidationErrors(/* @__PURE__ */ new Map());
|
|
909
987
|
}, []);
|
|
910
|
-
const handleSubmitEdits =
|
|
988
|
+
const handleSubmitEdits = React17.useCallback(async () => {
|
|
911
989
|
const edits = Object.values(cellEdits);
|
|
912
990
|
return onSubmitEdits ? onSubmitEdits(edits) : false;
|
|
913
991
|
}, [cellEdits, onSubmitEdits]);
|
|
914
|
-
const onCellValidationError =
|
|
992
|
+
const onCellValidationError = React17.useCallback((cellId, error) => {
|
|
915
993
|
setValidationErrors((prev) => {
|
|
916
994
|
const newErrors = new Map(prev);
|
|
917
995
|
newErrors.set(cellId, error);
|
|
@@ -968,15 +1046,15 @@ function useFunctionColumnsData({
|
|
|
968
1046
|
pageSize = DEFAULT_PAGE_SIZE
|
|
969
1047
|
}) {
|
|
970
1048
|
const client = react.useOsdkClient();
|
|
971
|
-
const prevDataRef =
|
|
1049
|
+
const prevDataRef = React17.useRef({});
|
|
972
1050
|
const stableObjects = useStableObjects(objects);
|
|
973
|
-
const functionColDefs =
|
|
974
|
-
const pagedObjectSets =
|
|
1051
|
+
const functionColDefs = React17.useMemo(() => extractFunctionLocators(columnDefinitions), [columnDefinitions]);
|
|
1052
|
+
const pagedObjectSets = React17.useMemo(() => {
|
|
975
1053
|
if (!stableObjects?.length) return [];
|
|
976
1054
|
return buildPagedObjectSets(client, objectOrInterfaceType, stableObjects, pageSize);
|
|
977
1055
|
}, [client, objectOrInterfaceType, stableObjects, pageSize]);
|
|
978
1056
|
const disabled = pagedObjectSets.length === 0 || functionColDefs.length === 0;
|
|
979
|
-
const queryGrid =
|
|
1057
|
+
const queryGrid = React17.useMemo(() => {
|
|
980
1058
|
if (pagedObjectSets.length === 0 || functionColDefs.length === 0) {
|
|
981
1059
|
return EMPTY_QUERY_GRID;
|
|
982
1060
|
}
|
|
@@ -987,8 +1065,8 @@ function useFunctionColumnsData({
|
|
|
987
1065
|
enabled: !disabled,
|
|
988
1066
|
maxConcurrent: DEFAULT_MAX_CONCURRENT_REQUESTS
|
|
989
1067
|
});
|
|
990
|
-
const mergedResults =
|
|
991
|
-
const data =
|
|
1068
|
+
const mergedResults = React17.useMemo(() => mergePagedResults(results, queryGrid.numColumns), [results, queryGrid.numColumns]);
|
|
1069
|
+
const data = React17.useMemo(() => {
|
|
992
1070
|
const columnData = buildFunctionColumnData(mergedResults, functionColDefs, stableObjects, disabled, prevDataRef.current);
|
|
993
1071
|
prevDataRef.current = columnData;
|
|
994
1072
|
return columnData;
|
|
@@ -1083,7 +1161,7 @@ function resolveCell(result, objectKey, getValue, prevData) {
|
|
|
1083
1161
|
};
|
|
1084
1162
|
}
|
|
1085
1163
|
var useStableObjects = (objects) => {
|
|
1086
|
-
return
|
|
1164
|
+
return React17.useMemo(() => objects, [
|
|
1087
1165
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1088
1166
|
JSON.stringify((objects ?? []).map((item) => ({
|
|
1089
1167
|
$apiName: item.$apiName,
|
|
@@ -1109,7 +1187,7 @@ function useObjectTableData({
|
|
|
1109
1187
|
pageSize = DEFAULT_PAGE_SIZE,
|
|
1110
1188
|
streamUpdates
|
|
1111
1189
|
}) {
|
|
1112
|
-
const orderBy =
|
|
1190
|
+
const orderBy = React17.useMemo(() => {
|
|
1113
1191
|
if (!sorting || sorting.length === 0) {
|
|
1114
1192
|
return void 0;
|
|
1115
1193
|
}
|
|
@@ -1118,7 +1196,7 @@ function useObjectTableData({
|
|
|
1118
1196
|
return acc;
|
|
1119
1197
|
}, {});
|
|
1120
1198
|
}, [sorting]);
|
|
1121
|
-
const withProperties =
|
|
1199
|
+
const withProperties = React17.useMemo(() => {
|
|
1122
1200
|
if (!columnDefinitions) {
|
|
1123
1201
|
return;
|
|
1124
1202
|
}
|
|
@@ -1162,7 +1240,7 @@ function useObjectTableData({
|
|
|
1162
1240
|
columnDefinitions,
|
|
1163
1241
|
pageSize
|
|
1164
1242
|
});
|
|
1165
|
-
const mergedData =
|
|
1243
|
+
const mergedData = React17.useMemo(() => {
|
|
1166
1244
|
if (!baseResult.data) return baseResult.data;
|
|
1167
1245
|
return baseResult.data.map((obj) => {
|
|
1168
1246
|
const objKey = String(obj.$primaryKey);
|
|
@@ -1269,9 +1347,9 @@ function useObjectTableSnapshot({
|
|
|
1269
1347
|
orderBy
|
|
1270
1348
|
}) {
|
|
1271
1349
|
const client = react.useOsdkClient();
|
|
1272
|
-
const functionLocators =
|
|
1273
|
-
const customColumnIds =
|
|
1274
|
-
const getSnapshot =
|
|
1350
|
+
const functionLocators = React17.useMemo(() => extractFunctionLocators(columnDefinitions), [columnDefinitions]);
|
|
1351
|
+
const customColumnIds = React17.useMemo(() => new Set(columnDefinitions?.filter((definition) => definition.locator.type === "custom").map((definition) => String(definition.locator.id)) ?? []), [columnDefinitions]);
|
|
1352
|
+
const getSnapshot = React17.useCallback(async (options) => {
|
|
1275
1353
|
const rowLimit = options?.rowLimit ?? DEFAULT_SNAPSHOT_ROW_LIMIT;
|
|
1276
1354
|
const rowLimitExceededError = `Error in getSnapshot: total row count exceeds row limit of ${rowLimit}.`;
|
|
1277
1355
|
if (totalCount != null) {
|
|
@@ -1317,7 +1395,7 @@ function useObjectTableSnapshot({
|
|
|
1317
1395
|
totalCount
|
|
1318
1396
|
};
|
|
1319
1397
|
}, [table, objectSet, objectOrInterfaceType, functionLocators, customColumnIds, client, pageSize, totalCount, orderBy]);
|
|
1320
|
-
return
|
|
1398
|
+
return React17.useMemo(() => ({
|
|
1321
1399
|
getSnapshot
|
|
1322
1400
|
}), [getSnapshot]);
|
|
1323
1401
|
}
|
|
@@ -1336,12 +1414,12 @@ function useRowSelection({
|
|
|
1336
1414
|
onRowSelectionChanged,
|
|
1337
1415
|
data
|
|
1338
1416
|
}) {
|
|
1339
|
-
const [internalRowSelection, setInternalRowSelection] =
|
|
1340
|
-
const [internalIsAllSelected, setInternalIsAllSelected] =
|
|
1341
|
-
const [lastSelectedRowIndex, setLastSelectedRowIndex] =
|
|
1417
|
+
const [internalRowSelection, setInternalRowSelection] = React17.useState({});
|
|
1418
|
+
const [internalIsAllSelected, setInternalIsAllSelected] = React17.useState(false);
|
|
1419
|
+
const [lastSelectedRowIndex, setLastSelectedRowIndex] = React17.useState(null);
|
|
1342
1420
|
const isControlled = selectedRows !== void 0;
|
|
1343
1421
|
const enableRowSelection = selectionMode !== "none";
|
|
1344
|
-
const rowSelectionState =
|
|
1422
|
+
const rowSelectionState = React17.useMemo(() => {
|
|
1345
1423
|
if (!enableRowSelection) return {};
|
|
1346
1424
|
if (isControlled) {
|
|
1347
1425
|
const selectedRowIds = isAllSelectedProp ? (data ?? []).map((item) => item.$primaryKey) : selectedRows;
|
|
@@ -1352,11 +1430,11 @@ function useRowSelection({
|
|
|
1352
1430
|
}
|
|
1353
1431
|
return internalRowSelection;
|
|
1354
1432
|
}, [enableRowSelection, isControlled, selectedRows, isAllSelectedProp, internalIsAllSelected, internalRowSelection, data]);
|
|
1355
|
-
const selectedCount =
|
|
1433
|
+
const selectedCount = React17.useMemo(() => Object.values(rowSelectionState).filter(Boolean).length, [rowSelectionState]);
|
|
1356
1434
|
const totalCount = data?.length ?? 0;
|
|
1357
1435
|
const isAllSelected = deriveIsAllSelected(isControlled, isAllSelectedProp, internalIsAllSelected, selectedCount, totalCount);
|
|
1358
1436
|
const hasSelection = isAllSelected || selectedCount > 0;
|
|
1359
|
-
const lastFiredAllSelectedIdsRef =
|
|
1437
|
+
const lastFiredAllSelectedIdsRef = React17.useRef(null);
|
|
1360
1438
|
const fireSelectionCallbacks = chunkASBETQHB_cjs.useEventCallback((ids, isSelectAll) => {
|
|
1361
1439
|
if (onRowSelectionChanged) {
|
|
1362
1440
|
const currentData = data ?? [];
|
|
@@ -1368,7 +1446,7 @@ function useRowSelection({
|
|
|
1368
1446
|
});
|
|
1369
1447
|
}
|
|
1370
1448
|
});
|
|
1371
|
-
const onToggleAll =
|
|
1449
|
+
const onToggleAll = React17.useCallback(() => {
|
|
1372
1450
|
if (!enableRowSelection || !data) return;
|
|
1373
1451
|
const newIsAllSelected = !hasSelection;
|
|
1374
1452
|
const newSelectedRows = newIsAllSelected ? data.map((item) => item.$primaryKey) : [];
|
|
@@ -1379,7 +1457,7 @@ function useRowSelection({
|
|
|
1379
1457
|
lastFiredAllSelectedIdsRef.current = newIsAllSelected ? JSON.stringify(newSelectedRows) : null;
|
|
1380
1458
|
fireSelectionCallbacks(newSelectedRows, newIsAllSelected);
|
|
1381
1459
|
}, [enableRowSelection, data, hasSelection, isControlled, fireSelectionCallbacks]);
|
|
1382
|
-
const onToggleRow =
|
|
1460
|
+
const onToggleRow = React17.useCallback((rowId, rowIndex, isShiftClick = false) => {
|
|
1383
1461
|
if (!enableRowSelection || !data) return;
|
|
1384
1462
|
let newSelectedRows;
|
|
1385
1463
|
if (selectionMode === "single") {
|
|
@@ -1420,7 +1498,7 @@ function useRowSelection({
|
|
|
1420
1498
|
lastFiredAllSelectedIdsRef.current = null;
|
|
1421
1499
|
fireSelectionCallbacks(newSelectedRows, false);
|
|
1422
1500
|
}, [enableRowSelection, data, selectionMode, isControlled, fireSelectionCallbacks, rowSelectionState, lastSelectedRowIndex]);
|
|
1423
|
-
|
|
1501
|
+
React17.useEffect(function syncSelectAllOnDataChange() {
|
|
1424
1502
|
if (isControlled || !internalIsAllSelected || !data) {
|
|
1425
1503
|
if (!internalIsAllSelected) {
|
|
1426
1504
|
lastFiredAllSelectedIdsRef.current = null;
|
|
@@ -1524,8 +1602,9 @@ function SelectionHeaderCell({
|
|
|
1524
1602
|
hasSelection,
|
|
1525
1603
|
onToggleAll
|
|
1526
1604
|
}) {
|
|
1527
|
-
const
|
|
1528
|
-
|
|
1605
|
+
const labels = useObjectTableLabels();
|
|
1606
|
+
const checkboxLabel = hasSelection ? labels.deselectAllRows : labels.selectAllRows;
|
|
1607
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.Checkbox, {
|
|
1529
1608
|
indeterminate: hasSelection && !isAllSelected,
|
|
1530
1609
|
checked: isAllSelected,
|
|
1531
1610
|
onCheckedChange: onToggleAll,
|
|
@@ -1536,23 +1615,24 @@ function SelectionCell({
|
|
|
1536
1615
|
row,
|
|
1537
1616
|
onToggleRow
|
|
1538
1617
|
}) {
|
|
1539
|
-
const
|
|
1618
|
+
const labels = useObjectTableLabels();
|
|
1619
|
+
const handleClick = React17.useCallback((event) => {
|
|
1540
1620
|
event.stopPropagation();
|
|
1541
1621
|
const isShiftClick = event.shiftKey;
|
|
1542
1622
|
onToggleRow(row.id, row.index, isShiftClick);
|
|
1543
1623
|
}, [onToggleRow, row.id, row.index]);
|
|
1544
|
-
const handleKeyDown =
|
|
1624
|
+
const handleKeyDown = React17.useCallback((event) => {
|
|
1545
1625
|
if (event.key === "Enter") {
|
|
1546
1626
|
const isShiftClick = event.shiftKey;
|
|
1547
1627
|
onToggleRow(row.id, row.index, isShiftClick);
|
|
1548
1628
|
}
|
|
1549
1629
|
}, [onToggleRow, row.id, row.index]);
|
|
1550
|
-
return /* @__PURE__ */
|
|
1630
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1551
1631
|
onClick: handleClick,
|
|
1552
1632
|
onKeyDown: handleKeyDown
|
|
1553
|
-
}, /* @__PURE__ */
|
|
1633
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.Checkbox, {
|
|
1554
1634
|
checked: row.getIsSelected(),
|
|
1555
|
-
"aria-label":
|
|
1635
|
+
"aria-label": labels.selectRow(row.index + 1)
|
|
1556
1636
|
}));
|
|
1557
1637
|
}
|
|
1558
1638
|
|
|
@@ -1564,26 +1644,26 @@ var useSelectionColumn = ({
|
|
|
1564
1644
|
onToggleAll,
|
|
1565
1645
|
onToggleRow
|
|
1566
1646
|
}) => {
|
|
1567
|
-
const isAllSelectedRef =
|
|
1647
|
+
const isAllSelectedRef = React17.useRef(isAllSelected);
|
|
1568
1648
|
isAllSelectedRef.current = isAllSelected;
|
|
1569
|
-
const hasSelectionRef =
|
|
1649
|
+
const hasSelectionRef = React17.useRef(hasSelection);
|
|
1570
1650
|
hasSelectionRef.current = hasSelection;
|
|
1571
|
-
const onToggleAllRef =
|
|
1651
|
+
const onToggleAllRef = React17.useRef(onToggleAll);
|
|
1572
1652
|
onToggleAllRef.current = onToggleAll;
|
|
1573
|
-
const onToggleRowRef =
|
|
1653
|
+
const onToggleRowRef = React17.useRef(onToggleRow);
|
|
1574
1654
|
onToggleRowRef.current = onToggleRow;
|
|
1575
|
-
const selectionColumn =
|
|
1655
|
+
const selectionColumn = React17.useMemo(() => {
|
|
1576
1656
|
if (selectionMode === "none") return null;
|
|
1577
1657
|
const colDef = {
|
|
1578
1658
|
id: SELECTION_COLUMN_ID,
|
|
1579
|
-
header: () => selectionMode === "multiple" ? /* @__PURE__ */
|
|
1659
|
+
header: () => selectionMode === "multiple" ? /* @__PURE__ */ React17__default.default.createElement(SelectionHeaderCell, {
|
|
1580
1660
|
isAllSelected: isAllSelectedRef.current,
|
|
1581
1661
|
hasSelection: hasSelectionRef.current,
|
|
1582
1662
|
onToggleAll: onToggleAllRef.current
|
|
1583
1663
|
}) : null,
|
|
1584
1664
|
cell: ({
|
|
1585
1665
|
row
|
|
1586
|
-
}) => /* @__PURE__ */
|
|
1666
|
+
}) => /* @__PURE__ */ React17__default.default.createElement(SelectionCell, {
|
|
1587
1667
|
row,
|
|
1588
1668
|
onToggleRow: onToggleRowRef.current
|
|
1589
1669
|
}),
|
|
@@ -1603,17 +1683,17 @@ var useTableSorting = ({
|
|
|
1603
1683
|
defaultOrderBy,
|
|
1604
1684
|
onOrderByChanged
|
|
1605
1685
|
}) => {
|
|
1606
|
-
const [internalSorting, setInternalSorting] =
|
|
1686
|
+
const [internalSorting, setInternalSorting] = React17.useState(() => defaultOrderBy ? convertOrderByToSortingState(defaultOrderBy) : []);
|
|
1607
1687
|
const isControlled = orderBy !== void 0;
|
|
1608
|
-
const sortingState =
|
|
1609
|
-
const orderByState =
|
|
1688
|
+
const sortingState = React17.useMemo(() => orderBy ? convertOrderByToSortingState(orderBy) : internalSorting, [orderBy, internalSorting]);
|
|
1689
|
+
const orderByState = React17.useMemo(() => {
|
|
1610
1690
|
const currentOrderBy = orderBy ? orderBy : convertSortingStateToOrderBy(internalSorting);
|
|
1611
1691
|
return Object.fromEntries(currentOrderBy.map(({
|
|
1612
1692
|
property,
|
|
1613
1693
|
direction
|
|
1614
1694
|
}) => [property, direction]));
|
|
1615
1695
|
}, [orderBy, internalSorting]);
|
|
1616
|
-
const onSortingChange =
|
|
1696
|
+
const onSortingChange = React17.useCallback((updater) => {
|
|
1617
1697
|
const newSorting = typeof updater === "function" ? updater(sortingState) : updater;
|
|
1618
1698
|
if (!isControlled) {
|
|
1619
1699
|
setInternalSorting(newSorting);
|
|
@@ -1653,13 +1733,13 @@ function useFocusedRow({
|
|
|
1653
1733
|
getRowById
|
|
1654
1734
|
}) {
|
|
1655
1735
|
const isControlled = focusedRowId !== void 0;
|
|
1656
|
-
const [internalFocusedRowId, setInternalFocusedRowId] =
|
|
1736
|
+
const [internalFocusedRowId, setInternalFocusedRowId] = React17.useState(null);
|
|
1657
1737
|
const effectiveId = isControlled ? focusedRowId ?? null : internalFocusedRowId;
|
|
1658
1738
|
const fireChanged = chunkASBETQHB_cjs.useEventCallback((id) => {
|
|
1659
1739
|
const row = id != null ? getRowById(id) : null;
|
|
1660
1740
|
onFocusedRowChanged?.(row);
|
|
1661
1741
|
});
|
|
1662
|
-
const setFocusedRowId =
|
|
1742
|
+
const setFocusedRowId = React17.useCallback((id) => {
|
|
1663
1743
|
if (effectiveId === id) return;
|
|
1664
1744
|
if (!isControlled) {
|
|
1665
1745
|
setInternalFocusedRowId(id);
|
|
@@ -1684,17 +1764,17 @@ function LoadingRow({
|
|
|
1684
1764
|
rowHeight = DEFAULT_ROW_HEIGHT,
|
|
1685
1765
|
columnWidth = DEFAULT_COLUMN_WIDTH
|
|
1686
1766
|
}) {
|
|
1687
|
-
return /* @__PURE__ */
|
|
1767
|
+
return /* @__PURE__ */ React17__default.default.createElement("tr", {
|
|
1688
1768
|
className: TableRow_default.osdkTableRow,
|
|
1689
1769
|
style: {
|
|
1690
1770
|
height: `${rowHeight}px`,
|
|
1691
1771
|
transform: `translateY(${translateY}px)`
|
|
1692
1772
|
}
|
|
1693
|
-
}, /* @__PURE__ */
|
|
1773
|
+
}, /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, Array.from({
|
|
1694
1774
|
length: columnCount
|
|
1695
1775
|
}).map((_, index) => {
|
|
1696
1776
|
const width = headers.length > index ? headers[index].getSize() : columnWidth;
|
|
1697
|
-
return /* @__PURE__ */
|
|
1777
|
+
return /* @__PURE__ */ React17__default.default.createElement(LoadingCell, {
|
|
1698
1778
|
key: `loading-cell-${index}`,
|
|
1699
1779
|
width
|
|
1700
1780
|
});
|
|
@@ -1734,27 +1814,27 @@ function DraggableListItem({
|
|
|
1734
1814
|
transform: utilities.CSS.Transform.toString(transform),
|
|
1735
1815
|
transition
|
|
1736
1816
|
};
|
|
1737
|
-
const handleRemove =
|
|
1817
|
+
const handleRemove = React17.useCallback(() => {
|
|
1738
1818
|
onRemove?.(item.id);
|
|
1739
1819
|
}, [item.id, onRemove]);
|
|
1740
1820
|
const RemoveIcon = removeIconVariant === "trash" ? icons.Trash : icons.SmallCross;
|
|
1741
|
-
return /* @__PURE__ */
|
|
1821
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1742
1822
|
ref: setNodeRef,
|
|
1743
1823
|
style,
|
|
1744
1824
|
className: DraggableList_default.draggableItem,
|
|
1745
1825
|
"data-dragging": isDragging
|
|
1746
|
-
}, /* @__PURE__ */
|
|
1826
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", _extends3({
|
|
1747
1827
|
className: DraggableList_default.dragHandle,
|
|
1748
1828
|
"aria-label": `Reorder ${item.label}`
|
|
1749
|
-
}, attributes, listeners), /* @__PURE__ */
|
|
1829
|
+
}, attributes, listeners), /* @__PURE__ */ React17__default.default.createElement(icons.DragHandleVertical, {
|
|
1750
1830
|
className: DraggableList_default.icon
|
|
1751
|
-
})), /* @__PURE__ */
|
|
1831
|
+
})), /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1752
1832
|
className: DraggableList_default.itemContent
|
|
1753
|
-
}, renderContent ? renderContent(item) : item.label), onRemove && /* @__PURE__ */
|
|
1833
|
+
}, renderContent ? renderContent(item) : item.label), onRemove && /* @__PURE__ */ React17__default.default.createElement(button.Button, {
|
|
1754
1834
|
className: DraggableList_default.removeButton,
|
|
1755
1835
|
onClick: handleRemove,
|
|
1756
1836
|
"aria-label": `Remove ${item.label}`
|
|
1757
|
-
}, /* @__PURE__ */
|
|
1837
|
+
}, /* @__PURE__ */ React17__default.default.createElement(RemoveIcon, {
|
|
1758
1838
|
className: DraggableList_default.icon
|
|
1759
1839
|
})));
|
|
1760
1840
|
}
|
|
@@ -1767,7 +1847,7 @@ function DraggableList({
|
|
|
1767
1847
|
emptyMessage,
|
|
1768
1848
|
className
|
|
1769
1849
|
}) {
|
|
1770
|
-
const itemIds =
|
|
1850
|
+
const itemIds = React17.useMemo(() => items.map((item) => item.id), [items]);
|
|
1771
1851
|
const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
|
|
1772
1852
|
activationConstraint: {
|
|
1773
1853
|
distance: 5
|
|
@@ -1775,7 +1855,7 @@ function DraggableList({
|
|
|
1775
1855
|
}), core.useSensor(core.KeyboardSensor, {
|
|
1776
1856
|
coordinateGetter: sortable.sortableKeyboardCoordinates
|
|
1777
1857
|
}));
|
|
1778
|
-
const handleDragEnd =
|
|
1858
|
+
const handleDragEnd = React17.useCallback((event) => {
|
|
1779
1859
|
const {
|
|
1780
1860
|
active,
|
|
1781
1861
|
over
|
|
@@ -1786,31 +1866,31 @@ function DraggableList({
|
|
|
1786
1866
|
onReorder(oldIndex, newIndex);
|
|
1787
1867
|
}
|
|
1788
1868
|
}, [items, onReorder]);
|
|
1789
|
-
const containerRef =
|
|
1869
|
+
const containerRef = React17.useRef(null);
|
|
1790
1870
|
useKeyboardEvents(containerRef);
|
|
1791
1871
|
const DndContext = core.DndContext;
|
|
1792
|
-
return /* @__PURE__ */
|
|
1872
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1793
1873
|
ref: containerRef,
|
|
1794
1874
|
className: classNames9__default.default(DraggableList_default.draggableListContainer, className)
|
|
1795
|
-
}, /* @__PURE__ */
|
|
1875
|
+
}, /* @__PURE__ */ React17__default.default.createElement(DndContext, {
|
|
1796
1876
|
sensors,
|
|
1797
1877
|
collisionDetection: core.closestCenter,
|
|
1798
1878
|
onDragEnd: handleDragEnd
|
|
1799
|
-
}, /* @__PURE__ */
|
|
1879
|
+
}, /* @__PURE__ */ React17__default.default.createElement(sortable.SortableContext, {
|
|
1800
1880
|
items: itemIds,
|
|
1801
1881
|
strategy: sortable.verticalListSortingStrategy
|
|
1802
|
-
}, items.map((item) => /* @__PURE__ */
|
|
1882
|
+
}, items.map((item) => /* @__PURE__ */ React17__default.default.createElement(DraggableListItem, {
|
|
1803
1883
|
key: item.id,
|
|
1804
1884
|
item,
|
|
1805
1885
|
onRemove,
|
|
1806
1886
|
removeIconVariant,
|
|
1807
1887
|
renderContent
|
|
1808
|
-
})))), items.length === 0 && emptyMessage && /* @__PURE__ */
|
|
1888
|
+
})))), items.length === 0 && emptyMessage && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1809
1889
|
className: DraggableList_default.emptyState
|
|
1810
1890
|
}, emptyMessage));
|
|
1811
1891
|
}
|
|
1812
1892
|
var useKeyboardEvents = (containerRef) => {
|
|
1813
|
-
|
|
1893
|
+
React17.useEffect(() => {
|
|
1814
1894
|
const el = containerRef.current;
|
|
1815
1895
|
if (el == null) {
|
|
1816
1896
|
return;
|
|
@@ -1839,7 +1919,8 @@ var useKeyboardEvents = (containerRef) => {
|
|
|
1839
1919
|
var ColumnConfigDialog_default = {};
|
|
1840
1920
|
|
|
1841
1921
|
// src/object-table/ColumnConfigDialog.tsx
|
|
1842
|
-
|
|
1922
|
+
var ColumnConfigDialog = withObjectTableLabels(ColumnConfigDialogInner);
|
|
1923
|
+
function ColumnConfigDialogInner({
|
|
1843
1924
|
isOpen,
|
|
1844
1925
|
onClose,
|
|
1845
1926
|
columnOptions,
|
|
@@ -1848,9 +1929,10 @@ function ColumnConfigDialog({
|
|
|
1848
1929
|
onApply,
|
|
1849
1930
|
isValidConfig
|
|
1850
1931
|
}) {
|
|
1851
|
-
const
|
|
1852
|
-
const [
|
|
1853
|
-
const
|
|
1932
|
+
const labels = useObjectTableLabels();
|
|
1933
|
+
const [visibleColumns, setVisibleColumns] = React17.useState([]);
|
|
1934
|
+
const [searchQuery, setSearchQuery] = React17.useState("");
|
|
1935
|
+
const allColumns = React17.useMemo(() => {
|
|
1854
1936
|
return columnOptions.map((opt) => {
|
|
1855
1937
|
const isVisible = currentVisibility ? currentVisibility[opt.id] : false;
|
|
1856
1938
|
return {
|
|
@@ -1860,7 +1942,7 @@ function ColumnConfigDialog({
|
|
|
1860
1942
|
};
|
|
1861
1943
|
});
|
|
1862
1944
|
}, [columnOptions, currentVisibility]);
|
|
1863
|
-
|
|
1945
|
+
React17.useEffect(() => {
|
|
1864
1946
|
if (isOpen) {
|
|
1865
1947
|
const visibleCols = allColumns.filter((col) => col.isVisible);
|
|
1866
1948
|
if (!!currentColumnOrder?.length) {
|
|
@@ -1876,19 +1958,19 @@ function ColumnConfigDialog({
|
|
|
1876
1958
|
setSearchQuery("");
|
|
1877
1959
|
}
|
|
1878
1960
|
}, [isOpen, allColumns, currentColumnOrder]);
|
|
1879
|
-
const handleApply =
|
|
1961
|
+
const handleApply = React17.useCallback(() => {
|
|
1880
1962
|
onApply(getColumnConfig(allColumns, visibleColumns));
|
|
1881
1963
|
onClose();
|
|
1882
1964
|
}, [allColumns, visibleColumns, onApply, onClose]);
|
|
1883
1965
|
const isValid = isValidConfig ? isValidConfig(getColumnConfig(allColumns, visibleColumns)) : true;
|
|
1884
1966
|
const isApplyDisabled = visibleColumns.length === 0 || !isValid;
|
|
1885
|
-
const handleReorderColumns =
|
|
1967
|
+
const handleReorderColumns = React17.useCallback((fromIndex, toIndex) => {
|
|
1886
1968
|
setVisibleColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
|
|
1887
1969
|
}, []);
|
|
1888
|
-
const handleRemoveColumn =
|
|
1970
|
+
const handleRemoveColumn = React17.useCallback((columnId) => {
|
|
1889
1971
|
setVisibleColumns((prev) => prev.filter((col) => col.id !== columnId));
|
|
1890
1972
|
}, []);
|
|
1891
|
-
const handleToggleColumn =
|
|
1973
|
+
const handleToggleColumn = React17.useCallback((column) => {
|
|
1892
1974
|
setVisibleColumns((prev) => {
|
|
1893
1975
|
const isCurrentlyVisible = prev.some((col) => col.id === column.id);
|
|
1894
1976
|
if (isCurrentlyVisible) {
|
|
@@ -1898,10 +1980,10 @@ function ColumnConfigDialog({
|
|
|
1898
1980
|
}
|
|
1899
1981
|
});
|
|
1900
1982
|
}, []);
|
|
1901
|
-
const handleSearchChange =
|
|
1983
|
+
const handleSearchChange = React17.useCallback((event) => {
|
|
1902
1984
|
setSearchQuery(event.target.value);
|
|
1903
1985
|
}, []);
|
|
1904
|
-
const handleSelectAll =
|
|
1986
|
+
const handleSelectAll = React17.useCallback((columns) => {
|
|
1905
1987
|
setVisibleColumns((prev) => {
|
|
1906
1988
|
const allSelected = columns.every((col) => prev.some((v) => v.id === col.id));
|
|
1907
1989
|
if (allSelected) {
|
|
@@ -1912,33 +1994,36 @@ function ColumnConfigDialog({
|
|
|
1912
1994
|
}
|
|
1913
1995
|
});
|
|
1914
1996
|
}, []);
|
|
1915
|
-
const filteredAvailableColumns =
|
|
1997
|
+
const filteredAvailableColumns = React17.useMemo(() => {
|
|
1916
1998
|
const query = searchQuery.toLowerCase().trim();
|
|
1917
1999
|
if (!query) {
|
|
1918
2000
|
return allColumns;
|
|
1919
2001
|
}
|
|
1920
2002
|
return allColumns.filter((col) => (col.label?.toLowerCase().includes(query) ?? false) || col.id.toLowerCase().includes(query));
|
|
1921
2003
|
}, [allColumns, searchQuery]);
|
|
1922
|
-
const footer =
|
|
2004
|
+
const footer = React17.useMemo(() => /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
1923
2005
|
onClick: onClose
|
|
1924
|
-
},
|
|
2006
|
+
}, labels.columnConfigCancel), /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
1925
2007
|
variant: "primary",
|
|
1926
2008
|
onClick: handleApply,
|
|
1927
2009
|
disabled: isApplyDisabled
|
|
1928
|
-
},
|
|
1929
|
-
|
|
2010
|
+
}, labels.columnConfigApply)), [onClose, handleApply, isApplyDisabled, labels]);
|
|
2011
|
+
const dialogTitle = React17.useMemo(() => /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2012
|
+
className: ColumnConfigDialog_default.title
|
|
2013
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.Cog, null), labels.columnConfigTitle), [labels]);
|
|
2014
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkC6IPNPMZ_cjs.Dialog, {
|
|
1930
2015
|
isOpen,
|
|
1931
2016
|
onOpenChange: onClose,
|
|
1932
|
-
title:
|
|
2017
|
+
title: dialogTitle,
|
|
1933
2018
|
footer,
|
|
1934
2019
|
className: ColumnConfigDialog_default.columnConfigDialog
|
|
1935
|
-
}, /* @__PURE__ */
|
|
2020
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1936
2021
|
className: ColumnConfigDialog_default.dialogLayout
|
|
1937
|
-
}, /* @__PURE__ */
|
|
2022
|
+
}, /* @__PURE__ */ React17__default.default.createElement(VisibleColumnsList, {
|
|
1938
2023
|
columns: visibleColumns,
|
|
1939
2024
|
onReorder: handleReorderColumns,
|
|
1940
2025
|
onRemove: handleRemoveColumn
|
|
1941
|
-
}), /* @__PURE__ */
|
|
2026
|
+
}), /* @__PURE__ */ React17__default.default.createElement(AvailableColumnsList, {
|
|
1942
2027
|
visibleColumns,
|
|
1943
2028
|
searchQuery,
|
|
1944
2029
|
onSearchChange: handleSearchChange,
|
|
@@ -1947,9 +2032,6 @@ function ColumnConfigDialog({
|
|
|
1947
2032
|
filteredColumns: filteredAvailableColumns
|
|
1948
2033
|
})));
|
|
1949
2034
|
}
|
|
1950
|
-
var DialogTitle = /* @__PURE__ */ React16__default.default.createElement("div", {
|
|
1951
|
-
className: ColumnConfigDialog_default.title
|
|
1952
|
-
}, /* @__PURE__ */ React16__default.default.createElement(icons.Cog, null), "Configure Table Columns");
|
|
1953
2035
|
var getColumnConfig = (allColumns, visibleColumns) => {
|
|
1954
2036
|
const hiddenColumns = allColumns.filter((col) => !visibleColumns.some((v) => v.id === col.id));
|
|
1955
2037
|
return [...visibleColumns.map((col) => ({
|
|
@@ -1965,22 +2047,23 @@ function VisibleColumnsList({
|
|
|
1965
2047
|
onReorder,
|
|
1966
2048
|
onRemove
|
|
1967
2049
|
}) {
|
|
1968
|
-
|
|
2050
|
+
const labels = useObjectTableLabels();
|
|
2051
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1969
2052
|
className: ColumnConfigDialog_default.visibleColumnsContainer
|
|
1970
|
-
}, /* @__PURE__ */
|
|
2053
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1971
2054
|
className: ColumnConfigDialog_default.sectionHeader
|
|
1972
|
-
}, /* @__PURE__ */
|
|
2055
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1973
2056
|
className: ColumnConfigDialog_default.sectionTitle
|
|
1974
|
-
}, /* @__PURE__ */
|
|
2057
|
+
}, /* @__PURE__ */ React17__default.default.createElement("span", null, labels.columnConfigVisibleColumns), /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
1975
2058
|
className: ColumnConfigDialog_default.countTag
|
|
1976
|
-
}, columns.length)), /* @__PURE__ */
|
|
2059
|
+
}, columns.length)), /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
1977
2060
|
className: ColumnConfigDialog_default.sectionHint
|
|
1978
|
-
},
|
|
2061
|
+
}, labels.columnConfigDragToReorder)), /* @__PURE__ */ React17__default.default.createElement(DraggableList, {
|
|
1979
2062
|
items: columns,
|
|
1980
2063
|
onReorder,
|
|
1981
2064
|
onRemove,
|
|
1982
2065
|
removeIconVariant: "trash",
|
|
1983
|
-
emptyMessage:
|
|
2066
|
+
emptyMessage: labels.columnConfigNoVisibleColumns,
|
|
1984
2067
|
className: ColumnConfigDialog_default.columnList
|
|
1985
2068
|
}));
|
|
1986
2069
|
}
|
|
@@ -1996,42 +2079,43 @@ function AvailableColumnsList({
|
|
|
1996
2079
|
const totalCount = filteredColumns.length;
|
|
1997
2080
|
const allFilteredSelected = filteredColumns.every((col) => visibleColumns.some((v) => v.id === col.id));
|
|
1998
2081
|
const someFilteredSelected = filteredColumns.some((col) => visibleColumns.some((v) => v.id === col.id));
|
|
1999
|
-
const
|
|
2082
|
+
const labels = useObjectTableLabels();
|
|
2083
|
+
const handleSelectAllClick = React17.useCallback(() => {
|
|
2000
2084
|
onSelectAll(filteredColumns);
|
|
2001
2085
|
}, [filteredColumns, onSelectAll]);
|
|
2002
|
-
return /* @__PURE__ */
|
|
2086
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2003
2087
|
className: ColumnConfigDialog_default.availableColumnsContainer
|
|
2004
|
-
}, /* @__PURE__ */
|
|
2088
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2005
2089
|
className: classNames9__default.default(ColumnConfigDialog_default.sectionHeader, ColumnConfigDialog_default.sectionTitle)
|
|
2006
|
-
},
|
|
2090
|
+
}, labels.columnConfigAddOrRemoveColumns), /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.SearchBar, {
|
|
2007
2091
|
value: searchQuery,
|
|
2008
2092
|
onChange: onSearchChange,
|
|
2009
|
-
placeholder:
|
|
2010
|
-
"aria-label":
|
|
2093
|
+
placeholder: labels.columnConfigSearchPlaceholder,
|
|
2094
|
+
"aria-label": labels.columnConfigSearchAriaLabel,
|
|
2011
2095
|
className: ColumnConfigDialog_default.searchContainer
|
|
2012
|
-
}), /* @__PURE__ */
|
|
2096
|
+
}), /* @__PURE__ */ React17__default.default.createElement(collapsible.Collapsible.Root, {
|
|
2013
2097
|
defaultOpen: true,
|
|
2014
2098
|
className: ColumnConfigDialog_default.propertiesList
|
|
2015
|
-
}, /* @__PURE__ */
|
|
2099
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2016
2100
|
className: ColumnConfigDialog_default.categoryHeader
|
|
2017
|
-
}, /* @__PURE__ */
|
|
2101
|
+
}, /* @__PURE__ */ React17__default.default.createElement("label", {
|
|
2018
2102
|
className: ColumnConfigDialog_default.selectAllLabel
|
|
2019
|
-
}, /* @__PURE__ */
|
|
2103
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.Checkbox, {
|
|
2020
2104
|
checked: allFilteredSelected,
|
|
2021
2105
|
indeterminate: someFilteredSelected && !allFilteredSelected,
|
|
2022
2106
|
onCheckedChange: handleSelectAllClick,
|
|
2023
2107
|
className: ColumnConfigDialog_default.checkbox
|
|
2024
|
-
}),
|
|
2108
|
+
}), labels.columnConfigAllColumns), /* @__PURE__ */ React17__default.default.createElement(collapsible.Collapsible.Trigger, {
|
|
2025
2109
|
className: ColumnConfigDialog_default.categoryTrigger
|
|
2026
|
-
}, /* @__PURE__ */
|
|
2110
|
+
}, /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
2027
2111
|
className: ColumnConfigDialog_default.categoryCount
|
|
2028
|
-
}, selectedCount, "/", totalCount), /* @__PURE__ */
|
|
2112
|
+
}, selectedCount, "/", totalCount), /* @__PURE__ */ React17__default.default.createElement(icons.CaretDown, {
|
|
2029
2113
|
className: ColumnConfigDialog_default.caretIcon
|
|
2030
|
-
}))), /* @__PURE__ */
|
|
2114
|
+
}))), /* @__PURE__ */ React17__default.default.createElement(collapsible.Collapsible.Panel, {
|
|
2031
2115
|
className: ColumnConfigDialog_default.propertyList
|
|
2032
|
-
}, filteredColumns.length === 0 ? /* @__PURE__ */
|
|
2116
|
+
}, filteredColumns.length === 0 ? /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2033
2117
|
className: ColumnConfigDialog_default.emptyState
|
|
2034
|
-
},
|
|
2118
|
+
}, labels.columnConfigNoMatchingColumns) : filteredColumns.map((column) => /* @__PURE__ */ React17__default.default.createElement(PropertyItem, {
|
|
2035
2119
|
key: column.id,
|
|
2036
2120
|
column,
|
|
2037
2121
|
isSelected: visibleColumns.some((v) => v.id === column.id),
|
|
@@ -2044,20 +2128,20 @@ function PropertyItem({
|
|
|
2044
2128
|
onToggle,
|
|
2045
2129
|
showInfoIcon = false
|
|
2046
2130
|
}) {
|
|
2047
|
-
const handleClick =
|
|
2131
|
+
const handleClick = React17.useCallback(() => {
|
|
2048
2132
|
onToggle(column);
|
|
2049
2133
|
}, [onToggle, column]);
|
|
2050
|
-
return /* @__PURE__ */
|
|
2134
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2051
2135
|
className: ColumnConfigDialog_default.propertyItem
|
|
2052
|
-
}, /* @__PURE__ */
|
|
2136
|
+
}, /* @__PURE__ */ React17__default.default.createElement("label", {
|
|
2053
2137
|
className: ColumnConfigDialog_default.propertyLabel
|
|
2054
|
-
}, /* @__PURE__ */
|
|
2138
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.Checkbox, {
|
|
2055
2139
|
checked: isSelected,
|
|
2056
2140
|
onCheckedChange: handleClick,
|
|
2057
2141
|
className: ColumnConfigDialog_default.checkbox
|
|
2058
|
-
}), /* @__PURE__ */
|
|
2142
|
+
}), /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
2059
2143
|
className: ColumnConfigDialog_default.propertyName
|
|
2060
|
-
}, column.label)), showInfoIcon && /* @__PURE__ */
|
|
2144
|
+
}, column.label)), showInfoIcon && /* @__PURE__ */ React17__default.default.createElement(icons.SmallInfoSign, {
|
|
2061
2145
|
className: ColumnConfigDialog_default.infoIcon
|
|
2062
2146
|
}));
|
|
2063
2147
|
}
|
|
@@ -2067,8 +2151,8 @@ function SortableItemsList({
|
|
|
2067
2151
|
onRemove,
|
|
2068
2152
|
className
|
|
2069
2153
|
}) {
|
|
2070
|
-
const renderContent =
|
|
2071
|
-
return /* @__PURE__ */
|
|
2154
|
+
const renderContent = React17.useCallback((item) => item.content, []);
|
|
2155
|
+
return /* @__PURE__ */ React17__default.default.createElement(DraggableList, {
|
|
2072
2156
|
items,
|
|
2073
2157
|
onReorder,
|
|
2074
2158
|
onRemove,
|
|
@@ -2082,15 +2166,17 @@ function SortableItemsList({
|
|
|
2082
2166
|
var MultiColumnSortDialog_default = {};
|
|
2083
2167
|
|
|
2084
2168
|
// src/object-table/MultiColumnSortDialog.tsx
|
|
2085
|
-
|
|
2169
|
+
var MultiColumnSortDialog = withObjectTableLabels(MultiColumnSortDialogInner);
|
|
2170
|
+
function MultiColumnSortDialogInner({
|
|
2086
2171
|
isOpen,
|
|
2087
2172
|
onClose,
|
|
2088
2173
|
onApply,
|
|
2089
2174
|
currentSorting,
|
|
2090
2175
|
columnOptions
|
|
2091
2176
|
}) {
|
|
2092
|
-
const
|
|
2093
|
-
|
|
2177
|
+
const labels = useObjectTableLabels();
|
|
2178
|
+
const [selectedSortColumns, setSelectedSortColumns] = React17.useState([]);
|
|
2179
|
+
React17.useEffect(() => {
|
|
2094
2180
|
if (isOpen) {
|
|
2095
2181
|
const selectedColumns = [];
|
|
2096
2182
|
for (const sort of currentSorting) {
|
|
@@ -2105,25 +2191,25 @@ function MultiColumnSortDialog({
|
|
|
2105
2191
|
setSelectedSortColumns(selectedColumns);
|
|
2106
2192
|
}
|
|
2107
2193
|
}, [isOpen, currentSorting, columnOptions]);
|
|
2108
|
-
const handleAddColumn =
|
|
2194
|
+
const handleAddColumn = React17.useCallback((column) => {
|
|
2109
2195
|
setSelectedSortColumns((prev) => [...prev, {
|
|
2110
2196
|
...column,
|
|
2111
2197
|
direction: "asc"
|
|
2112
2198
|
}]);
|
|
2113
2199
|
}, []);
|
|
2114
|
-
const handleRemoveSortColumn =
|
|
2200
|
+
const handleRemoveSortColumn = React17.useCallback((id) => {
|
|
2115
2201
|
setSelectedSortColumns((prev) => prev.filter((item) => item.id !== id));
|
|
2116
2202
|
}, []);
|
|
2117
|
-
const handleReorderSortColumns =
|
|
2203
|
+
const handleReorderSortColumns = React17.useCallback((fromIndex, toIndex) => {
|
|
2118
2204
|
setSelectedSortColumns((items) => sortable.arrayMove(items, fromIndex, toIndex));
|
|
2119
2205
|
}, []);
|
|
2120
|
-
const handleToggleSortDirection =
|
|
2206
|
+
const handleToggleSortDirection = React17.useCallback((id) => {
|
|
2121
2207
|
setSelectedSortColumns((prev) => prev.map((item) => item.id === id ? {
|
|
2122
2208
|
...item,
|
|
2123
2209
|
direction: item.direction === "asc" ? "desc" : "asc"
|
|
2124
2210
|
} : item));
|
|
2125
2211
|
}, []);
|
|
2126
|
-
const handleApply =
|
|
2212
|
+
const handleApply = React17.useCallback(() => {
|
|
2127
2213
|
const sortingState = selectedSortColumns.map((col) => ({
|
|
2128
2214
|
id: col.id,
|
|
2129
2215
|
desc: col.direction === "desc"
|
|
@@ -2131,71 +2217,71 @@ function MultiColumnSortDialog({
|
|
|
2131
2217
|
onApply(sortingState);
|
|
2132
2218
|
onClose();
|
|
2133
2219
|
}, [selectedSortColumns, onApply, onClose]);
|
|
2134
|
-
const availableColumns =
|
|
2135
|
-
const searchableMenuItems =
|
|
2220
|
+
const availableColumns = React17.useMemo(() => columnOptions.filter((col) => col.canSort && !selectedSortColumns.some((selected) => selected.id === col.id)), [columnOptions, selectedSortColumns]);
|
|
2221
|
+
const searchableMenuItems = React17.useMemo(() => availableColumns.map((col) => ({
|
|
2136
2222
|
key: col.id,
|
|
2137
2223
|
label: col.name
|
|
2138
2224
|
})), [availableColumns]);
|
|
2139
|
-
const handleMenuItemSelected =
|
|
2225
|
+
const handleMenuItemSelected = React17.useCallback((key) => {
|
|
2140
2226
|
const column = availableColumns.find((col) => col.id === key);
|
|
2141
2227
|
if (column) {
|
|
2142
2228
|
handleAddColumn(column);
|
|
2143
2229
|
}
|
|
2144
2230
|
}, [availableColumns, handleAddColumn]);
|
|
2145
|
-
const sortableItems =
|
|
2231
|
+
const sortableItems = React17.useMemo(() => {
|
|
2146
2232
|
return selectedSortColumns.map((item) => ({
|
|
2147
2233
|
id: item.id,
|
|
2148
2234
|
label: item.name,
|
|
2149
|
-
content: /* @__PURE__ */
|
|
2235
|
+
content: /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2150
2236
|
className: MultiColumnSortDialog_default.sortColumnItem
|
|
2151
|
-
}, /* @__PURE__ */
|
|
2237
|
+
}, /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
2152
2238
|
className: classNames9__default.default(MultiColumnSortDialog_default.sortColumnName, MultiColumnSortDialog_default.truncate)
|
|
2153
|
-
}, item.name), /* @__PURE__ */
|
|
2239
|
+
}, item.name), /* @__PURE__ */ React17__default.default.createElement(button.Button, {
|
|
2154
2240
|
className: MultiColumnSortDialog_default.sortDirectionButton,
|
|
2155
2241
|
onClick: () => handleToggleSortDirection(item.id),
|
|
2156
|
-
"aria-label":
|
|
2157
|
-
}, item.direction === "asc" ? /* @__PURE__ */
|
|
2242
|
+
"aria-label": labels.sortDialogToggleDirection(item.name)
|
|
2243
|
+
}, item.direction === "asc" ? /* @__PURE__ */ React17__default.default.createElement(icons.SortAlphabetical, {
|
|
2158
2244
|
className: MultiColumnSortDialog_default.sortIcon
|
|
2159
|
-
}) : /* @__PURE__ */
|
|
2245
|
+
}) : /* @__PURE__ */ React17__default.default.createElement(icons.SortAlphabeticalDesc, {
|
|
2160
2246
|
className: MultiColumnSortDialog_default.sortIcon
|
|
2161
2247
|
})))
|
|
2162
2248
|
}));
|
|
2163
|
-
}, [selectedSortColumns, handleToggleSortDirection]);
|
|
2164
|
-
const footer =
|
|
2249
|
+
}, [selectedSortColumns, handleToggleSortDirection, labels]);
|
|
2250
|
+
const footer = React17.useMemo(() => /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
2165
2251
|
onClick: onClose
|
|
2166
|
-
},
|
|
2252
|
+
}, labels.sortDialogCancel), /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
2167
2253
|
variant: "primary",
|
|
2168
2254
|
onClick: handleApply
|
|
2169
|
-
},
|
|
2170
|
-
|
|
2255
|
+
}, labels.sortDialogApply)), [handleApply, onClose, labels]);
|
|
2256
|
+
const dialogTitle = React17.useMemo(() => /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2257
|
+
className: MultiColumnSortDialog_default.title
|
|
2258
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.Cog, null), labels.sortDialogTitle), [labels]);
|
|
2259
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkC6IPNPMZ_cjs.Dialog, {
|
|
2171
2260
|
isOpen,
|
|
2172
2261
|
onOpenChange: onClose,
|
|
2173
|
-
title:
|
|
2262
|
+
title: dialogTitle,
|
|
2174
2263
|
footer
|
|
2175
|
-
}, /* @__PURE__ */
|
|
2264
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2176
2265
|
className: MultiColumnSortDialog_default.sortColumnsList
|
|
2177
|
-
}, /* @__PURE__ */
|
|
2266
|
+
}, /* @__PURE__ */ React17__default.default.createElement(SortableItemsList, {
|
|
2178
2267
|
items: sortableItems,
|
|
2179
2268
|
onReorder: handleReorderSortColumns,
|
|
2180
2269
|
onRemove: handleRemoveSortColumn,
|
|
2181
2270
|
className: MultiColumnSortDialog_default.sortableList
|
|
2182
|
-
}), /* @__PURE__ */
|
|
2271
|
+
}), /* @__PURE__ */ React17__default.default.createElement(chunkHWBCFCBO_cjs.SearchableMenu, {
|
|
2183
2272
|
items: searchableMenuItems,
|
|
2184
2273
|
onItemSelected: handleMenuItemSelected,
|
|
2185
|
-
trigger: /* @__PURE__ */
|
|
2274
|
+
trigger: /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(icons.Add, {
|
|
2186
2275
|
className: MultiColumnSortDialog_default.addIcon
|
|
2187
|
-
}), /* @__PURE__ */
|
|
2276
|
+
}), /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
2188
2277
|
className: MultiColumnSortDialog_default.addColumnText
|
|
2189
|
-
},
|
|
2278
|
+
}, labels.sortDialogAddColumnToSort), /* @__PURE__ */ React17__default.default.createElement(icons.CaretDown, null)),
|
|
2190
2279
|
triggerClassName: MultiColumnSortDialog_default.addColumnButton,
|
|
2191
2280
|
disabled: availableColumns.length === 0,
|
|
2192
|
-
searchPlaceholder:
|
|
2193
|
-
emptyMessage:
|
|
2281
|
+
searchPlaceholder: labels.sortDialogSearchPlaceholder,
|
|
2282
|
+
emptyMessage: labels.sortDialogNoMatchingColumns
|
|
2194
2283
|
})));
|
|
2195
2284
|
}
|
|
2196
|
-
var DialogTitle2 = /* @__PURE__ */ React16__default.default.createElement("div", {
|
|
2197
|
-
className: MultiColumnSortDialog_default.title
|
|
2198
|
-
}, /* @__PURE__ */ React16__default.default.createElement(icons.Cog, null), "Sort on Multiple Columns");
|
|
2199
2285
|
|
|
2200
2286
|
// src/object-table/TableHeaderContent.module.css
|
|
2201
2287
|
var TableHeaderContent_default = {};
|
|
@@ -2204,7 +2290,7 @@ var TableHeaderContent_default = {};
|
|
|
2204
2290
|
function TableHeaderContent({
|
|
2205
2291
|
header
|
|
2206
2292
|
}) {
|
|
2207
|
-
return /* @__PURE__ */
|
|
2293
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2208
2294
|
className: TableHeaderContent_default.osdkHeaderContent
|
|
2209
2295
|
}, reactTable.flexRender(header.column.columnDef.header, header.getContext()));
|
|
2210
2296
|
}
|
|
@@ -2219,13 +2305,13 @@ function HeaderMenuItem({
|
|
|
2219
2305
|
label,
|
|
2220
2306
|
active = false
|
|
2221
2307
|
}) {
|
|
2222
|
-
return /* @__PURE__ */
|
|
2308
|
+
return /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Item, {
|
|
2223
2309
|
closeOnClick: true,
|
|
2224
2310
|
className: classNames9__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
|
|
2225
2311
|
onClick
|
|
2226
|
-
}, /* @__PURE__ */
|
|
2312
|
+
}, /* @__PURE__ */ React17__default.default.createElement(Icon, {
|
|
2227
2313
|
className: TableHeaderWithPopover_default.osdkHeaderIcon
|
|
2228
|
-
}), /* @__PURE__ */
|
|
2314
|
+
}), /* @__PURE__ */ React17__default.default.createElement("span", null, label));
|
|
2229
2315
|
}
|
|
2230
2316
|
function TableHeaderWithPopover({
|
|
2231
2317
|
header,
|
|
@@ -2239,6 +2325,7 @@ function TableHeaderWithPopover({
|
|
|
2239
2325
|
onColumnHeaderClick
|
|
2240
2326
|
}) {
|
|
2241
2327
|
const portalContainer = chunkDWNKXV5E_cjs.usePortalContainer();
|
|
2328
|
+
const labels = useObjectTableLabels();
|
|
2242
2329
|
const {
|
|
2243
2330
|
showSortingItems = false,
|
|
2244
2331
|
showPinningItems = false,
|
|
@@ -2250,8 +2337,8 @@ function TableHeaderWithPopover({
|
|
|
2250
2337
|
setSorting
|
|
2251
2338
|
} = table;
|
|
2252
2339
|
const currentSorting = table.getState().sorting;
|
|
2253
|
-
const [isOpen, setIsOpen] =
|
|
2254
|
-
const handlePinLeft =
|
|
2340
|
+
const [isOpen, setIsOpen] = React17.useState(false);
|
|
2341
|
+
const handlePinLeft = React17.useCallback(() => {
|
|
2255
2342
|
setColumnPinning((prev) => {
|
|
2256
2343
|
return {
|
|
2257
2344
|
left: [...prev.left || [], header.column.id],
|
|
@@ -2259,7 +2346,7 @@ function TableHeaderWithPopover({
|
|
|
2259
2346
|
};
|
|
2260
2347
|
});
|
|
2261
2348
|
}, [header.column.id, setColumnPinning]);
|
|
2262
|
-
const handleUnpin =
|
|
2349
|
+
const handleUnpin = React17.useCallback(() => {
|
|
2263
2350
|
setColumnPinning((prev) => {
|
|
2264
2351
|
return {
|
|
2265
2352
|
left: prev.left?.filter((id) => id !== header.column.id) || [],
|
|
@@ -2267,42 +2354,42 @@ function TableHeaderWithPopover({
|
|
|
2267
2354
|
};
|
|
2268
2355
|
});
|
|
2269
2356
|
}, [header.column.id, setColumnPinning]);
|
|
2270
|
-
const handleSortAscending =
|
|
2357
|
+
const handleSortAscending = React17.useCallback(() => {
|
|
2271
2358
|
header.column.toggleSorting(false);
|
|
2272
2359
|
setSorting?.([{
|
|
2273
2360
|
id: header.column.id,
|
|
2274
2361
|
desc: false
|
|
2275
2362
|
}]);
|
|
2276
2363
|
}, [header.column, setSorting]);
|
|
2277
|
-
const handleSortDescending =
|
|
2364
|
+
const handleSortDescending = React17.useCallback(() => {
|
|
2278
2365
|
header.column.toggleSorting(true);
|
|
2279
2366
|
setSorting?.([{
|
|
2280
2367
|
id: header.column.id,
|
|
2281
2368
|
desc: true
|
|
2282
2369
|
}]);
|
|
2283
2370
|
}, [header.column, setSorting]);
|
|
2284
|
-
const handleClearAllSorts =
|
|
2371
|
+
const handleClearAllSorts = React17.useCallback(() => {
|
|
2285
2372
|
header.column.clearSorting();
|
|
2286
2373
|
setSorting?.([]);
|
|
2287
2374
|
}, [header.column, setSorting]);
|
|
2288
|
-
const handleResetSize =
|
|
2375
|
+
const handleResetSize = React17.useCallback(() => {
|
|
2289
2376
|
header.column.resetSize();
|
|
2290
2377
|
if (onResetSize) {
|
|
2291
2378
|
onResetSize();
|
|
2292
2379
|
}
|
|
2293
2380
|
}, [header.column, onResetSize]);
|
|
2294
|
-
const handleInteraction =
|
|
2381
|
+
const handleInteraction = React17.useCallback((e) => {
|
|
2295
2382
|
e.preventDefault();
|
|
2296
2383
|
setIsOpen((prev) => !prev);
|
|
2297
2384
|
}, []);
|
|
2298
|
-
const handleHeaderClick =
|
|
2385
|
+
const handleHeaderClick = React17.useCallback(() => {
|
|
2299
2386
|
onColumnHeaderClick?.(header.column.id);
|
|
2300
2387
|
}, [header.column.id, onColumnHeaderClick]);
|
|
2301
|
-
const handleOpenColumnConfig =
|
|
2388
|
+
const handleOpenColumnConfig = React17.useCallback(() => {
|
|
2302
2389
|
onOpenColumnConfig?.();
|
|
2303
2390
|
setIsOpen(false);
|
|
2304
2391
|
}, [onOpenColumnConfig]);
|
|
2305
|
-
const handleOpenMultiSort =
|
|
2392
|
+
const handleOpenMultiSort = React17.useCallback(() => {
|
|
2306
2393
|
onOpenMultiSort?.();
|
|
2307
2394
|
setIsOpen(false);
|
|
2308
2395
|
}, [onOpenMultiSort]);
|
|
@@ -2310,76 +2397,76 @@ function TableHeaderWithPopover({
|
|
|
2310
2397
|
const isSortable = header.column.getCanSort();
|
|
2311
2398
|
const sortIndex = currentSorting?.findIndex((s) => s.id === header.column.id) ?? -1;
|
|
2312
2399
|
const hasAnyMenuItems = showPinningItems || showSortingItems && isSortable || showResizeItem || showConfigItem;
|
|
2313
|
-
return /* @__PURE__ */
|
|
2400
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Root, {
|
|
2314
2401
|
open: isOpen,
|
|
2315
2402
|
onOpenChange: setIsOpen,
|
|
2316
2403
|
modal: false
|
|
2317
|
-
}, /* @__PURE__ */
|
|
2404
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2318
2405
|
className: classNames9__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
|
|
2319
2406
|
onContextMenu: handleInteraction
|
|
2320
|
-
}, /* @__PURE__ */
|
|
2407
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2321
2408
|
className: classNames9__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft, onColumnHeaderClick && TableHeaderWithPopover_default.osdkHeaderContentLeftClickable),
|
|
2322
2409
|
onClick: onColumnHeaderClick ? handleHeaderClick : void 0
|
|
2323
|
-
}, isColumnPinned && /* @__PURE__ */
|
|
2410
|
+
}, isColumnPinned && /* @__PURE__ */ React17__default.default.createElement(icons.Pin, {
|
|
2324
2411
|
className: TableHeaderWithPopover_default.osdkHeaderIcon
|
|
2325
|
-
}), /* @__PURE__ */
|
|
2412
|
+
}), /* @__PURE__ */ React17__default.default.createElement(TableHeaderContent, {
|
|
2326
2413
|
header
|
|
2327
|
-
})), /* @__PURE__ */
|
|
2414
|
+
})), /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2328
2415
|
className: classNames9__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
|
|
2329
|
-
}, isSorted && /* @__PURE__ */
|
|
2416
|
+
}, isSorted && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2330
2417
|
className: TableHeaderWithPopover_default.osdkCenterContainer
|
|
2331
|
-
}, isSorted === "asc" ? /* @__PURE__ */
|
|
2418
|
+
}, isSorted === "asc" ? /* @__PURE__ */ React17__default.default.createElement(icons.SortAlphabetical, {
|
|
2332
2419
|
className: TableHeaderWithPopover_default.osdkHeaderIcon
|
|
2333
|
-
}) : /* @__PURE__ */
|
|
2420
|
+
}) : /* @__PURE__ */ React17__default.default.createElement(icons.SortAlphabeticalDesc, {
|
|
2334
2421
|
className: TableHeaderWithPopover_default.osdkHeaderIcon
|
|
2335
|
-
}), currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */
|
|
2422
|
+
}), currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ React17__default.default.createElement("span", {
|
|
2336
2423
|
className: TableHeaderWithPopover_default.sortIndex
|
|
2337
|
-
}, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */
|
|
2338
|
-
"aria-label":
|
|
2424
|
+
}, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Trigger, {
|
|
2425
|
+
"aria-label": labels.headerMenuAriaLabel(header.column.id),
|
|
2339
2426
|
className: classNames9__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
|
|
2340
|
-
}, /* @__PURE__ */
|
|
2427
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.ChevronDown, {
|
|
2341
2428
|
className: TableHeaderWithPopover_default.osdkHeaderIcon
|
|
2342
|
-
}))), /* @__PURE__ */
|
|
2429
|
+
}))), /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Portal, {
|
|
2343
2430
|
container: portalContainer
|
|
2344
|
-
}, /* @__PURE__ */
|
|
2431
|
+
}, /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Positioner, {
|
|
2345
2432
|
sideOffset: 4
|
|
2346
|
-
}, /* @__PURE__ */
|
|
2433
|
+
}, /* @__PURE__ */ React17__default.default.createElement(menu.Menu.Popup, {
|
|
2347
2434
|
className: TableHeaderWithPopover_default.osdkHeaderPopup
|
|
2348
|
-
}, showPinningItems && !isColumnPinned && /* @__PURE__ */
|
|
2435
|
+
}, showPinningItems && !isColumnPinned && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2349
2436
|
onClick: handlePinLeft,
|
|
2350
2437
|
icon: icons.Pin,
|
|
2351
|
-
label:
|
|
2352
|
-
}), showPinningItems && isColumnPinned && /* @__PURE__ */
|
|
2438
|
+
label: labels.headerMenuPinColumn
|
|
2439
|
+
}), showPinningItems && isColumnPinned && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2353
2440
|
onClick: handleUnpin,
|
|
2354
2441
|
icon: icons.Unpin,
|
|
2355
|
-
label:
|
|
2442
|
+
label: labels.headerMenuUnpinColumn,
|
|
2356
2443
|
active: true
|
|
2357
|
-
}), showSortingItems && isSortable && /* @__PURE__ */
|
|
2444
|
+
}), showSortingItems && isSortable && /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2358
2445
|
onClick: handleSortAscending,
|
|
2359
2446
|
icon: icons.SortAlphabetical,
|
|
2360
|
-
label:
|
|
2447
|
+
label: labels.headerMenuSortAscending,
|
|
2361
2448
|
active: isSorted === "asc"
|
|
2362
|
-
}), /* @__PURE__ */
|
|
2449
|
+
}), /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2363
2450
|
onClick: handleSortDescending,
|
|
2364
2451
|
icon: icons.SortAlphabeticalDesc,
|
|
2365
|
-
label:
|
|
2452
|
+
label: labels.headerMenuSortDescending,
|
|
2366
2453
|
active: isSorted === "desc"
|
|
2367
|
-
}), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */
|
|
2454
|
+
}), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2368
2455
|
onClick: handleOpenMultiSort,
|
|
2369
2456
|
icon: icons.Sort,
|
|
2370
|
-
label:
|
|
2371
|
-
})), showSortingItems && !!currentSorting?.length && /* @__PURE__ */
|
|
2457
|
+
label: labels.headerMenuSortOnMultipleColumns
|
|
2458
|
+
})), showSortingItems && !!currentSorting?.length && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2372
2459
|
onClick: handleClearAllSorts,
|
|
2373
2460
|
icon: icons.Remove,
|
|
2374
|
-
label:
|
|
2375
|
-
}), showResizeItem && /* @__PURE__ */
|
|
2461
|
+
label: labels.headerMenuClearAllSorts
|
|
2462
|
+
}), showResizeItem && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2376
2463
|
onClick: handleResetSize,
|
|
2377
2464
|
icon: icons.VerticalDistribution,
|
|
2378
|
-
label:
|
|
2379
|
-
}), showConfigItem && /* @__PURE__ */
|
|
2465
|
+
label: labels.headerMenuResetColumnSize
|
|
2466
|
+
}), showConfigItem && /* @__PURE__ */ React17__default.default.createElement(HeaderMenuItem, {
|
|
2380
2467
|
onClick: handleOpenColumnConfig,
|
|
2381
2468
|
icon: icons.Settings,
|
|
2382
|
-
label:
|
|
2469
|
+
label: labels.headerMenuConfigureColumns
|
|
2383
2470
|
})))))));
|
|
2384
2471
|
}
|
|
2385
2472
|
|
|
@@ -2434,25 +2521,25 @@ function TableHeader({
|
|
|
2434
2521
|
const currentVisibility = table.getState().columnVisibility;
|
|
2435
2522
|
const currentColumnOrder = table.getState().columnOrder;
|
|
2436
2523
|
const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
|
|
2437
|
-
const [configDialogOpen, setConfigDialogOpen] =
|
|
2438
|
-
const [multiSortDialogOpen, setMultiSortDialogOpen] =
|
|
2439
|
-
const handleOpenColumnConfig =
|
|
2524
|
+
const [configDialogOpen, setConfigDialogOpen] = React17.useState(false);
|
|
2525
|
+
const [multiSortDialogOpen, setMultiSortDialogOpen] = React17.useState(false);
|
|
2526
|
+
const handleOpenColumnConfig = React17.useCallback(() => {
|
|
2440
2527
|
setConfigDialogOpen(true);
|
|
2441
2528
|
}, []);
|
|
2442
|
-
const handleCloseColumnConfig =
|
|
2529
|
+
const handleCloseColumnConfig = React17.useCallback(() => {
|
|
2443
2530
|
setConfigDialogOpen(false);
|
|
2444
2531
|
}, []);
|
|
2445
|
-
const handleOpenMultiSort =
|
|
2532
|
+
const handleOpenMultiSort = React17.useCallback(() => {
|
|
2446
2533
|
setMultiSortDialogOpen(true);
|
|
2447
2534
|
}, []);
|
|
2448
|
-
const handleCloseMultiSort =
|
|
2535
|
+
const handleCloseMultiSort = React17.useCallback(() => {
|
|
2449
2536
|
setMultiSortDialogOpen(false);
|
|
2450
2537
|
}, []);
|
|
2451
|
-
const handleApplyMultiSort =
|
|
2538
|
+
const handleApplyMultiSort = React17.useCallback((sortColumns) => {
|
|
2452
2539
|
setMultiSortDialogOpen(false);
|
|
2453
2540
|
setSorting?.(sortColumns);
|
|
2454
2541
|
}, [setSorting]);
|
|
2455
|
-
const handleApplyColumnConfig =
|
|
2542
|
+
const handleApplyColumnConfig = React17.useCallback((updates) => {
|
|
2456
2543
|
const newVisibilityState = {};
|
|
2457
2544
|
for (const update of updates) {
|
|
2458
2545
|
newVisibilityState[update.columnId] = update.isVisible;
|
|
@@ -2460,7 +2547,7 @@ function TableHeader({
|
|
|
2460
2547
|
setColumnOrder(updates.map((col) => col.columnId));
|
|
2461
2548
|
setColumnVisibility(newVisibilityState);
|
|
2462
2549
|
}, [setColumnOrder, setColumnVisibility]);
|
|
2463
|
-
const columnOptions =
|
|
2550
|
+
const columnOptions = React17.useMemo(() => {
|
|
2464
2551
|
const allHeaders = table.getHeaderGroups().flatMap((headerGroup) => headerGroup.headers);
|
|
2465
2552
|
return table.getAllColumns().filter((column) => column.id !== SELECTION_COLUMN_ID).map((column) => {
|
|
2466
2553
|
return {
|
|
@@ -2470,10 +2557,10 @@ function TableHeader({
|
|
|
2470
2557
|
};
|
|
2471
2558
|
});
|
|
2472
2559
|
}, [table]);
|
|
2473
|
-
return /* @__PURE__ */
|
|
2560
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement("thead", {
|
|
2474
2561
|
className: TableHeader_default.osdkTableHeader,
|
|
2475
2562
|
"data-resizing": isResizing
|
|
2476
|
-
}, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */
|
|
2563
|
+
}, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React17__default.default.createElement("tr", {
|
|
2477
2564
|
key: headerGroup.id,
|
|
2478
2565
|
className: TableHeader_default.osdkTableHeaderRow
|
|
2479
2566
|
}, headerGroup.headers.map((header) => {
|
|
@@ -2482,16 +2569,16 @@ function TableHeader({
|
|
|
2482
2569
|
} = getColumnPinningStyles(header.column);
|
|
2483
2570
|
const isColumnPinned = header.column.getIsPinned();
|
|
2484
2571
|
const isSelectColumn = header.id === SELECTION_COLUMN_ID;
|
|
2485
|
-
return /* @__PURE__ */
|
|
2572
|
+
return /* @__PURE__ */ React17__default.default.createElement("th", {
|
|
2486
2573
|
key: header.id,
|
|
2487
2574
|
"data-pinned": header.column.getIsPinned(),
|
|
2488
2575
|
className: classNames9__default.default(TableHeader_default.osdkTableHeaderCell, {
|
|
2489
2576
|
[TableHeader_default.osdkTableSelectionHeaderCell]: isSelectColumn
|
|
2490
2577
|
}),
|
|
2491
2578
|
style: columnStyles
|
|
2492
|
-
}, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */
|
|
2579
|
+
}, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React17__default.default.createElement(TableHeaderContent, {
|
|
2493
2580
|
header
|
|
2494
|
-
}) : /* @__PURE__ */
|
|
2581
|
+
}) : /* @__PURE__ */ React17__default.default.createElement(TableHeaderWithPopover, {
|
|
2495
2582
|
table,
|
|
2496
2583
|
header,
|
|
2497
2584
|
isColumnPinned,
|
|
@@ -2500,20 +2587,20 @@ function TableHeader({
|
|
|
2500
2587
|
onOpenColumnConfig: handleOpenColumnConfig,
|
|
2501
2588
|
onOpenMultiSort: handleOpenMultiSort,
|
|
2502
2589
|
onColumnHeaderClick
|
|
2503
|
-
}), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /* @__PURE__ */
|
|
2590
|
+
}), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2504
2591
|
className: TableHeader_default.osdkTableHeaderResizer,
|
|
2505
2592
|
onDoubleClick: () => header.column.resetSize(),
|
|
2506
2593
|
onMouseDown: header.getResizeHandler(),
|
|
2507
2594
|
onTouchStart: header.getResizeHandler()
|
|
2508
2595
|
}));
|
|
2509
|
-
})))), !!columnOptions?.length && /* @__PURE__ */
|
|
2596
|
+
})))), !!columnOptions?.length && /* @__PURE__ */ React17__default.default.createElement(ColumnConfigDialog, {
|
|
2510
2597
|
isOpen: configDialogOpen,
|
|
2511
2598
|
onClose: handleCloseColumnConfig,
|
|
2512
2599
|
columnOptions,
|
|
2513
2600
|
currentVisibility,
|
|
2514
2601
|
currentColumnOrder,
|
|
2515
2602
|
onApply: handleApplyColumnConfig
|
|
2516
|
-
}), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */
|
|
2603
|
+
}), columnOptions?.some((col) => col.canSort) && /* @__PURE__ */ React17__default.default.createElement(MultiColumnSortDialog, {
|
|
2517
2604
|
isOpen: multiSortDialogOpen,
|
|
2518
2605
|
onClose: handleCloseMultiSort,
|
|
2519
2606
|
columnOptions,
|
|
@@ -2535,13 +2622,13 @@ function LoadingStateTable({
|
|
|
2535
2622
|
}) {
|
|
2536
2623
|
const enableRowSelection = table.options.enableRowSelection;
|
|
2537
2624
|
const minHeaderCount = enableRowSelection ? 1 : 0;
|
|
2538
|
-
const headers =
|
|
2625
|
+
const headers = React17.useMemo(() => headerGroups.length > 0 ? headerGroups[0].headers : [], [headerGroups]);
|
|
2539
2626
|
const hasHeadersLoaded = headers.length > minHeaderCount;
|
|
2540
|
-
const headerRef =
|
|
2541
|
-
const bodyRef =
|
|
2542
|
-
const [loadingRowCount, setLoadingRowCount] =
|
|
2543
|
-
const [loadingColumnCount, setLoadingColumnCount] =
|
|
2544
|
-
|
|
2627
|
+
const headerRef = React17.useRef(null);
|
|
2628
|
+
const bodyRef = React17.useRef(null);
|
|
2629
|
+
const [loadingRowCount, setLoadingRowCount] = React17.useState(MIN_LOADING_ROWS);
|
|
2630
|
+
const [loadingColumnCount, setLoadingColumnCount] = React17.useState(headers.length);
|
|
2631
|
+
React17.useEffect(() => {
|
|
2545
2632
|
if (hasHeadersLoaded) {
|
|
2546
2633
|
setLoadingColumnCount(headers.length);
|
|
2547
2634
|
} else {
|
|
@@ -2554,7 +2641,7 @@ function LoadingStateTable({
|
|
|
2554
2641
|
}
|
|
2555
2642
|
}
|
|
2556
2643
|
}, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);
|
|
2557
|
-
|
|
2644
|
+
React17.useEffect(() => {
|
|
2558
2645
|
if (tableContainerRef.current) {
|
|
2559
2646
|
const containerHeight = tableContainerRef.current.clientHeight;
|
|
2560
2647
|
const availableHeight = containerHeight - rowHeight;
|
|
@@ -2564,32 +2651,32 @@ function LoadingStateTable({
|
|
|
2564
2651
|
}
|
|
2565
2652
|
}
|
|
2566
2653
|
}, [tableContainerRef, rowHeight]);
|
|
2567
|
-
return /* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, hasHeadersLoaded ? /* @__PURE__ */ React17__default.default.createElement(TableHeader, {
|
|
2568
2655
|
table
|
|
2569
|
-
}) : /* @__PURE__ */
|
|
2656
|
+
}) : /* @__PURE__ */ React17__default.default.createElement("thead", {
|
|
2570
2657
|
className: TableHeader_default.osdkTableHeader,
|
|
2571
2658
|
ref: headerRef
|
|
2572
|
-
}, /* @__PURE__ */
|
|
2659
|
+
}, /* @__PURE__ */ React17__default.default.createElement("tr", {
|
|
2573
2660
|
className: TableHeader_default.osdkTableHeaderRow
|
|
2574
2661
|
}, Array.from({
|
|
2575
2662
|
length: loadingColumnCount
|
|
2576
2663
|
}).map((_, index) => {
|
|
2577
2664
|
const width = headers.length > index ? headers[index].getSize() : columnWidth;
|
|
2578
|
-
return /* @__PURE__ */
|
|
2665
|
+
return /* @__PURE__ */ React17__default.default.createElement("th", {
|
|
2579
2666
|
key: `loading-header-${index}`,
|
|
2580
2667
|
className: TableHeader_default.osdkTableHeaderCell,
|
|
2581
2668
|
style: {
|
|
2582
2669
|
width
|
|
2583
2670
|
}
|
|
2584
|
-
}, /* @__PURE__ */
|
|
2671
|
+
}, /* @__PURE__ */ React17__default.default.createElement(chunk7LXS66DW_cjs.SkeletonBar, {
|
|
2585
2672
|
className: classNames9__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
|
|
2586
2673
|
}));
|
|
2587
|
-
}))), /* @__PURE__ */
|
|
2674
|
+
}))), /* @__PURE__ */ React17__default.default.createElement("tbody", {
|
|
2588
2675
|
className: TableBody_default.osdkTableBody,
|
|
2589
2676
|
ref: bodyRef
|
|
2590
2677
|
}, Array.from({
|
|
2591
2678
|
length: loadingRowCount
|
|
2592
|
-
}).map((_, index) => /* @__PURE__ */
|
|
2679
|
+
}).map((_, index) => /* @__PURE__ */ React17__default.default.createElement(LoadingRow, {
|
|
2593
2680
|
key: `skeleton-${index}`,
|
|
2594
2681
|
columnCount: loadingColumnCount,
|
|
2595
2682
|
headers,
|
|
@@ -2606,9 +2693,9 @@ var NonIdealState_default = {};
|
|
|
2606
2693
|
function NonIdealState({
|
|
2607
2694
|
message
|
|
2608
2695
|
}) {
|
|
2609
|
-
return /* @__PURE__ */
|
|
2696
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2610
2697
|
className: NonIdealState_default.container
|
|
2611
|
-
}, /* @__PURE__ */
|
|
2698
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2612
2699
|
className: NonIdealState_default.message
|
|
2613
2700
|
}, message));
|
|
2614
2701
|
}
|
|
@@ -2623,8 +2710,8 @@ function CellContextMenu({
|
|
|
2623
2710
|
onClose,
|
|
2624
2711
|
renderContent
|
|
2625
2712
|
}) {
|
|
2626
|
-
const ref =
|
|
2627
|
-
|
|
2713
|
+
const ref = React17.useRef(null);
|
|
2714
|
+
React17.useEffect(() => {
|
|
2628
2715
|
const handleClickOutside = (event) => {
|
|
2629
2716
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
2630
2717
|
onClose();
|
|
@@ -2635,7 +2722,7 @@ function CellContextMenu({
|
|
|
2635
2722
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
2636
2723
|
};
|
|
2637
2724
|
}, [onClose]);
|
|
2638
|
-
return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */
|
|
2725
|
+
return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2639
2726
|
ref,
|
|
2640
2727
|
className: CellContextMenu_default.osdkCellContextMenu,
|
|
2641
2728
|
style: {
|
|
@@ -2648,9 +2735,9 @@ function CellContextMenu({
|
|
|
2648
2735
|
var useCellContextMenu = ({
|
|
2649
2736
|
tdRef
|
|
2650
2737
|
}) => {
|
|
2651
|
-
const [popoverPosition, setPopoverPosition] =
|
|
2652
|
-
const [isContextMenuOpen, setIsContextMenuOpen] =
|
|
2653
|
-
const handleOpenContextMenu =
|
|
2738
|
+
const [popoverPosition, setPopoverPosition] = React17.useState(null);
|
|
2739
|
+
const [isContextMenuOpen, setIsContextMenuOpen] = React17.useState(false);
|
|
2740
|
+
const handleOpenContextMenu = React17.useCallback((event) => {
|
|
2654
2741
|
event.preventDefault();
|
|
2655
2742
|
event.stopPropagation();
|
|
2656
2743
|
if (tdRef.current) {
|
|
@@ -2664,7 +2751,7 @@ var useCellContextMenu = ({
|
|
|
2664
2751
|
setIsContextMenuOpen(true);
|
|
2665
2752
|
}
|
|
2666
2753
|
}, [tdRef]);
|
|
2667
|
-
const handleCloseContextMenu =
|
|
2754
|
+
const handleCloseContextMenu = React17.useCallback(() => {
|
|
2668
2755
|
setIsContextMenuOpen(false);
|
|
2669
2756
|
setPopoverPosition(null);
|
|
2670
2757
|
}, []);
|
|
@@ -2681,7 +2768,7 @@ function TableCell({
|
|
|
2681
2768
|
cell,
|
|
2682
2769
|
renderCellContextMenu
|
|
2683
2770
|
}) {
|
|
2684
|
-
const tdRef =
|
|
2771
|
+
const tdRef = React17.useRef(null);
|
|
2685
2772
|
const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
|
|
2686
2773
|
const {
|
|
2687
2774
|
isContextMenuOpen,
|
|
@@ -2698,16 +2785,16 @@ function TableCell({
|
|
|
2698
2785
|
const tableMeta = cell.getContext().table.options.meta;
|
|
2699
2786
|
const columnMeta = cell.column.columnDef.meta;
|
|
2700
2787
|
const isEditable = shouldShowEditableCell(isCellEditable(columnMeta?.editable, cell.row.original), tableMeta?.onCellEdit, tableMeta?.isInEditMode);
|
|
2701
|
-
return /* @__PURE__ */
|
|
2788
|
+
return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement("td", {
|
|
2702
2789
|
ref: tdRef,
|
|
2703
2790
|
"data-pinned": cell.column.getIsPinned(),
|
|
2704
2791
|
"data-editable": isEditable ? "true" : void 0,
|
|
2705
2792
|
className: TableCell_default.osdkTableCell,
|
|
2706
2793
|
style: columnStyles,
|
|
2707
2794
|
onContextMenu: handleOpenContextMenu
|
|
2708
|
-
}, /* @__PURE__ */
|
|
2795
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2709
2796
|
className: TableCell_default.osdkTableCellContent
|
|
2710
|
-
}, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */
|
|
2797
|
+
}, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React17__default.default.createElement(CellContextMenu, {
|
|
2711
2798
|
cell,
|
|
2712
2799
|
position: popoverPosition,
|
|
2713
2800
|
onClose: handleCloseContextMenu,
|
|
@@ -2735,21 +2822,21 @@ function TableRow({
|
|
|
2735
2822
|
isInEditMode,
|
|
2736
2823
|
getRowAttributes
|
|
2737
2824
|
}) {
|
|
2738
|
-
const handleClickCapture =
|
|
2825
|
+
const handleClickCapture = React17.useCallback(() => {
|
|
2739
2826
|
setFocusedRowId?.(row.id);
|
|
2740
2827
|
}, [row.id, setFocusedRowId]);
|
|
2741
|
-
const handleClick =
|
|
2828
|
+
const handleClick = React17.useCallback(() => {
|
|
2742
2829
|
if (!isInEditMode) {
|
|
2743
2830
|
onRowClick?.(row.original);
|
|
2744
2831
|
}
|
|
2745
2832
|
}, [isInEditMode, onRowClick, row.original]);
|
|
2746
|
-
const customRowAttributes =
|
|
2833
|
+
const customRowAttributes = React17.useMemo(() => {
|
|
2747
2834
|
if (!getRowAttributes) {
|
|
2748
2835
|
return;
|
|
2749
2836
|
}
|
|
2750
2837
|
return Object.fromEntries(Object.entries(getRowAttributes(row.original)).filter((entry) => entry[1] != null));
|
|
2751
2838
|
}, [getRowAttributes, row.original]);
|
|
2752
|
-
return /* @__PURE__ */
|
|
2839
|
+
return /* @__PURE__ */ React17__default.default.createElement("tr", _extends4({}, customRowAttributes, {
|
|
2753
2840
|
"data-selected": row.getIsSelected(),
|
|
2754
2841
|
"data-focused": isFocused,
|
|
2755
2842
|
"data-row-parity": virtualRow.index % 2 === 0 ? "even" : "odd",
|
|
@@ -2760,7 +2847,7 @@ function TableRow({
|
|
|
2760
2847
|
},
|
|
2761
2848
|
onClickCapture: handleClickCapture,
|
|
2762
2849
|
onClick: handleClick
|
|
2763
|
-
}), row.getVisibleCells().map((cell) => /* @__PURE__ */
|
|
2850
|
+
}), row.getVisibleCells().map((cell) => /* @__PURE__ */ React17__default.default.createElement(TableCell, {
|
|
2764
2851
|
key: cell.id,
|
|
2765
2852
|
cell,
|
|
2766
2853
|
renderCellContextMenu
|
|
@@ -2787,20 +2874,20 @@ function TableBody({
|
|
|
2787
2874
|
getScrollElement: () => tableContainerRef.current,
|
|
2788
2875
|
overscan: VIRTUALIZER_OVERSCAN
|
|
2789
2876
|
});
|
|
2790
|
-
|
|
2877
|
+
React17.useLayoutEffect(() => {
|
|
2791
2878
|
rowVirtualizer.measure();
|
|
2792
2879
|
}, [rowVirtualizer, rows.length]);
|
|
2793
2880
|
const totalSize = rowVirtualizer.getTotalSize();
|
|
2794
2881
|
const bodyHeight = isLoadingMore ? totalSize + rowHeight : totalSize;
|
|
2795
2882
|
const headers = headerGroups[0]?.headers ?? [];
|
|
2796
|
-
return /* @__PURE__ */
|
|
2883
|
+
return /* @__PURE__ */ React17__default.default.createElement("tbody", {
|
|
2797
2884
|
className: TableBody_default.osdkTableBody,
|
|
2798
2885
|
style: {
|
|
2799
2886
|
height: `${bodyHeight}px`
|
|
2800
2887
|
}
|
|
2801
2888
|
}, rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
2802
2889
|
const row = rows[virtualRow.index];
|
|
2803
|
-
return /* @__PURE__ */
|
|
2890
|
+
return /* @__PURE__ */ React17__default.default.createElement(TableRow, {
|
|
2804
2891
|
key: row.id,
|
|
2805
2892
|
row,
|
|
2806
2893
|
virtualRow,
|
|
@@ -2811,7 +2898,7 @@ function TableBody({
|
|
|
2811
2898
|
isInEditMode,
|
|
2812
2899
|
getRowAttributes
|
|
2813
2900
|
});
|
|
2814
|
-
}), isLoadingMore && /* @__PURE__ */
|
|
2901
|
+
}), isLoadingMore && /* @__PURE__ */ React17__default.default.createElement(LoadingRow, {
|
|
2815
2902
|
headers,
|
|
2816
2903
|
translateY: totalSize,
|
|
2817
2904
|
rowHeight,
|
|
@@ -2834,12 +2921,13 @@ function TableEditContainer({
|
|
|
2834
2921
|
editModeState,
|
|
2835
2922
|
validationErrors
|
|
2836
2923
|
} = editableConfig;
|
|
2924
|
+
const labels = useObjectTableLabels();
|
|
2837
2925
|
const hasEdits = Object.keys(cellEdits ?? {}).length > 0;
|
|
2838
2926
|
const hasValidationError = (validationErrors?.size ?? 0) > 0;
|
|
2839
|
-
const [isSubmitting, setIsSubmitting] =
|
|
2927
|
+
const [isSubmitting, setIsSubmitting] = React17.useState(false);
|
|
2840
2928
|
const isInEditMode = editModeState.isActive;
|
|
2841
2929
|
const canToggleEditMode = editModeState.type === "manual";
|
|
2842
|
-
const handleSubmitEdits =
|
|
2930
|
+
const handleSubmitEdits = React17.useCallback(async () => {
|
|
2843
2931
|
setIsSubmitting(true);
|
|
2844
2932
|
try {
|
|
2845
2933
|
const success = await onSubmitEdits?.();
|
|
@@ -2853,44 +2941,44 @@ function TableEditContainer({
|
|
|
2853
2941
|
setIsSubmitting(false);
|
|
2854
2942
|
}
|
|
2855
2943
|
}, [editModeState, onSubmitEdits, clearEdits]);
|
|
2856
|
-
const handleCancelEdits =
|
|
2944
|
+
const handleCancelEdits = React17.useCallback(() => {
|
|
2857
2945
|
clearEdits?.();
|
|
2858
2946
|
if (editModeState?.type === "manual") {
|
|
2859
2947
|
editModeState.setActive(false);
|
|
2860
2948
|
}
|
|
2861
2949
|
}, [clearEdits, editModeState]);
|
|
2862
|
-
const handleEnterEditMode =
|
|
2950
|
+
const handleEnterEditMode = React17.useCallback(() => {
|
|
2863
2951
|
if (editModeState?.type === "manual") {
|
|
2864
2952
|
editModeState.setActive(true);
|
|
2865
2953
|
}
|
|
2866
2954
|
}, [editModeState]);
|
|
2867
|
-
return /* @__PURE__ */
|
|
2955
|
+
return /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2868
2956
|
className: TableEditContainer_default.tableEditContainer
|
|
2869
|
-
}, hasEdits || hasValidationError ? /* @__PURE__ */
|
|
2957
|
+
}, hasEdits || hasValidationError ? /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2870
2958
|
className: TableEditContainer_default.editsInfoContainer
|
|
2871
|
-
}, hasEdits && /* @__PURE__ */
|
|
2959
|
+
}, hasEdits && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2872
2960
|
className: TableEditContainer_default.modificationCount
|
|
2873
|
-
},
|
|
2961
|
+
}, labels.editFooterModificationCount(cellEdits ? Object.keys(cellEdits).length : 0)), hasEdits && hasValidationError && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2874
2962
|
className: TableEditContainer_default.divider
|
|
2875
|
-
}), hasValidationError && /* @__PURE__ */
|
|
2963
|
+
}), hasValidationError && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2876
2964
|
className: TableEditContainer_default.validationError
|
|
2877
|
-
}, /* @__PURE__ */
|
|
2965
|
+
}, /* @__PURE__ */ React17__default.default.createElement(icons.Error, {
|
|
2878
2966
|
className: TableEditContainer_default.errorIcon
|
|
2879
|
-
}),
|
|
2967
|
+
}), labels.editFooterValidationError)) : isInEditMode && !hasFocusedRow && /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2880
2968
|
className: TableEditContainer_default.placeholder
|
|
2881
|
-
},
|
|
2969
|
+
}, labels.editFooterSelectRowToEdit), /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2882
2970
|
className: TableEditContainer_default.editButtons
|
|
2883
|
-
}, !isInEditMode && canToggleEditMode && /* @__PURE__ */
|
|
2971
|
+
}, !isInEditMode && canToggleEditMode && /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
2884
2972
|
variant: "primary",
|
|
2885
2973
|
onClick: handleEnterEditMode
|
|
2886
|
-
},
|
|
2974
|
+
}, labels.editFooterEditTable), isInEditMode && canToggleEditMode && /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
2887
2975
|
variant: "secondary",
|
|
2888
2976
|
onClick: handleCancelEdits
|
|
2889
|
-
},
|
|
2977
|
+
}, labels.editFooterCancel), isInEditMode && !!onSubmitEdits && /* @__PURE__ */ React17__default.default.createElement(chunkQP2LHBCZ_cjs.ActionButton, {
|
|
2890
2978
|
variant: "primary",
|
|
2891
2979
|
onClick: handleSubmitEdits,
|
|
2892
2980
|
disabled: !hasEdits || isSubmitting || hasValidationError
|
|
2893
|
-
},
|
|
2981
|
+
}, labels.editFooterSubmitEdits)));
|
|
2894
2982
|
}
|
|
2895
2983
|
|
|
2896
2984
|
// src/object-table/Table.module.css
|
|
@@ -2898,7 +2986,9 @@ var Table_default = {};
|
|
|
2898
2986
|
|
|
2899
2987
|
// src/object-table/Table.tsx
|
|
2900
2988
|
function BaseTable(props) {
|
|
2901
|
-
return /* @__PURE__ */
|
|
2989
|
+
return /* @__PURE__ */ React17__default.default.createElement(ObjectTableLabelsProvider, {
|
|
2990
|
+
labels: props.labels
|
|
2991
|
+
}, /* @__PURE__ */ React17__default.default.createElement(PortalTrackerProvider, null, /* @__PURE__ */ React17__default.default.createElement(BaseTableInner, props)));
|
|
2902
2992
|
}
|
|
2903
2993
|
function BaseTableInner({
|
|
2904
2994
|
table,
|
|
@@ -2918,10 +3008,11 @@ function BaseTableInner({
|
|
|
2918
3008
|
focusedRowId: focusedRowIdProp,
|
|
2919
3009
|
onFocusedRowChanged
|
|
2920
3010
|
}) {
|
|
2921
|
-
const tableContainerRef =
|
|
2922
|
-
const objectTablePortalRef =
|
|
2923
|
-
const [isLoadingMore, setIsLoadingMore] =
|
|
2924
|
-
const
|
|
3011
|
+
const tableContainerRef = React17.useRef(null);
|
|
3012
|
+
const objectTablePortalRef = React17.useRef(null);
|
|
3013
|
+
const [isLoadingMore, setIsLoadingMore] = React17.useState(false);
|
|
3014
|
+
const labels = useObjectTableLabels();
|
|
3015
|
+
const getRowById = React17.useCallback((id) => {
|
|
2925
3016
|
try {
|
|
2926
3017
|
return table.getRow(id, true)?.original ?? null;
|
|
2927
3018
|
} catch {
|
|
@@ -2940,13 +3031,13 @@ function BaseTableInner({
|
|
|
2940
3031
|
if (table.options.meta) {
|
|
2941
3032
|
table.options.meta.focusedRowId = focusedRowId;
|
|
2942
3033
|
}
|
|
2943
|
-
const fetchingRef =
|
|
2944
|
-
|
|
3034
|
+
const fetchingRef = React17.useRef(false);
|
|
3035
|
+
React17.useEffect(() => {
|
|
2945
3036
|
if (!isLoading || fetchNextPage == null) {
|
|
2946
3037
|
setIsLoadingMore(false);
|
|
2947
3038
|
}
|
|
2948
3039
|
}, [isLoading, fetchNextPage]);
|
|
2949
|
-
const fetchMoreOnEndReached =
|
|
3040
|
+
const fetchMoreOnEndReached = React17.useCallback(async (containerRefElement) => {
|
|
2950
3041
|
if (containerRefElement && !fetchingRef.current && !isLoadingMore) {
|
|
2951
3042
|
const {
|
|
2952
3043
|
scrollHeight,
|
|
@@ -2964,14 +3055,14 @@ function BaseTableInner({
|
|
|
2964
3055
|
}
|
|
2965
3056
|
}
|
|
2966
3057
|
}, [fetchNextPage, isLoading, isLoadingMore]);
|
|
2967
|
-
const handleScroll =
|
|
3058
|
+
const handleScroll = React17.useCallback(async (e) => {
|
|
2968
3059
|
await fetchMoreOnEndReached(e.currentTarget);
|
|
2969
3060
|
}, [fetchMoreOnEndReached]);
|
|
2970
3061
|
const rows = table.getRowModel().rows;
|
|
2971
3062
|
const headerGroups = table.getHeaderGroups();
|
|
2972
3063
|
const hasData = rows.length > 0;
|
|
2973
3064
|
const hasEditableColumns = table.getAllColumns().some((column) => isColumnDeclaredEditable(column.columnDef.meta?.editable));
|
|
2974
|
-
|
|
3065
|
+
React17.useEffect(() => {
|
|
2975
3066
|
const handleClickOutside = (event) => {
|
|
2976
3067
|
const target = event.target;
|
|
2977
3068
|
if (tableContainerRef.current && !tableContainerRef.current.contains(target) && !portalTracker?.containsElement(target)) {
|
|
@@ -2983,25 +3074,25 @@ function BaseTableInner({
|
|
|
2983
3074
|
document.removeEventListener("pointerdown", handleClickOutside);
|
|
2984
3075
|
};
|
|
2985
3076
|
}, [portalTracker, setFocusedRowId]);
|
|
2986
|
-
return /* @__PURE__ */
|
|
3077
|
+
return /* @__PURE__ */ React17__default.default.createElement(chunkDWNKXV5E_cjs.PortalContainerProvider, {
|
|
2987
3078
|
container: objectTablePortalRef
|
|
2988
|
-
}, /* @__PURE__ */
|
|
3079
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2989
3080
|
ref: objectTablePortalRef,
|
|
2990
3081
|
className: classNames9__default.default(Table_default.osdkTableWrapper, className)
|
|
2991
|
-
}, /* @__PURE__ */
|
|
3082
|
+
}, /* @__PURE__ */ React17__default.default.createElement("div", {
|
|
2992
3083
|
ref: tableContainerRef,
|
|
2993
3084
|
className: Table_default.osdkTableContainer,
|
|
2994
3085
|
onScroll: handleScroll
|
|
2995
|
-
}, /* @__PURE__ */
|
|
3086
|
+
}, /* @__PURE__ */ React17__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React17__default.default.createElement(LoadingStateTable, {
|
|
2996
3087
|
table,
|
|
2997
3088
|
headerGroups,
|
|
2998
3089
|
rowHeight,
|
|
2999
3090
|
tableContainerRef
|
|
3000
|
-
}) : /* @__PURE__ */
|
|
3091
|
+
}) : /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement(TableHeader, {
|
|
3001
3092
|
table,
|
|
3002
3093
|
headerMenuFeatureFlags,
|
|
3003
3094
|
onColumnHeaderClick
|
|
3004
|
-
}), /* @__PURE__ */
|
|
3095
|
+
}), /* @__PURE__ */ React17__default.default.createElement(TableBody, {
|
|
3005
3096
|
rows,
|
|
3006
3097
|
tableContainerRef,
|
|
3007
3098
|
onRowClick,
|
|
@@ -3013,11 +3104,11 @@ function BaseTableInner({
|
|
|
3013
3104
|
setFocusedRowId,
|
|
3014
3105
|
isInEditMode: editableConfig?.editModeState.isActive,
|
|
3015
3106
|
getRowAttributes
|
|
3016
|
-
}))), !hasData && error == null && (renderEmptyState != null ? renderEmptyState() : /* @__PURE__ */
|
|
3017
|
-
message:
|
|
3018
|
-
})), error != null && /* @__PURE__ */
|
|
3019
|
-
message:
|
|
3020
|
-
})), showEditFooter && hasEditableColumns && editableConfig && /* @__PURE__ */
|
|
3107
|
+
}))), !hasData && error == null && (renderEmptyState != null ? renderEmptyState() : /* @__PURE__ */ React17__default.default.createElement(NonIdealState, {
|
|
3108
|
+
message: labels.noData
|
|
3109
|
+
})), error != null && /* @__PURE__ */ React17__default.default.createElement(NonIdealState, {
|
|
3110
|
+
message: labels.errorLoadingData(error.message)
|
|
3111
|
+
})), showEditFooter && hasEditableColumns && editableConfig && /* @__PURE__ */ React17__default.default.createElement(TableEditContainer, {
|
|
3021
3112
|
editableConfig,
|
|
3022
3113
|
hasFocusedRow: focusedRowId != null
|
|
3023
3114
|
})));
|
|
@@ -3072,6 +3163,7 @@ function ObjectTable({
|
|
|
3072
3163
|
focusedRow,
|
|
3073
3164
|
onFocusedRowChanged,
|
|
3074
3165
|
tableRef,
|
|
3166
|
+
labels,
|
|
3075
3167
|
...props
|
|
3076
3168
|
}) {
|
|
3077
3169
|
const {
|
|
@@ -3111,7 +3203,7 @@ function ObjectTable({
|
|
|
3111
3203
|
columns,
|
|
3112
3204
|
loading: isColumnsLoading
|
|
3113
3205
|
} = useColumnDefs(objectType, columnDefinitions);
|
|
3114
|
-
const handleRowSelectionChanged =
|
|
3206
|
+
const handleRowSelectionChanged = React17.useCallback((change) => {
|
|
3115
3207
|
if (!onRowSelectionChanged) return;
|
|
3116
3208
|
onRowSelectionChanged({
|
|
3117
3209
|
selectedRows: change.selectedRows,
|
|
@@ -3157,7 +3249,7 @@ function ObjectTable({
|
|
|
3157
3249
|
hasSelectionColumn: enableRowSelection,
|
|
3158
3250
|
onColumnsPinnedChanged
|
|
3159
3251
|
});
|
|
3160
|
-
const allColumns =
|
|
3252
|
+
const allColumns = React17.useMemo(() => {
|
|
3161
3253
|
return selectionColumn ? [selectionColumn, ...columns] : columns;
|
|
3162
3254
|
}, [selectionColumn, columns]);
|
|
3163
3255
|
const editableConfig = useEditableTable({
|
|
@@ -3212,21 +3304,21 @@ function ObjectTable({
|
|
|
3212
3304
|
totalCount,
|
|
3213
3305
|
orderBy: orderByState
|
|
3214
3306
|
});
|
|
3215
|
-
|
|
3307
|
+
React17.useImperativeHandle(tableRef, () => ({
|
|
3216
3308
|
getSnapshot
|
|
3217
3309
|
}), [getSnapshot]);
|
|
3218
|
-
const onRenderCellContextMenu =
|
|
3310
|
+
const onRenderCellContextMenu = React17.useCallback((row, cell) => {
|
|
3219
3311
|
return renderCellContextMenu?.(row, cell.getValue());
|
|
3220
3312
|
}, [renderCellContextMenu]);
|
|
3221
|
-
const handleColumnHeaderClick =
|
|
3313
|
+
const handleColumnHeaderClick = React17.useMemo(() => onColumnHeaderClick ? (columnId) => onColumnHeaderClick(columnId) : void 0, [onColumnHeaderClick]);
|
|
3222
3314
|
const isTableLoading = isLoading || isColumnsLoading;
|
|
3223
|
-
const headerMenuFeatureFlags =
|
|
3315
|
+
const headerMenuFeatureFlags = React17.useMemo(() => ({
|
|
3224
3316
|
showSortingItems: enableOrdering,
|
|
3225
3317
|
showPinningItems: enableColumnPinning,
|
|
3226
3318
|
showResizeItem: enableColumnResizing,
|
|
3227
3319
|
showConfigItem: enableColumnConfig
|
|
3228
3320
|
}), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
|
|
3229
|
-
return /* @__PURE__ */
|
|
3321
|
+
return /* @__PURE__ */ React17__default.default.createElement(BaseTable, {
|
|
3230
3322
|
table,
|
|
3231
3323
|
isLoading: isTableLoading,
|
|
3232
3324
|
fetchNextPage: fetchMore,
|
|
@@ -3242,12 +3334,13 @@ function ObjectTable({
|
|
|
3242
3334
|
getRowAttributes: props.getRowAttributes,
|
|
3243
3335
|
showEditFooter: props.showEditFooter,
|
|
3244
3336
|
focusedRowId: focusedRow == null ? focusedRow : getRowIdFromPrimaryKey(focusedRow),
|
|
3245
|
-
onFocusedRowChanged
|
|
3337
|
+
onFocusedRowChanged,
|
|
3338
|
+
labels
|
|
3246
3339
|
});
|
|
3247
3340
|
}
|
|
3248
3341
|
|
|
3249
3342
|
// src/public/experimental/object-table.ts
|
|
3250
|
-
var ObjectTable2 =
|
|
3343
|
+
var ObjectTable2 = chunkGNXZZXHI_cjs.withOsdkMetrics(ObjectTable, "ObjectTable");
|
|
3251
3344
|
|
|
3252
3345
|
exports.BaseTable = BaseTable;
|
|
3253
3346
|
exports.ColumnConfigDialog = ColumnConfigDialog;
|
|
@@ -3268,5 +3361,5 @@ exports.useObjectTableSnapshot = useObjectTableSnapshot;
|
|
|
3268
3361
|
exports.useRowSelection = useRowSelection;
|
|
3269
3362
|
exports.useSelectionColumn = useSelectionColumn;
|
|
3270
3363
|
exports.useTableSorting = useTableSorting;
|
|
3271
|
-
//# sourceMappingURL=chunk-
|
|
3272
|
-
//# sourceMappingURL=chunk-
|
|
3364
|
+
//# sourceMappingURL=chunk-4SGNGOAP.cjs.map
|
|
3365
|
+
//# sourceMappingURL=chunk-4SGNGOAP.cjs.map
|