@entur/table 4.9.14-beta.3 → 4.9.14-beta.4
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/dist/DataCell.d.ts +20 -0
- package/dist/EditableCell.d.ts +24 -0
- package/dist/ExpandRowButton.d.ts +7 -0
- package/dist/ExpandableRow.d.ts +12 -0
- package/dist/HeaderCell.d.ts +24 -0
- package/dist/Table.d.ts +21 -0
- package/dist/TableBody.d.ts +9 -0
- package/dist/TableFooter.d.ts +6 -0
- package/dist/TableHead.d.ts +8 -0
- package/dist/TableRow.d.ts +21 -0
- package/dist/index.d.ts +13 -226
- package/dist/index.js +8 -0
- package/dist/styles.css +118 -100
- package/dist/table.cjs.development.js +509 -0
- package/dist/table.cjs.development.js.map +1 -0
- package/dist/table.cjs.production.min.js +2 -0
- package/dist/table.cjs.production.min.js.map +1 -0
- package/dist/table.esm.js +439 -382
- package/dist/table.esm.js.map +1 -1
- package/dist/useSortableTable.d.ts +41 -0
- package/dist/useTableKeyboardNavigation.d.ts +14 -0
- package/package.json +19 -29
- package/dist/table.cjs.js +0 -437
- package/dist/table.cjs.js.map +0 -1
package/dist/table.esm.js
CHANGED
|
@@ -1,381 +1,428 @@
|
|
|
1
|
-
import { useRandomId, mergeRefs, warnAboutMissingStyles } from
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const observer = new IntersectionObserver(
|
|
32
|
-
(entries) => {
|
|
33
|
-
tableElement?.classList.toggle(
|
|
34
|
-
"eds-table--sticky-header--active",
|
|
35
|
-
!entries[0].isIntersecting
|
|
36
|
-
);
|
|
37
|
-
},
|
|
38
|
-
{ threshold: [0, 1] }
|
|
39
|
-
);
|
|
40
|
-
observer.observe(observerElement);
|
|
41
|
-
return () => {
|
|
42
|
-
observer.unobserve(observerElement);
|
|
43
|
-
observerElement.remove();
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
}, [stickyHeader]);
|
|
47
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
-
/* @__PURE__ */ jsx(
|
|
49
|
-
"table",
|
|
50
|
-
{
|
|
51
|
-
className: classNames(
|
|
52
|
-
"eds-table",
|
|
53
|
-
{ "eds-table--fixed": fixed },
|
|
54
|
-
{ "eds-table--middle": spacing === "middle" },
|
|
55
|
-
{ "eds-table--small": spacing === "small" },
|
|
56
|
-
{ "eds-table--sortable": sortable },
|
|
57
|
-
{ "eds-table--sticky-header": stickyHeader },
|
|
58
|
-
className
|
|
59
|
-
),
|
|
60
|
-
ref: mergeRefs(ref, tableRef),
|
|
61
|
-
"aria-describedby": sortable ? sortableHeaderId : void 0,
|
|
62
|
-
...rest
|
|
63
|
-
}
|
|
64
|
-
),
|
|
65
|
-
sortable && /* @__PURE__ */ jsx(VisuallyHidden, { id: sortableHeaderId, children: changeSortDescription })
|
|
66
|
-
] });
|
|
67
|
-
}
|
|
68
|
-
);
|
|
69
|
-
const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
70
|
-
"thead",
|
|
71
|
-
{
|
|
72
|
-
className: classNames("eds-table__head", className),
|
|
73
|
-
ref,
|
|
74
|
-
...props
|
|
75
|
-
}
|
|
76
|
-
));
|
|
77
|
-
const TableBody = React.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
|
|
78
|
-
"tbody",
|
|
79
|
-
{
|
|
80
|
-
className: classNames("eds-table__body", className),
|
|
81
|
-
ref,
|
|
82
|
-
...rest
|
|
1
|
+
import { useRandomId, mergeRefs, warnAboutMissingStyles } from '@entur/utils';
|
|
2
|
+
import React, { useRef, useEffect, useState, useMemo } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { VisuallyHidden } from '@entur/a11y';
|
|
5
|
+
import { BulletBadge } from '@entur/layout';
|
|
6
|
+
import { UnsortedIcon, UpArrowIcon, DownArrowIcon } from '@entur/icons';
|
|
7
|
+
import get from 'lodash.get';
|
|
8
|
+
import { VariantProvider } from '@entur/form';
|
|
9
|
+
import { Tooltip } from '@entur/tooltip';
|
|
10
|
+
import { BaseExpand } from '@entur/expand';
|
|
11
|
+
import { IconButton } from '@entur/button';
|
|
12
|
+
|
|
13
|
+
function _extends() {
|
|
14
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
15
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
16
|
+
var t = arguments[e];
|
|
17
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
18
|
+
}
|
|
19
|
+
return n;
|
|
20
|
+
}, _extends.apply(null, arguments);
|
|
21
|
+
}
|
|
22
|
+
function _objectDestructuringEmpty(t) {
|
|
23
|
+
if (null == t) throw new TypeError("Cannot destructure " + t);
|
|
24
|
+
}
|
|
25
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
26
|
+
if (null == r) return {};
|
|
27
|
+
var t = {};
|
|
28
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
29
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
30
|
+
t[n] = r[n];
|
|
83
31
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
32
|
+
return t;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var _excluded$8 = ["className", "fixed", "spacing", "sortable", "changeSortDescription", "stickyHeader"];
|
|
36
|
+
var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
37
|
+
var className = _ref.className,
|
|
38
|
+
_ref$fixed = _ref.fixed,
|
|
39
|
+
fixed = _ref$fixed === void 0 ? false : _ref$fixed,
|
|
40
|
+
_ref$spacing = _ref.spacing,
|
|
41
|
+
spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
42
|
+
_ref$sortable = _ref.sortable,
|
|
43
|
+
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
44
|
+
_ref$changeSortDescri = _ref.changeSortDescription,
|
|
45
|
+
changeSortDescription = _ref$changeSortDescri === void 0 ? 'Tabelloverskrifter med knapper kan trykkes på for å endre sortering,' : _ref$changeSortDescri,
|
|
46
|
+
_ref$stickyHeader = _ref.stickyHeader,
|
|
47
|
+
stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
|
|
48
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
49
|
+
var sortableHeaderId = useRandomId('sortable-header');
|
|
50
|
+
var tableRef = useRef(null);
|
|
51
|
+
useEffect(function () {
|
|
52
|
+
if (stickyHeader) {
|
|
53
|
+
var _tableElement$parentN;
|
|
54
|
+
/* We check when an inserted div above the header
|
|
55
|
+
is outside our scrolling container to determine when
|
|
56
|
+
the table header becomes sticky. This is necessary
|
|
57
|
+
to conditionally add our box-shadow when the
|
|
58
|
+
header is overlapping table rows */
|
|
59
|
+
var tableElement = tableRef.current;
|
|
60
|
+
var observerElement = document.createElement('div');
|
|
61
|
+
observerElement.classList.add('sticky-observer');
|
|
62
|
+
tableElement == null || (_tableElement$parentN = tableElement.parentNode) == null || _tableElement$parentN.insertBefore(observerElement, tableElement);
|
|
63
|
+
var observer = new IntersectionObserver(function (entries) {
|
|
64
|
+
tableElement == null || tableElement.classList.toggle('eds-table--sticky-header--active', !entries[0].isIntersecting);
|
|
65
|
+
}, {
|
|
66
|
+
threshold: [0, 1]
|
|
67
|
+
});
|
|
68
|
+
observer.observe(observerElement);
|
|
69
|
+
return function () {
|
|
70
|
+
observer.unobserve(observerElement);
|
|
71
|
+
observerElement.remove();
|
|
72
|
+
};
|
|
97
73
|
}
|
|
98
|
-
)
|
|
99
|
-
|
|
74
|
+
}, [stickyHeader]);
|
|
75
|
+
return React.createElement(React.Fragment, null, React.createElement("table", _extends({
|
|
76
|
+
className: classNames('eds-table', {
|
|
77
|
+
'eds-table--fixed': fixed
|
|
78
|
+
}, {
|
|
79
|
+
'eds-table--middle': spacing === 'middle'
|
|
80
|
+
}, {
|
|
81
|
+
'eds-table--small': spacing === 'small'
|
|
82
|
+
}, {
|
|
83
|
+
'eds-table--sortable': sortable
|
|
84
|
+
}, {
|
|
85
|
+
'eds-table--sticky-header': stickyHeader
|
|
86
|
+
}, className),
|
|
87
|
+
ref: mergeRefs(ref, tableRef),
|
|
88
|
+
"aria-describedby": sortable ? sortableHeaderId : undefined
|
|
89
|
+
}, rest)), sortable && React.createElement(VisuallyHidden, {
|
|
90
|
+
id: sortableHeaderId
|
|
91
|
+
}, changeSortDescription));
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
var _excluded$7 = ["className"];
|
|
95
|
+
var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
96
|
+
var className = _ref.className,
|
|
97
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
98
|
+
return React.createElement("thead", _extends({
|
|
99
|
+
className: classNames('eds-table__head', className),
|
|
100
|
+
ref: ref
|
|
101
|
+
}, props));
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
var _excluded$6 = ["className"];
|
|
105
|
+
var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
106
|
+
var className = _ref.className,
|
|
107
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
108
|
+
return React.createElement("tbody", _extends({
|
|
109
|
+
className: classNames('eds-table__body', className),
|
|
110
|
+
ref: ref
|
|
111
|
+
}, rest));
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
115
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
116
|
+
return React.createElement("tfoot", _extends({
|
|
117
|
+
ref: ref
|
|
118
|
+
}, props));
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
var _excluded$5 = ["className", "hover", "active", "error"];
|
|
122
|
+
var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
123
|
+
var className = _ref.className,
|
|
124
|
+
_ref$hover = _ref.hover,
|
|
125
|
+
hover = _ref$hover === void 0 ? false : _ref$hover,
|
|
126
|
+
_ref$active = _ref.active,
|
|
127
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
128
|
+
_ref$error = _ref.error,
|
|
129
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
130
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
131
|
+
return React.createElement("tr", _extends({
|
|
132
|
+
className: classNames('eds-table__row', className, {
|
|
133
|
+
'eds-table__row--hover': hover,
|
|
134
|
+
'eds-table__row--active': active,
|
|
135
|
+
'eds-table__row--error': error
|
|
136
|
+
}),
|
|
137
|
+
ref: ref
|
|
138
|
+
}, rest));
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
var _excluded$4 = ["className", "padding", "status", "variant", "children"];
|
|
100
142
|
function mapStatusToVariant(status) {
|
|
101
143
|
switch (status) {
|
|
102
|
-
case
|
|
103
|
-
return
|
|
104
|
-
case
|
|
105
|
-
return
|
|
106
|
-
case
|
|
107
|
-
return
|
|
144
|
+
case 'positive':
|
|
145
|
+
return 'success';
|
|
146
|
+
case 'negative':
|
|
147
|
+
return 'negative';
|
|
148
|
+
case 'neutral':
|
|
149
|
+
return 'neutral';
|
|
108
150
|
default:
|
|
109
|
-
return
|
|
151
|
+
return 'neutral';
|
|
110
152
|
}
|
|
111
153
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
"eds-table__data-cell--padding-radio": padding === "radio",
|
|
124
|
-
"eds-table__data-cell--padding-overflow-menu": padding === "overflow-menu"
|
|
125
|
-
}),
|
|
126
|
-
...rest,
|
|
127
|
-
children: variant ? /* @__PURE__ */ jsx(BulletBadge, { variant, children }) : children
|
|
128
|
-
}
|
|
129
|
-
);
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
const HeaderCell = React.forwardRef(
|
|
133
|
-
({
|
|
134
|
-
className,
|
|
135
|
-
children,
|
|
136
|
-
name,
|
|
137
|
-
sortable = false,
|
|
138
|
-
sortConfig,
|
|
139
|
-
padding = "default",
|
|
140
|
-
sortableButtonProps,
|
|
141
|
-
sortedAscendingAriaLabel = ", sortert stigende",
|
|
142
|
-
sortedDescendingAriaLabel = ", sortert synkende",
|
|
143
|
-
...rest
|
|
144
|
-
}, ref) => {
|
|
145
|
-
const [isCurrentlySorted, setIsCurrentlySorted] = React.useState(false);
|
|
146
|
-
React.useEffect(() => {
|
|
147
|
-
sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
|
|
148
|
-
}, [sortConfig, name]);
|
|
149
|
-
const ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : void 0;
|
|
150
|
-
return /* @__PURE__ */ jsx(
|
|
151
|
-
"th",
|
|
152
|
-
{
|
|
153
|
-
className: classNames("eds-table__header-cell", className, {
|
|
154
|
-
"eds-table__header-cell--sortable": sortable,
|
|
155
|
-
"eds-table__header-cell--padding-radio": padding === "radio",
|
|
156
|
-
"eds-table__header-cell--padding-checkbox": padding === "checkbox",
|
|
157
|
-
"eds-table__header-cell--padding-overflow-menu": padding === "overflow-menu"
|
|
158
|
-
}),
|
|
159
|
-
"aria-sort": ariaSort,
|
|
160
|
-
ref,
|
|
161
|
-
...rest,
|
|
162
|
-
children: sortable && sortConfig && sortableButtonProps ? /* @__PURE__ */ jsx(
|
|
163
|
-
SortableHeaderCellButton,
|
|
164
|
-
{
|
|
165
|
-
sortableButtonProps,
|
|
166
|
-
sortConfig,
|
|
167
|
-
isCurrentlySorted,
|
|
168
|
-
ariaSort,
|
|
169
|
-
sortedAscendingAriaLabel,
|
|
170
|
-
sortedDescendingAriaLabel,
|
|
171
|
-
children
|
|
172
|
-
}
|
|
173
|
-
) : children
|
|
174
|
-
}
|
|
175
|
-
);
|
|
154
|
+
var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
155
|
+
var className = _ref.className,
|
|
156
|
+
_ref$padding = _ref.padding,
|
|
157
|
+
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
158
|
+
status = _ref.status,
|
|
159
|
+
variant = _ref.variant,
|
|
160
|
+
children = _ref.children,
|
|
161
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
162
|
+
// If variant is undefined and status is defined, map status to variant
|
|
163
|
+
if (!variant && status) {
|
|
164
|
+
variant = mapStatusToVariant(status);
|
|
176
165
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
})
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
166
|
+
return React.createElement("td", _extends({
|
|
167
|
+
ref: ref,
|
|
168
|
+
className: classNames('eds-table__data-cell', className, {
|
|
169
|
+
'eds-table__data-cell--padding-checkbox': padding === 'checkbox',
|
|
170
|
+
'eds-table__data-cell--padding-radio': padding === 'radio',
|
|
171
|
+
'eds-table__data-cell--padding-overflow-menu': padding === 'overflow-menu'
|
|
172
|
+
})
|
|
173
|
+
}, rest), variant ? React.createElement(BulletBadge, {
|
|
174
|
+
variant: variant
|
|
175
|
+
}, children) : children);
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps", "sortedAscendingAriaLabel", "sortedDescendingAriaLabel"],
|
|
179
|
+
_excluded2$1 = ["className"];
|
|
180
|
+
var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
181
|
+
var className = _ref.className,
|
|
182
|
+
children = _ref.children,
|
|
183
|
+
name = _ref.name,
|
|
184
|
+
_ref$sortable = _ref.sortable,
|
|
185
|
+
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
186
|
+
sortConfig = _ref.sortConfig,
|
|
187
|
+
_ref$padding = _ref.padding,
|
|
188
|
+
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
189
|
+
sortableButtonProps = _ref.sortableButtonProps,
|
|
190
|
+
_ref$sortedAscendingA = _ref.sortedAscendingAriaLabel,
|
|
191
|
+
sortedAscendingAriaLabel = _ref$sortedAscendingA === void 0 ? ', sortert stigende' : _ref$sortedAscendingA,
|
|
192
|
+
_ref$sortedDescending = _ref.sortedDescendingAriaLabel,
|
|
193
|
+
sortedDescendingAriaLabel = _ref$sortedDescending === void 0 ? ', sortert synkende' : _ref$sortedDescending,
|
|
194
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
195
|
+
var _React$useState = React.useState(false),
|
|
196
|
+
isCurrentlySorted = _React$useState[0],
|
|
197
|
+
setIsCurrentlySorted = _React$useState[1];
|
|
198
|
+
React.useEffect(function () {
|
|
199
|
+
sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
|
|
200
|
+
}, [sortConfig, name]);
|
|
201
|
+
var ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : undefined;
|
|
202
|
+
return React.createElement("th", _extends({
|
|
203
|
+
className: classNames('eds-table__header-cell', className, {
|
|
204
|
+
'eds-table__header-cell--sortable': sortable,
|
|
205
|
+
'eds-table__header-cell--padding-radio': padding === 'radio',
|
|
206
|
+
'eds-table__header-cell--padding-checkbox': padding === 'checkbox',
|
|
207
|
+
'eds-table__header-cell--padding-overflow-menu': padding === 'overflow-menu'
|
|
208
|
+
}),
|
|
209
|
+
"aria-sort": ariaSort,
|
|
210
|
+
ref: ref
|
|
211
|
+
}, rest), sortable && sortConfig && sortableButtonProps ? React.createElement(SortableHeaderCellButton, {
|
|
212
|
+
sortableButtonProps: sortableButtonProps,
|
|
213
|
+
sortConfig: sortConfig,
|
|
214
|
+
isCurrentlySorted: isCurrentlySorted,
|
|
215
|
+
ariaSort: ariaSort,
|
|
216
|
+
sortedAscendingAriaLabel: sortedAscendingAriaLabel,
|
|
217
|
+
sortedDescendingAriaLabel: sortedDescendingAriaLabel
|
|
218
|
+
}, children) : children);
|
|
219
|
+
});
|
|
220
|
+
var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
221
|
+
var sortConfig = _ref2.sortConfig,
|
|
222
|
+
sortableButtonProps = _ref2.sortableButtonProps,
|
|
223
|
+
isCurrentlySorted = _ref2.isCurrentlySorted,
|
|
224
|
+
children = _ref2.children,
|
|
225
|
+
ariaSort = _ref2.ariaSort,
|
|
226
|
+
sortedAscendingAriaLabel = _ref2.sortedAscendingAriaLabel,
|
|
227
|
+
sortedDescendingAriaLabel = _ref2.sortedDescendingAriaLabel;
|
|
228
|
+
var _useState = useState(''),
|
|
229
|
+
sortedAriaInfo = _useState[0],
|
|
230
|
+
setSortedAriaInfo = _useState[1];
|
|
231
|
+
var className = sortableButtonProps.className,
|
|
232
|
+
rest = _objectWithoutPropertiesLoose(sortableButtonProps, _excluded2$1);
|
|
233
|
+
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
234
|
+
useEffect(function () {
|
|
235
|
+
var DISMISS_SORT_INFO_TIME = 3000;
|
|
236
|
+
if (sortConfig.order == 'ascending') {
|
|
193
237
|
setSortedAriaInfo(sortedAscendingAriaLabel);
|
|
194
|
-
} else if (sortConfig.order ==
|
|
238
|
+
} else if (sortConfig.order == 'descending') {
|
|
195
239
|
setSortedAriaInfo(sortedDescendingAriaLabel);
|
|
196
240
|
}
|
|
197
|
-
|
|
198
|
-
setSortedAriaInfo(
|
|
199
|
-
if (isFirefox) setSortedAriaInfo(
|
|
241
|
+
var dismissAriaTimer = setTimeout(function () {
|
|
242
|
+
setSortedAriaInfo('');
|
|
243
|
+
if (isFirefox) setSortedAriaInfo(', sort ' + sortConfig.order);
|
|
200
244
|
}, DISMISS_SORT_INFO_TIME);
|
|
201
|
-
return ()
|
|
245
|
+
return function () {
|
|
246
|
+
return clearTimeout(dismissAriaTimer);
|
|
247
|
+
};
|
|
202
248
|
}, [sortConfig.order]);
|
|
203
|
-
return
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
isCurrentlySorted && sortConfig.order === "ascending" && /* @__PURE__ */ jsx(
|
|
221
|
-
UpArrowIcon,
|
|
222
|
-
{
|
|
223
|
-
size: "1em",
|
|
224
|
-
className: "eds-table__header-cell-button-icon",
|
|
225
|
-
"aria-hidden": "true"
|
|
226
|
-
}
|
|
227
|
-
),
|
|
228
|
-
isCurrentlySorted && sortConfig.order === "descending" && /* @__PURE__ */ jsx(
|
|
229
|
-
DownArrowIcon,
|
|
230
|
-
{
|
|
231
|
-
size: "1em",
|
|
232
|
-
className: "eds-table__header-cell-button-icon",
|
|
233
|
-
"aria-hidden": "true"
|
|
234
|
-
}
|
|
235
|
-
),
|
|
236
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { children: isCurrentlySorted && sortedAriaInfo })
|
|
237
|
-
]
|
|
238
|
-
}
|
|
239
|
-
);
|
|
249
|
+
return React.createElement("button", _extends({
|
|
250
|
+
className: classNames('eds-table__header-cell-button', className),
|
|
251
|
+
type: "button",
|
|
252
|
+
"aria-sort": ariaSort
|
|
253
|
+
}, rest), children, (!isCurrentlySorted || sortConfig.order === 'none') && React.createElement(UnsortedIcon, {
|
|
254
|
+
size: "1em",
|
|
255
|
+
className: "eds-table__header-cell-button-icon",
|
|
256
|
+
"aria-hidden": "true"
|
|
257
|
+
}), isCurrentlySorted && sortConfig.order === 'ascending' && React.createElement(UpArrowIcon, {
|
|
258
|
+
size: "1em",
|
|
259
|
+
className: "eds-table__header-cell-button-icon",
|
|
260
|
+
"aria-hidden": "true"
|
|
261
|
+
}), isCurrentlySorted && sortConfig.order === 'descending' && React.createElement(DownArrowIcon, {
|
|
262
|
+
size: "1em",
|
|
263
|
+
className: "eds-table__header-cell-button-icon",
|
|
264
|
+
"aria-hidden": "true"
|
|
265
|
+
}), React.createElement(VisuallyHidden, null, isCurrentlySorted && sortedAriaInfo));
|
|
240
266
|
};
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
267
|
+
|
|
268
|
+
var _excluded$2 = ["name", "sortable", "buttonProps"],
|
|
269
|
+
_excluded2 = ["sortable"];
|
|
270
|
+
function useSortableData(tableData, externalSortConfig) {
|
|
271
|
+
if (externalSortConfig === void 0) {
|
|
272
|
+
externalSortConfig = {
|
|
273
|
+
key: '',
|
|
274
|
+
order: 'none'
|
|
275
|
+
};
|
|
276
|
+
}
|
|
277
|
+
var _useState = useState(externalSortConfig),
|
|
278
|
+
sortConfig = _useState[0],
|
|
279
|
+
setSortConfig = _useState[1];
|
|
280
|
+
var onSortRequested = function onSortRequested(key) {
|
|
281
|
+
var sortingNewColumn = key !== sortConfig.key;
|
|
282
|
+
if (sortingNewColumn || sortConfig.order === 'none') return setSortConfig({
|
|
283
|
+
key: key,
|
|
284
|
+
order: 'ascending'
|
|
285
|
+
});
|
|
286
|
+
if (sortConfig.order === 'ascending') return setSortConfig({
|
|
287
|
+
key: key,
|
|
288
|
+
order: 'descending'
|
|
289
|
+
});
|
|
290
|
+
if (sortConfig.order === 'descending') return setSortConfig({
|
|
291
|
+
key: key,
|
|
292
|
+
order: 'none'
|
|
293
|
+
});
|
|
251
294
|
};
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
295
|
+
var tableSortedAscending = useMemo(function () {
|
|
296
|
+
return [].concat(tableData).sort(function (a, b) {
|
|
297
|
+
var _get$toString, _get, _get$toString2, _get2;
|
|
298
|
+
var valueOfA = (_get$toString = (_get = get(a, sortConfig.key, a)) == null ? void 0 : _get.toString()) != null ? _get$toString : '';
|
|
299
|
+
var valueOfB = (_get$toString2 = (_get2 = get(b, sortConfig.key, b)) == null ? void 0 : _get2.toString()) != null ? _get$toString2 : '';
|
|
300
|
+
var stringComparator = new Intl.Collator(['no', 'en'], {
|
|
257
301
|
numeric: true,
|
|
258
|
-
sensitivity:
|
|
302
|
+
sensitivity: 'base'
|
|
259
303
|
});
|
|
260
304
|
return stringComparator.compare(valueOfA, valueOfB);
|
|
261
|
-
})
|
|
262
|
-
|
|
263
|
-
)
|
|
264
|
-
const sortedData = useMemo(() => {
|
|
305
|
+
});
|
|
306
|
+
}, [tableData, sortConfig.key]);
|
|
307
|
+
var sortedData = useMemo(function () {
|
|
265
308
|
switch (sortConfig.order) {
|
|
266
|
-
case
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
309
|
+
case 'ascending':
|
|
310
|
+
{
|
|
311
|
+
return tableSortedAscending;
|
|
312
|
+
}
|
|
313
|
+
case 'descending':
|
|
314
|
+
{
|
|
315
|
+
return [].concat(tableSortedAscending).reverse();
|
|
316
|
+
}
|
|
317
|
+
case 'none':
|
|
318
|
+
{
|
|
319
|
+
return tableData;
|
|
320
|
+
}
|
|
321
|
+
default:
|
|
322
|
+
{
|
|
323
|
+
return tableData;
|
|
324
|
+
}
|
|
278
325
|
}
|
|
279
326
|
}, [sortConfig.order, tableData, tableSortedAscending]);
|
|
280
|
-
|
|
281
|
-
name,
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
return {
|
|
287
|
-
name,
|
|
288
|
-
sortable,
|
|
289
|
-
sortConfig,
|
|
290
|
-
sortableButtonProps: {
|
|
291
|
-
onClick: ()
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
};
|
|
327
|
+
var getSortableHeaderProps = function getSortableHeaderProps(_ref) {
|
|
328
|
+
var name = _ref.name,
|
|
329
|
+
_ref$sortable = _ref.sortable,
|
|
330
|
+
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
331
|
+
buttonProps = _ref.buttonProps,
|
|
332
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
333
|
+
return _extends({
|
|
334
|
+
name: name,
|
|
335
|
+
sortable: sortable,
|
|
336
|
+
sortConfig: sortConfig,
|
|
337
|
+
sortableButtonProps: _extends({
|
|
338
|
+
onClick: function onClick() {
|
|
339
|
+
return onSortRequested(name);
|
|
340
|
+
}
|
|
341
|
+
}, buttonProps)
|
|
342
|
+
}, props);
|
|
296
343
|
};
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
};
|
|
344
|
+
var getSortableTableProps = function getSortableTableProps(_temp) {
|
|
345
|
+
var _ref2 = _temp === void 0 ? {} : _temp,
|
|
346
|
+
_ref2$sortable = _ref2.sortable,
|
|
347
|
+
sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
|
|
348
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
349
|
+
return _extends({
|
|
350
|
+
sortable: sortable,
|
|
351
|
+
sortConfig: sortConfig
|
|
352
|
+
}, props);
|
|
353
|
+
};
|
|
354
|
+
return {
|
|
355
|
+
sortedData: sortedData,
|
|
356
|
+
getSortableHeaderProps: getSortableHeaderProps,
|
|
357
|
+
getSortableTableProps: getSortableTableProps
|
|
306
358
|
};
|
|
307
|
-
return { sortedData, getSortableHeaderProps, getSortableTableProps };
|
|
308
359
|
}
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
disableFocusListener: !feedback,
|
|
333
|
-
placement: "bottom",
|
|
334
|
-
content: feedback || void 0,
|
|
335
|
-
variant: feedback ? "negative" : void 0,
|
|
336
|
-
children
|
|
337
|
-
}
|
|
338
|
-
)
|
|
339
|
-
}
|
|
340
|
-
) });
|
|
360
|
+
|
|
361
|
+
var _excluded$1 = ["children", "className", "feedback", "variant", "outlined"];
|
|
362
|
+
var EditableCell = function EditableCell(_ref) {
|
|
363
|
+
var children = _ref.children,
|
|
364
|
+
className = _ref.className,
|
|
365
|
+
feedback = _ref.feedback,
|
|
366
|
+
variant = _ref.variant,
|
|
367
|
+
_ref$outlined = _ref.outlined,
|
|
368
|
+
outlined = _ref$outlined === void 0 ? false : _ref$outlined,
|
|
369
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
370
|
+
return React.createElement(VariantProvider, {
|
|
371
|
+
variant: variant
|
|
372
|
+
}, React.createElement(DataCell, _extends({
|
|
373
|
+
className: classNames('eds-editable-cell', {
|
|
374
|
+
'eds-editable-cell--outlined': outlined
|
|
375
|
+
}, className)
|
|
376
|
+
}, rest), React.createElement(Tooltip, {
|
|
377
|
+
disableHoverListener: !feedback,
|
|
378
|
+
disableFocusListener: !feedback,
|
|
379
|
+
placement: "bottom",
|
|
380
|
+
content: feedback || undefined,
|
|
381
|
+
variant: feedback ? 'negative' : undefined
|
|
382
|
+
}, children)));
|
|
341
383
|
};
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
384
|
+
|
|
385
|
+
var ExpandableRow = function ExpandableRow(_ref) {
|
|
386
|
+
var _ref$open = _ref.open,
|
|
387
|
+
open = _ref$open === void 0 ? false : _ref$open,
|
|
388
|
+
children = _ref.children,
|
|
389
|
+
colSpan = _ref.colSpan;
|
|
390
|
+
return React.createElement("tr", null, React.createElement("td", {
|
|
391
|
+
colSpan: colSpan
|
|
392
|
+
}, React.createElement(BaseExpand, {
|
|
393
|
+
open: open
|
|
394
|
+
}, children)));
|
|
348
395
|
};
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
{
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
);
|
|
396
|
+
|
|
397
|
+
var _excluded = ["open", "onClick"];
|
|
398
|
+
var ExpandRowButton = function ExpandRowButton(_ref) {
|
|
399
|
+
var open = _ref.open,
|
|
400
|
+
onClick = _ref.onClick,
|
|
401
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
402
|
+
return React.createElement(IconButton, _extends({
|
|
403
|
+
className: classNames('eds-expand-row-button', {
|
|
404
|
+
'eds-expand-row-button--open': open
|
|
405
|
+
}),
|
|
406
|
+
onClick: onClick,
|
|
407
|
+
"aria-label": open ? 'Lukk tabellrad' : 'Utvid tabellrad',
|
|
408
|
+
type: "button"
|
|
409
|
+
}, rest), React.createElement(DownArrowIcon, {
|
|
410
|
+
"aria-hidden": true,
|
|
411
|
+
className: "eds-expand-row-button__icon"
|
|
412
|
+
}));
|
|
367
413
|
};
|
|
414
|
+
|
|
368
415
|
function onTableKeypress(event, currentRow, maxRow, allowWrap) {
|
|
369
|
-
|
|
416
|
+
var keyPress = event.key;
|
|
370
417
|
switch (keyPress) {
|
|
371
|
-
case
|
|
418
|
+
case 'ArrowUp':
|
|
372
419
|
event.preventDefault();
|
|
373
420
|
if (allowWrap) {
|
|
374
421
|
return currentRow === 0 ? maxRow - 1 : currentRow - 1;
|
|
375
422
|
} else {
|
|
376
423
|
return currentRow > 0 ? currentRow - 1 : 0;
|
|
377
424
|
}
|
|
378
|
-
case
|
|
425
|
+
case 'ArrowDown':
|
|
379
426
|
event.preventDefault();
|
|
380
427
|
if (allowWrap) {
|
|
381
428
|
return currentRow === maxRow - 1 ? 0 : currentRow + 1;
|
|
@@ -386,52 +433,62 @@ function onTableKeypress(event, currentRow, maxRow, allowWrap) {
|
|
|
386
433
|
return currentRow;
|
|
387
434
|
}
|
|
388
435
|
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
436
|
+
var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRows, allowWrap) {
|
|
437
|
+
var _tableBodyRef$current;
|
|
438
|
+
if (numberOfRows === void 0) {
|
|
439
|
+
numberOfRows = 0;
|
|
440
|
+
}
|
|
441
|
+
if (allowWrap === void 0) {
|
|
442
|
+
allowWrap = true;
|
|
443
|
+
}
|
|
444
|
+
var _useState = useState(numberOfRows),
|
|
445
|
+
currentRow = _useState[0],
|
|
446
|
+
setCurrentRow = _useState[1];
|
|
447
|
+
var _useState2 = useState(0),
|
|
448
|
+
maxRow = _useState2[0],
|
|
449
|
+
setMaxRow = _useState2[1];
|
|
450
|
+
var tableBodyRef = useRef(null);
|
|
451
|
+
var tableHasFocus = tableBodyRef == null || (_tableBodyRef$current = tableBodyRef.current) == null ? void 0 : _tableBodyRef$current.contains(document.activeElement);
|
|
452
|
+
useEffect(function () {
|
|
453
|
+
var _tableBodyRef$current2;
|
|
454
|
+
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) == null ? void 0 : _tableBodyRef$current2.focus());
|
|
396
455
|
}, [currentRow, tableHasFocus]);
|
|
397
|
-
function getTableBodyNavigationProps(
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
456
|
+
function getTableBodyNavigationProps() {
|
|
457
|
+
for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
458
|
+
rest[_key] = arguments[_key];
|
|
459
|
+
}
|
|
460
|
+
return _extends({
|
|
461
|
+
ref: tableBodyRef
|
|
462
|
+
}, rest);
|
|
402
463
|
}
|
|
403
|
-
|
|
404
|
-
function getTableRowNavigationProps(row
|
|
464
|
+
var tableRowRef = useRef(null);
|
|
465
|
+
function getTableRowNavigationProps(row) {
|
|
405
466
|
if (row >= maxRow) {
|
|
406
467
|
setMaxRow(row + 1);
|
|
407
468
|
}
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
469
|
+
var tabIndex = currentRow ? 0 : -1;
|
|
470
|
+
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
471
|
+
rest[_key2 - 1] = arguments[_key2];
|
|
472
|
+
}
|
|
473
|
+
return _extends({
|
|
474
|
+
tabIndex: tabIndex,
|
|
411
475
|
ref: tableRowRef,
|
|
412
|
-
onClick: ()
|
|
413
|
-
|
|
414
|
-
const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);
|
|
415
|
-
setCurrentRow(newCell);
|
|
476
|
+
onClick: function onClick() {
|
|
477
|
+
return setCurrentRow(row);
|
|
416
478
|
},
|
|
417
|
-
|
|
418
|
-
|
|
479
|
+
onKeyDown: function onKeyDown(e) {
|
|
480
|
+
var newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);
|
|
481
|
+
setCurrentRow(newCell);
|
|
482
|
+
}
|
|
483
|
+
}, rest);
|
|
419
484
|
}
|
|
420
|
-
return {
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
DataCell,
|
|
425
|
-
EditableCell,
|
|
426
|
-
ExpandRowButton,
|
|
427
|
-
ExpandableRow,
|
|
428
|
-
HeaderCell,
|
|
429
|
-
Table,
|
|
430
|
-
TableBody,
|
|
431
|
-
TableFooter,
|
|
432
|
-
TableHead,
|
|
433
|
-
TableRow,
|
|
434
|
-
useSortableData,
|
|
435
|
-
useTableKeyboardNavigation
|
|
485
|
+
return {
|
|
486
|
+
getTableRowNavigationProps: getTableRowNavigationProps,
|
|
487
|
+
getTableBodyNavigationProps: getTableBodyNavigationProps
|
|
488
|
+
};
|
|
436
489
|
};
|
|
490
|
+
|
|
491
|
+
warnAboutMissingStyles('table');
|
|
492
|
+
|
|
493
|
+
export { DataCell, EditableCell, ExpandRowButton, ExpandableRow, HeaderCell, Table, TableBody, TableFooter, TableHead, TableRow, useSortableData, useTableKeyboardNavigation };
|
|
437
494
|
//# sourceMappingURL=table.esm.js.map
|