@elastic/eui 92.0.0 → 92.1.1
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/eui_theme_dark.css +3 -18
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +3 -18
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/es/components/datagrid/body/cell/focus_utils.js +166 -0
- package/es/components/datagrid/body/cell/index.js +11 -0
- package/es/components/datagrid/body/data_grid_body.js +0 -2
- package/es/components/datagrid/body/data_grid_body_custom.js +1 -7
- package/es/components/datagrid/body/data_grid_body_virtualized.js +1 -7
- package/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/es/components/datagrid/body/header/data_grid_header_cell.js +27 -12
- package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +45 -116
- package/es/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/es/components/datagrid/body/header/use_data_grid_header.js +3 -14
- package/es/components/datagrid/data_grid.js +2 -12
- package/es/components/datagrid/utils/focus.js +25 -54
- package/es/components/datagrid/utils/scrolling.js +1 -1
- package/es/components/flyout/flyout_resizable.js +10 -10
- package/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/es/components/resizable_container/helpers.js +5 -6
- package/es/components/resizable_container/resizable_button.js +13 -4
- package/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/es/components/resizable_container/resizable_container.js +28 -22
- package/es/components/steps/step_number.styles.js +6 -7
- package/es/components/tree_view/tree_view.js +9 -2
- package/eui.d.ts +130 -90
- package/i18ntokens.json +108 -72
- package/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/lib/components/datagrid/body/cell/focus_utils.js +174 -0
- package/lib/components/datagrid/body/cell/index.js +32 -0
- package/lib/components/datagrid/body/data_grid_body.js +0 -2
- package/lib/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/lib/components/datagrid/body/header/data_grid_header_cell.js +35 -20
- package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +47 -119
- package/lib/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/lib/components/datagrid/body/header/use_data_grid_header.js +10 -24
- package/lib/components/datagrid/data_grid.js +4 -14
- package/lib/components/datagrid/utils/focus.js +26 -56
- package/lib/components/datagrid/utils/scrolling.js +2 -2
- package/lib/components/flyout/flyout_resizable.js +10 -10
- package/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/lib/components/resizable_container/helpers.js +7 -7
- package/lib/components/resizable_container/resizable_button.js +13 -4
- package/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/lib/components/resizable_container/resizable_container.js +28 -22
- package/lib/components/steps/step_number.styles.js +6 -7
- package/lib/components/tree_view/tree_view.js +9 -2
- package/optimize/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/es/components/datagrid/body/cell/focus_utils.js +153 -0
- package/optimize/es/components/datagrid/body/cell/index.js +11 -0
- package/optimize/es/components/datagrid/body/data_grid_body_custom.js +1 -5
- package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +1 -5
- package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +3 -13
- package/optimize/es/components/datagrid/data_grid.js +2 -12
- package/optimize/es/components/datagrid/utils/focus.js +25 -54
- package/optimize/es/components/datagrid/utils/scrolling.js +1 -1
- package/optimize/es/components/flyout/flyout_resizable.js +10 -10
- package/optimize/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/es/components/resizable_container/helpers.js +5 -6
- package/optimize/es/components/resizable_container/resizable_button.js +5 -2
- package/optimize/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/es/components/resizable_container/resizable_container.js +28 -22
- package/optimize/es/components/steps/step_number.styles.js +6 -7
- package/optimize/es/components/tree_view/tree_view.js +9 -2
- package/optimize/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/lib/components/datagrid/body/cell/focus_utils.js +163 -0
- package/optimize/lib/components/datagrid/body/cell/index.js +32 -0
- package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -6
- package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -6
- package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/optimize/lib/components/datagrid/data_grid.js +4 -14
- package/optimize/lib/components/datagrid/utils/focus.js +26 -56
- package/optimize/lib/components/datagrid/utils/scrolling.js +2 -2
- package/optimize/lib/components/flyout/flyout_resizable.js +10 -10
- package/optimize/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/lib/components/resizable_container/helpers.js +7 -7
- package/optimize/lib/components/resizable_container/resizable_button.js +5 -2
- package/optimize/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/lib/components/resizable_container/resizable_container.js +28 -22
- package/optimize/lib/components/steps/step_number.styles.js +6 -7
- package/optimize/lib/components/tree_view/tree_view.js +9 -2
- package/package.json +1 -1
- package/src/components/datagrid/body/header/_data_grid_header_row.scss +8 -7
- package/test-env/components/aspect_ratio/aspect_ratio.js +1 -1
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/test-env/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/test-env/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/test-env/components/datagrid/body/cell/focus_utils.js +172 -0
- package/test-env/components/datagrid/body/cell/index.js +32 -0
- package/test-env/components/datagrid/body/data_grid_body.js +0 -2
- package/test-env/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/test-env/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/test-env/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +44 -116
- package/test-env/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/test-env/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/test-env/components/datagrid/data_grid.js +4 -14
- package/test-env/components/datagrid/utils/focus.js +26 -56
- package/test-env/components/datagrid/utils/scrolling.js +2 -2
- package/test-env/components/flyout/flyout_resizable.js +10 -10
- package/test-env/components/flyout/flyout_resizable.styles.js +12 -6
- package/test-env/components/resizable_container/helpers.js +7 -7
- package/test-env/components/resizable_container/resizable_button.js +13 -4
- package/test-env/components/resizable_container/resizable_button.styles.js +18 -8
- package/test-env/components/resizable_container/resizable_container.js +28 -22
- package/test-env/components/steps/step_number.styles.js +6 -7
- package/test-env/components/tree_view/tree_view.js +9 -2
- package/es/components/datagrid/body/header/header_is_interactive.js +0 -58
- package/lib/components/datagrid/body/header/header_is_interactive.js +0 -63
- package/optimize/es/components/datagrid/body/header/header_is_interactive.js +0 -53
- package/optimize/lib/components/datagrid/body/header/header_is_interactive.js +0 -61
- package/test-env/components/datagrid/body/header/header_is_interactive.js +0 -61
|
@@ -18,17 +18,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
18
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
20
20
|
var _reactDom = require("react-dom");
|
|
21
|
-
var
|
|
22
|
-
var _services = require("
|
|
23
|
-
var _accessibility = require("
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var _focus = require("../utils/focus");
|
|
21
|
+
var _utils = require("../../../../utils");
|
|
22
|
+
var _services = require("../../../../services");
|
|
23
|
+
var _accessibility = require("../../../accessibility");
|
|
24
|
+
var _i18n = require("../../../i18n");
|
|
25
|
+
var _text_truncate = require("../../../text_truncate");
|
|
26
|
+
var _resize_observer = require("../../../observer/resize_observer/resize_observer");
|
|
27
|
+
var _focus = require("../../utils/focus");
|
|
29
28
|
var _data_grid_cell_actions = require("./data_grid_cell_actions");
|
|
30
29
|
var _data_grid_cell_popover = require("./data_grid_cell_popover");
|
|
31
|
-
var
|
|
30
|
+
var _focus_utils = require("./focus_utils");
|
|
32
31
|
var _react2 = require("@emotion/react");
|
|
33
32
|
var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
|
|
34
33
|
_excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
|
|
@@ -94,7 +93,10 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
94
93
|
col: colIndex + 1,
|
|
95
94
|
row: ariaRowIndex
|
|
96
95
|
}
|
|
97
|
-
})))
|
|
96
|
+
}), cellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
|
|
97
|
+
token: "euiDataGridCell.expansionEnterPrompt",
|
|
98
|
+
default: "Press the Enter key to expand this cell."
|
|
99
|
+
}))));
|
|
98
100
|
return (0, _react2.jsx)(_react.default.Fragment, null, cellContent, screenReaderText, cellActions);
|
|
99
101
|
});
|
|
100
102
|
var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
@@ -115,43 +117,21 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
115
117
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
|
116
118
|
cellProps: {},
|
|
117
119
|
isFocused: false,
|
|
118
|
-
|
|
119
|
-
enableInteractions: false,
|
|
120
|
-
disableCellTabIndex: false,
|
|
120
|
+
isHovered: false,
|
|
121
121
|
cellTextAlign: 'Left'
|
|
122
122
|
});
|
|
123
123
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribeCell", void 0);
|
|
124
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusTimeout", void 0);
|
|
125
124
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "style", null);
|
|
126
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "
|
|
127
|
-
|
|
128
|
-
if (tabbingRef) {
|
|
129
|
-
return tabbingRef.querySelectorAll('[data-datagrid-interactable=true]');
|
|
130
|
-
}
|
|
131
|
-
return [];
|
|
125
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCellFocusContext", function () {
|
|
126
|
+
_this.context.setFocusedCell([_this.props.colIndex, _this.props.visibleRowIndex]);
|
|
132
127
|
});
|
|
133
128
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "takeFocus", function (preventScroll) {
|
|
134
129
|
var cell = _this.cellRef.current;
|
|
135
|
-
if
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
var doFocusUpdate = element !== cell;
|
|
142
|
-
if (doFocusUpdate) {
|
|
143
|
-
var interactables = _this.getInteractables();
|
|
144
|
-
if (_this.isExpandable() === false && interactables.length === 1) {
|
|
145
|
-
// Only one element can be interacted with
|
|
146
|
-
interactables[0].focus({
|
|
147
|
-
preventScroll: preventScroll
|
|
148
|
-
});
|
|
149
|
-
} else {
|
|
150
|
-
cell.focus({
|
|
151
|
-
preventScroll: preventScroll
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
}
|
|
130
|
+
// Only focus the cell if not already focused on something in the cell
|
|
131
|
+
if (cell && !cell.contains(document.activeElement)) {
|
|
132
|
+
cell.focus({
|
|
133
|
+
preventScroll: preventScroll
|
|
134
|
+
});
|
|
155
135
|
}
|
|
156
136
|
});
|
|
157
137
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "recalculateAutoHeight", function () {
|
|
@@ -220,61 +200,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
220
200
|
} else if (_this.contentObserver) {
|
|
221
201
|
_this.contentObserver.disconnect();
|
|
222
202
|
}
|
|
223
|
-
_this.preventTabbing();
|
|
224
203
|
_this.setCellTextAlign();
|
|
225
204
|
});
|
|
226
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (e) {
|
|
227
|
-
// only perform this logic when the event's originating element (e.target) is
|
|
228
|
-
// the wrapping element with the onFocus logic
|
|
229
|
-
// reasons:
|
|
230
|
-
// * the outcome is only meaningful when the focus shifts to the wrapping element
|
|
231
|
-
// * if the cell children include portalled content React will bubble the focus
|
|
232
|
-
// event up, which can trigger the focus() call below, causing focus lock fighting
|
|
233
|
-
if (_this.cellRef.current === e.target) {
|
|
234
|
-
var _this$props5 = _this.props,
|
|
235
|
-
colIndex = _this$props5.colIndex,
|
|
236
|
-
visibleRowIndex = _this$props5.visibleRowIndex;
|
|
237
|
-
// focus in next tick to give potential focus capturing mechanisms time to release their traps
|
|
238
|
-
// also clear any previous focus timeout that may still be queued
|
|
239
|
-
if (EuiDataGridCell.activeFocusTimeoutId) {
|
|
240
|
-
window.clearTimeout(EuiDataGridCell.activeFocusTimeoutId);
|
|
241
|
-
}
|
|
242
|
-
EuiDataGridCell.activeFocusTimeoutId = _this.focusTimeout = window.setTimeout(function () {
|
|
243
|
-
_this.context.setFocusedCell([colIndex, visibleRowIndex]);
|
|
244
|
-
var interactables = _this.getInteractables();
|
|
245
|
-
if (interactables.length === 1 && _this.isExpandable() === false) {
|
|
246
|
-
interactables[0].focus();
|
|
247
|
-
_this.setState({
|
|
248
|
-
disableCellTabIndex: true
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
}, 0);
|
|
252
|
-
}
|
|
253
|
-
});
|
|
254
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function () {
|
|
255
|
-
_this.setState({
|
|
256
|
-
disableCellTabIndex: false
|
|
257
|
-
});
|
|
258
|
-
});
|
|
259
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventTabbing", function () {
|
|
260
|
-
if (_this.cellContentsRef) {
|
|
261
|
-
var tabbables = (0, _tabbable.tabbable)(_this.cellContentsRef);
|
|
262
|
-
for (var i = 0; i < tabbables.length; i++) {
|
|
263
|
-
var element = tabbables[i];
|
|
264
|
-
element.setAttribute('tabIndex', '-1');
|
|
265
|
-
element.setAttribute('data-datagrid-interactable', 'true');
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
});
|
|
269
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableTabbing", function () {
|
|
270
|
-
if (_this.cellContentsRef) {
|
|
271
|
-
var interactables = _this.getInteractables();
|
|
272
|
-
for (var i = 0; i < interactables.length; i++) {
|
|
273
|
-
var element = interactables[i];
|
|
274
|
-
element.removeAttribute('tabIndex');
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
205
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCellTextAlign", function () {
|
|
279
206
|
if (_this.cellContentsRef) {
|
|
280
207
|
var columnType = _this.props.columnType;
|
|
@@ -327,14 +254,14 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
327
254
|
setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
|
|
328
255
|
|
|
329
256
|
// Set popover contents with cell content
|
|
330
|
-
var _this$
|
|
331
|
-
renderCellPopover = _this$
|
|
332
|
-
renderCellValue = _this$
|
|
333
|
-
rowIndex = _this$
|
|
334
|
-
colIndex = _this$
|
|
335
|
-
column = _this$
|
|
336
|
-
columnId = _this$
|
|
337
|
-
columnType = _this$
|
|
257
|
+
var _this$props5 = _this.props,
|
|
258
|
+
renderCellPopover = _this$props5.renderCellPopover,
|
|
259
|
+
renderCellValue = _this$props5.renderCellValue,
|
|
260
|
+
rowIndex = _this$props5.rowIndex,
|
|
261
|
+
colIndex = _this$props5.colIndex,
|
|
262
|
+
column = _this$props5.column,
|
|
263
|
+
columnId = _this$props5.columnId,
|
|
264
|
+
columnType = _this$props5.columnType;
|
|
338
265
|
var PopoverElement = renderCellPopover || _data_grid_cell_popover.DefaultCellPopover;
|
|
339
266
|
var CellElement = renderCellValue;
|
|
340
267
|
var sharedProps = {
|
|
@@ -359,14 +286,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
359
286
|
setPopoverContent(popoverContent);
|
|
360
287
|
}
|
|
361
288
|
});
|
|
289
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellKeyDown", function (event) {
|
|
290
|
+
if (_this.isExpandable()) {
|
|
291
|
+
if (_this.isPopoverOpen()) return;
|
|
292
|
+
var _this$props6 = _this.props,
|
|
293
|
+
openCellPopover = _this$props6.popoverContext.openCellPopover,
|
|
294
|
+
visibleRowIndex = _this$props6.visibleRowIndex,
|
|
295
|
+
colIndex = _this$props6.colIndex;
|
|
296
|
+
switch (event.key) {
|
|
297
|
+
case _services.keys.ENTER:
|
|
298
|
+
case _services.keys.F2:
|
|
299
|
+
event.preventDefault();
|
|
300
|
+
openCellPopover({
|
|
301
|
+
rowIndex: visibleRowIndex,
|
|
302
|
+
colIndex: colIndex
|
|
303
|
+
});
|
|
304
|
+
break;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellExpansionClick", function () {
|
|
309
|
+
var _this$props7 = _this.props,
|
|
310
|
+
_this$props7$popoverC = _this$props7.popoverContext,
|
|
311
|
+
openCellPopover = _this$props7$popoverC.openCellPopover,
|
|
312
|
+
closeCellPopover = _this$props7$popoverC.closeCellPopover,
|
|
313
|
+
visibleRowIndex = _this$props7.visibleRowIndex,
|
|
314
|
+
colIndex = _this$props7.colIndex;
|
|
315
|
+
if (_this.isPopoverOpen()) {
|
|
316
|
+
closeCellPopover();
|
|
317
|
+
} else {
|
|
318
|
+
openCellPopover({
|
|
319
|
+
rowIndex: visibleRowIndex,
|
|
320
|
+
colIndex: colIndex
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
|
|
325
|
+
return _this.setState({
|
|
326
|
+
isHovered: true
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
|
|
330
|
+
return _this.setState({
|
|
331
|
+
isHovered: false
|
|
332
|
+
});
|
|
333
|
+
});
|
|
362
334
|
return _this;
|
|
363
335
|
}
|
|
364
336
|
(0, _createClass2.default)(EuiDataGridCell, [{
|
|
365
337
|
key: "componentDidMount",
|
|
366
338
|
value: function componentDidMount() {
|
|
367
|
-
var _this$
|
|
368
|
-
colIndex = _this$
|
|
369
|
-
visibleRowIndex = _this$
|
|
339
|
+
var _this$props8 = this.props,
|
|
340
|
+
colIndex = _this$props8.colIndex,
|
|
341
|
+
visibleRowIndex = _this$props8.visibleRowIndex;
|
|
370
342
|
this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
|
|
371
343
|
|
|
372
344
|
// Account for virtualization - when a cell unmounts when scrolled out of view
|
|
@@ -385,7 +357,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
385
357
|
}, {
|
|
386
358
|
key: "componentWillUnmount",
|
|
387
359
|
value: function componentWillUnmount() {
|
|
388
|
-
window.clearTimeout(this.focusTimeout);
|
|
389
360
|
if (this.unsubscribeCell) {
|
|
390
361
|
this.unsubscribeCell();
|
|
391
362
|
}
|
|
@@ -452,39 +423,33 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
452
423
|
if (nextProps.style.width !== this.props.style.width) return true;
|
|
453
424
|
}
|
|
454
425
|
if (nextState.cellProps !== this.state.cellProps) return true;
|
|
455
|
-
if (nextState.isEntered !== this.state.isEntered) return true;
|
|
456
426
|
if (nextState.isFocused !== this.state.isFocused) return true;
|
|
457
|
-
if (nextState.
|
|
458
|
-
if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex) return true;
|
|
427
|
+
if (nextState.isHovered !== this.state.isHovered) return true;
|
|
459
428
|
return false;
|
|
460
429
|
}
|
|
461
430
|
}, {
|
|
462
431
|
key: "render",
|
|
463
432
|
value: function render() {
|
|
464
|
-
var _classNames,
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
rowHeightsOptions = _this$props8.rowHeightsOptions,
|
|
479
|
-
rowManager = _this$props8.rowManager,
|
|
480
|
-
pagination = _this$props8.pagination,
|
|
481
|
-
rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
|
|
433
|
+
var _classNames, _rowHeightsOptions$li;
|
|
434
|
+
var _this$props9 = this.props,
|
|
435
|
+
width = _this$props9.width,
|
|
436
|
+
popoverContext = _this$props9.popoverContext,
|
|
437
|
+
interactiveCellId = _this$props9.interactiveCellId,
|
|
438
|
+
columnType = _this$props9.columnType,
|
|
439
|
+
className = _this$props9.className,
|
|
440
|
+
column = _this$props9.column,
|
|
441
|
+
style = _this$props9.style,
|
|
442
|
+
rowHeightUtils = _this$props9.rowHeightUtils,
|
|
443
|
+
rowHeightsOptions = _this$props9.rowHeightsOptions,
|
|
444
|
+
rowManager = _this$props9.rowManager,
|
|
445
|
+
pagination = _this$props9.pagination,
|
|
446
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props9, _excluded2);
|
|
482
447
|
var rowIndex = rest.rowIndex,
|
|
483
448
|
visibleRowIndex = rest.visibleRowIndex,
|
|
484
449
|
colIndex = rest.colIndex;
|
|
485
450
|
var isExpandable = this.isExpandable();
|
|
486
451
|
var popoverIsOpen = this.isPopoverOpen();
|
|
487
|
-
var showCellActions =
|
|
452
|
+
var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
|
|
488
453
|
var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
|
|
489
454
|
var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
|
|
490
455
|
var _this$state$cellProps2 = this.state.cellProps,
|
|
@@ -505,68 +470,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
505
470
|
// column width, can be undefined
|
|
506
471
|
lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
|
|
507
472
|
}, cellPropsStyle);
|
|
508
|
-
var handleCellKeyDown = function handleCellKeyDown(event) {
|
|
509
|
-
if (isExpandable) {
|
|
510
|
-
if (popoverIsOpen) {
|
|
511
|
-
return;
|
|
512
|
-
}
|
|
513
|
-
switch (event.key) {
|
|
514
|
-
case _services.keys.ENTER:
|
|
515
|
-
case _services.keys.F2:
|
|
516
|
-
event.preventDefault();
|
|
517
|
-
openCellPopover({
|
|
518
|
-
rowIndex: visibleRowIndex,
|
|
519
|
-
colIndex: colIndex
|
|
520
|
-
});
|
|
521
|
-
break;
|
|
522
|
-
}
|
|
523
|
-
} else {
|
|
524
|
-
if (event.key === _services.keys.ENTER || event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
|
|
525
|
-
var interactables = _this2.getInteractables();
|
|
526
|
-
if (interactables.length >= 2) {
|
|
527
|
-
switch (event.key) {
|
|
528
|
-
case _services.keys.ENTER:
|
|
529
|
-
// `Enter` only activates the trap
|
|
530
|
-
if (_this2.state.isEntered === false) {
|
|
531
|
-
_this2.enableTabbing();
|
|
532
|
-
_this2.setState({
|
|
533
|
-
isEntered: true
|
|
534
|
-
});
|
|
535
|
-
|
|
536
|
-
// result of this keypress is focus shifts to the first interactive element
|
|
537
|
-
// and then the browser fires the onClick event because that's how [Enter] works
|
|
538
|
-
// so we need to prevent that default action otherwise entering the trap triggers the first element
|
|
539
|
-
event.preventDefault();
|
|
540
|
-
}
|
|
541
|
-
break;
|
|
542
|
-
case _services.keys.F2:
|
|
543
|
-
// toggle interactives' focus trap
|
|
544
|
-
_this2.setState(function (_ref2) {
|
|
545
|
-
var isEntered = _ref2.isEntered;
|
|
546
|
-
if (isEntered) {
|
|
547
|
-
_this2.preventTabbing();
|
|
548
|
-
} else {
|
|
549
|
-
_this2.enableTabbing();
|
|
550
|
-
}
|
|
551
|
-
return {
|
|
552
|
-
isEntered: !isEntered
|
|
553
|
-
};
|
|
554
|
-
});
|
|
555
|
-
break;
|
|
556
|
-
case _services.keys.ESCAPE:
|
|
557
|
-
// `Escape` only de-activates the trap
|
|
558
|
-
_this2.preventTabbing();
|
|
559
|
-
if (_this2.state.isEntered === true) {
|
|
560
|
-
_this2.setState({
|
|
561
|
-
isEntered: false
|
|
562
|
-
});
|
|
563
|
-
}
|
|
564
|
-
break;
|
|
565
|
-
}
|
|
566
|
-
}
|
|
567
|
-
}
|
|
568
|
-
}
|
|
569
|
-
};
|
|
570
473
|
var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
|
|
571
474
|
var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
572
475
|
setCellProps: this.setCellProps,
|
|
@@ -582,40 +485,10 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
582
485
|
isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
|
|
583
486
|
ariaRowIndex: ariaRowIndex
|
|
584
487
|
});
|
|
585
|
-
var cellActions = showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
586
|
-
rowIndex: rowIndex,
|
|
587
|
-
colIndex: colIndex,
|
|
588
|
-
column: column,
|
|
589
|
-
onExpandClick: function onExpandClick() {
|
|
590
|
-
if (popoverIsOpen) {
|
|
591
|
-
closeCellPopover();
|
|
592
|
-
} else {
|
|
593
|
-
openCellPopover({
|
|
594
|
-
rowIndex: visibleRowIndex,
|
|
595
|
-
colIndex: colIndex
|
|
596
|
-
});
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
}), (0, _react2.jsx)("div", {
|
|
600
|
-
ref: this.popoverAnchorRef,
|
|
601
|
-
"data-test-subject": "cellPopoverAnchor"
|
|
602
|
-
}));
|
|
603
|
-
var cellContent = isExpandable ? (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
604
|
-
cellActions: cellActions
|
|
605
|
-
})) : (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
|
|
606
|
-
disabled: !this.state.isEntered,
|
|
607
|
-
autoFocus: true,
|
|
608
|
-
onDeactivation: function onDeactivation() {
|
|
609
|
-
_this2.setState({
|
|
610
|
-
isEntered: false
|
|
611
|
-
}, _this2.preventTabbing);
|
|
612
|
-
},
|
|
613
|
-
clickOutsideDisables: true
|
|
614
|
-
}, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps));
|
|
615
488
|
var cell = (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
616
489
|
role: "gridcell",
|
|
617
490
|
"aria-rowindex": ariaRowIndex,
|
|
618
|
-
tabIndex: this.state.isFocused
|
|
491
|
+
tabIndex: this.state.isFocused ? 0 : -1,
|
|
619
492
|
ref: this.cellRef
|
|
620
493
|
}, cellProps, {
|
|
621
494
|
"data-test-subj": "dataGridRowCell"
|
|
@@ -629,20 +502,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
629
502
|
,
|
|
630
503
|
"data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
|
|
631
504
|
,
|
|
632
|
-
onKeyDown: handleCellKeyDown,
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
505
|
+
onKeyDown: this.handleCellKeyDown,
|
|
506
|
+
onMouseEnter: this.onMouseEnter,
|
|
507
|
+
onMouseLeave: this.onMouseLeave
|
|
508
|
+
}), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
|
|
509
|
+
cellEl: this.cellRef.current,
|
|
510
|
+
updateCellFocusContext: this.updateCellFocusContext,
|
|
511
|
+
renderFocusTrap: !isExpandable
|
|
512
|
+
}, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
|
|
513
|
+
cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
|
|
514
|
+
rowIndex: rowIndex,
|
|
515
|
+
colIndex: colIndex,
|
|
516
|
+
column: column,
|
|
517
|
+
onExpandClick: this.handleCellExpansionClick
|
|
518
|
+
}), (0, _react2.jsx)("div", {
|
|
519
|
+
ref: this.popoverAnchorRef,
|
|
520
|
+
"data-test-subject": "cellPopoverAnchor"
|
|
521
|
+
}))
|
|
522
|
+
}))));
|
|
646
523
|
return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
|
|
647
524
|
rowIndex: rowIndex,
|
|
648
525
|
visibleRowIndex: visibleRowIndex,
|
|
@@ -655,14 +532,4 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
|
|
|
655
532
|
return EuiDataGridCell;
|
|
656
533
|
}(_react.Component);
|
|
657
534
|
exports.EuiDataGridCell = EuiDataGridCell;
|
|
658
|
-
// focus tracking is split between the entire grid & individual cells,
|
|
659
|
-
// the parent grid owns which cell is focused,
|
|
660
|
-
// but individual cells need to react to changes and also report that
|
|
661
|
-
// they are focused in response to user actions like clicking on the cell
|
|
662
|
-
// to avoid focus trap fighting, cells wait a tick after being clicked to allow
|
|
663
|
-
// any existing traps to disconnect before the cell reports the new focus state to the parent grid
|
|
664
|
-
// but because of this small delay, multiple cells could queue up focus and
|
|
665
|
-
// create an infinite loop as the cells activate->deactivate->...
|
|
666
|
-
// so we track the last timeout id and clear that request if superseded
|
|
667
|
-
(0, _defineProperty2.default)(EuiDataGridCell, "activeFocusTimeoutId", undefined);
|
|
668
535
|
(0, _defineProperty2.default)(EuiDataGridCell, "contextType", _focus.DataGridFocusContext);
|
|
@@ -10,11 +10,11 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _i18n = require("
|
|
14
|
-
var _button_icon = require("
|
|
15
|
-
var _button_empty = require("
|
|
16
|
-
var _flex = require("
|
|
17
|
-
var _popover = require("
|
|
13
|
+
var _i18n = require("../../../i18n");
|
|
14
|
+
var _button_icon = require("../../../button/button_icon");
|
|
15
|
+
var _button_empty = require("../../../button/button_empty");
|
|
16
|
+
var _flex = require("../../../flex");
|
|
17
|
+
var _popover = require("../../../popover");
|
|
18
18
|
var _react2 = require("@emotion/react");
|
|
19
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -11,10 +11,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
-
var _services = require("
|
|
15
|
-
var _popover = require("
|
|
16
|
-
var _text = require("
|
|
17
|
-
var _code = require("
|
|
14
|
+
var _services = require("../../../../services");
|
|
15
|
+
var _popover = require("../../../popover");
|
|
16
|
+
var _text = require("../../../text");
|
|
17
|
+
var _code = require("../../../code");
|
|
18
18
|
var _react2 = require("@emotion/react");
|
|
19
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
-
var _sorting = require("
|
|
14
|
+
var _sorting = require("../../utils/sorting");
|
|
15
15
|
var _data_grid_cell_popover = require("./data_grid_cell_popover");
|
|
16
16
|
var _data_grid_cell = require("./data_grid_cell");
|
|
17
17
|
var _react2 = require("@emotion/react");
|