@elastic/eui 121.0.0 → 122.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/eui-icons.json +37 -37
  2. package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +8 -2
  3. package/es/components/datagrid/body/cell/data_grid_cell.js +8 -5
  4. package/es/components/datagrid/body/cell/data_grid_cell.styles.js +1 -1
  5. package/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  6. package/es/components/datagrid/body/footer/data_grid_footer_row.js +4 -0
  7. package/es/components/datagrid/body/header/column_resizer.js +74 -87
  8. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -1
  9. package/es/components/datagrid/body/header/data_grid_header_cell.js +1 -0
  10. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +9 -3
  11. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -1
  12. package/es/components/datagrid/controls/keyboard_shortcuts.js +17 -1
  13. package/es/components/datagrid/data_grid.js +2 -0
  14. package/es/components/datagrid/utils/copy_focused_cell.js +34 -0
  15. package/es/components/filter_group/filter_group.a11y.js +1 -1
  16. package/es/components/form/super_select/super_select.js +247 -351
  17. package/es/components/list_item_layout/_list_item_layout.js +12 -0
  18. package/es/components/selectable/selectable_list/selectable_list_item.js +9 -7
  19. package/eui.d.ts +69 -95
  20. package/i18ntokens.json +608 -554
  21. package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +8 -2
  22. package/lib/components/datagrid/body/cell/data_grid_cell.js +8 -5
  23. package/lib/components/datagrid/body/cell/data_grid_cell.styles.js +1 -1
  24. package/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  25. package/lib/components/datagrid/body/footer/data_grid_footer_row.js +4 -0
  26. package/lib/components/datagrid/body/header/column_resizer.js +73 -85
  27. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -1
  28. package/lib/components/datagrid/body/header/data_grid_header_cell.js +1 -0
  29. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +9 -3
  30. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -1
  31. package/lib/components/datagrid/controls/keyboard_shortcuts.js +17 -1
  32. package/lib/components/datagrid/data_grid.js +2 -0
  33. package/lib/components/datagrid/utils/copy_focused_cell.js +39 -0
  34. package/lib/components/filter_group/filter_group.a11y.js +1 -1
  35. package/lib/components/form/super_select/super_select.js +253 -355
  36. package/lib/components/list_item_layout/_list_item_layout.js +12 -0
  37. package/lib/components/selectable/selectable_list/selectable_list_item.js +9 -7
  38. package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +8 -2
  39. package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +5 -4
  40. package/optimize/es/components/datagrid/body/cell/data_grid_cell.styles.js +1 -1
  41. package/optimize/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  42. package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +4 -0
  43. package/optimize/es/components/datagrid/body/header/column_resizer.js +69 -81
  44. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -1
  45. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +1 -0
  46. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +7 -3
  47. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -1
  48. package/optimize/es/components/datagrid/controls/keyboard_shortcuts.js +17 -1
  49. package/optimize/es/components/datagrid/data_grid.js +2 -0
  50. package/optimize/es/components/datagrid/utils/copy_focused_cell.js +34 -0
  51. package/optimize/es/components/filter_group/filter_group.a11y.js +1 -1
  52. package/optimize/es/components/form/super_select/super_select.js +242 -265
  53. package/optimize/es/components/selectable/selectable_list/selectable_list_item.js +9 -7
  54. package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +8 -2
  55. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +5 -4
  56. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.styles.js +1 -1
  57. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  58. package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +4 -0
  59. package/optimize/lib/components/datagrid/body/header/column_resizer.js +69 -79
  60. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -1
  61. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +1 -0
  62. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +7 -3
  63. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -1
  64. package/optimize/lib/components/datagrid/controls/keyboard_shortcuts.js +17 -1
  65. package/optimize/lib/components/datagrid/data_grid.js +2 -0
  66. package/optimize/lib/components/datagrid/utils/copy_focused_cell.js +39 -0
  67. package/optimize/lib/components/filter_group/filter_group.a11y.js +1 -1
  68. package/optimize/lib/components/form/super_select/super_select.js +243 -265
  69. package/optimize/lib/components/selectable/selectable_list/selectable_list_item.js +9 -7
  70. package/package.json +2 -2
  71. package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +8 -2
  72. package/test-env/components/datagrid/body/cell/data_grid_cell.js +8 -5
  73. package/test-env/components/datagrid/body/cell/data_grid_cell.styles.js +1 -1
  74. package/test-env/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  75. package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +4 -0
  76. package/test-env/components/datagrid/body/header/column_resizer.js +69 -79
  77. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +2 -1
  78. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +1 -0
  79. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +9 -3
  80. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -1
  81. package/test-env/components/datagrid/controls/keyboard_shortcuts.js +17 -1
  82. package/test-env/components/datagrid/data_grid.js +2 -0
  83. package/test-env/components/datagrid/utils/copy_focused_cell.js +16 -0
  84. package/test-env/components/filter_group/filter_group.a11y.js +1 -1
  85. package/test-env/components/form/super_select/super_select.js +243 -345
  86. package/test-env/components/list_item_layout/_list_item_layout.js +12 -0
  87. package/test-env/components/selectable/selectable_list/selectable_list_item.js +9 -7
@@ -1,5 +1,5 @@
1
1
  var _excluded = ["children"],
2
- _excluded2 = ["key", "className", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps", "toolTipContent", "toolTipProps"],
2
+ _excluded2 = ["key", "className", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps", "toolTipContent", "toolTipProps", "title"],
3
3
  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "onFocusBadge", "truncationProps", "listboxAriaLabel", "setListOptionRefs"];
4
4
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -93,6 +93,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
93
93
  _truncationProps = option.truncationProps,
94
94
  toolTipContent = option.toolTipContent,
95
95
  toolTipProps = option.toolTipProps,
96
+ title = option.title,
96
97
  rest = _objectWithoutProperties(option, _excluded2);
97
98
  var _this$props2 = _this.props,
98
99
  options = _this$props2.options,
@@ -144,7 +145,6 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
144
145
  // loses focus on selecting an option (due to actively removing it from the list)
145
146
  ,
146
147
  id: rootId("_option-".concat(options.indexOf(option))),
147
- title: hasNativeTruncation && !toolTipContent ? label : undefined,
148
148
  key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label,
149
149
  prepend: option.prepend,
150
150
  append: hasOnFocusBadge ? ___EmotionJSX(React.Fragment, null, option.append, hitEnterBadge) : option.append,
@@ -164,6 +164,12 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
164
164
  contentProps: {
165
165
  className: 'euiComboBoxOption__content'
166
166
  },
167
+ textProps: {
168
+ // `title` must not be set on the option element itself - it would
169
+ // become the option's accessible description, causing screen readers
170
+ // to announce the option name twice
171
+ title: title !== null && title !== void 0 ? title : hasNativeTruncation && !toolTipContent ? label : undefined
172
+ },
167
173
  onClick: function onClick() {
168
174
  if (onOptionClick) {
169
175
  onOptionClick(option);
@@ -1,6 +1,6 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
2
  var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeightsOptions", "rowHeightUtils", "isControlColumn"],
3
- _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
3
+ _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination", "isLastCopyColumn"],
4
4
  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
5
5
  _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -660,6 +660,7 @@ EuiDataGridCellContent.propTypes = {
660
660
  */
661
661
  onChange: PropTypes.func
662
662
  }).isRequired,
663
+ isLastCopyColumn: PropTypes.bool,
663
664
  setCellProps: PropTypes.func.isRequired,
664
665
  setCellContentsRef: PropTypes.func.isRequired,
665
666
  isExpanded: PropTypes.bool.isRequired,
@@ -999,6 +1000,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
999
1000
  rowHeightsOptions = _this$props9.rowHeightsOptions,
1000
1001
  rowManager = _this$props9.rowManager,
1001
1002
  pagination = _this$props9.pagination,
1003
+ _this$props9$isLastCo = _this$props9.isLastCopyColumn,
1004
+ isLastCopyColumn = _this$props9$isLastCo === void 0 ? false : _this$props9$isLastCo,
1002
1005
  rest = _objectWithoutProperties(_this$props9, _excluded2);
1003
1006
  var rowIndex = rest.rowIndex,
1004
1007
  visibleRowIndex = rest.visibleRowIndex,
@@ -1010,7 +1013,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1010
1013
 
1011
1014
  // classNames set by EuiDataGridCellWrapper
1012
1015
  var isControlColumn = cellClasses.includes('euiDataGridRowCell--controlColumn');
1013
- var isLastColumn = cellClasses.includes('euiDataGridRowCell--lastColumn');
1014
1016
  var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
1015
1017
  var _this$state$cellProps2 = this.state.cellProps,
1016
1018
  _ = _this$state$cellProps2.isExpandable,
@@ -1050,7 +1052,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1050
1052
  onKeyDown: this.handleCellKeyDown,
1051
1053
  onMouseEnter: this.onMouseEnter,
1052
1054
  onMouseLeave: this.onMouseLeave
1053
- }), ___EmotionJSX(HandleInteractiveChildren, {
1055
+ }), isControlColumn && tabularCopyMarkers.hiddenNoCopyBoundary, ___EmotionJSX(HandleInteractiveChildren, {
1054
1056
  cellEl: this.cellRef.current,
1055
1057
  updateCellFocusContext: this.updateCellFocusContext,
1056
1058
  renderFocusTrap: !isExpandable
@@ -1066,7 +1068,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
1066
1068
  isControlColumn: isControlColumn,
1067
1069
  rowIndex: rowIndex,
1068
1070
  colIndex: colIndex
1069
- }))), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab, this.state.isFocused && ___EmotionJSX(CellScreenReaderDescription, {
1071
+ }))), isControlColumn ? tabularCopyMarkers.hiddenNoCopyBoundary : isLastCopyColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab, this.state.isFocused && ___EmotionJSX(CellScreenReaderDescription, {
1070
1072
  columnName: (column === null || column === void 0 ? void 0 : column.displayAsText) || this.props.columnId,
1071
1073
  columnIndex: colIndex + 1,
1072
1074
  rowIndex: ariaRowIndex,
@@ -1557,7 +1559,8 @@ EuiDataGridCell.propTypes = {
1557
1559
  * Can be used for, e.g. storing user `gridStyle` in a local storage object.
1558
1560
  */
1559
1561
  onChange: PropTypes.func
1560
- }).isRequired
1562
+ }).isRequired,
1563
+ isLastCopyColumn: PropTypes.bool
1561
1564
  };
1562
1565
  var RenderCellInRow = /*#__PURE__*/memo(function (_ref2) {
1563
1566
  var row = _ref2.row,
@@ -104,7 +104,7 @@ export var euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiTheme
104
104
  var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
105
105
  outlineSelectors = _euiDataGridCellOutli.outline;
106
106
  return {
107
- euiDataGridRowCell: /*#__PURE__*/css("position:relative;", outlineSelectors.show, "{", cellOutline.focusStyles, ";}", outlineSelectors.hover, "{", cellOutline.hoverStyles, ";}", outlineSelectors.focusTrapped, "{", cellOutline.hoverStyles, ";}&>[data-focus-lock-disabled]{", logicalCSS('height', '100%'), ";}&:where(.euiDataGridRowCell--numeric, .euiDataGridRowCell--currency){", logicalTextAlignCSS('right'), ";}&:where(.euiDataGridRowCell--uppercase){text-transform:uppercase;}&:where(.euiDataGridRowCell--lowercase){text-transform:lowercase;}&:where(.euiDataGridRowCell--capitalize){text-transform:capitalize;};label:euiDataGridRowCell;"),
107
+ euiDataGridRowCell: /*#__PURE__*/css("position:relative;", outlineSelectors.show, "{", cellOutline.focusStyles, ";}", outlineSelectors.hover, "{", cellOutline.hoverStyles, ";}", outlineSelectors.focusTrapped, "{", cellOutline.hoverStyles, ";}&>[data-focus-lock-disabled]{", logicalCSS('height', '100%'), ";}&:where(.euiDataGridRowCell--numeric, .euiDataGridRowCell--currency){", logicalTextAlignCSS('right'), ";}&:where(.euiDataGridRowCell--uppercase){text-transform:uppercase;}&:where(.euiDataGridRowCell--lowercase){text-transform:lowercase;}&:where(.euiDataGridRowCell--capitalize){text-transform:capitalize;}&:where(.euiDataGridRowCell--controlColumn){user-select:none;};label:euiDataGridRowCell;"),
108
108
  content: {
109
109
  euiDataGridRowCell__content: _ref,
110
110
  autoHeight: /*#__PURE__*/css(logicalCSS('height', 'auto'), ";;label:autoHeight;"),
@@ -52,6 +52,7 @@ export var CellWrapper = /*#__PURE__*/memo(function (_ref) {
52
52
  getCorrectRowIndex = _useContext.getCorrectRowIndex;
53
53
  var isFirstColumn = colIndex === 0;
54
54
  var isLastColumn = colIndex === visibleColCount - 1;
55
+ var isLastCopyColumn = columns.length > 0 && colIndex === leadingControlColumns.length + columns.length - 1;
55
56
  var isLeadingControlColumn = colIndex < leadingControlColumns.length;
56
57
  var isTrailingControlColumn = colIndex >= leadingControlColumns.length + columns.length;
57
58
  var datacolIndex = colIndex - leadingControlColumns.length;
@@ -82,9 +83,10 @@ export var CellWrapper = /*#__PURE__*/memo(function (_ref) {
82
83
  rowManager: rowManager,
83
84
  popoverContext: popoverContext,
84
85
  pagination: pagination,
85
- cellContext: cellContext
86
+ cellContext: cellContext,
87
+ isLastCopyColumn: isLastCopyColumn
86
88
  };
87
- }, [colIndex, setRowHeight, visibleRowIndex, getCorrectRowIndex, interactiveCellId, style, rowHeightsOptions, rowHeightUtils, rowManager, popoverContext, pagination, cellContext, isFirstColumn, isLastColumn, isLeadingControlColumn, isTrailingControlColumn, textTransform]);
89
+ }, [colIndex, setRowHeight, visibleRowIndex, getCorrectRowIndex, interactiveCellId, style, rowHeightsOptions, rowHeightUtils, rowManager, popoverContext, pagination, cellContext, isFirstColumn, isLastColumn, isLastCopyColumn, isLeadingControlColumn, isTrailingControlColumn, textTransform]);
88
90
  if (isLeadingControlColumn) {
89
91
  var leadingColumn = leadingControlColumns[colIndex];
90
92
  var id = leadingColumn.id,
@@ -41,6 +41,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
41
41
  var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
42
42
  var classes = classNames('euiDataGridFooter', className);
43
43
  var dataTestSubj = classNames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
44
+ var lastCopyColumnIndex = columns.length > 0 ? leadingControlColumns.length + columns.length - 1 : -1;
44
45
  var getCellClasses = useCallback(function (columnIndex, classes) {
45
46
  return classNames('euiDataGridFooterCell', {
46
47
  'euiDataGridRowCell--firstColumn': columnIndex === 0,
@@ -74,6 +75,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
74
75
  width: width,
75
76
  renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
76
77
  isExpandable: false,
78
+ isLastCopyColumn: i === lastCopyColumnIndex,
77
79
  className: getCellClasses(i, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
78
80
  }));
79
81
  }), columns.map(function (_ref3, i) {
@@ -91,6 +93,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
91
93
  renderCellValue: renderCellValue,
92
94
  renderCellPopover: renderCellPopover,
93
95
  isExpandable: true,
96
+ isLastCopyColumn: columnPosition === lastCopyColumnIndex,
94
97
  className: getCellClasses(columnPosition)
95
98
  }));
96
99
  }), trailingControlColumns.map(function (_ref4, i) {
@@ -106,6 +109,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
106
109
  width: width,
107
110
  renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
108
111
  isExpandable: false,
112
+ isLastCopyColumn: colIndex === lastCopyColumnIndex,
109
113
  className: getCellClasses(colIndex, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
110
114
  }));
111
115
  }));
@@ -1,17 +1,9 @@
1
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
3
- function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
4
- function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
5
- function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
6
- function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
7
- function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
8
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
9
- function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
10
- function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
11
- function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
12
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
13
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
14
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
1
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
15
7
  /*
16
8
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
17
9
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,86 +12,81 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
20
12
  * Side Public License, v 1.
21
13
  */
22
14
 
23
- import React, { Component } from 'react';
15
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
24
16
  import PropTypes from "prop-types";
25
- import { RenderWithEuiStylesMemoizer } from '../../../../services';
17
+ import { useEuiMemoizedStyles, useLatest } from '../../../../services';
26
18
  import { logicalStyle } from '../../../../global_styling';
27
19
  import { DragOverlay } from './draggable_columns';
28
20
  import { euiDataGridColumnResizerStyles } from './column_resizer.styles';
29
21
  import { jsx as ___EmotionJSX } from "@emotion/react";
30
22
  var MINIMUM_COLUMN_WIDTH = 40;
31
- export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
32
- function EuiDataGridColumnResizer() {
33
- var _this;
34
- _classCallCheck(this, EuiDataGridColumnResizer);
35
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
36
- args[_key] = arguments[_key];
37
- }
38
- _this = _callSuper(this, EuiDataGridColumnResizer, [].concat(args));
39
- _defineProperty(_this, "state", {
40
- initialX: 0,
41
- offset: 0
42
- });
43
- _defineProperty(_this, "onMouseDown", function (e) {
44
- _this.setState({
45
- initialX: e.pageX
46
- });
47
- window.addEventListener('mouseup', _this.onMouseUp);
48
- window.addEventListener('blur', _this.onMouseUp);
49
- window.addEventListener('mousemove', _this.onMouseMove);
23
+ export var EuiDataGridColumnResizer = function EuiDataGridColumnResizer(_ref) {
24
+ var columnId = _ref.columnId,
25
+ columnWidth = _ref.columnWidth,
26
+ setColumnWidth = _ref.setColumnWidth,
27
+ isLastColumn = _ref.isLastColumn;
28
+ var styles = useEuiMemoizedStyles(euiDataGridColumnResizerStyles);
29
+ var _useState = useState(0),
30
+ _useState2 = _slicedToArray(_useState, 2),
31
+ offset = _useState2[0],
32
+ setOffset = _useState2[1];
33
+ var initialX = useRef(0);
50
34
 
51
- // don't let this action steal focus
52
- e.preventDefault();
53
- });
54
- _defineProperty(_this, "onMouseUp", function () {
55
- var offset = _this.state.offset;
56
- var _this$props = _this.props,
57
- columnId = _this$props.columnId,
58
- columnWidth = _this$props.columnWidth,
59
- setColumnWidth = _this$props.setColumnWidth;
60
- setColumnWidth(columnId, Math.max(MINIMUM_COLUMN_WIDTH, columnWidth + offset));
61
- _this.setState({
62
- offset: 0
63
- });
64
- window.removeEventListener('mouseup', _this.onMouseUp);
65
- window.removeEventListener('blur', _this.onMouseUp);
66
- window.removeEventListener('mousemove', _this.onMouseMove);
67
- });
68
- _defineProperty(_this, "onMouseMove", function (e) {
69
- var columnWidth = _this.props.columnWidth;
70
- _this.setState(function (_ref) {
71
- var initialX = _ref.initialX;
72
- return {
73
- offset: Math.max(e.pageX - initialX, -(columnWidth - MINIMUM_COLUMN_WIDTH))
74
- };
75
- });
76
- });
77
- return _this;
78
- }
79
- _inherits(EuiDataGridColumnResizer, _Component);
80
- return _createClass(EuiDataGridColumnResizer, [{
81
- key: "render",
82
- value: function render() {
83
- var _this2 = this;
84
- var offset = this.state.offset;
85
- var isLastColumn = this.props.isLastColumn;
86
- return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
87
- var styles = stylesMemoizer(euiDataGridColumnResizerStyles);
88
- var cssStyles = [styles.euiDataGridColumnResizer, isLastColumn && styles.isLastColumn, offset && styles.isDragging];
89
- return ___EmotionJSX("div", {
90
- css: cssStyles,
91
- className: "euiDataGridColumnResizer",
92
- "data-test-subj": "dataGridColumnResizer",
93
- style: offset ? logicalStyle('margin-right', "".concat(-offset, "px")) : undefined,
94
- onMouseDown: _this2.onMouseDown
95
- }, ___EmotionJSX(DragOverlay, {
96
- isDragging: !!offset,
97
- cursor: "ew-resize"
98
- }));
99
- });
100
- }
101
- }]);
102
- }(Component);
35
+ // Handlers are bound to `window`, so they must stay stable to be removed
36
+ // and read current values from a ref
37
+ var latest = useLatest({
38
+ columnId: columnId,
39
+ columnWidth: columnWidth,
40
+ setColumnWidth: setColumnWidth,
41
+ offset: offset
42
+ });
43
+ var onMouseMove = useCallback(function (e) {
44
+ var _ref2 = latest.current,
45
+ columnWidth = _ref2.columnWidth;
46
+ setOffset(Math.max(e.pageX - initialX.current, -(columnWidth - MINIMUM_COLUMN_WIDTH)));
47
+ }, [latest]);
48
+ var onMouseUp = useCallback(function () {
49
+ var _ref3 = latest.current,
50
+ columnId = _ref3.columnId,
51
+ columnWidth = _ref3.columnWidth,
52
+ setColumnWidth = _ref3.setColumnWidth,
53
+ offset = _ref3.offset;
54
+ setColumnWidth(columnId, Math.max(MINIMUM_COLUMN_WIDTH, columnWidth + offset));
55
+ setOffset(0);
56
+ window.removeEventListener('mouseup', onMouseUp);
57
+ window.removeEventListener('blur', onMouseUp);
58
+ window.removeEventListener('mousemove', onMouseMove);
59
+ }, [latest, onMouseMove]);
60
+ var onMouseDown = useCallback(function (e) {
61
+ initialX.current = e.pageX;
62
+ window.addEventListener('mouseup', onMouseUp);
63
+ window.addEventListener('blur', onMouseUp);
64
+ window.addEventListener('mousemove', onMouseMove);
65
+
66
+ // don't let this action steal focus
67
+ e.preventDefault();
68
+ }, [onMouseUp, onMouseMove]);
69
+
70
+ // Clean up listeners if unmounted mid-drag
71
+ useEffect(function () {
72
+ return function () {
73
+ window.removeEventListener('mouseup', onMouseUp);
74
+ window.removeEventListener('blur', onMouseUp);
75
+ window.removeEventListener('mousemove', onMouseMove);
76
+ };
77
+ }, [onMouseUp, onMouseMove]);
78
+ var cssStyles = [styles.euiDataGridColumnResizer, isLastColumn && styles.isLastColumn, offset && styles.isDragging];
79
+ return ___EmotionJSX("div", {
80
+ css: cssStyles,
81
+ className: "euiDataGridColumnResizer",
82
+ "data-test-subj": "dataGridColumnResizer",
83
+ style: offset ? logicalStyle('margin-right', "".concat(-offset, "px")) : undefined,
84
+ onMouseDown: onMouseDown
85
+ }, ___EmotionJSX(DragOverlay, {
86
+ isDragging: !!offset,
87
+ cursor: "ew-resize"
88
+ }));
89
+ };
103
90
  EuiDataGridColumnResizer.propTypes = {
104
91
  columnId: PropTypes.string.isRequired,
105
92
  columnWidth: PropTypes.number.isRequired,
@@ -25,7 +25,8 @@ export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
25
25
  id: id,
26
26
  index: index,
27
27
  width: width,
28
- isLastColumn: isLastColumn
28
+ isLastColumn: isLastColumn,
29
+ isControlColumn: true
29
30
  }), ___EmotionJSX(HeaderCellRender, null));
30
31
  });
31
32
  EuiDataGridControlHeaderCell.propTypes = {
@@ -96,6 +96,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
96
96
  id: id,
97
97
  index: index,
98
98
  isLastColumn: isLastColumn,
99
+ isLastCopyColumn: columns.length > 0 ? columns[columns.length - 1].id === id : isLastColumn,
99
100
  width: width,
100
101
  "aria-sort": ariaSort,
101
102
  "aria-labelledby": cellContentId,
@@ -1,4 +1,4 @@
1
- var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
1
+ var _excluded = ["id", "index", "isLastColumn", "isLastCopyColumn", "isControlColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
2
2
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
3
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -34,6 +34,10 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
34
34
  var id = _ref.id,
35
35
  index = _ref.index,
36
36
  isLastColumn = _ref.isLastColumn,
37
+ _ref$isLastCopyColumn = _ref.isLastCopyColumn,
38
+ isLastCopyColumn = _ref$isLastCopyColumn === void 0 ? isLastColumn : _ref$isLastCopyColumn,
39
+ _ref$isControlColumn = _ref.isControlColumn,
40
+ isControlColumn = _ref$isControlColumn === void 0 ? false : _ref$isControlColumn,
37
41
  width = _ref.width,
38
42
  className = _ref.className,
39
43
  children = _ref.children,
@@ -109,18 +113,20 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
109
113
  } : {},
110
114
  "aria-label": renderFocusTrap ? ariaLabel : undefined,
111
115
  "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
112
- }, rest), ___EmotionJSX(HandleInteractiveChildren, {
116
+ }, rest), isControlColumn && tabularCopyMarkers.hiddenNoCopyBoundary, ___EmotionJSX(HandleInteractiveChildren, {
113
117
  cellEl: isDragging ? null : headerEl,
114
118
  renderFocusTrap: isDragging ? false : renderFocusTrap,
115
119
  updateCellFocusContext: updateCellFocusContext,
116
120
  onInteractiveChildrenFound: setInteractiveChildren
117
- }, typeof children === 'function' ? children(renderFocusTrap) : children), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab);
121
+ }, typeof children === 'function' ? children(renderFocusTrap) : children), isControlColumn ? tabularCopyMarkers.hiddenNoCopyBoundary : isLastCopyColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab);
118
122
  };
119
123
  EuiDataGridHeaderCellWrapper.propTypes = {
120
124
  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]).isRequired,
121
125
  id: PropTypes.string.isRequired,
122
126
  index: PropTypes.number.isRequired,
123
127
  isLastColumn: PropTypes.bool.isRequired,
128
+ isLastCopyColumn: PropTypes.bool,
129
+ isControlColumn: PropTypes.bool,
124
130
  width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
125
131
  className: PropTypes.string,
126
132
  "aria-label": PropTypes.any,
@@ -21,6 +21,6 @@ export var euiDataGridHeaderCellWrapperStyles = function euiDataGridHeaderCellWr
21
21
  var _euiDataGridCellOutli2 = euiDataGridCellOutlineSelectors(),
22
22
  outlineSelectors = _euiDataGridCellOutli2.header;
23
23
  return {
24
- euiDataGridHeaderCell: /*#__PURE__*/css("position:relative;display:flex;align-items:center;flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";", outlineSelectors.focus, "{", focusStyles, ";}", outlineSelectors.focusTrapped, "{", hoverStyles, ";}", outlineSelectors.showActions, "{&,&>[data-focus-lock-disabled]{gap:", euiTheme.size.xxs, ";}}&>[data-focus-lock-disabled]{display:flex;align-items:center;", logicalCSS('width', '100%'), ";};label:euiDataGridHeaderCell;")
24
+ euiDataGridHeaderCell: /*#__PURE__*/css("position:relative;display:flex;align-items:center;flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";", outlineSelectors.focus, "{", focusStyles, ";}", outlineSelectors.focusTrapped, "{", hoverStyles, ";}", outlineSelectors.showActions, "{&,&>[data-focus-lock-disabled]{gap:", euiTheme.size.xxs, ";}}&>[data-focus-lock-disabled]{display:flex;align-items:center;", logicalCSS('width', '100%'), ";}&:where(.euiDataGridHeaderCell--controlColumn){user-select:none;};label:euiDataGridHeaderCell;")
25
25
  };
26
26
  };
@@ -29,6 +29,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
29
29
  setIsOpen = _useState2[1];
30
30
  var title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts');
31
31
  var titleId = useGeneratedHtmlId();
32
+ var copyModifier = typeof navigator !== 'undefined' && /Mac|iP(hone|od|ad)/.test(navigator.platform) ? 'Cmd' : 'Ctrl';
32
33
  var styles = useEuiMemoizedStyles(euiDataGridKeyboardShortcutsStyles);
33
34
  var keyboardShortcuts = useMemo(function () {
34
35
  return ___EmotionJSX(EuiPopover, {
@@ -180,9 +181,24 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
180
181
  token: "euiKeyboardShortcuts.escapeDescription",
181
182
  default: "Close cell details and actions"
182
183
  })
184
+ }, {
185
+ title: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("kbd", null, copyModifier === 'Cmd' ? ___EmotionJSX(EuiI18n, {
186
+ token: "euiKeyboardShortcuts.cmd",
187
+ default: "Cmd"
188
+ }) : ___EmotionJSX(EuiI18n, {
189
+ token: "euiKeyboardShortcuts.ctrl",
190
+ default: "Ctrl"
191
+ })), ' ', ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
192
+ token: "euiKeyboardShortcuts.copyTitle",
193
+ default: "C"
194
+ }))),
195
+ description: ___EmotionJSX(EuiI18n, {
196
+ token: "euiKeyboardShortcuts.copyDescription",
197
+ default: "Copy the focused cell value"
198
+ })
183
199
  }]
184
200
  })));
185
- }, [isOpen, title, titleId, styles]);
201
+ }, [isOpen, title, titleId, styles, copyModifier]);
186
202
  return {
187
203
  keyboardShortcuts: keyboardShortcuts
188
204
  };
@@ -43,6 +43,7 @@ import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memor
43
43
  import { DataGridCellPopoverContext, useCellPopover } from './body/cell';
44
44
  import { computeVisibleRows } from './utils/row_count';
45
45
  import { schemaDetectors as providedSchemaDetectors, useMergedSchema } from './utils/data_grid_schema';
46
+ import { useCopyFocusedDataGridCell } from './utils/copy_focused_cell';
46
47
  import { useImperativeGridRef } from './utils/ref';
47
48
  import { emptyControlColumns } from './data_grid_types';
48
49
  import { euiDataGridStyles } from './data_grid.styles';
@@ -259,6 +260,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
259
260
  var showToolbar = !!toolbarVisibility;
260
261
  var _useDataGridKeyboardS = useDataGridKeyboardShortcuts(),
261
262
  keyboardShortcuts = _useDataGridKeyboardS.keyboardShortcuts;
263
+ useCopyFocusedDataGridCell();
262
264
  var _useDataGridFullScree = useDataGridFullScreenSelector(onFullScreenChange),
263
265
  isFullScreen = _useDataGridFullScree.isFullScreen,
264
266
  setIsFullScreen = _useDataGridFullScree.setIsFullScreen,
@@ -0,0 +1,34 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+
9
+ import { useEffect } from 'react';
10
+
11
+ /** Copies the focused data cell value when nothing is selected. */
12
+ export var copyFocusedDataGridCell = function copyFocusedDataGridCell(event) {
13
+ var _window$getSelection, _ref, _cellContent$innerTex;
14
+ if (event.defaultPrevented) return;
15
+ var cell = document.activeElement;
16
+ if (!(cell instanceof HTMLElement)) return;
17
+ if (!cell.classList.contains('euiDataGridRowCell')) return;
18
+ if (cell.classList.contains('euiDataGridRowCell--controlColumn')) return;
19
+ if ((_window$getSelection = window.getSelection()) !== null && _window$getSelection !== void 0 && _window$getSelection.toString()) return;
20
+ if (!event.clipboardData) return;
21
+ var cellContent = cell.querySelector('[data-datagrid-cellcontent]');
22
+ var text = (_ref = (_cellContent$innerTex = cellContent === null || cellContent === void 0 ? void 0 : cellContent.innerText) !== null && _cellContent$innerTex !== void 0 ? _cellContent$innerTex : cellContent === null || cellContent === void 0 ? void 0 : cellContent.textContent) !== null && _ref !== void 0 ? _ref : '';
23
+ if (!text) return;
24
+ event.clipboardData.setData('text/plain', text);
25
+ event.preventDefault();
26
+ };
27
+ export var useCopyFocusedDataGridCell = function useCopyFocusedDataGridCell() {
28
+ useEffect(function () {
29
+ // The handler is static, so the browser dedupes identical listeners.
30
+ // Do not remove on unmount — that would disable copy for remaining grids.
31
+ // Same approach as OverrideCopiedTabularContent.
32
+ document.addEventListener('copy', copyFocusedDataGridCell);
33
+ }, []);
34
+ };
@@ -240,7 +240,7 @@ describe('EuiFilterGroup multiselect example', function () {
240
240
  cy.realPress('Enter');
241
241
  cy.get('input[role="combobox"]').then(function ($input) {
242
242
  var activeOptionId = $input.attr('aria-activedescendant');
243
- cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
243
+ cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. To exclude this option, press Enter.');
244
244
  });
245
245
  cy.realPress('ArrowDown');
246
246
  cy.repeatRealPress('Enter');