@elastic/eui 92.0.0 → 92.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/eui_theme_dark.css +3 -18
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +3 -18
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/es/components/datagrid/body/cell/focus_utils.js +166 -0
- package/es/components/datagrid/body/cell/index.js +11 -0
- package/es/components/datagrid/body/data_grid_body.js +0 -2
- package/es/components/datagrid/body/data_grid_body_custom.js +1 -7
- package/es/components/datagrid/body/data_grid_body_virtualized.js +1 -7
- package/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/es/components/datagrid/body/header/data_grid_header_cell.js +27 -12
- package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +45 -116
- package/es/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/es/components/datagrid/body/header/use_data_grid_header.js +3 -14
- package/es/components/datagrid/data_grid.js +2 -12
- package/es/components/datagrid/utils/focus.js +25 -54
- package/es/components/datagrid/utils/scrolling.js +1 -1
- package/es/components/flyout/flyout_resizable.js +10 -10
- package/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/es/components/resizable_container/helpers.js +5 -6
- package/es/components/resizable_container/resizable_button.js +13 -4
- package/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/es/components/resizable_container/resizable_container.js +28 -22
- package/es/components/steps/step_number.styles.js +6 -7
- package/es/components/tree_view/tree_view.js +9 -2
- package/eui.d.ts +130 -90
- package/i18ntokens.json +108 -72
- package/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/lib/components/datagrid/body/cell/focus_utils.js +174 -0
- package/lib/components/datagrid/body/cell/index.js +32 -0
- package/lib/components/datagrid/body/data_grid_body.js +0 -2
- package/lib/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/lib/components/datagrid/body/header/data_grid_header_cell.js +35 -20
- package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +47 -119
- package/lib/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/lib/components/datagrid/body/header/use_data_grid_header.js +10 -24
- package/lib/components/datagrid/data_grid.js +4 -14
- package/lib/components/datagrid/utils/focus.js +26 -56
- package/lib/components/datagrid/utils/scrolling.js +2 -2
- package/lib/components/flyout/flyout_resizable.js +10 -10
- package/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/lib/components/resizable_container/helpers.js +7 -7
- package/lib/components/resizable_container/resizable_button.js +13 -4
- package/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/lib/components/resizable_container/resizable_container.js +28 -22
- package/lib/components/steps/step_number.styles.js +6 -7
- package/lib/components/tree_view/tree_view.js +9 -2
- package/optimize/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/es/components/datagrid/body/cell/focus_utils.js +153 -0
- package/optimize/es/components/datagrid/body/cell/index.js +11 -0
- package/optimize/es/components/datagrid/body/data_grid_body_custom.js +1 -5
- package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +1 -5
- package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +3 -13
- package/optimize/es/components/datagrid/data_grid.js +2 -12
- package/optimize/es/components/datagrid/utils/focus.js +25 -54
- package/optimize/es/components/datagrid/utils/scrolling.js +1 -1
- package/optimize/es/components/flyout/flyout_resizable.js +10 -10
- package/optimize/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/es/components/resizable_container/helpers.js +5 -6
- package/optimize/es/components/resizable_container/resizable_button.js +5 -2
- package/optimize/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/es/components/resizable_container/resizable_container.js +28 -22
- package/optimize/es/components/steps/step_number.styles.js +6 -7
- package/optimize/es/components/tree_view/tree_view.js +9 -2
- package/optimize/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/lib/components/datagrid/body/cell/focus_utils.js +163 -0
- package/optimize/lib/components/datagrid/body/cell/index.js +32 -0
- package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -6
- package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -6
- package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/optimize/lib/components/datagrid/data_grid.js +4 -14
- package/optimize/lib/components/datagrid/utils/focus.js +26 -56
- package/optimize/lib/components/datagrid/utils/scrolling.js +2 -2
- package/optimize/lib/components/flyout/flyout_resizable.js +10 -10
- package/optimize/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/lib/components/resizable_container/helpers.js +7 -7
- package/optimize/lib/components/resizable_container/resizable_button.js +5 -2
- package/optimize/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/lib/components/resizable_container/resizable_container.js +28 -22
- package/optimize/lib/components/steps/step_number.styles.js +6 -7
- package/optimize/lib/components/tree_view/tree_view.js +9 -2
- package/package.json +1 -1
- package/src/components/datagrid/body/header/_data_grid_header_row.scss +8 -7
- package/test-env/components/aspect_ratio/aspect_ratio.js +1 -1
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/test-env/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/test-env/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/test-env/components/datagrid/body/cell/focus_utils.js +172 -0
- package/test-env/components/datagrid/body/cell/index.js +32 -0
- package/test-env/components/datagrid/body/data_grid_body.js +0 -2
- package/test-env/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/test-env/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/test-env/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +44 -116
- package/test-env/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/test-env/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/test-env/components/datagrid/data_grid.js +4 -14
- package/test-env/components/datagrid/utils/focus.js +26 -56
- package/test-env/components/datagrid/utils/scrolling.js +2 -2
- package/test-env/components/flyout/flyout_resizable.js +10 -10
- package/test-env/components/flyout/flyout_resizable.styles.js +12 -6
- package/test-env/components/resizable_container/helpers.js +7 -7
- package/test-env/components/resizable_container/resizable_button.js +13 -4
- package/test-env/components/resizable_container/resizable_button.styles.js +18 -8
- package/test-env/components/resizable_container/resizable_container.js +28 -22
- package/test-env/components/steps/step_number.styles.js +6 -7
- package/test-env/components/tree_view/tree_view.js +9 -2
- package/es/components/datagrid/body/header/header_is_interactive.js +0 -58
- package/lib/components/datagrid/body/header/header_is_interactive.js +0 -63
- package/optimize/es/components/datagrid/body/header/header_is_interactive.js +0 -53
- package/optimize/lib/components/datagrid/body/header/header_is_interactive.js +0 -61
- package/test-env/components/datagrid/body/header/header_is_interactive.js +0 -61
|
@@ -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
|
|
13
|
-
var _services = require("
|
|
14
|
-
var _accessibility = require("
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
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
|
|
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
|
-
|
|
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), "
|
|
615
|
-
|
|
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
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
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$
|
|
819
|
-
renderCellPopover = _this$
|
|
820
|
-
renderCellValue = _this$
|
|
821
|
-
rowIndex = _this$
|
|
822
|
-
colIndex = _this$
|
|
823
|
-
column = _this$
|
|
824
|
-
columnId = _this$
|
|
825
|
-
columnType = _this$
|
|
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$
|
|
856
|
-
colIndex = _this$
|
|
857
|
-
visibleRowIndex = _this$
|
|
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.
|
|
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
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
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 =
|
|
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
|
|
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
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
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,
|
package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js}
RENAMED
|
@@ -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("
|
|
10
|
-
var _button_icon = require("
|
|
11
|
-
var _button_empty = require("
|
|
12
|
-
var _flex = require("
|
|
13
|
-
var _popover = require("
|
|
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; }
|
package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js}
RENAMED
|
@@ -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("
|
|
11
|
-
var _popover = require("
|
|
12
|
-
var _text = require("
|
|
13
|
-
var _code = require("
|
|
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); }
|
package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js}
RENAMED
|
@@ -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("
|
|
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");
|