@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.
Files changed (156) hide show
  1. package/dist/eui_theme_dark.css +3 -18
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +3 -18
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/aspect_ratio/aspect_ratio.js +1 -1
  6. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  7. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  8. package/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  9. package/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  10. package/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  11. package/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  12. package/es/components/datagrid/body/cell/focus_utils.js +166 -0
  13. package/es/components/datagrid/body/cell/index.js +11 -0
  14. package/es/components/datagrid/body/data_grid_body.js +0 -2
  15. package/es/components/datagrid/body/data_grid_body_custom.js +1 -7
  16. package/es/components/datagrid/body/data_grid_body_virtualized.js +1 -7
  17. package/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
  18. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  19. package/es/components/datagrid/body/header/data_grid_header_cell.js +27 -12
  20. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +45 -116
  21. package/es/components/datagrid/body/header/data_grid_header_row.js +5 -10
  22. package/es/components/datagrid/body/header/use_data_grid_header.js +3 -14
  23. package/es/components/datagrid/data_grid.js +2 -12
  24. package/es/components/datagrid/utils/focus.js +25 -54
  25. package/es/components/datagrid/utils/scrolling.js +1 -1
  26. package/es/components/flyout/flyout_resizable.js +10 -10
  27. package/es/components/flyout/flyout_resizable.styles.js +12 -6
  28. package/es/components/resizable_container/helpers.js +5 -6
  29. package/es/components/resizable_container/resizable_button.js +13 -4
  30. package/es/components/resizable_container/resizable_button.styles.js +18 -8
  31. package/es/components/resizable_container/resizable_container.js +28 -22
  32. package/es/components/steps/step_number.styles.js +6 -7
  33. package/es/components/tree_view/tree_view.js +9 -2
  34. package/eui.d.ts +130 -90
  35. package/i18ntokens.json +108 -72
  36. package/lib/components/aspect_ratio/aspect_ratio.js +1 -1
  37. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  38. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  39. package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  40. package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  41. package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  42. package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  43. package/lib/components/datagrid/body/cell/focus_utils.js +174 -0
  44. package/lib/components/datagrid/body/cell/index.js +32 -0
  45. package/lib/components/datagrid/body/data_grid_body.js +0 -2
  46. package/lib/components/datagrid/body/data_grid_body_custom.js +2 -8
  47. package/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -8
  48. package/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  49. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  50. package/lib/components/datagrid/body/header/data_grid_header_cell.js +35 -20
  51. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +47 -119
  52. package/lib/components/datagrid/body/header/data_grid_header_row.js +5 -10
  53. package/lib/components/datagrid/body/header/use_data_grid_header.js +10 -24
  54. package/lib/components/datagrid/data_grid.js +4 -14
  55. package/lib/components/datagrid/utils/focus.js +26 -56
  56. package/lib/components/datagrid/utils/scrolling.js +2 -2
  57. package/lib/components/flyout/flyout_resizable.js +10 -10
  58. package/lib/components/flyout/flyout_resizable.styles.js +12 -6
  59. package/lib/components/resizable_container/helpers.js +7 -7
  60. package/lib/components/resizable_container/resizable_button.js +13 -4
  61. package/lib/components/resizable_container/resizable_button.styles.js +18 -8
  62. package/lib/components/resizable_container/resizable_container.js +28 -22
  63. package/lib/components/steps/step_number.styles.js +6 -7
  64. package/lib/components/tree_view/tree_view.js +9 -2
  65. package/optimize/es/components/aspect_ratio/aspect_ratio.js +1 -1
  66. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  67. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  68. package/optimize/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  69. package/optimize/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  70. package/optimize/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  71. package/optimize/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  72. package/optimize/es/components/datagrid/body/cell/focus_utils.js +153 -0
  73. package/optimize/es/components/datagrid/body/cell/index.js +11 -0
  74. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +1 -5
  75. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +1 -5
  76. package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
  77. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
  78. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  79. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
  80. package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +4 -8
  81. package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +3 -13
  82. package/optimize/es/components/datagrid/data_grid.js +2 -12
  83. package/optimize/es/components/datagrid/utils/focus.js +25 -54
  84. package/optimize/es/components/datagrid/utils/scrolling.js +1 -1
  85. package/optimize/es/components/flyout/flyout_resizable.js +10 -10
  86. package/optimize/es/components/flyout/flyout_resizable.styles.js +12 -6
  87. package/optimize/es/components/resizable_container/helpers.js +5 -6
  88. package/optimize/es/components/resizable_container/resizable_button.js +5 -2
  89. package/optimize/es/components/resizable_container/resizable_button.styles.js +18 -8
  90. package/optimize/es/components/resizable_container/resizable_container.js +28 -22
  91. package/optimize/es/components/steps/step_number.styles.js +6 -7
  92. package/optimize/es/components/tree_view/tree_view.js +9 -2
  93. package/optimize/lib/components/aspect_ratio/aspect_ratio.js +1 -1
  94. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  95. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  96. package/optimize/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  97. package/optimize/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  98. package/optimize/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  99. package/optimize/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  100. package/optimize/lib/components/datagrid/body/cell/focus_utils.js +163 -0
  101. package/optimize/lib/components/datagrid/body/cell/index.js +32 -0
  102. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -6
  103. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -6
  104. package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  105. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
  106. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  107. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
  108. package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +4 -8
  109. package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +4 -14
  110. package/optimize/lib/components/datagrid/data_grid.js +4 -14
  111. package/optimize/lib/components/datagrid/utils/focus.js +26 -56
  112. package/optimize/lib/components/datagrid/utils/scrolling.js +2 -2
  113. package/optimize/lib/components/flyout/flyout_resizable.js +10 -10
  114. package/optimize/lib/components/flyout/flyout_resizable.styles.js +12 -6
  115. package/optimize/lib/components/resizable_container/helpers.js +7 -7
  116. package/optimize/lib/components/resizable_container/resizable_button.js +5 -2
  117. package/optimize/lib/components/resizable_container/resizable_button.styles.js +18 -8
  118. package/optimize/lib/components/resizable_container/resizable_container.js +28 -22
  119. package/optimize/lib/components/steps/step_number.styles.js +6 -7
  120. package/optimize/lib/components/tree_view/tree_view.js +9 -2
  121. package/package.json +1 -1
  122. package/src/components/datagrid/body/header/_data_grid_header_row.scss +8 -7
  123. package/test-env/components/aspect_ratio/aspect_ratio.js +1 -1
  124. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  125. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  126. package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  127. package/test-env/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  128. package/test-env/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  129. package/test-env/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  130. package/test-env/components/datagrid/body/cell/focus_utils.js +172 -0
  131. package/test-env/components/datagrid/body/cell/index.js +32 -0
  132. package/test-env/components/datagrid/body/data_grid_body.js +0 -2
  133. package/test-env/components/datagrid/body/data_grid_body_custom.js +2 -8
  134. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +2 -8
  135. package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  136. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  137. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  138. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +44 -116
  139. package/test-env/components/datagrid/body/header/data_grid_header_row.js +5 -10
  140. package/test-env/components/datagrid/body/header/use_data_grid_header.js +4 -14
  141. package/test-env/components/datagrid/data_grid.js +4 -14
  142. package/test-env/components/datagrid/utils/focus.js +26 -56
  143. package/test-env/components/datagrid/utils/scrolling.js +2 -2
  144. package/test-env/components/flyout/flyout_resizable.js +10 -10
  145. package/test-env/components/flyout/flyout_resizable.styles.js +12 -6
  146. package/test-env/components/resizable_container/helpers.js +7 -7
  147. package/test-env/components/resizable_container/resizable_button.js +13 -4
  148. package/test-env/components/resizable_container/resizable_button.styles.js +18 -8
  149. package/test-env/components/resizable_container/resizable_container.js +28 -22
  150. package/test-env/components/steps/step_number.styles.js +6 -7
  151. package/test-env/components/tree_view/tree_view.js +9 -2
  152. package/es/components/datagrid/body/header/header_is_interactive.js +0 -58
  153. package/lib/components/datagrid/body/header/header_is_interactive.js +0 -63
  154. package/optimize/es/components/datagrid/body/header/header_is_interactive.js +0 -53
  155. package/optimize/lib/components/datagrid/body/header/header_is_interactive.js +0 -61
  156. 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 _tabbable = require("tabbable");
22
- var _services = require("../../../services");
23
- var _accessibility = require("../../accessibility");
24
- var _focus_trap = require("../../focus_trap");
25
- var _i18n = require("../../i18n");
26
- var _text_truncate = require("../../text_truncate");
27
- var _resize_observer = require("../../observer/resize_observer/resize_observer");
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 _utils = require("../../../utils");
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
- isEntered: false,
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), "getInteractables", function () {
127
- var tabbingRef = _this.cellContentsRef;
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 (cell) {
136
- // only update focus if we are not already focused on something in this cell
137
- var element = document.activeElement;
138
- while (element != null && element !== cell) {
139
- element = element.parentElement;
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$props6 = _this.props,
331
- renderCellPopover = _this$props6.renderCellPopover,
332
- renderCellValue = _this$props6.renderCellValue,
333
- rowIndex = _this$props6.rowIndex,
334
- colIndex = _this$props6.colIndex,
335
- column = _this$props6.column,
336
- columnId = _this$props6.columnId,
337
- columnType = _this$props6.columnType;
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$props7 = this.props,
368
- colIndex = _this$props7.colIndex,
369
- visibleRowIndex = _this$props7.visibleRowIndex;
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.enableInteractions !== this.state.enableInteractions) return true;
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
- _rowHeightsOptions$li,
466
- _this2 = this;
467
- var _this$props8 = this.props,
468
- width = _this$props8.width,
469
- _this$props8$popoverC = _this$props8.popoverContext,
470
- closeCellPopover = _this$props8$popoverC.closeCellPopover,
471
- openCellPopover = _this$props8$popoverC.openCellPopover,
472
- interactiveCellId = _this$props8.interactiveCellId,
473
- columnType = _this$props8.columnType,
474
- className = _this$props8.className,
475
- column = _this$props8.column,
476
- style = _this$props8.style,
477
- rowHeightUtils = _this$props8.rowHeightUtils,
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 = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
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 && !this.state.disableCellTabIndex ? 0 : -1,
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
- onFocus: this.onFocus,
634
- onMouseEnter: function onMouseEnter() {
635
- _this2.setState({
636
- enableInteractions: true
637
- });
638
- },
639
- onMouseLeave: function onMouseLeave() {
640
- _this2.setState({
641
- enableInteractions: false
642
- });
643
- },
644
- onBlur: this.onBlur
645
- }), cellContent);
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("../../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");
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("../../../services");
15
- var _popover = require("../../popover");
16
- var _text = require("../../text");
17
- var _code = require("../../code");
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("../utils/sorting");
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");