@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.
- 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} +56 -209
- 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 +125 -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} +56 -209
- 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} +56 -209
- 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} +56 -209
- 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} +56 -209
- 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
|
@@ -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
|
|
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,
|
|
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 =
|
|
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
|
-
|
|
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), "
|
|
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:
|
|
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 {
|
|
29
|
-
import { keys } from '
|
|
30
|
-
import { EuiScreenReaderOnly } from '
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
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 {
|
|
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), "
|
|
118
|
-
|
|
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
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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$
|
|
322
|
-
renderCellPopover = _this$
|
|
323
|
-
renderCellValue = _this$
|
|
324
|
-
rowIndex = _this$
|
|
325
|
-
colIndex = _this$
|
|
326
|
-
column = _this$
|
|
327
|
-
columnId = _this$
|
|
328
|
-
columnType = _this$
|
|
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$
|
|
359
|
-
colIndex = _this$
|
|
360
|
-
visibleRowIndex = _this$
|
|
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
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
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 =
|
|
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 =
|
|
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
|
-
}))
|
|
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
|
|
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 '
|
|
14
|
-
import { EuiButtonIcon } from '
|
|
15
|
-
import { EuiButtonEmpty } from '
|
|
16
|
-
import { EuiFlexGroup, EuiFlexItem } from '
|
|
17
|
-
import { EuiPopoverFooter } from '
|
|
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 '
|
|
17
|
-
import { EuiWrappingPopover } from '
|
|
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 '
|
|
156
|
-
import { EuiCodeBlock } from '
|
|
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 '
|
|
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";
|