@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
@@ -9,17 +9,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactDom = require("react-dom");
12
- var _tabbable = require("tabbable");
13
- var _services = require("../../../services");
14
- var _accessibility = require("../../accessibility");
15
- var _focus_trap = require("../../focus_trap");
16
- var _i18n = require("../../i18n");
17
- var _text_truncate = require("../../text_truncate");
18
- var _resize_observer = require("../../observer/resize_observer/resize_observer");
19
- var _focus = require("../utils/focus");
12
+ var _utils = require("../../../../utils");
13
+ var _services = require("../../../../services");
14
+ var _accessibility = require("../../../accessibility");
15
+ var _i18n = require("../../../i18n");
16
+ var _text_truncate = require("../../../text_truncate");
17
+ var _resize_observer = require("../../../observer/resize_observer/resize_observer");
18
+ var _focus = require("../../utils/focus");
20
19
  var _data_grid_cell_actions = require("./data_grid_cell_actions");
21
20
  var _data_grid_cell_popover = require("./data_grid_cell_popover");
22
- var _utils = require("../../../utils");
21
+ var _focus_utils = require("./focus_utils");
23
22
  var _react2 = require("@emotion/react");
24
23
  var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
25
24
  _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
@@ -100,7 +99,10 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
100
99
  col: colIndex + 1,
101
100
  row: ariaRowIndex
102
101
  }
103
- })));
102
+ }), cellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
103
+ token: "euiDataGridCell.expansionEnterPrompt",
104
+ default: "Press the Enter key to expand this cell."
105
+ }))));
104
106
  return (0, _react2.jsx)(_react.default.Fragment, null, cellContent, screenReaderText, cellActions);
105
107
  });
106
108
  EuiDataGridCellContent.propTypes = {
@@ -603,43 +605,21 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
603
605
  _defineProperty(_assertThisInitialized(_this), "state", {
604
606
  cellProps: {},
605
607
  isFocused: false,
606
- isEntered: false,
607
- enableInteractions: false,
608
- disableCellTabIndex: false,
608
+ isHovered: false,
609
609
  cellTextAlign: 'Left'
610
610
  });
611
611
  _defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
612
- _defineProperty(_assertThisInitialized(_this), "focusTimeout", void 0);
613
612
  _defineProperty(_assertThisInitialized(_this), "style", null);
614
- _defineProperty(_assertThisInitialized(_this), "getInteractables", function () {
615
- var tabbingRef = _this.cellContentsRef;
616
- if (tabbingRef) {
617
- return tabbingRef.querySelectorAll('[data-datagrid-interactable=true]');
618
- }
619
- return [];
613
+ _defineProperty(_assertThisInitialized(_this), "updateCellFocusContext", function () {
614
+ _this.context.setFocusedCell([_this.props.colIndex, _this.props.visibleRowIndex]);
620
615
  });
621
616
  _defineProperty(_assertThisInitialized(_this), "takeFocus", function (preventScroll) {
622
617
  var cell = _this.cellRef.current;
623
- if (cell) {
624
- // only update focus if we are not already focused on something in this cell
625
- var element = document.activeElement;
626
- while (element != null && element !== cell) {
627
- element = element.parentElement;
628
- }
629
- var doFocusUpdate = element !== cell;
630
- if (doFocusUpdate) {
631
- var interactables = _this.getInteractables();
632
- if (_this.isExpandable() === false && interactables.length === 1) {
633
- // Only one element can be interacted with
634
- interactables[0].focus({
635
- preventScroll: preventScroll
636
- });
637
- } else {
638
- cell.focus({
639
- preventScroll: preventScroll
640
- });
641
- }
642
- }
618
+ // Only focus the cell if not already focused on something in the cell
619
+ if (cell && !cell.contains(document.activeElement)) {
620
+ cell.focus({
621
+ preventScroll: preventScroll
622
+ });
643
623
  }
644
624
  });
645
625
  _defineProperty(_assertThisInitialized(_this), "recalculateAutoHeight", function () {
@@ -708,61 +688,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
708
688
  } else if (_this.contentObserver) {
709
689
  _this.contentObserver.disconnect();
710
690
  }
711
- _this.preventTabbing();
712
691
  _this.setCellTextAlign();
713
692
  });
714
- _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
715
- // only perform this logic when the event's originating element (e.target) is
716
- // the wrapping element with the onFocus logic
717
- // reasons:
718
- // * the outcome is only meaningful when the focus shifts to the wrapping element
719
- // * if the cell children include portalled content React will bubble the focus
720
- // event up, which can trigger the focus() call below, causing focus lock fighting
721
- if (_this.cellRef.current === e.target) {
722
- var _this$props5 = _this.props,
723
- colIndex = _this$props5.colIndex,
724
- visibleRowIndex = _this$props5.visibleRowIndex;
725
- // focus in next tick to give potential focus capturing mechanisms time to release their traps
726
- // also clear any previous focus timeout that may still be queued
727
- if (EuiDataGridCell.activeFocusTimeoutId) {
728
- window.clearTimeout(EuiDataGridCell.activeFocusTimeoutId);
729
- }
730
- EuiDataGridCell.activeFocusTimeoutId = _this.focusTimeout = window.setTimeout(function () {
731
- _this.context.setFocusedCell([colIndex, visibleRowIndex]);
732
- var interactables = _this.getInteractables();
733
- if (interactables.length === 1 && _this.isExpandable() === false) {
734
- interactables[0].focus();
735
- _this.setState({
736
- disableCellTabIndex: true
737
- });
738
- }
739
- }, 0);
740
- }
741
- });
742
- _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
743
- _this.setState({
744
- disableCellTabIndex: false
745
- });
746
- });
747
- _defineProperty(_assertThisInitialized(_this), "preventTabbing", function () {
748
- if (_this.cellContentsRef) {
749
- var tabbables = (0, _tabbable.tabbable)(_this.cellContentsRef);
750
- for (var i = 0; i < tabbables.length; i++) {
751
- var element = tabbables[i];
752
- element.setAttribute('tabIndex', '-1');
753
- element.setAttribute('data-datagrid-interactable', 'true');
754
- }
755
- }
756
- });
757
- _defineProperty(_assertThisInitialized(_this), "enableTabbing", function () {
758
- if (_this.cellContentsRef) {
759
- var interactables = _this.getInteractables();
760
- for (var i = 0; i < interactables.length; i++) {
761
- var element = interactables[i];
762
- element.removeAttribute('tabIndex');
763
- }
764
- }
765
- });
766
693
  _defineProperty(_assertThisInitialized(_this), "setCellTextAlign", function () {
767
694
  if (_this.cellContentsRef) {
768
695
  var columnType = _this.props.columnType;
@@ -815,14 +742,14 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
815
742
  setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
816
743
 
817
744
  // Set popover contents with cell content
818
- var _this$props6 = _this.props,
819
- renderCellPopover = _this$props6.renderCellPopover,
820
- renderCellValue = _this$props6.renderCellValue,
821
- rowIndex = _this$props6.rowIndex,
822
- colIndex = _this$props6.colIndex,
823
- column = _this$props6.column,
824
- columnId = _this$props6.columnId,
825
- columnType = _this$props6.columnType;
745
+ var _this$props5 = _this.props,
746
+ renderCellPopover = _this$props5.renderCellPopover,
747
+ renderCellValue = _this$props5.renderCellValue,
748
+ rowIndex = _this$props5.rowIndex,
749
+ colIndex = _this$props5.colIndex,
750
+ column = _this$props5.column,
751
+ columnId = _this$props5.columnId,
752
+ columnType = _this$props5.columnType;
826
753
  var PopoverElement = renderCellPopover || _data_grid_cell_popover.DefaultCellPopover;
827
754
  var CellElement = renderCellValue;
828
755
  var sharedProps = {
@@ -847,14 +774,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
847
774
  setPopoverContent(popoverContent);
848
775
  }
849
776
  });
777
+ _defineProperty(_assertThisInitialized(_this), "handleCellKeyDown", function (event) {
778
+ if (_this.isExpandable()) {
779
+ if (_this.isPopoverOpen()) return;
780
+ var _this$props6 = _this.props,
781
+ openCellPopover = _this$props6.popoverContext.openCellPopover,
782
+ visibleRowIndex = _this$props6.visibleRowIndex,
783
+ colIndex = _this$props6.colIndex;
784
+ switch (event.key) {
785
+ case _services.keys.ENTER:
786
+ case _services.keys.F2:
787
+ event.preventDefault();
788
+ openCellPopover({
789
+ rowIndex: visibleRowIndex,
790
+ colIndex: colIndex
791
+ });
792
+ break;
793
+ }
794
+ }
795
+ });
796
+ _defineProperty(_assertThisInitialized(_this), "handleCellExpansionClick", function () {
797
+ var _this$props7 = _this.props,
798
+ _this$props7$popoverC = _this$props7.popoverContext,
799
+ openCellPopover = _this$props7$popoverC.openCellPopover,
800
+ closeCellPopover = _this$props7$popoverC.closeCellPopover,
801
+ visibleRowIndex = _this$props7.visibleRowIndex,
802
+ colIndex = _this$props7.colIndex;
803
+ if (_this.isPopoverOpen()) {
804
+ closeCellPopover();
805
+ } else {
806
+ openCellPopover({
807
+ rowIndex: visibleRowIndex,
808
+ colIndex: colIndex
809
+ });
810
+ }
811
+ });
812
+ _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function () {
813
+ return _this.setState({
814
+ isHovered: true
815
+ });
816
+ });
817
+ _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
818
+ return _this.setState({
819
+ isHovered: false
820
+ });
821
+ });
850
822
  return _this;
851
823
  }
852
824
  _createClass(EuiDataGridCell, [{
853
825
  key: "componentDidMount",
854
826
  value: function componentDidMount() {
855
- var _this$props7 = this.props,
856
- colIndex = _this$props7.colIndex,
857
- visibleRowIndex = _this$props7.visibleRowIndex;
827
+ var _this$props8 = this.props,
828
+ colIndex = _this$props8.colIndex,
829
+ visibleRowIndex = _this$props8.visibleRowIndex;
858
830
  this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
859
831
 
860
832
  // Account for virtualization - when a cell unmounts when scrolled out of view
@@ -873,7 +845,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
873
845
  }, {
874
846
  key: "componentWillUnmount",
875
847
  value: function componentWillUnmount() {
876
- window.clearTimeout(this.focusTimeout);
877
848
  if (this.unsubscribeCell) {
878
849
  this.unsubscribeCell();
879
850
  }
@@ -940,39 +911,33 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
940
911
  if (nextProps.style.width !== this.props.style.width) return true;
941
912
  }
942
913
  if (nextState.cellProps !== this.state.cellProps) return true;
943
- if (nextState.isEntered !== this.state.isEntered) return true;
944
914
  if (nextState.isFocused !== this.state.isFocused) return true;
945
- if (nextState.enableInteractions !== this.state.enableInteractions) return true;
946
- if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex) return true;
915
+ if (nextState.isHovered !== this.state.isHovered) return true;
947
916
  return false;
948
917
  }
949
918
  }, {
950
919
  key: "render",
951
920
  value: function render() {
952
- var _classNames,
953
- _rowHeightsOptions$li,
954
- _this2 = this;
955
- var _this$props8 = this.props,
956
- width = _this$props8.width,
957
- _this$props8$popoverC = _this$props8.popoverContext,
958
- closeCellPopover = _this$props8$popoverC.closeCellPopover,
959
- openCellPopover = _this$props8$popoverC.openCellPopover,
960
- interactiveCellId = _this$props8.interactiveCellId,
961
- columnType = _this$props8.columnType,
962
- className = _this$props8.className,
963
- column = _this$props8.column,
964
- style = _this$props8.style,
965
- rowHeightUtils = _this$props8.rowHeightUtils,
966
- rowHeightsOptions = _this$props8.rowHeightsOptions,
967
- rowManager = _this$props8.rowManager,
968
- pagination = _this$props8.pagination,
969
- rest = _objectWithoutProperties(_this$props8, _excluded2);
921
+ var _classNames, _rowHeightsOptions$li;
922
+ var _this$props9 = this.props,
923
+ width = _this$props9.width,
924
+ popoverContext = _this$props9.popoverContext,
925
+ interactiveCellId = _this$props9.interactiveCellId,
926
+ columnType = _this$props9.columnType,
927
+ className = _this$props9.className,
928
+ column = _this$props9.column,
929
+ style = _this$props9.style,
930
+ rowHeightUtils = _this$props9.rowHeightUtils,
931
+ rowHeightsOptions = _this$props9.rowHeightsOptions,
932
+ rowManager = _this$props9.rowManager,
933
+ pagination = _this$props9.pagination,
934
+ rest = _objectWithoutProperties(_this$props9, _excluded2);
970
935
  var rowIndex = rest.rowIndex,
971
936
  visibleRowIndex = rest.visibleRowIndex,
972
937
  colIndex = rest.colIndex;
973
938
  var isExpandable = this.isExpandable();
974
939
  var popoverIsOpen = this.isPopoverOpen();
975
- var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
940
+ var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
976
941
  var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
977
942
  var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
978
943
  var _this$state$cellProps2 = this.state.cellProps,
@@ -993,68 +958,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
993
958
  // column width, can be undefined
994
959
  lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
995
960
  }, cellPropsStyle);
996
- var handleCellKeyDown = function handleCellKeyDown(event) {
997
- if (isExpandable) {
998
- if (popoverIsOpen) {
999
- return;
1000
- }
1001
- switch (event.key) {
1002
- case _services.keys.ENTER:
1003
- case _services.keys.F2:
1004
- event.preventDefault();
1005
- openCellPopover({
1006
- rowIndex: visibleRowIndex,
1007
- colIndex: colIndex
1008
- });
1009
- break;
1010
- }
1011
- } else {
1012
- if (event.key === _services.keys.ENTER || event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
1013
- var interactables = _this2.getInteractables();
1014
- if (interactables.length >= 2) {
1015
- switch (event.key) {
1016
- case _services.keys.ENTER:
1017
- // `Enter` only activates the trap
1018
- if (_this2.state.isEntered === false) {
1019
- _this2.enableTabbing();
1020
- _this2.setState({
1021
- isEntered: true
1022
- });
1023
-
1024
- // result of this keypress is focus shifts to the first interactive element
1025
- // and then the browser fires the onClick event because that's how [Enter] works
1026
- // so we need to prevent that default action otherwise entering the trap triggers the first element
1027
- event.preventDefault();
1028
- }
1029
- break;
1030
- case _services.keys.F2:
1031
- // toggle interactives' focus trap
1032
- _this2.setState(function (_ref2) {
1033
- var isEntered = _ref2.isEntered;
1034
- if (isEntered) {
1035
- _this2.preventTabbing();
1036
- } else {
1037
- _this2.enableTabbing();
1038
- }
1039
- return {
1040
- isEntered: !isEntered
1041
- };
1042
- });
1043
- break;
1044
- case _services.keys.ESCAPE:
1045
- // `Escape` only de-activates the trap
1046
- _this2.preventTabbing();
1047
- if (_this2.state.isEntered === true) {
1048
- _this2.setState({
1049
- isEntered: false
1050
- });
1051
- }
1052
- break;
1053
- }
1054
- }
1055
- }
1056
- }
1057
- };
1058
961
  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
1059
962
  var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
1060
963
  setCellProps: this.setCellProps,
@@ -1070,40 +973,10 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1070
973
  isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
1071
974
  ariaRowIndex: ariaRowIndex
1072
975
  });
1073
- var cellActions = showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
1074
- rowIndex: rowIndex,
1075
- colIndex: colIndex,
1076
- column: column,
1077
- onExpandClick: function onExpandClick() {
1078
- if (popoverIsOpen) {
1079
- closeCellPopover();
1080
- } else {
1081
- openCellPopover({
1082
- rowIndex: visibleRowIndex,
1083
- colIndex: colIndex
1084
- });
1085
- }
1086
- }
1087
- }), (0, _react2.jsx)("div", {
1088
- ref: this.popoverAnchorRef,
1089
- "data-test-subject": "cellPopoverAnchor"
1090
- }));
1091
- var cellContent = isExpandable ? (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
1092
- cellActions: cellActions
1093
- })) : (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
1094
- disabled: !this.state.isEntered,
1095
- autoFocus: true,
1096
- onDeactivation: function onDeactivation() {
1097
- _this2.setState({
1098
- isEntered: false
1099
- }, _this2.preventTabbing);
1100
- },
1101
- clickOutsideDisables: true
1102
- }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps));
1103
976
  var cell = (0, _react2.jsx)("div", _extends({
1104
977
  role: "gridcell",
1105
978
  "aria-rowindex": ariaRowIndex,
1106
- tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
979
+ tabIndex: this.state.isFocused ? 0 : -1,
1107
980
  ref: this.cellRef
1108
981
  }, cellProps, {
1109
982
  "data-test-subj": "dataGridRowCell"
@@ -1117,20 +990,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1117
990
  ,
1118
991
  "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
1119
992
  ,
1120
- onKeyDown: handleCellKeyDown,
1121
- onFocus: this.onFocus,
1122
- onMouseEnter: function onMouseEnter() {
1123
- _this2.setState({
1124
- enableInteractions: true
1125
- });
1126
- },
1127
- onMouseLeave: function onMouseLeave() {
1128
- _this2.setState({
1129
- enableInteractions: false
1130
- });
1131
- },
1132
- onBlur: this.onBlur
1133
- }), cellContent);
993
+ onKeyDown: this.handleCellKeyDown,
994
+ onMouseEnter: this.onMouseEnter,
995
+ onMouseLeave: this.onMouseLeave
996
+ }), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
997
+ cellEl: this.cellRef.current,
998
+ updateCellFocusContext: this.updateCellFocusContext,
999
+ renderFocusTrap: !isExpandable
1000
+ }, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
1001
+ cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
1002
+ rowIndex: rowIndex,
1003
+ colIndex: colIndex,
1004
+ column: column,
1005
+ onExpandClick: this.handleCellExpansionClick
1006
+ }), (0, _react2.jsx)("div", {
1007
+ ref: this.popoverAnchorRef,
1008
+ "data-test-subject": "cellPopoverAnchor"
1009
+ }))
1010
+ }))));
1134
1011
  return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
1135
1012
  rowIndex: rowIndex,
1136
1013
  visibleRowIndex: visibleRowIndex,
@@ -1143,16 +1020,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1143
1020
  return EuiDataGridCell;
1144
1021
  }(_react.Component);
1145
1022
  exports.EuiDataGridCell = EuiDataGridCell;
1146
- // focus tracking is split between the entire grid & individual cells,
1147
- // the parent grid owns which cell is focused,
1148
- // but individual cells need to react to changes and also report that
1149
- // they are focused in response to user actions like clicking on the cell
1150
- // to avoid focus trap fighting, cells wait a tick after being clicked to allow
1151
- // any existing traps to disconnect before the cell reports the new focus state to the parent grid
1152
- // but because of this small delay, multiple cells could queue up focus and
1153
- // create an infinite loop as the cells activate->deactivate->...
1154
- // so we track the last timeout id and clear that request if superseded
1155
- _defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
1156
1023
  _defineProperty(EuiDataGridCell, "contextType", _focus.DataGridFocusContext);
1157
1024
  EuiDataGridCell.propTypes = {
1158
1025
  rowIndex: _propTypes.default.number.isRequired,
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.EuiDataGridCellPopoverActions = exports.EuiDataGridCellActions = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
- var _i18n = require("../../i18n");
10
- var _button_icon = require("../../button/button_icon");
11
- var _button_empty = require("../../button/button_empty");
12
- var _flex = require("../../flex");
13
- var _popover = require("../../popover");
9
+ var _i18n = require("../../../i18n");
10
+ var _button_icon = require("../../../button/button_icon");
11
+ var _button_empty = require("../../../button/button_empty");
12
+ var _flex = require("../../../flex");
13
+ var _popover = require("../../../popover");
14
14
  var _react2 = require("@emotion/react");
15
15
  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); }
16
16
  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; }
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.useCellPopover = exports.JsonPopoverContent = exports.DefaultCellPopover = exports.DataGridCellPopoverContext = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
- var _services = require("../../../services");
11
- var _popover = require("../../popover");
12
- var _text = require("../../text");
13
- var _code = require("../../code");
10
+ var _services = require("../../../../services");
11
+ var _popover = require("../../../popover");
12
+ var _text = require("../../../text");
13
+ var _code = require("../../../code");
14
14
  var _react2 = require("@emotion/react");
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  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); }
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.Cell = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
- var _sorting = require("../utils/sorting");
10
+ var _sorting = require("../../utils/sorting");
11
11
  var _data_grid_cell_popover = require("./data_grid_cell_popover");
12
12
  var _data_grid_cell = require("./data_grid_cell");
13
13
  var _react2 = require("@emotion/react");