@equinor/eds-data-grid-react 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/eds-data-grid-react.cjs +372 -408
  2. package/dist/esm/EdsDataGrid.js +192 -189
  3. package/dist/esm/EdsDataGridContext.js +6 -9
  4. package/dist/esm/components/DebouncedInput.js +33 -55
  5. package/dist/esm/components/Filter.js +34 -56
  6. package/dist/esm/components/TableBodyCell.js +21 -34
  7. package/dist/esm/components/TableHeaderCell.js +30 -39
  8. package/dist/esm/components/TableHeaderRow.js +12 -13
  9. package/dist/esm/components/TableRow.js +23 -19
  10. package/dist/esm/utils.js +27 -0
  11. package/dist/types/EdsDataGrid.d.ts +1 -1
  12. package/dist/types/EdsDataGridProps.d.ts +29 -5
  13. package/dist/types/index.d.ts +1 -0
  14. package/dist/types/types.d.ts +3 -0
  15. package/dist/types/utils.d.ts +18 -0
  16. package/package.json +5 -6
package/dist/eds-data-grid-react.cjs CHANGED
@@ -1,69 +1,55 @@
1
1
  'use strict';
2
2
 
3
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
4
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
- var reactTable = require('@tanstack/react-table');
6
3
  var edsCoreReact = require('@equinor/eds-core-react');
4
+ var reactTable = require('@tanstack/react-table');
5
+ var reactVirtual = require('@tanstack/react-virtual');
7
6
  var react = require('react');
8
7
  var edsIcons = require('@equinor/eds-icons');
9
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
10
8
  var jsxRuntime = require('react/jsx-runtime');
11
9
  var styled = require('styled-components');
12
10
  var edsTokens = require('@equinor/eds-tokens');
13
- var reactVirtual = require('@tanstack/react-virtual');
14
11
 
15
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
13
 
17
- var _objectSpread__default = /*#__PURE__*/_interopDefault(_objectSpread);
18
- var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
19
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
20
14
  var styled__default = /*#__PURE__*/_interopDefault(styled);
21
15
 
22
- var _excluded$1 = ["children"];
23
16
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
- var EdsDataGridContext = /*#__PURE__*/react.createContext({
17
+ const EdsDataGridContext = /*#__PURE__*/react.createContext({
25
18
  enableSorting: false,
26
19
  stickyHeader: false,
27
20
  enableColumnFiltering: false,
28
21
  table: null
29
22
  });
30
- function TableProvider(_ref) {
31
- var children = _ref.children,
32
- props = _objectWithoutProperties__default.default(_ref, _excluded$1);
23
+ function TableProvider({
24
+ children,
25
+ ...props
26
+ }) {
33
27
  return /*#__PURE__*/jsxRuntime.jsx(EdsDataGridContext.Provider, {
34
28
  value: props,
35
29
  children: children
36
30
  });
37
31
  }
38
- var useTableContext = function useTableContext() {
39
- return react.useContext(EdsDataGridContext);
40
- };
32
+ const useTableContext = () => react.useContext(EdsDataGridContext);
41
33
 
42
- var _excluded = ["value", "values", "onChange", "debounce", "label"];
34
+ /* istanbul ignore file */
43
35
  // File ignored, as relevant actions are covered via Filter.test.tsx
44
- function DebouncedInput(_ref) {
45
- var _props$placeholder;
46
- var initialValue = _ref.value,
47
- values = _ref.values,
48
- onChange = _ref.onChange,
49
- _ref$debounce = _ref.debounce,
50
- debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
51
- label = _ref.label,
52
- props = _objectWithoutProperties__default.default(_ref, _excluded);
53
- var _useState = react.useState(initialValue),
54
- _useState2 = _slicedToArray__default.default(_useState, 2),
55
- value = _useState2[0],
56
- setValue = _useState2[1];
57
- react.useEffect(function () {
36
+ function DebouncedInput({
37
+ value: initialValue,
38
+ values,
39
+ onChange,
40
+ debounce = 500,
41
+ label,
42
+ ...props
43
+ }) {
44
+ const [value, setValue] = react.useState(initialValue);
45
+ react.useEffect(() => {
58
46
  setValue(initialValue);
59
47
  }, [initialValue]);
60
- react.useEffect(function () {
61
- var timeout = setTimeout(function () {
48
+ react.useEffect(() => {
49
+ const timeout = setTimeout(() => {
62
50
  onChange(value);
63
51
  }, debounce);
64
- return function () {
65
- return clearTimeout(timeout);
66
- };
52
+ return () => clearTimeout(timeout);
67
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
68
54
  }, [value]);
69
55
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -73,112 +59,89 @@ function DebouncedInput(_ref) {
73
59
  type: 'number',
74
60
  placeholder: '0',
75
61
  value: value,
76
- onChange: function onChange(e) {
77
- return setValue(e.target.valueAsNumber);
78
- }
62
+ onChange: e => setValue(e.target.valueAsNumber)
79
63
  })
80
64
  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
81
65
  children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Autocomplete, {
82
66
  options: values,
83
67
  autoWidth: true,
84
68
  multiple: true,
85
- optionComponent: function optionComponent(opt) {
86
- return opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt;
87
- },
69
+ optionComponent: opt => opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt,
88
70
  "data-testid": 'autocomplete'
89
71
  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
90
- label: "Select ".concat(label !== null && label !== void 0 ? label : ''),
91
- placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Search',
72
+ label: `Select ${label ?? ''}`,
73
+ placeholder: props.placeholder ?? 'Search',
92
74
  disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
93
-
94
75
  selectedOptions: value,
95
- onOptionsChange: function onOptionsChange(c) {
96
- return setValue(c.selectedItems);
97
- }
76
+ onOptionsChange: c => setValue(c.selectedItems),
77
+ multiline: true
98
78
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
99
79
  style: {
100
80
  display: 'flex',
101
81
  flexWrap: 'wrap',
102
82
  marginTop: '8px'
103
83
  },
104
- children: value.map(function (v) {
105
- return /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Chip, {
106
- title: v,
107
- onKeyDownCapture: function onKeyDownCapture(event) {
108
- if (['Backspace', 'Delete'].includes(event.key)) {
109
- onChange(value.filter(function (item) {
110
- return item !== v;
111
- }));
112
- }
113
- },
114
- style: {
115
- margin: '4px'
116
- },
117
- onDelete: function onDelete() {
118
- return onChange(value.filter(function (item) {
119
- return item !== v;
120
- }));
121
- },
122
- children: [v.slice(0, 20), v.length > 20 ? '...' : '']
123
- }, v);
124
- })
84
+ children: value.map(v => /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Chip, {
85
+ title: v,
86
+ onKeyDownCapture: event => {
87
+ if (['Backspace', 'Delete'].includes(event.key)) {
88
+ onChange(value.filter(item => item !== v));
89
+ }
90
+ },
91
+ style: {
92
+ margin: '4px'
93
+ },
94
+ onDelete: () => onChange(value.filter(item => item !== v)),
95
+ children: [v.slice(0, 20), v.length > 20 ? '...' : '']
96
+ }, v))
125
97
  })]
126
98
  })
127
99
  });
128
100
  }
129
101
 
130
- var NumberContainer = styled__default.default.div.withConfig({
102
+ /* istanbul ignore file */
103
+
104
+ const NumberContainer = styled__default.default.div.withConfig({
131
105
  displayName: "Filter__NumberContainer",
132
106
  componentId: "sc-ytpdpw-0"
133
107
  })(["display:grid;grid-template-columns:80px 80px;grid-column-gap:32px;"]);
134
- function Filter(_ref) {
135
- var _table$getPreFiltered, _column$getFacetedMin, _column$getFacetedMin2, _column$getFacetedMin3, _column$getFacetedMin4, _, _column$getFacetedMin5, _column$getFacetedMin6, _column$getFacetedMin7, _column$getFacetedMin8, _column$getFacetedMin9, _column$getFacetedMin10, _2, _column$getFacetedMin11, _column$getFacetedMin12;
136
- var column = _ref.column,
137
- table = _ref.table;
138
- var firstValue = (_table$getPreFiltered = table.getPreFilteredRowModel().flatRows[0]) === null || _table$getPreFiltered === void 0 ? void 0 : _table$getPreFiltered.getValue(column.id);
139
- var _useState = react.useState(false),
140
- _useState2 = _slicedToArray__default.default(_useState, 2),
141
- open = _useState2[0],
142
- setOpen = _useState2[1];
143
- var filterIconRef = react.useRef();
144
- var togglePopover = function togglePopover(event) {
108
+ function Filter({
109
+ column,
110
+ table
111
+ }) {
112
+ const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
113
+ const [open, setOpen] = react.useState(false);
114
+ const filterIconRef = react.useRef();
115
+ const togglePopover = event => {
145
116
  event.stopPropagation();
146
117
  setOpen(!open);
147
118
  };
148
- var columnText = react.useMemo(function () {
149
- var header;
119
+ const columnText = react.useMemo(() => {
120
+ let header;
150
121
  try {
151
122
  if (typeof column.columnDef.header === 'function') {
152
- var obj = column.columnDef.header(
123
+ const obj = column.columnDef.header(
153
124
  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument
154
125
  {});
155
126
  header = obj.props.children;
156
127
  } else {
157
128
  header = column.columnDef.header;
158
129
  }
159
- } catch (_unused) {
130
+ } catch {
160
131
  /*em all*/
161
132
  }
162
133
  return header;
163
134
  }, [column.columnDef]);
164
- var columnFilterValue = column.getFilterValue();
165
- var sortedUniqueValues = react.useMemo(function () {
166
- return typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(function (v) {
167
- return v !== null && v !== void 0 ? v : 'NULL_OR_UNDEFINED';
168
- });
169
- },
135
+ const columnFilterValue = column.getFilterValue();
136
+ const sortedUniqueValues = react.useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
170
137
  // eslint-disable-next-line react-hooks/exhaustive-deps
171
138
  [column.getFacetedUniqueValues()]);
172
- var hasActiveFilters = function hasActiveFilters(value) {
139
+ const hasActiveFilters = value => {
173
140
  if (Array.isArray(value)) {
174
141
  if (typeof firstValue === 'number') {
175
- return value.some(function (v) {
176
- return !isNaN(v) && !!v;
177
- });
142
+ return value.some(v => !isNaN(v) && !!v);
178
143
  } else {
179
- return value.filter(function (v) {
180
- return !!v;
181
- }).length > 0;
144
+ return value.filter(v => !!v).length > 0;
182
145
  }
183
146
  }
184
147
  return value;
@@ -201,9 +164,7 @@ function Filter(_ref) {
201
164
  },
202
165
  anchorEl: filterIconRef.current,
203
166
  open: open,
204
- onClose: function onClose() {
205
- return setOpen(false);
206
- },
167
+ onClose: () => setOpen(false),
207
168
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Popover.Content, {
208
169
  style: {
209
170
  width: typeof firstValue === 'number' ? '180px' : '310px'
@@ -212,38 +173,28 @@ function Filter(_ref) {
212
173
  children: [/*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
213
174
  type: "number",
214
175
  values: sortedUniqueValues,
215
- min: Number((_column$getFacetedMin = (_column$getFacetedMin2 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin2 === void 0 ? void 0 : _column$getFacetedMin2[0]) !== null && _column$getFacetedMin !== void 0 ? _column$getFacetedMin : ''),
216
- max: Number((_column$getFacetedMin3 = (_column$getFacetedMin4 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin4 === void 0 ? void 0 : _column$getFacetedMin4[1]) !== null && _column$getFacetedMin3 !== void 0 ? _column$getFacetedMin3 : ''),
217
- value: (_ = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) !== null && _ !== void 0 ? _ : '',
218
- onChange: function onChange(value) {
219
- return column.setFilterValue(function (old) {
220
- return [value, old === null || old === void 0 ? void 0 : old[1]];
221
- });
222
- },
223
- placeholder: "Min ".concat((_column$getFacetedMin5 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin5 !== void 0 && _column$getFacetedMin5[0] ? "(".concat((_column$getFacetedMin6 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin6 === void 0 ? void 0 : _column$getFacetedMin6[0], ")") : '')
176
+ min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
177
+ max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
178
+ value: columnFilterValue?.[0] ?? '',
179
+ onChange: value => column.setFilterValue(old => [value, old?.[1]]),
180
+ placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
224
181
  }), /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
225
182
  type: "number",
226
183
  values: sortedUniqueValues,
227
- min: Number((_column$getFacetedMin7 = (_column$getFacetedMin8 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin8 === void 0 ? void 0 : _column$getFacetedMin8[0]) !== null && _column$getFacetedMin7 !== void 0 ? _column$getFacetedMin7 : ''),
228
- max: Number((_column$getFacetedMin9 = (_column$getFacetedMin10 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin10 === void 0 ? void 0 : _column$getFacetedMin10[1]) !== null && _column$getFacetedMin9 !== void 0 ? _column$getFacetedMin9 : ''),
229
- value: (_2 = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) !== null && _2 !== void 0 ? _2 : '',
230
- onChange: function onChange(value) {
231
- return column.setFilterValue(function (old) {
232
- return [old === null || old === void 0 ? void 0 : old[0], value];
233
- });
234
- },
235
- placeholder: "Max ".concat((_column$getFacetedMin11 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin11 !== void 0 && _column$getFacetedMin11[1] ? "(".concat((_column$getFacetedMin12 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin12 === void 0 ? void 0 : _column$getFacetedMin12[1], ")") : '')
184
+ min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
185
+ max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
186
+ value: columnFilterValue?.[1] ?? '',
187
+ onChange: value => column.setFilterValue(old => [old?.[0], value]),
188
+ placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
236
189
  })]
237
190
  }) : /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
238
191
  type: "text",
239
192
  label: columnText,
240
193
  values: sortedUniqueValues,
241
194
  debounce: 100,
242
- value: columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : [],
243
- onChange: function onChange(value) {
244
- return column.setFilterValue(value);
245
- },
246
- placeholder: "".concat((columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : []).length, " / ").concat(column.getFacetedUniqueValues().size, " selected"),
195
+ value: columnFilterValue ?? [],
196
+ onChange: value => column.setFilterValue(value),
197
+ placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
247
198
  list: column.id + 'list'
248
199
  })
249
200
  })
@@ -251,47 +202,40 @@ function Filter(_ref) {
251
202
  });
252
203
  }
253
204
 
254
- var getSortLabel = function getSortLabel(sorted) {
205
+ const getSortLabel = sorted => {
255
206
  if (sorted) {
256
- return "".concat(sorted, "ending");
207
+ return `${sorted}ending`;
257
208
  }
258
209
  return 'none';
259
210
  };
260
- var ResizeInner = styled__default.default.div.withConfig({
211
+ const ResizeInner = styled__default.default.div.withConfig({
261
212
  displayName: "TableHeaderCell__ResizeInner",
262
213
  componentId: "sc-1n0j3v0-0"
263
214
  })(["width:2px;opacity:0;height:100%;"]);
264
- var Resizer = styled__default.default.div.withConfig({
215
+ const Resizer = styled__default.default.div.withConfig({
265
216
  displayName: "TableHeaderCell__Resizer",
266
217
  componentId: "sc-1n0j3v0-1"
267
- })(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], function (props) {
268
- return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
269
- }, ResizeInner, function (props) {
270
- return props.$isResizing ? 1 : 0;
271
- });
272
- var Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
218
+ })(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
219
+ const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
273
220
  displayName: "TableHeaderCell__Cell",
274
221
  componentId: "sc-1n0j3v0-2"
275
- })(["font-weight:bold;height:30px;position:", ";top:0;", " z-index:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
276
- return p.$sticky || p.$pinned ? 'sticky' : 'relative';
277
- }, function (p) {
222
+ })(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
278
223
  if (p.$pinned) {
279
- return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
224
+ return `${p.$pinned}: ${p.$offset}px;`;
280
225
  }
281
226
  return '';
282
- }, function (p) {
283
- if (p.$sticky && p.$pinned) return 13;
284
- if (p.$sticky || p.$pinned) return 12;
285
- return 'auto';
227
+ }, p => {
228
+ if (p.$sticky && p.$pinned) return 'z-index: 13';
229
+ if (p.$sticky || p.$pinned) return 'z-index: 12';
286
230
  }, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
287
- function TableHeaderCell(_ref) {
288
- var _asc$desc;
289
- var header = _ref.header,
290
- columnResizeMode = _ref.columnResizeMode;
291
- var ctx = useTableContext();
292
- var table = ctx.table;
293
- var pinned = header.column.getIsPinned();
294
- var offset = react.useMemo(function () {
231
+ function TableHeaderCell({
232
+ header,
233
+ columnResizeMode
234
+ }) {
235
+ const ctx = useTableContext();
236
+ const table = ctx.table;
237
+ const pinned = header.column.getIsPinned();
238
+ const offset = react.useMemo(() => {
295
239
  if (!pinned) {
296
240
  return null;
297
241
  }
@@ -302,7 +246,9 @@ function TableHeaderCell(_ref) {
302
246
  $offset: offset,
303
247
  $pinned: pinned,
304
248
  className: ctx.headerClass ? ctx.headerClass(header.column) : '',
305
- style: _objectSpread__default.default({}, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
249
+ style: {
250
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
251
+ },
306
252
  "aria-hidden": true
307
253
  }) : /*#__PURE__*/jsxRuntime.jsxs(Cell, {
308
254
  $sticky: ctx.stickyHeader,
@@ -313,10 +259,11 @@ function TableHeaderCell(_ref) {
313
259
  onClick: header.column.getToggleSortingHandler(),
314
260
  key: header.id,
315
261
  colSpan: header.colSpan,
316
- style: _objectSpread__default.default({
262
+ style: {
317
263
  width: header.getSize(),
318
- verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle'
319
- }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
264
+ verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
265
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
266
+ },
320
267
  children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
321
268
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
322
269
  style: {
@@ -327,30 +274,26 @@ function TableHeaderCell(_ref) {
327
274
  className: "table-header-cell-label",
328
275
  children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
329
276
  })
330
- }), (_asc$desc = {
277
+ }), {
331
278
  asc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
332
279
  data: edsIcons.arrow_up
333
280
  }),
334
281
  desc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
335
282
  data: edsIcons.arrow_down
336
283
  })
337
- }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null, header.column.getCanFilter() ?
284
+ }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
338
285
 
339
286
  // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
340
287
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
341
288
  jsxRuntime.jsx("div", {
342
- onClick: function onClick(e) {
343
- return e.stopPropagation();
344
- },
289
+ onClick: e => e.stopPropagation(),
345
290
  children: /*#__PURE__*/jsxRuntime.jsx(Filter, {
346
291
  column: header.column,
347
292
  table: table
348
293
  })
349
294
  }) : null]
350
295
  }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
351
- onClick: function onClick(e) {
352
- return e.stopPropagation();
353
- },
296
+ onClick: e => e.stopPropagation(),
354
297
  onMouseDown: header.getResizeHandler(),
355
298
  onTouchStart: header.getResizeHandler(),
356
299
  $isResizing: header.column.getIsResizing(),
@@ -362,53 +305,45 @@ function TableHeaderCell(_ref) {
362
305
  });
363
306
  }
364
307
 
365
- function TableHeaderRow(_ref) {
366
- var headerGroup = _ref.headerGroup,
367
- columnResizeMode = _ref.columnResizeMode,
368
- deltaOffset = _ref.deltaOffset,
369
- table = _ref.table;
308
+ function TableHeaderRow({
309
+ headerGroup,
310
+ columnResizeMode,
311
+ deltaOffset,
312
+ table
313
+ }) {
370
314
  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
371
- children: headerGroup.headers.map(function (header) {
372
- return /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
373
- header: header,
374
- table: table,
375
- columnResizeMode: columnResizeMode,
376
- deltaOffset: deltaOffset
377
- }, header.id);
378
- })
315
+ children: headerGroup.headers.map(header => /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
316
+ header: header,
317
+ table: table,
318
+ columnResizeMode: columnResizeMode,
319
+ deltaOffset: deltaOffset
320
+ }, header.id))
379
321
  });
380
322
  }
381
323
 
382
- var StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
324
+ const StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
383
325
  displayName: "TableBodyCell__StyledCell",
384
326
  componentId: "sc-1gsd2k4-0"
385
- })(["position:", ";", " z-index:", ";background-color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], function (p) {
386
- return p.$pinned ? 'sticky' : 'relative';
387
- }, function (p) {
327
+ })(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
388
328
  if (p.$pinned) {
389
- return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
329
+ return `${p.$pinned}: ${p.$offset}px;`;
390
330
  }
391
331
  return '';
392
- }, function (p) {
393
- return p.$pinned ? 11 : 'auto';
394
- }, function (p) {
395
- return p.$pinned ? edsTokens.tokens.colors.ui.background__default.hex : 'inherit';
396
- });
397
- function TableBodyCell(_ref) {
398
- var _cellStyle;
399
- var cell = _ref.cell;
400
- var _useTableContext = useTableContext(),
401
- cellClass = _useTableContext.cellClass,
402
- cellStyle = _useTableContext.cellStyle,
403
- table = _useTableContext.table;
404
- var pinned = cell.column.getIsPinned();
405
- var pinnedOffset = react.useMemo(function () {
332
+ }, p => p.$pinned ? 11 : 'auto');
333
+ function TableBodyCell({
334
+ cell
335
+ }) {
336
+ const {
337
+ cellClass,
338
+ cellStyle,
339
+ table
340
+ } = useTableContext();
341
+ const pinned = cell.column.getIsPinned();
342
+ const pinnedOffset = react.useMemo(() => {
406
343
  if (!pinned) {
407
344
  return 0;
408
345
  }
409
- var header = table.getFlatHeaders().find(function (h) {
410
- return h.id === cell.column.id;
411
- });
346
+ const header = table.getFlatHeaders().find(h => h.id === cell.column.id);
412
347
  return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - cell.column.getSize();
413
348
  }, [pinned, cell.column, table]);
414
349
  return /*#__PURE__*/jsxRuntime.jsx(StyledCell, {
@@ -416,212 +351,240 @@ function TableBodyCell(_ref) {
416
351
  $offset: pinnedOffset,
417
352
  className: cellClass ? cellClass(cell.row, cell.column.id) : '',
418
353
  key: cell.id,
419
- style: _objectSpread__default.default({
354
+ style: {
420
355
  width: cell.column.getSize(),
421
- maxWidth: cell.column.getSize()
422
- }, (_cellStyle = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle(cell.row, cell.column.id)) !== null && _cellStyle !== void 0 ? _cellStyle : {}),
423
- children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
424
- as: "span",
425
- group: "table",
426
- variant: "cell_text",
427
- children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
428
- })
356
+ maxWidth: cell.column.getSize(),
357
+ ...(cellStyle?.(cell.row, cell.column.id) ?? {})
358
+ },
359
+ children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
429
360
  });
430
361
  }
431
362
 
432
- function TableRow(_ref) {
433
- var _rowStyle;
434
- var row = _ref.row;
435
- var _useTableContext = useTableContext(),
436
- rowClass = _useTableContext.rowClass,
437
- rowStyle = _useTableContext.rowStyle;
438
- return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
439
- style: _objectSpread__default.default({
440
- cursor: row.getCanSelect() ? 'pointer' : 'inherit'
441
- }, (_rowStyle = rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle(row)) !== null && _rowStyle !== void 0 ? _rowStyle : {}),
442
- className: "".concat(row.getIsSelected() ? 'selected' : '', " ").concat(rowClass === null || rowClass === void 0 ? void 0 : rowClass(row)),
443
- onClick: function onClick() {
444
- return row.getCanSelect() ? row.toggleSelected() : null;
363
+ function TableRow({
364
+ row
365
+ }) {
366
+ const {
367
+ rowClass,
368
+ rowStyle
369
+ } = useTableContext();
370
+ return /*#__PURE__*/jsxRuntime.jsx(StyledTableRow, {
371
+ style: {
372
+ cursor: row.getCanSelect() ? 'pointer' : 'inherit',
373
+ ...(rowStyle?.(row) ?? {})
445
374
  },
446
- children: row.getVisibleCells().map(function (cell) {
447
- return /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
448
- cell: cell
449
- }, cell.id);
450
- })
375
+ className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
376
+ onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
377
+ children: row.getVisibleCells().map(cell => /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
378
+ cell: cell
379
+ }, cell.id))
451
380
  });
452
381
  }
453
382
 
454
- function EdsDataGrid(_ref) {
455
- var rows = _ref.rows,
456
- columns = _ref.columns,
457
- columnResizeMode = _ref.columnResizeMode,
458
- pageSize = _ref.pageSize,
459
- rowSelection = _ref.rowSelection,
460
- selectedRows = _ref.selectedRows,
461
- enableColumnFiltering = _ref.enableColumnFiltering,
462
- debug = _ref.debug,
463
- enablePagination = _ref.enablePagination,
464
- enableSorting = _ref.enableSorting,
465
- stickyHeader = _ref.stickyHeader,
466
- onSelectRow = _ref.onSelectRow,
467
- caption = _ref.caption,
468
- enableVirtual = _ref.enableVirtual,
469
- virtualHeight = _ref.virtualHeight,
470
- columnVisibility = _ref.columnVisibility,
471
- columnVisibilityChange = _ref.columnVisibilityChange,
472
- emptyMessage = _ref.emptyMessage,
473
- columnOrder = _ref.columnOrder,
474
- cellClass = _ref.cellClass,
475
- cellStyle = _ref.cellStyle,
476
- rowClass = _ref.rowClass,
477
- rowStyle = _ref.rowStyle,
478
- headerClass = _ref.headerClass,
479
- headerStyle = _ref.headerStyle,
480
- externalPaginator = _ref.externalPaginator,
481
- _onSortingChange = _ref.onSortingChange,
482
- manualSorting = _ref.manualSorting,
483
- sortingState = _ref.sortingState,
484
- columnPinState = _ref.columnPinState,
485
- scrollbarHorizontal = _ref.scrollbarHorizontal,
486
- width = _ref.width,
487
- height = _ref.height;
488
- var _useState = react.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []),
489
- _useState2 = _slicedToArray__default.default(_useState, 2),
490
- sorting = _useState2[0],
491
- setSorting = _useState2[1];
492
- var _useState3 = react.useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
493
- _useState4 = _slicedToArray__default.default(_useState3, 2),
494
- selection = _useState4[0],
495
- setSelection = _useState4[1];
496
- var _useState5 = react.useState(columnPinState !== null && columnPinState !== void 0 ? columnPinState : {}),
497
- _useState6 = _slicedToArray__default.default(_useState5, 2),
498
- columnPin = _useState6[0],
499
- setColumnPin = _useState6[1];
500
- var _useState7 = react.useState([]),
501
- _useState8 = _slicedToArray__default.default(_useState7, 2),
502
- columnFilters = _useState8[0],
503
- setColumnFilters = _useState8[1];
504
- var _useState9 = react.useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
505
- _useState10 = _slicedToArray__default.default(_useState9, 2),
506
- visible = _useState10[0],
507
- setVisible = _useState10[1];
508
- var _useState11 = react.useState(''),
509
- _useState12 = _slicedToArray__default.default(_useState11, 2),
510
- globalFilter = _useState12[0],
511
- setGlobalFilter = _useState12[1];
512
- var _useState13 = react.useState([]),
513
- _useState14 = _slicedToArray__default.default(_useState13, 2),
514
- columnOrderState = _useState14[0],
515
- setColumnOrderState = _useState14[1];
516
- var _useState15 = react.useState({
517
- pageIndex: 0,
518
- pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
519
- }),
520
- _useState16 = _slicedToArray__default.default(_useState15, 2),
521
- page = _useState16[0],
522
- setPage = _useState16[1];
523
- react.useEffect(function () {
524
- setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
383
+ // Neccessary to have this attribute as class to prevent overriding hover color
384
+ const StyledTableRow = styled__default.default(edsCoreReact.Table.Row).withConfig({
385
+ displayName: "TableRow__StyledTableRow",
386
+ componentId: "sc-1vjfq5p-0"
387
+ })(["background-color:inherit;"]);
388
+
389
+ /**
390
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
391
+ *
392
+ * Examples:
393
+ *
394
+ * ```
395
+ * isNumberOnlyString("10") // true
396
+ * isNumberOnlyString("10.10") // true
397
+ * isNumberOnlyString("10px") // false
398
+ * isNumberOnlyString("10%") // false
399
+ * isNumberOnlyString("10 ") // true
400
+ * ```
401
+ *
402
+ * @param number
403
+ * @returns
404
+ */
405
+ function isNumberOnlyString(number) {
406
+ return !isNaN(Number(number)) && !isNaN(parseFloat(number));
407
+ }
408
+ function addPxSuffixIfInputHasNoPrefix(size) {
409
+ if (typeof size === 'number' || isNumberOnlyString(size)) {
410
+ return `${size}px`;
411
+ }
412
+ return size;
413
+ }
414
+
415
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
416
+ function EdsDataGrid({
417
+ rows,
418
+ columns,
419
+ columnResizeMode,
420
+ pageSize,
421
+ rowSelection,
422
+ selectedRows,
423
+ enableColumnFiltering,
424
+ debug,
425
+ enablePagination,
426
+ enableSorting,
427
+ stickyHeader,
428
+ onSelectRow,
429
+ caption,
430
+ enableVirtual,
431
+ virtualHeight,
432
+ columnVisibility,
433
+ columnVisibilityChange,
434
+ emptyMessage,
435
+ columnOrder,
436
+ cellClass,
437
+ cellStyle,
438
+ rowClass,
439
+ rowStyle,
440
+ headerClass,
441
+ headerStyle,
442
+ externalPaginator,
443
+ onSortingChange,
444
+ manualSorting,
445
+ sortingState,
446
+ columnPinState,
447
+ scrollbarHorizontal,
448
+ width,
449
+ minWidth,
450
+ height,
451
+ getRowId,
452
+ rowVirtualizerInstanceRef,
453
+ columnSizing,
454
+ onColumnResize
455
+ }) {
456
+ const [sorting, setSorting] = react.useState(sortingState ?? []);
457
+ const [selection, setSelection] = react.useState(selectedRows ?? {});
458
+ const [columnPin, setColumnPin] = react.useState(columnPinState ?? {});
459
+ const [columnFilters, setColumnFilters] = react.useState([]);
460
+ const [internalColumnSize, setInternalColumnSize] = react.useState(columnSizing ?? {});
461
+ const [visible, setVisible] = react.useState(columnVisibility ?? {});
462
+ const [globalFilter, setGlobalFilter] = react.useState('');
463
+ const [columnOrderState, setColumnOrderState] = react.useState([]);
464
+ const [page, setPage] = react.useState({
465
+ pageIndex: 0,
466
+ pageSize: pageSize ?? 25
467
+ });
468
+ react.useEffect(() => {
469
+ setVisible(columnVisibility ?? {});
525
470
  }, [columnVisibility, setVisible]);
526
- react.useEffect(function () {
527
- setColumnPin(function (s) {
528
- return columnPinState !== null && columnPinState !== void 0 ? columnPinState : s;
529
- });
471
+ react.useEffect(() => {
472
+ setColumnPin(s => columnPinState ?? s);
530
473
  }, [columnPinState]);
531
- react.useEffect(function () {
474
+ react.useEffect(() => {
532
475
  setSorting(sortingState);
533
476
  }, [sortingState]);
534
- react.useEffect(function () {
535
- setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
477
+ react.useEffect(() => {
478
+ setSelection(selectedRows ?? {});
536
479
  }, [selectedRows]);
537
480
 
538
481
  /**
539
482
  * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
540
483
  */
541
- var _columns = react.useMemo(function () {
542
- return columns.map(function (column) {
484
+ const _columns = react.useMemo(() => {
485
+ return columns.map(column => {
543
486
  if (column.filterFn || column.enableColumnFilter === false) {
544
487
  return column;
545
488
  }
546
489
  /* istanbul ignore next */
547
- return _objectSpread__default.default(_objectSpread__default.default({}, column), {}, {
548
- filterFn: function filterFn(row, columnId, filterValue) {
549
- var _row$getValue;
490
+ return {
491
+ ...column,
492
+ filterFn: (row, columnId, filterValue) => {
550
493
  if (debug) {
551
494
  console.log('filterFn', row, columnId, filterValue);
552
495
  }
553
496
  if (!filterValue || (Array.isArray(filterValue) || typeof filterValue === 'string') && filterValue.length === 0) {
554
497
  return true;
555
498
  }
556
- var value = (_row$getValue = row.getValue(columnId)) !== null && _row$getValue !== void 0 ? _row$getValue : 'NULL_OR_UNDEFINED';
499
+ const value = row.getValue(columnId) ?? 'NULL_OR_UNDEFINED';
557
500
  if (Array.isArray(filterValue)) {
558
- var numeric = filterValue.some(function (v) {
559
- return typeof v === 'number';
560
- });
501
+ const numeric = filterValue.some(v => typeof v === 'number');
561
502
  if (numeric) {
562
- var _ref2 = filterValue,
563
- _ref3 = _slicedToArray__default.default(_ref2, 2),
564
- start = _ref3[0],
565
- end = _ref3[1];
503
+ const [start, end] = filterValue;
566
504
  return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
567
505
  } else {
568
- var validFilterValue = filterValue.filter(function (v) {
569
- return !!v;
570
- });
506
+ const validFilterValue = filterValue.filter(v => !!v);
571
507
  if (validFilterValue.length === 0) return true;
572
508
  return filterValue.includes(value);
573
509
  }
574
510
  }
575
511
  return value === filterValue;
576
512
  }
577
- });
513
+ };
578
514
  });
579
515
  }, [debug, columns]);
580
516
 
581
517
  /**
582
518
  * Set up default table options
583
519
  */
584
- var options = {
520
+ const options = {
585
521
  data: rows,
586
522
  columns: _columns,
523
+ defaultColumn: {
524
+ size: 150,
525
+ cell: context => {
526
+ return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
527
+ style: {
528
+ overflow: 'hidden',
529
+ whiteSpace: 'nowrap',
530
+ textOverflow: 'ellipsis'
531
+ },
532
+ group: "table",
533
+ variant: "cell_text",
534
+ children: String(context.getValue() ?? '')
535
+ });
536
+ }
537
+ },
587
538
  columnResizeMode: columnResizeMode,
539
+ onColumnSizingChange: change => {
540
+ if (typeof change === 'function') {
541
+ setInternalColumnSize(change(internalColumnSize));
542
+ } else {
543
+ setInternalColumnSize(change);
544
+ }
545
+ if (onColumnResize) {
546
+ onColumnResize(internalColumnSize);
547
+ }
548
+ },
588
549
  state: {
589
- sorting: sorting,
550
+ sorting,
590
551
  columnPinning: columnPin,
591
552
  rowSelection: selection,
592
- columnOrder: columnOrderState
553
+ columnOrder: columnOrderState,
554
+ columnSizing: columnSizing ?? internalColumnSize
593
555
  },
594
- onSortingChange: function onSortingChange(changes) {
595
- if (_onSortingChange) {
596
- _onSortingChange(changes);
556
+ onSortingChange: changes => {
557
+ if (onSortingChange) {
558
+ onSortingChange(changes);
597
559
  }
598
560
  setSorting(changes);
599
561
  },
600
562
  enableColumnFilters: !!enableColumnFiltering,
601
563
  enableFilters: !!enableColumnFiltering,
602
- enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
603
- manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
564
+ enableSorting: enableSorting ?? false,
565
+ manualSorting: manualSorting ?? false,
604
566
  enableColumnResizing: !!columnResizeMode,
605
567
  getCoreRowModel: reactTable.getCoreRowModel(),
606
568
  getSortedRowModel: reactTable.getSortedRowModel(),
607
569
  debugTable: debug,
608
570
  debugHeaders: debug,
609
571
  debugColumns: debug,
610
- enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false,
572
+ enableRowSelection: rowSelection ?? false,
611
573
  enableColumnPinning: true,
612
- enablePinning: true
574
+ enablePinning: true,
575
+ getRowId
613
576
  };
614
- react.useEffect(function () {
577
+ react.useEffect(() => {
615
578
  if (columnOrder && columnOrder.length > 0) {
616
- setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
579
+ setColumnOrderState(columnOrder ?? []);
617
580
  }
618
581
  }, [columnOrder]);
619
582
 
620
583
  /**
621
584
  * Set up handlers for rowSelection
622
585
  */
623
- if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
624
- options.onRowSelectionChange = function (updaterOrValue) {
586
+ if (rowSelection ?? false) {
587
+ options.onRowSelectionChange = updaterOrValue => {
625
588
  if (onSelectRow) {
626
589
  onSelectRow(updaterOrValue);
627
590
  }
@@ -646,7 +609,7 @@ function EdsDataGrid(_ref) {
646
609
  /**
647
610
  * Set up config for pagination
648
611
  */
649
- if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
612
+ if (enablePagination ?? false) {
650
613
  options.state.pagination = page;
651
614
  options.getPaginationRowModel = reactTable.getPaginationRowModel();
652
615
  }
@@ -656,8 +619,8 @@ function EdsDataGrid(_ref) {
656
619
  */
657
620
  if (columnVisibility) {
658
621
  options.state.columnVisibility = visible;
659
- options.onColumnVisibilityChange = function (vis) {
660
- var updated;
622
+ options.onColumnVisibilityChange = vis => {
623
+ let updated;
661
624
  if (typeof vis === 'function') {
662
625
  updated = vis(visible);
663
626
  } else {
@@ -667,51 +630,49 @@ function EdsDataGrid(_ref) {
667
630
  setVisible(updated);
668
631
  };
669
632
  }
670
- react.useEffect(function () {
671
- setPage(function (prev) {
672
- return _objectSpread__default.default(_objectSpread__default.default({}, prev), {}, {
673
- pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
674
- });
675
- });
633
+ react.useEffect(() => {
634
+ setPage(prev => ({
635
+ ...prev,
636
+ pageSize: pageSize ?? 25
637
+ }));
676
638
  }, [pageSize]);
677
- var table = reactTable.useReactTable(options);
678
- var parentRefStyle = {};
639
+ const table = reactTable.useReactTable(options);
640
+ let tableWrapperStyle = {};
679
641
 
680
642
  /**
681
643
  * Style the parent container to enable virtualization.
682
644
  * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
683
645
  */
684
646
  if (enableVirtual) {
685
- var _ref4;
686
- parentRefStyle = {
687
- height: (_ref4 = height !== null && height !== void 0 ? height : virtualHeight) !== null && _ref4 !== void 0 ? _ref4 : 500,
647
+ tableWrapperStyle = {
648
+ height: height ?? virtualHeight ?? 500,
688
649
  overflow: 'auto',
689
650
  position: 'relative'
690
651
  };
691
652
  }
692
- var parentRef = react.useRef(null);
653
+ const parentRef = react.useRef(null);
693
654
 
694
655
  /**
695
656
  * Virtualization setup
696
657
  */
697
- var _useEds = edsCoreReact.useEds(),
698
- density = _useEds.density;
699
- var estimateSize = react.useCallback(function () {
658
+ const {
659
+ density
660
+ } = edsCoreReact.useEds();
661
+ const estimateSize = react.useCallback(() => {
700
662
  return density === 'compact' ? 32 : 48;
701
663
  }, [density]);
702
- var virtualizer = reactVirtual.useVirtualizer({
664
+ const virtualizer = reactVirtual.useVirtualizer({
703
665
  count: table.getRowModel().rows.length,
704
- getScrollElement: function getScrollElement() {
705
- return parentRef.current;
706
- },
707
- estimateSize: estimateSize
666
+ getScrollElement: () => parentRef.current,
667
+ estimateSize
708
668
  });
709
- var virtualRows = virtualizer.getVirtualItems();
710
- var paddingTop = virtualRows.length ? virtualRows[0].start : 0;
711
- var paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
669
+ if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
670
+ const virtualRows = virtualizer.getVirtualItems();
671
+ const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
672
+ const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
712
673
 
713
674
  // These classes are primarily used to allow for feature-detection in the test-suite
714
- var classList = {
675
+ const classList = {
715
676
  'sticky-header': !!stickyHeader,
716
677
  virtual: !!enableVirtual,
717
678
  paging: !!enablePagination
@@ -727,90 +688,81 @@ function EdsDataGrid(_ref) {
727
688
  enableSorting: !!enableSorting,
728
689
  enableColumnFiltering: !!enableColumnFiltering,
729
690
  stickyHeader: !!stickyHeader,
730
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
691
+ children: [/*#__PURE__*/jsxRuntime.jsxs(TableWrapper, {
731
692
  className: "table-wrapper",
732
- style: _objectSpread__default.default(_objectSpread__default.default({
733
- height: height !== null && height !== void 0 ? height : 'auto'
734
- }, parentRefStyle), {}, {
735
- width: scrollbarHorizontal ? width : 'auto',
736
- tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
737
- overflow: 'auto'
738
- }),
693
+ style: tableWrapperStyle,
739
694
  ref: parentRef,
695
+ $height: height,
696
+ $width: width,
697
+ $scrollbarHorizontal: scrollbarHorizontal,
740
698
  children: [/*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table, {
741
- className: Object.entries(classList).filter(function (_ref5) {
742
- var _ref6 = _slicedToArray__default.default(_ref5, 2),
743
- k = _ref6[1];
744
- return k;
745
- }).map(function (_ref7) {
746
- var _ref8 = _slicedToArray__default.default(_ref7, 1),
747
- k = _ref8[0];
748
- return k;
749
- }).join(' '),
699
+ className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
750
700
  style: {
751
- width: table.getTotalSize()
701
+ tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
702
+ width: table.getTotalSize(),
703
+ minWidth: scrollbarHorizontal ? minWidth : 'auto'
752
704
  },
753
705
  children: [caption && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Caption, {
754
706
  children: caption
755
707
  }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Head, {
756
708
  sticky: stickyHeader,
757
- children: table.getHeaderGroups().map(function (headerGroup) {
758
- return /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
759
- table: table,
760
- headerGroup: headerGroup,
761
- columnResizeMode: columnResizeMode,
762
- deltaOffset: table.getState().columnSizingInfo.deltaOffset
763
- }, headerGroup.id);
764
- })
709
+ children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
710
+ table: table,
711
+ headerGroup: headerGroup,
712
+ columnResizeMode: columnResizeMode,
713
+ deltaOffset: table.getState().columnSizingInfo.deltaOffset
714
+ }, headerGroup.id))
765
715
  }), /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table.Body, {
716
+ style: {
717
+ backgroundColor: 'inherit'
718
+ },
766
719
  children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
767
720
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
768
- colSpan: table.getHeaderGroups().length,
721
+ colSpan: table.getFlatHeaders().length,
769
722
  children: emptyMessage
770
723
  })
771
724
  }), enableVirtual && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
772
- children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
725
+ children: [paddingTop > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
773
726
  "data-testid": "virtual-padding-top",
774
727
  className: 'virtual-padding-top',
728
+ style: {
729
+ pointerEvents: 'none'
730
+ },
775
731
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
776
732
  style: {
777
- height: "".concat(paddingTop, "px")
733
+ height: `${paddingTop}px`
778
734
  }
779
735
  })
780
- }), virtualRows.map(function (row) {
781
- return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
782
- row: table.getRowModel().rows[row.index]
783
- }, row.index);
784
- }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
736
+ }), virtualRows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
737
+ row: table.getRowModel().rows[row.index]
738
+ }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
785
739
  "data-testid": "virtual-padding-bottom",
786
740
  className: 'virtual-padding-bottom',
741
+ style: {
742
+ pointerEvents: 'none'
743
+ },
787
744
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
788
745
  style: {
789
- height: "".concat(paddingBottom, "px")
746
+ height: `${paddingBottom}px`
790
747
  }
791
748
  })
792
749
  })]
793
- }), !enableVirtual && table.getRowModel().rows.map(function (row) {
794
- return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
795
- row: row
796
- }, row.id);
797
- })]
750
+ }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
751
+ row: row
752
+ }, row.id))]
798
753
  })]
799
754
  }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
800
755
  style: {
801
- maxWidth: "".concat(table.getTotalSize(), "px")
756
+ maxWidth: `${table.getTotalSize()}px`
802
757
  },
803
758
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Pagination, {
804
759
  totalItems: table.getFilteredRowModel().rows.length,
805
760
  withItemIndicator: true,
806
761
  itemsPerPage: page.pageSize,
807
- onChange: function onChange(e, p) {
808
- return setPage(function (s) {
809
- return _objectSpread__default.default(_objectSpread__default.default({}, s), {}, {
810
- pageIndex: p - 1
811
- });
812
- });
813
- },
762
+ onChange: (e, p) => setPage(s => ({
763
+ ...s,
764
+ pageIndex: p - 1
765
+ })),
814
766
  defaultPage: 1
815
767
  })
816
768
  })]
@@ -819,5 +771,17 @@ function EdsDataGrid(_ref) {
819
771
  })]
820
772
  });
821
773
  }
774
+ const TableWrapper = styled__default.default.div.withConfig({
775
+ displayName: "EdsDataGrid__TableWrapper",
776
+ componentId: "sc-82fj3f-0"
777
+ })(["height:", ";width:", ";overflow:auto;contain:", ";"], ({
778
+ $height
779
+ }) => addPxSuffixIfInputHasNoPrefix($height) ?? 'auto', ({
780
+ $scrollbarHorizontal,
781
+ $width
782
+ }) => $scrollbarHorizontal ? addPxSuffixIfInputHasNoPrefix($width) ?? '100%' : 'auto', ({
783
+ $height,
784
+ $width
785
+ }) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
822
786
 
823
787
  exports.EdsDataGrid = EdsDataGrid;