@elastic/eui 92.0.0 → 92.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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} +56 -209
  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 +125 -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} +56 -209
  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} +56 -209
  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} +56 -209
  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} +56 -209
  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
@@ -51,7 +51,9 @@ var EuiTreeViewContext = /*#__PURE__*/(0, _react.createContext)('');
51
51
  function hasAriaLabel(x) {
52
52
  return x.hasOwnProperty('aria-label');
53
53
  }
54
- function getTreeId(propId, contextId, idGenerator) {
54
+ function getTreeId(propId) {
55
+ var contextId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
56
+ var idGenerator = arguments.length > 2 ? arguments[2] : undefined;
55
57
  return propId !== null && propId !== void 0 ? propId : contextId === '' ? idGenerator() : contextId;
56
58
  }
57
59
  var displayToClassNameMap = {
@@ -61,9 +63,14 @@ var displayToClassNameMap = {
61
63
  var EuiTreeView = /*#__PURE__*/function (_Component) {
62
64
  _inherits(EuiTreeView, _Component);
63
65
  var _super = _createSuper(EuiTreeView);
64
- function EuiTreeView(props, context) {
66
+ function EuiTreeView(props,
67
+ // Without the optional ? typing, TS will throw errors on JSX component errors
68
+ // @see https://github.com/facebook/react/issues/13944#issuecomment-1183693239
69
+ context) {
65
70
  var _this;
66
71
  _classCallCheck(this, EuiTreeView);
72
+ // TODO: context in constructor has been deprecated.
73
+ // We should likely convert this to a function component
67
74
  _this = _super.call(this, props, context);
68
75
  _defineProperty(_assertThisInitialized(_this), "treeIdGenerator", (0, _services.htmlIdGenerator)('euiTreeView'));
69
76
  _defineProperty(_assertThisInitialized(_this), "isNested", void 0);
@@ -22,7 +22,7 @@ export var EuiAspectRatio = function EuiAspectRatio(_ref) {
22
22
  style = _ref.style,
23
23
  rest = _objectWithoutProperties(_ref, _excluded);
24
24
  var classes = classNames('euiAspectRatio', className);
25
- var euiAspectRatioStyle = _objectSpread({
25
+ var euiAspectRatioStyle = _objectSpread(_objectSpread({}, children.props.style), {}, {
26
26
  aspectRatio: "".concat(width, " / ").concat(height),
27
27
  height: 'auto',
28
28
  width: '100%',
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["className"],
4
- _excluded2 = ["className"];
4
+ _excluded2 = ["className", "children"];
5
5
  /*
6
6
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
7
7
  * or more contributor license agreements. Licensed under the Elastic License
@@ -44,6 +44,7 @@ export var EuiCollapsibleNavBody = function EuiCollapsibleNavBody(_ref) {
44
44
  };
45
45
  export var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
46
46
  var className = _ref2.className,
47
+ children = _ref2.children,
47
48
  props = _objectWithoutProperties(_ref2, _excluded2);
48
49
  var classes = classNames('euiCollapsibleNav__footer', className);
49
50
  var _useContext2 = useContext(EuiCollapsibleNavContext),
@@ -51,9 +52,12 @@ export var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
51
52
  isPush = _useContext2.isPush;
52
53
  var euiTheme = useEuiTheme();
53
54
  var styles = euiCollapsibleNavFooterStyles(euiTheme);
54
- var cssStyles = [styles.euiCollapsibleNav__footer, isCollapsed && isPush && styles.isPushCollapsed];
55
+ var cssStyles = styles.euiCollapsibleNav__footer;
56
+ var overflowWrapperStyles = [styles.euiFlyoutFooter__overflow, isCollapsed && isPush && styles.isPushCollapsed];
55
57
  return ___EmotionJSX(EuiFlyoutFooter, _extends({
56
58
  className: classes,
57
59
  css: cssStyles
58
- }, props));
60
+ }, props), ___EmotionJSX("div", {
61
+ css: overflowWrapperStyles
62
+ }, children));
59
63
  };
@@ -13,16 +13,16 @@ import { logicalCSS, euiYScrollWithShadows } from '../../global_styling';
13
13
  // Otherwise if scrollbars are visible, button icon visibility suffers.
14
14
  export var hideScrollbars = "\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n display: none; /* Chrome, Edge, & Safari */\n }\n";
15
15
  export var euiCollapsibleNavBodyStyles = {
16
- // In case things get really dire responsively, ensure the footer doesn't overtake the body
17
- euiCollapsibleNav__body: /*#__PURE__*/css(logicalCSS('min-height', '50%'), ";;label:euiCollapsibleNav__body;"),
16
+ euiCollapsibleNav__body: /*#__PURE__*/css(";label:euiCollapsibleNav__body;"),
18
17
  isPushCollapsed: /*#__PURE__*/css(".euiFlyoutBody__overflow{", hideScrollbars, ";};label:isPushCollapsed;")
19
18
  };
20
19
  export var euiCollapsibleNavFooterStyles = function euiCollapsibleNavFooterStyles(euiThemeContext) {
21
20
  var euiTheme = euiThemeContext.euiTheme;
22
21
  return {
23
- euiCollapsibleNav__footer: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), " ", euiYScrollWithShadows(euiThemeContext, {
22
+ euiCollapsibleNav__footer: /*#__PURE__*/css(logicalCSS('max-height', '50%'), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";;label:euiCollapsibleNav__footer;"),
23
+ euiFlyoutFooter__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext, {
24
24
  side: 'end'
25
- }), ";;label:euiCollapsibleNav__footer;"),
25
+ }), ";;label:euiFlyoutFooter__overflow;"),
26
26
  isPushCollapsed: /*#__PURE__*/css(hideScrollbars, ";;label:isPushCollapsed;")
27
27
  };
28
28
  };
@@ -25,17 +25,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
25
25
  import classNames from 'classnames';
26
26
  import React, { Component, createRef, memo } from 'react';
27
27
  import { createPortal } from 'react-dom';
28
- import { tabbable } from 'tabbable';
29
- import { keys } from '../../../services';
30
- import { EuiScreenReaderOnly } from '../../accessibility';
31
- import { EuiFocusTrap } from '../../focus_trap';
32
- import { EuiI18n } from '../../i18n';
33
- import { EuiTextBlockTruncate } from '../../text_truncate';
34
- import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
35
- import { DataGridFocusContext } from '../utils/focus';
28
+ import { IS_JEST_ENVIRONMENT } from '../../../../utils';
29
+ import { keys } from '../../../../services';
30
+ import { EuiScreenReaderOnly } from '../../../accessibility';
31
+ import { EuiI18n } from '../../../i18n';
32
+ import { EuiTextBlockTruncate } from '../../../text_truncate';
33
+ import { hasResizeObserver } from '../../../observer/resize_observer/resize_observer';
34
+ import { DataGridFocusContext } from '../../utils/focus';
36
35
  import { EuiDataGridCellActions, EuiDataGridCellPopoverActions } from './data_grid_cell_actions';
37
36
  import { DefaultCellPopover } from './data_grid_cell_popover';
38
- import { IS_JEST_ENVIRONMENT } from '../../../utils';
37
+ import { HandleInteractiveChildren } from './focus_utils';
39
38
  import { jsx as ___EmotionJSX } from "@emotion/react";
40
39
  var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
41
40
  var renderCellValue = _ref.renderCellValue,
@@ -85,7 +84,10 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
85
84
  col: colIndex + 1,
86
85
  row: ariaRowIndex
87
86
  }
88
- })));
87
+ }), cellActions && ___EmotionJSX(React.Fragment, null, '. ', ___EmotionJSX(EuiI18n, {
88
+ token: "euiDataGridCell.expansionEnterPrompt",
89
+ default: "Press the Enter key to expand this cell."
90
+ }))));
89
91
  return ___EmotionJSX(React.Fragment, null, cellContent, screenReaderText, cellActions);
90
92
  });
91
93
  export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -106,43 +108,20 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
106
108
  _defineProperty(_assertThisInitialized(_this), "state", {
107
109
  cellProps: {},
108
110
  isFocused: false,
109
- isEntered: false,
110
- enableInteractions: false,
111
- disableCellTabIndex: false,
112
111
  cellTextAlign: 'Left'
113
112
  });
114
113
  _defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
115
- _defineProperty(_assertThisInitialized(_this), "focusTimeout", void 0);
116
114
  _defineProperty(_assertThisInitialized(_this), "style", null);
117
- _defineProperty(_assertThisInitialized(_this), "getInteractables", function () {
118
- var tabbingRef = _this.cellContentsRef;
119
- if (tabbingRef) {
120
- return tabbingRef.querySelectorAll('[data-datagrid-interactable=true]');
121
- }
122
- return [];
115
+ _defineProperty(_assertThisInitialized(_this), "updateCellFocusContext", function () {
116
+ _this.context.setFocusedCell([_this.props.colIndex, _this.props.visibleRowIndex]);
123
117
  });
124
118
  _defineProperty(_assertThisInitialized(_this), "takeFocus", function (preventScroll) {
125
119
  var cell = _this.cellRef.current;
126
- if (cell) {
127
- // only update focus if we are not already focused on something in this cell
128
- var element = document.activeElement;
129
- while (element != null && element !== cell) {
130
- element = element.parentElement;
131
- }
132
- var doFocusUpdate = element !== cell;
133
- if (doFocusUpdate) {
134
- var interactables = _this.getInteractables();
135
- if (_this.isExpandable() === false && interactables.length === 1) {
136
- // Only one element can be interacted with
137
- interactables[0].focus({
138
- preventScroll: preventScroll
139
- });
140
- } else {
141
- cell.focus({
142
- preventScroll: preventScroll
143
- });
144
- }
145
- }
120
+ // Only focus the cell if not already focused on something in the cell
121
+ if (cell && !cell.contains(document.activeElement)) {
122
+ cell.focus({
123
+ preventScroll: preventScroll
124
+ });
146
125
  }
147
126
  });
148
127
  _defineProperty(_assertThisInitialized(_this), "recalculateAutoHeight", function () {
@@ -211,61 +190,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
211
190
  } else if (_this.contentObserver) {
212
191
  _this.contentObserver.disconnect();
213
192
  }
214
- _this.preventTabbing();
215
193
  _this.setCellTextAlign();
216
194
  });
217
- _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
218
- // only perform this logic when the event's originating element (e.target) is
219
- // the wrapping element with the onFocus logic
220
- // reasons:
221
- // * the outcome is only meaningful when the focus shifts to the wrapping element
222
- // * if the cell children include portalled content React will bubble the focus
223
- // event up, which can trigger the focus() call below, causing focus lock fighting
224
- if (_this.cellRef.current === e.target) {
225
- var _this$props5 = _this.props,
226
- colIndex = _this$props5.colIndex,
227
- visibleRowIndex = _this$props5.visibleRowIndex;
228
- // focus in next tick to give potential focus capturing mechanisms time to release their traps
229
- // also clear any previous focus timeout that may still be queued
230
- if (EuiDataGridCell.activeFocusTimeoutId) {
231
- window.clearTimeout(EuiDataGridCell.activeFocusTimeoutId);
232
- }
233
- EuiDataGridCell.activeFocusTimeoutId = _this.focusTimeout = window.setTimeout(function () {
234
- _this.context.setFocusedCell([colIndex, visibleRowIndex]);
235
- var interactables = _this.getInteractables();
236
- if (interactables.length === 1 && _this.isExpandable() === false) {
237
- interactables[0].focus();
238
- _this.setState({
239
- disableCellTabIndex: true
240
- });
241
- }
242
- }, 0);
243
- }
244
- });
245
- _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
246
- _this.setState({
247
- disableCellTabIndex: false
248
- });
249
- });
250
- _defineProperty(_assertThisInitialized(_this), "preventTabbing", function () {
251
- if (_this.cellContentsRef) {
252
- var tabbables = tabbable(_this.cellContentsRef);
253
- for (var i = 0; i < tabbables.length; i++) {
254
- var element = tabbables[i];
255
- element.setAttribute('tabIndex', '-1');
256
- element.setAttribute('data-datagrid-interactable', 'true');
257
- }
258
- }
259
- });
260
- _defineProperty(_assertThisInitialized(_this), "enableTabbing", function () {
261
- if (_this.cellContentsRef) {
262
- var interactables = _this.getInteractables();
263
- for (var i = 0; i < interactables.length; i++) {
264
- var element = interactables[i];
265
- element.removeAttribute('tabIndex');
266
- }
267
- }
268
- });
269
195
  _defineProperty(_assertThisInitialized(_this), "setCellTextAlign", function () {
270
196
  if (_this.cellContentsRef) {
271
197
  var columnType = _this.props.columnType;
@@ -318,14 +244,14 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
318
244
  setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
319
245
 
320
246
  // Set popover contents with cell content
321
- var _this$props6 = _this.props,
322
- renderCellPopover = _this$props6.renderCellPopover,
323
- renderCellValue = _this$props6.renderCellValue,
324
- rowIndex = _this$props6.rowIndex,
325
- colIndex = _this$props6.colIndex,
326
- column = _this$props6.column,
327
- columnId = _this$props6.columnId,
328
- columnType = _this$props6.columnType;
247
+ var _this$props5 = _this.props,
248
+ renderCellPopover = _this$props5.renderCellPopover,
249
+ renderCellValue = _this$props5.renderCellValue,
250
+ rowIndex = _this$props5.rowIndex,
251
+ colIndex = _this$props5.colIndex,
252
+ column = _this$props5.column,
253
+ columnId = _this$props5.columnId,
254
+ columnType = _this$props5.columnType;
329
255
  var PopoverElement = renderCellPopover || DefaultCellPopover;
330
256
  var CellElement = renderCellValue;
331
257
  var sharedProps = {
@@ -355,9 +281,9 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
355
281
  _createClass(EuiDataGridCell, [{
356
282
  key: "componentDidMount",
357
283
  value: function componentDidMount() {
358
- var _this$props7 = this.props,
359
- colIndex = _this$props7.colIndex,
360
- visibleRowIndex = _this$props7.visibleRowIndex;
284
+ var _this$props6 = this.props,
285
+ colIndex = _this$props6.colIndex,
286
+ visibleRowIndex = _this$props6.visibleRowIndex;
361
287
  this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
362
288
 
363
289
  // Account for virtualization - when a cell unmounts when scrolled out of view
@@ -376,7 +302,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
376
302
  }, {
377
303
  key: "componentWillUnmount",
378
304
  value: function componentWillUnmount() {
379
- window.clearTimeout(this.focusTimeout);
380
305
  if (this.unsubscribeCell) {
381
306
  this.unsubscribeCell();
382
307
  }
@@ -443,39 +368,33 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
443
368
  if (nextProps.style.width !== this.props.style.width) return true;
444
369
  }
445
370
  if (nextState.cellProps !== this.state.cellProps) return true;
446
- if (nextState.isEntered !== this.state.isEntered) return true;
447
371
  if (nextState.isFocused !== this.state.isFocused) return true;
448
- if (nextState.enableInteractions !== this.state.enableInteractions) return true;
449
- if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex) return true;
450
372
  return false;
451
373
  }
452
374
  }, {
453
375
  key: "render",
454
376
  value: function render() {
455
- var _classNames,
456
- _rowHeightsOptions$li,
457
- _this2 = this;
458
- var _this$props8 = this.props,
459
- width = _this$props8.width,
460
- _this$props8$popoverC = _this$props8.popoverContext,
461
- closeCellPopover = _this$props8$popoverC.closeCellPopover,
462
- openCellPopover = _this$props8$popoverC.openCellPopover,
463
- interactiveCellId = _this$props8.interactiveCellId,
464
- columnType = _this$props8.columnType,
465
- className = _this$props8.className,
466
- column = _this$props8.column,
467
- style = _this$props8.style,
468
- rowHeightUtils = _this$props8.rowHeightUtils,
469
- rowHeightsOptions = _this$props8.rowHeightsOptions,
470
- rowManager = _this$props8.rowManager,
471
- pagination = _this$props8.pagination,
472
- rest = _objectWithoutProperties(_this$props8, _excluded2);
377
+ var _classNames, _rowHeightsOptions$li;
378
+ var _this$props7 = this.props,
379
+ width = _this$props7.width,
380
+ _this$props7$popoverC = _this$props7.popoverContext,
381
+ closeCellPopover = _this$props7$popoverC.closeCellPopover,
382
+ openCellPopover = _this$props7$popoverC.openCellPopover,
383
+ interactiveCellId = _this$props7.interactiveCellId,
384
+ columnType = _this$props7.columnType,
385
+ className = _this$props7.className,
386
+ column = _this$props7.column,
387
+ style = _this$props7.style,
388
+ rowHeightUtils = _this$props7.rowHeightUtils,
389
+ rowHeightsOptions = _this$props7.rowHeightsOptions,
390
+ rowManager = _this$props7.rowManager,
391
+ pagination = _this$props7.pagination,
392
+ rest = _objectWithoutProperties(_this$props7, _excluded2);
473
393
  var rowIndex = rest.rowIndex,
474
394
  visibleRowIndex = rest.visibleRowIndex,
475
395
  colIndex = rest.colIndex;
476
396
  var isExpandable = this.isExpandable();
477
397
  var popoverIsOpen = this.isPopoverOpen();
478
- var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
479
398
  var cellClasses = classNames('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
480
399
  var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
481
400
  var _this$state$cellProps2 = this.state.cellProps,
@@ -511,51 +430,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
511
430
  });
512
431
  break;
513
432
  }
514
- } else {
515
- if (event.key === keys.ENTER || event.key === keys.F2 || event.key === keys.ESCAPE) {
516
- var interactables = _this2.getInteractables();
517
- if (interactables.length >= 2) {
518
- switch (event.key) {
519
- case keys.ENTER:
520
- // `Enter` only activates the trap
521
- if (_this2.state.isEntered === false) {
522
- _this2.enableTabbing();
523
- _this2.setState({
524
- isEntered: true
525
- });
526
-
527
- // result of this keypress is focus shifts to the first interactive element
528
- // and then the browser fires the onClick event because that's how [Enter] works
529
- // so we need to prevent that default action otherwise entering the trap triggers the first element
530
- event.preventDefault();
531
- }
532
- break;
533
- case keys.F2:
534
- // toggle interactives' focus trap
535
- _this2.setState(function (_ref2) {
536
- var isEntered = _ref2.isEntered;
537
- if (isEntered) {
538
- _this2.preventTabbing();
539
- } else {
540
- _this2.enableTabbing();
541
- }
542
- return {
543
- isEntered: !isEntered
544
- };
545
- });
546
- break;
547
- case keys.ESCAPE:
548
- // `Escape` only de-activates the trap
549
- _this2.preventTabbing();
550
- if (_this2.state.isEntered === true) {
551
- _this2.setState({
552
- isEntered: false
553
- });
554
- }
555
- break;
556
- }
557
- }
558
- }
559
433
  }
560
434
  };
561
435
  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
@@ -573,7 +447,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
573
447
  isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
574
448
  ariaRowIndex: ariaRowIndex
575
449
  });
576
- var cellActions = showCellActions && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
450
+ var cellActions = isExpandable ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
577
451
  rowIndex: rowIndex,
578
452
  colIndex: colIndex,
579
453
  column: column,
@@ -590,23 +464,18 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
590
464
  }), ___EmotionJSX("div", {
591
465
  ref: this.popoverAnchorRef,
592
466
  "data-test-subject": "cellPopoverAnchor"
593
- }));
594
- var cellContent = isExpandable ? ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
467
+ })) : undefined;
468
+ var cellContent = ___EmotionJSX(HandleInteractiveChildren, {
469
+ cellEl: this.cellRef.current,
470
+ updateCellFocusContext: this.updateCellFocusContext,
471
+ renderFocusTrap: !isExpandable
472
+ }, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
595
473
  cellActions: cellActions
596
- })) : ___EmotionJSX(EuiFocusTrap, {
597
- disabled: !this.state.isEntered,
598
- autoFocus: true,
599
- onDeactivation: function onDeactivation() {
600
- _this2.setState({
601
- isEntered: false
602
- }, _this2.preventTabbing);
603
- },
604
- clickOutsideDisables: true
605
- }, ___EmotionJSX(EuiDataGridCellContent, cellContentProps));
474
+ })));
606
475
  var cell = ___EmotionJSX("div", _extends({
607
476
  role: "gridcell",
608
477
  "aria-rowindex": ariaRowIndex,
609
- tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
478
+ tabIndex: this.state.isFocused ? 0 : -1,
610
479
  ref: this.cellRef
611
480
  }, cellProps, {
612
481
  "data-test-subj": "dataGridRowCell"
@@ -620,19 +489,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
620
489
  ,
621
490
  "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
622
491
  ,
623
- onKeyDown: handleCellKeyDown,
624
- onFocus: this.onFocus,
625
- onMouseEnter: function onMouseEnter() {
626
- _this2.setState({
627
- enableInteractions: true
628
- });
629
- },
630
- onMouseLeave: function onMouseLeave() {
631
- _this2.setState({
632
- enableInteractions: false
633
- });
634
- },
635
- onBlur: this.onBlur
492
+ onKeyDown: handleCellKeyDown
636
493
  }), cellContent);
637
494
  return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(cell, rowManager.getRow({
638
495
  rowIndex: rowIndex,
@@ -645,14 +502,4 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
645
502
  }]);
646
503
  return EuiDataGridCell;
647
504
  }(Component);
648
- // focus tracking is split between the entire grid & individual cells,
649
- // the parent grid owns which cell is focused,
650
- // but individual cells need to react to changes and also report that
651
- // they are focused in response to user actions like clicking on the cell
652
- // to avoid focus trap fighting, cells wait a tick after being clicked to allow
653
- // any existing traps to disconnect before the cell reports the new focus state to the parent grid
654
- // but because of this small delay, multiple cells could queue up focus and
655
- // create an infinite loop as the cells activate->deactivate->...
656
- // so we track the last timeout id and clear that request if superseded
657
- _defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
658
505
  _defineProperty(EuiDataGridCell, "contextType", DataGridFocusContext);
@@ -10,11 +10,11 @@ import _extends from "@babel/runtime/helpers/extends";
10
10
  */
11
11
 
12
12
  import React, { useMemo, useCallback } from 'react';
13
- import { EuiI18n } from '../../i18n';
14
- import { EuiButtonIcon } from '../../button/button_icon';
15
- import { EuiButtonEmpty } from '../../button/button_empty';
16
- import { EuiFlexGroup, EuiFlexItem } from '../../flex';
17
- import { EuiPopoverFooter } from '../../popover';
13
+ import { EuiI18n } from '../../../i18n';
14
+ import { EuiButtonIcon } from '../../../button/button_icon';
15
+ import { EuiButtonEmpty } from '../../../button/button_empty';
16
+ import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
17
+ import { EuiPopoverFooter } from '../../../popover';
18
18
  import { jsx as ___EmotionJSX } from "@emotion/react";
19
19
  export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
20
20
  var onExpandClick = _ref.onExpandClick,
@@ -13,8 +13,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
13
13
 
14
14
  import React, { createContext, useState, useCallback } from 'react';
15
15
  import classNames from 'classnames';
16
- import { keys } from '../../../services';
17
- import { EuiWrappingPopover } from '../../popover';
16
+ import { keys } from '../../../../services';
17
+ import { EuiWrappingPopover } from '../../../popover';
18
18
  export var DataGridCellPopoverContext = /*#__PURE__*/createContext({
19
19
  popoverIsOpen: false,
20
20
  cellLocation: {
@@ -152,8 +152,8 @@ export var useCellPopover = function useCellPopover() {
152
152
  /**
153
153
  * Popover content renderers
154
154
  */
155
- import { EuiText } from '../../text';
156
- import { EuiCodeBlock } from '../../code';
155
+ import { EuiText } from '../../../text';
156
+ import { EuiCodeBlock } from '../../../code';
157
157
  import { jsx as ___EmotionJSX } from "@emotion/react";
158
158
  export var DefaultCellPopover = function DefaultCellPopover(_ref2) {
159
159
  var schema = _ref2.schema,
@@ -12,7 +12,7 @@ var _excluded = ["colIndex", "visibleRowIndex", "style", "schema", "schemaDetect
12
12
 
13
13
  import React, { useContext, useMemo } from 'react';
14
14
  import classNames from 'classnames';
15
- import { DataGridSortingContext } from '../utils/sorting';
15
+ import { DataGridSortingContext } from '../../utils/sorting';
16
16
  import { DataGridCellPopoverContext } from './data_grid_cell_popover';
17
17
  import { EuiDataGridCell } from './data_grid_cell';
18
18
  import { jsx as ___EmotionJSX } from "@emotion/react";