@entur/table 4.5.3 → 4.5.6
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 +12 -0
- package/dist/DataCell.d.ts +1 -1
- package/dist/HeaderCell.d.ts +1 -1
- package/dist/Table.d.ts +1 -1
- package/dist/TableBody.d.ts +1 -1
- package/dist/TableFooter.d.ts +1 -1
- package/dist/TableHead.d.ts +1 -1
- package/dist/TableRow.d.ts +1 -1
- package/dist/styles.css +27 -27
- package/dist/table.cjs.development.js +77 -63
- package/dist/table.cjs.development.js.map +1 -1
- package/dist/table.cjs.production.min.js +1 -1
- package/dist/table.cjs.production.min.js.map +1 -1
- package/dist/table.esm.js +34 -23
- package/dist/table.esm.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.5.6](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.5.5...@entur/table@4.5.6) (2022-03-14)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @entur/table
|
|
9
|
+
|
|
10
|
+
## [4.5.5](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.5.4...@entur/table@4.5.5) (2022-03-01)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @entur/table
|
|
13
|
+
|
|
14
|
+
## [4.5.4](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.5.3...@entur/table@4.5.4) (2022-02-09)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @entur/table
|
|
17
|
+
|
|
6
18
|
## [4.5.3](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.5.2...@entur/table@4.5.3) (2022-01-21)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @entur/table
|
package/dist/DataCell.d.ts
CHANGED
|
@@ -9,4 +9,4 @@ export declare type DataCellProps = {
|
|
|
9
9
|
/** Viser en status-sirkel for DataCell */
|
|
10
10
|
status?: 'positive' | 'negative' | 'neutral';
|
|
11
11
|
} & React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
|
|
12
|
-
export declare const DataCell: React.ForwardRefExoticComponent<Pick<DataCellProps, "
|
|
12
|
+
export declare const DataCell: React.ForwardRefExoticComponent<Pick<DataCellProps, "padding" | "status" | "key" | keyof React.TdHTMLAttributes<HTMLTableDataCellElement>> & React.RefAttributes<HTMLTableDataCellElement>>;
|
package/dist/HeaderCell.d.ts
CHANGED
|
@@ -19,4 +19,4 @@ export declare type HeaderCellProps = {
|
|
|
19
19
|
/** Navnet det skal sorteres på. Benyttes via useSortableTable */
|
|
20
20
|
name?: string;
|
|
21
21
|
} & React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
|
|
22
|
-
export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<HeaderCellProps, "
|
|
22
|
+
export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<HeaderCellProps, "name" | "sortable" | "sortConfig" | "padding" | "sortableButtonProps" | "key" | keyof React.ThHTMLAttributes<HTMLTableCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
|
package/dist/Table.d.ts
CHANGED
|
@@ -14,4 +14,4 @@ export declare type TableProps = {
|
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
[key: string]: any;
|
|
16
16
|
};
|
|
17
|
-
export declare const Table: React.ForwardRefExoticComponent<Pick<TableProps,
|
|
17
|
+
export declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, keyof TableProps> & React.RefAttributes<HTMLTableElement>>;
|
package/dist/TableBody.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export declare type TableBodyProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
ref?: React.Ref<HTMLTableSectionElement>;
|
|
8
8
|
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
9
|
-
export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "
|
|
9
|
+
export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
|
package/dist/TableFooter.d.ts
CHANGED
|
@@ -3,4 +3,4 @@ export declare type TableFooterProps = {
|
|
|
3
3
|
/** Tabellrader */
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
6
|
-
export declare const TableFooter: React.ForwardRefExoticComponent<Pick<TableFooterProps, "
|
|
6
|
+
export declare const TableFooter: React.ForwardRefExoticComponent<Pick<TableFooterProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
|
package/dist/TableHead.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ export declare type TableHeadProps = {
|
|
|
5
5
|
/** Esktra klassenavn */
|
|
6
6
|
className?: string;
|
|
7
7
|
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
8
|
-
export declare const TableHead: React.ForwardRefExoticComponent<Pick<TableHeadProps, "
|
|
8
|
+
export declare const TableHead: React.ForwardRefExoticComponent<Pick<TableHeadProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
|
package/dist/TableRow.d.ts
CHANGED
|
@@ -18,4 +18,4 @@ export declare type TableRowProps = {
|
|
|
18
18
|
error?: boolean;
|
|
19
19
|
ref?: React.Ref<HTMLTableRowElement>;
|
|
20
20
|
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
|
|
21
|
-
export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "
|
|
21
|
+
export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "hover" | "active" | "error" | "key" | keyof React.HTMLAttributes<HTMLTableRowElement>> & React.RefAttributes<HTMLTableRowElement>>;
|
package/dist/styles.css
CHANGED
|
@@ -122,6 +122,33 @@
|
|
|
122
122
|
border-color: #393d79;
|
|
123
123
|
}/* DO NOT CHANGE!*/
|
|
124
124
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
125
|
+
.eds-expand-row-button {
|
|
126
|
+
background: #ffffff;
|
|
127
|
+
border: none;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
font-family: inherit;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
height: 1.5rem;
|
|
132
|
+
width: 1.5rem;
|
|
133
|
+
padding: 0.25rem;
|
|
134
|
+
}
|
|
135
|
+
.eds-expand-row-button:focus {
|
|
136
|
+
outline: none;
|
|
137
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
138
|
+
}
|
|
139
|
+
.eds-contrast .eds-expand-row-button:focus {
|
|
140
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
141
|
+
}
|
|
142
|
+
.eds-contrast .eds-expand-row-button {
|
|
143
|
+
background: #181c56;
|
|
144
|
+
}
|
|
145
|
+
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
146
|
+
transform: rotate(90deg);
|
|
147
|
+
}
|
|
148
|
+
.eds-expand-row-button__icon {
|
|
149
|
+
transition: transform ease-in-out 0.2s;
|
|
150
|
+
}/* DO NOT CHANGE!*/
|
|
151
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
125
152
|
.eds-table__header-cell {
|
|
126
153
|
color: #656782;
|
|
127
154
|
font-size: 0.875rem;
|
|
@@ -260,31 +287,4 @@
|
|
|
260
287
|
}
|
|
261
288
|
.eds-table--small .eds-editable-cell .eds-form-control-wrapper .eds-form-control {
|
|
262
289
|
padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
|
|
263
|
-
}/* DO NOT CHANGE!*/
|
|
264
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
265
|
-
.eds-expand-row-button {
|
|
266
|
-
background: #ffffff;
|
|
267
|
-
border: none;
|
|
268
|
-
border-radius: 50%;
|
|
269
|
-
font-family: inherit;
|
|
270
|
-
cursor: pointer;
|
|
271
|
-
height: 1.5rem;
|
|
272
|
-
width: 1.5rem;
|
|
273
|
-
padding: 0.25rem;
|
|
274
|
-
}
|
|
275
|
-
.eds-expand-row-button:focus {
|
|
276
|
-
outline: none;
|
|
277
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
278
|
-
}
|
|
279
|
-
.eds-contrast .eds-expand-row-button:focus {
|
|
280
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
281
|
-
}
|
|
282
|
-
.eds-contrast .eds-expand-row-button {
|
|
283
|
-
background: #181c56;
|
|
284
|
-
}
|
|
285
|
-
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
286
|
-
transform: rotate(90deg);
|
|
287
|
-
}
|
|
288
|
-
.eds-expand-row-button__icon {
|
|
289
|
-
transition: transform ease-in-out 0.2s;
|
|
290
290
|
}
|
|
@@ -2,18 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
5
|
var utils = require('@entur/utils');
|
|
8
6
|
var React = require('react');
|
|
9
|
-
var
|
|
10
|
-
var classNames = _interopDefault(require('classnames'));
|
|
7
|
+
var classNames = require('classnames');
|
|
11
8
|
var icons = require('@entur/icons');
|
|
12
|
-
var get =
|
|
9
|
+
var get = require('lodash.get');
|
|
13
10
|
var form = require('@entur/form');
|
|
14
11
|
var tooltip = require('@entur/tooltip');
|
|
15
12
|
var expand = require('@entur/expand');
|
|
16
13
|
|
|
14
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
+
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
18
|
+
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
19
|
+
|
|
17
20
|
function _extends() {
|
|
18
21
|
_extends = Object.assign || function (target) {
|
|
19
22
|
for (var i = 1; i < arguments.length; i++) {
|
|
@@ -47,7 +50,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
47
50
|
return target;
|
|
48
51
|
}
|
|
49
52
|
|
|
50
|
-
var
|
|
53
|
+
var _excluded$8 = ["className", "fixed", "spacing", "sortable"];
|
|
54
|
+
var Table = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
51
55
|
var className = _ref.className,
|
|
52
56
|
_ref$fixed = _ref.fixed,
|
|
53
57
|
fixed = _ref$fixed === void 0 ? false : _ref$fixed,
|
|
@@ -55,10 +59,10 @@ var Table = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
55
59
|
spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
56
60
|
_ref$sortable = _ref.sortable,
|
|
57
61
|
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
58
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
62
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
59
63
|
|
|
60
|
-
return React__default.createElement("table",
|
|
61
|
-
className:
|
|
64
|
+
return React__default["default"].createElement("table", _extends({
|
|
65
|
+
className: classNames__default["default"]('eds-table', {
|
|
62
66
|
'eds-table--fixed': fixed
|
|
63
67
|
}, {
|
|
64
68
|
'eds-table--middle': spacing === 'middle'
|
|
@@ -71,35 +75,38 @@ var Table = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
71
75
|
}, rest));
|
|
72
76
|
});
|
|
73
77
|
|
|
74
|
-
var
|
|
78
|
+
var _excluded$7 = ["className"];
|
|
79
|
+
var TableHead = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
75
80
|
var className = _ref.className,
|
|
76
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
81
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
77
82
|
|
|
78
|
-
return React__default.createElement("thead",
|
|
79
|
-
className:
|
|
83
|
+
return React__default["default"].createElement("thead", _extends({
|
|
84
|
+
className: classNames__default["default"]('eds-table__head', className),
|
|
80
85
|
ref: ref
|
|
81
86
|
}, props));
|
|
82
87
|
});
|
|
83
88
|
|
|
84
|
-
var
|
|
89
|
+
var _excluded$6 = ["className"];
|
|
90
|
+
var TableBody = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
85
91
|
var className = _ref.className,
|
|
86
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
92
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
87
93
|
|
|
88
|
-
return React__default.createElement("tbody",
|
|
89
|
-
className:
|
|
94
|
+
return React__default["default"].createElement("tbody", _extends({
|
|
95
|
+
className: classNames__default["default"]('eds-table__body', className),
|
|
90
96
|
ref: ref
|
|
91
97
|
}, rest));
|
|
92
98
|
});
|
|
93
99
|
|
|
94
|
-
var TableFooter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
100
|
+
var TableFooter = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
95
101
|
var props = _extends({}, _ref);
|
|
96
102
|
|
|
97
|
-
return React__default.createElement("tfoot",
|
|
103
|
+
return React__default["default"].createElement("tfoot", _extends({
|
|
98
104
|
ref: ref
|
|
99
105
|
}, props));
|
|
100
106
|
});
|
|
101
107
|
|
|
102
|
-
var
|
|
108
|
+
var _excluded$5 = ["className", "hover", "active", "error"];
|
|
109
|
+
var TableRow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
103
110
|
var className = _ref.className,
|
|
104
111
|
_ref$hover = _ref.hover,
|
|
105
112
|
hover = _ref$hover === void 0 ? false : _ref$hover,
|
|
@@ -107,10 +114,10 @@ var TableRow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
107
114
|
active = _ref$active === void 0 ? false : _ref$active,
|
|
108
115
|
_ref$error = _ref.error,
|
|
109
116
|
error = _ref$error === void 0 ? false : _ref$error,
|
|
110
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
117
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
111
118
|
|
|
112
|
-
return React__default.createElement("tr",
|
|
113
|
-
className:
|
|
119
|
+
return React__default["default"].createElement("tr", _extends({
|
|
120
|
+
className: classNames__default["default"]('eds-table__row', className, {
|
|
114
121
|
'eds-table__row--hover': hover,
|
|
115
122
|
'eds-table__row--active': active,
|
|
116
123
|
'eds-table__row--error': error
|
|
@@ -119,7 +126,8 @@ var TableRow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
119
126
|
}, rest));
|
|
120
127
|
});
|
|
121
128
|
|
|
122
|
-
var
|
|
129
|
+
var _excluded$4 = ["className", "padding", "status"];
|
|
130
|
+
var DataCell = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
123
131
|
var _classNames;
|
|
124
132
|
|
|
125
133
|
var className = _ref.className,
|
|
@@ -127,15 +135,17 @@ var DataCell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
127
135
|
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
128
136
|
_ref$status = _ref.status,
|
|
129
137
|
status = _ref$status === void 0 ? undefined : _ref$status,
|
|
130
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
138
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
131
139
|
|
|
132
|
-
return React__default.createElement("td",
|
|
140
|
+
return React__default["default"].createElement("td", _extends({
|
|
133
141
|
ref: ref,
|
|
134
|
-
className:
|
|
142
|
+
className: classNames__default["default"]('eds-table__data-cell', className, (_classNames = {}, _classNames["eds-table__data-cell--status-" + status] = status, _classNames['eds-table__data-cell--padding-checkbox'] = padding === 'checkbox', _classNames['eds-table__data-cell--padding-radio'] = padding === 'radio', _classNames['eds-table__data-cell--padding-overflow-menu'] = padding === 'overflow-menu', _classNames))
|
|
135
143
|
}, rest));
|
|
136
144
|
});
|
|
137
145
|
|
|
138
|
-
var
|
|
146
|
+
var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps"],
|
|
147
|
+
_excluded2$1 = ["className"];
|
|
148
|
+
var HeaderCell = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
139
149
|
var className = _ref.className,
|
|
140
150
|
children = _ref.children,
|
|
141
151
|
name = _ref.name,
|
|
@@ -145,18 +155,18 @@ var HeaderCell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
145
155
|
_ref$padding = _ref.padding,
|
|
146
156
|
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
147
157
|
sortableButtonProps = _ref.sortableButtonProps,
|
|
148
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
158
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
149
159
|
|
|
150
|
-
var _React$useState = React__default.useState(false),
|
|
160
|
+
var _React$useState = React__default["default"].useState(false),
|
|
151
161
|
isCurrentlySorted = _React$useState[0],
|
|
152
162
|
setIsCurrentlySorted = _React$useState[1];
|
|
153
163
|
|
|
154
|
-
React__default.useEffect(function () {
|
|
164
|
+
React__default["default"].useEffect(function () {
|
|
155
165
|
sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
|
|
156
166
|
}, [sortConfig, name]);
|
|
157
167
|
var ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : 'none';
|
|
158
|
-
return React__default.createElement("th",
|
|
159
|
-
className:
|
|
168
|
+
return React__default["default"].createElement("th", _extends({
|
|
169
|
+
className: classNames__default["default"]('eds-table__header-cell', className, {
|
|
160
170
|
'eds-table__header-cell--sortable': sortable,
|
|
161
171
|
'eds-table__header-cell--padding-radio': padding === 'radio',
|
|
162
172
|
'eds-table__header-cell--padding-checkbox': padding === 'checkbox',
|
|
@@ -164,7 +174,7 @@ var HeaderCell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
164
174
|
}),
|
|
165
175
|
"aria-sort": ariaSort,
|
|
166
176
|
ref: ref
|
|
167
|
-
}, rest), sortable && sortConfig && sortableButtonProps ? React__default.createElement(SortableHeaderCellButton, {
|
|
177
|
+
}, rest), sortable && sortConfig && sortableButtonProps ? React__default["default"].createElement(SortableHeaderCellButton, {
|
|
168
178
|
sortableButtonProps: sortableButtonProps,
|
|
169
179
|
sortConfig: sortConfig,
|
|
170
180
|
isCurrentlySorted: isCurrentlySorted
|
|
@@ -178,20 +188,22 @@ var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
|
178
188
|
children = _ref2.children;
|
|
179
189
|
|
|
180
190
|
var className = sortableButtonProps.className,
|
|
181
|
-
rest = _objectWithoutPropertiesLoose(sortableButtonProps,
|
|
191
|
+
rest = _objectWithoutPropertiesLoose(sortableButtonProps, _excluded2$1);
|
|
182
192
|
|
|
183
|
-
return React__default.createElement("button",
|
|
184
|
-
className:
|
|
193
|
+
return React__default["default"].createElement("button", _extends({
|
|
194
|
+
className: classNames__default["default"]('eds-table__header-cell-button', className),
|
|
185
195
|
type: "button"
|
|
186
|
-
}, rest), children, isCurrentlySorted && sortConfig.order === 'ascending' && React__default.createElement(icons.UpArrowIcon, {
|
|
196
|
+
}, rest), children, isCurrentlySorted && sortConfig.order === 'ascending' && React__default["default"].createElement(icons.UpArrowIcon, {
|
|
187
197
|
size: "16px",
|
|
188
198
|
className: "eds-table__header-cell-button-icon"
|
|
189
|
-
}), isCurrentlySorted && sortConfig.order === 'descending' && React__default.createElement(icons.DownArrowIcon, {
|
|
199
|
+
}), isCurrentlySorted && sortConfig.order === 'descending' && React__default["default"].createElement(icons.DownArrowIcon, {
|
|
190
200
|
size: "16px",
|
|
191
201
|
className: "eds-table__header-cell-button-icon"
|
|
192
202
|
}));
|
|
193
203
|
};
|
|
194
204
|
|
|
205
|
+
var _excluded$2 = ["name", "sortable", "buttonProps"],
|
|
206
|
+
_excluded2 = ["sortable"];
|
|
195
207
|
function useSortableData(rawData, externalSortConfig) {
|
|
196
208
|
if (externalSortConfig === void 0) {
|
|
197
209
|
externalSortConfig = {
|
|
@@ -200,26 +212,26 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
200
212
|
};
|
|
201
213
|
}
|
|
202
214
|
|
|
203
|
-
var _React$useState = React__default.useState(externalSortConfig),
|
|
215
|
+
var _React$useState = React__default["default"].useState(externalSortConfig),
|
|
204
216
|
sortConfig = _React$useState[0],
|
|
205
217
|
setSortConfig = _React$useState[1];
|
|
206
218
|
|
|
207
219
|
var tableCopy = rawData.slice();
|
|
208
|
-
React__default.useEffect(function () {
|
|
220
|
+
React__default["default"].useEffect(function () {
|
|
209
221
|
setSortConfig({
|
|
210
222
|
key: externalSortConfig.key,
|
|
211
223
|
order: externalSortConfig.order
|
|
212
224
|
});
|
|
213
225
|
}, [externalSortConfig.key, externalSortConfig.order]);
|
|
214
|
-
var sortedData = React__default.useMemo(function () {
|
|
226
|
+
var sortedData = React__default["default"].useMemo(function () {
|
|
215
227
|
if (sortConfig.order === 'none') {
|
|
216
228
|
return tableCopy;
|
|
217
229
|
}
|
|
218
230
|
|
|
219
231
|
return [].concat(rawData).sort(function (a, b) {
|
|
220
|
-
if (
|
|
232
|
+
if (get__default["default"](a, sortConfig.key) < get__default["default"](b, sortConfig.key)) {
|
|
221
233
|
return sortConfig.order === 'ascending' ? -1 : 1;
|
|
222
|
-
} else if (
|
|
234
|
+
} else if (get__default["default"](a, sortConfig.key) > get__default["default"](b, sortConfig.key)) {
|
|
223
235
|
return sortConfig.order === 'ascending' ? 1 : -1;
|
|
224
236
|
} else {
|
|
225
237
|
return 0;
|
|
@@ -247,7 +259,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
247
259
|
_ref$sortable = _ref.sortable,
|
|
248
260
|
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
249
261
|
buttonProps = _ref.buttonProps,
|
|
250
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
262
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
251
263
|
|
|
252
264
|
return _extends({
|
|
253
265
|
name: name,
|
|
@@ -264,7 +276,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
264
276
|
function getSortableTableProps(_ref2) {
|
|
265
277
|
var _ref2$sortable = _ref2.sortable,
|
|
266
278
|
sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
|
|
267
|
-
props = _objectWithoutPropertiesLoose(_ref2,
|
|
279
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
268
280
|
|
|
269
281
|
return _extends({
|
|
270
282
|
sortable: sortable,
|
|
@@ -279,6 +291,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
279
291
|
};
|
|
280
292
|
}
|
|
281
293
|
|
|
294
|
+
var _excluded$1 = ["children", "className", "feedback", "variant", "outlined"];
|
|
282
295
|
var EditableCell = function EditableCell(_ref) {
|
|
283
296
|
var children = _ref.children,
|
|
284
297
|
className = _ref.className,
|
|
@@ -286,15 +299,15 @@ var EditableCell = function EditableCell(_ref) {
|
|
|
286
299
|
variant = _ref.variant,
|
|
287
300
|
_ref$outlined = _ref.outlined,
|
|
288
301
|
outlined = _ref$outlined === void 0 ? false : _ref$outlined,
|
|
289
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
302
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
290
303
|
|
|
291
|
-
return React__default.createElement(form.VariantProvider, {
|
|
304
|
+
return React__default["default"].createElement(form.VariantProvider, {
|
|
292
305
|
variant: variant
|
|
293
|
-
}, React__default.createElement(DataCell,
|
|
294
|
-
className:
|
|
306
|
+
}, React__default["default"].createElement(DataCell, _extends({
|
|
307
|
+
className: classNames__default["default"]('eds-editable-cell', {
|
|
295
308
|
'eds-editable-cell--outlined': outlined
|
|
296
309
|
}, className)
|
|
297
|
-
}, rest), React__default.createElement(tooltip.Tooltip, {
|
|
310
|
+
}, rest), React__default["default"].createElement(tooltip.Tooltip, {
|
|
298
311
|
disableHoverListener: !feedback,
|
|
299
312
|
disableFocusListener: !feedback,
|
|
300
313
|
placement: "bottom",
|
|
@@ -308,24 +321,25 @@ var ExpandableRow = function ExpandableRow(_ref) {
|
|
|
308
321
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
309
322
|
children = _ref.children,
|
|
310
323
|
colSpan = _ref.colSpan;
|
|
311
|
-
return React__default.createElement("tr", null, React__default.createElement("td", {
|
|
324
|
+
return React__default["default"].createElement("tr", null, React__default["default"].createElement("td", {
|
|
312
325
|
colSpan: colSpan
|
|
313
|
-
}, React__default.createElement(expand.BaseExpand, {
|
|
326
|
+
}, React__default["default"].createElement(expand.BaseExpand, {
|
|
314
327
|
open: open
|
|
315
328
|
}, children)));
|
|
316
329
|
};
|
|
317
330
|
|
|
331
|
+
var _excluded = ["open", "onClick"];
|
|
318
332
|
var ExpandRowButton = function ExpandRowButton(_ref) {
|
|
319
333
|
var open = _ref.open,
|
|
320
334
|
onClick = _ref.onClick,
|
|
321
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
335
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
322
336
|
|
|
323
|
-
return React__default.createElement("button",
|
|
324
|
-
className:
|
|
337
|
+
return React__default["default"].createElement("button", _extends({
|
|
338
|
+
className: classNames__default["default"]('eds-expand-row-button', {
|
|
325
339
|
'eds-expand-row-button--open': open
|
|
326
340
|
}),
|
|
327
341
|
onClick: onClick
|
|
328
|
-
}, rest), React__default.createElement(icons.RightArrowIcon, {
|
|
342
|
+
}, rest), React__default["default"].createElement(icons.RightArrowIcon, {
|
|
329
343
|
className: "eds-expand-row-button__icon"
|
|
330
344
|
}));
|
|
331
345
|
};
|
|
@@ -376,12 +390,12 @@ var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRow
|
|
|
376
390
|
maxRow = _useState2[0],
|
|
377
391
|
setMaxRow = _useState2[1];
|
|
378
392
|
|
|
379
|
-
var tableBodyRef = React__default.useRef(null);
|
|
380
|
-
var tableHasFocus = tableBodyRef
|
|
381
|
-
React__default.useEffect(function () {
|
|
393
|
+
var tableBodyRef = React__default["default"].useRef(null);
|
|
394
|
+
var tableHasFocus = tableBodyRef == null ? void 0 : (_tableBodyRef$current = tableBodyRef.current) == null ? void 0 : _tableBodyRef$current.contains(document.activeElement);
|
|
395
|
+
React__default["default"].useEffect(function () {
|
|
382
396
|
var _tableBodyRef$current2;
|
|
383
397
|
|
|
384
|
-
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement)
|
|
398
|
+
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) == null ? void 0 : _tableBodyRef$current2.focus());
|
|
385
399
|
}, [currentRow]);
|
|
386
400
|
|
|
387
401
|
function getTableBodyNavigationProps() {
|
|
@@ -395,10 +409,10 @@ var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRow
|
|
|
395
409
|
}
|
|
396
410
|
|
|
397
411
|
function getTableRowNavigationProps(row) {
|
|
398
|
-
React__default.useEffect(function () {
|
|
412
|
+
React__default["default"].useEffect(function () {
|
|
399
413
|
row >= maxRow && setMaxRow(row + 1);
|
|
400
414
|
}, []);
|
|
401
|
-
var tableRowRef = React__default.useRef(null);
|
|
415
|
+
var tableRowRef = React__default["default"].useRef(null);
|
|
402
416
|
var tabIndex = -1;
|
|
403
417
|
row === currentRow ? tabIndex = 0 : undefined;
|
|
404
418
|
|