@elastic/eui 95.11.0 → 95.12.0

package/optimize/es/components/table/table_header_cell_checkbox.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "scope", "style", "width"];
+var _excluded = ["children", "className", "scope", "style", "width", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,6 +22,7 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(_ref
     scope = _ref$scope === void 0 ? 'col' : _ref$scope,
     style = _ref.style,
     width = _ref.width,
+    append = _ref.append,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiTableHeaderCellCheckbox', className);
   var styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
@@ -33,5 +34,5 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(_ref
     style: inlineStyles
   }, rest), ___EmotionJSX("div", {
     className: "euiTableCellContent"
-  }, children));
+  }, children), append);
 };

package/optimize/es/components/table/table_row_cell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions"];
+var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions", "append"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -37,6 +37,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
     _ref$valign = _ref.valign,
     valign = _ref$valign === void 0 ? 'middle' : _ref$valign,
     mobileOptions = _ref.mobileOptions,
+    append = _ref.append,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useEuiTableIsResponsive();
   var styles = useEuiMemoizedStyles(euiTableRowCellStyles);
@@ -76,7 +77,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
         ,
         truncateText: (_mobileOptions$trunca = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.truncateText) !== null && _mobileOptions$trunca !== void 0 ? _mobileOptions$trunca : truncateText,
         textOnly: (_mobileOptions$textOn = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.textOnly) !== null && _mobileOptions$textOn !== void 0 ? _mobileOptions$textOn : textOnly
-      }), (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.render) || children));
+      }), (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.render) || children), append);
     }
   } else {
     // Desktop view
@@ -85,7 +86,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
     } else {
       return ___EmotionJSX(Element, _extends({
         className: cellClasses
-      }, sharedProps), ___EmotionJSX(EuiTableCellContent, sharedContentProps, children));
+      }, sharedProps), ___EmotionJSX(EuiTableCellContent, sharedContentProps, children), append);
     }
   }
 };

package/optimize/es/components/table/table_row_cell_checkbox.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["children", "className", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,6 +18,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableRowCellCheckbox = function EuiTableRowCellCheckbox(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    append = _ref.append,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useEuiTableIsResponsive();
   var styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
@@ -28,5 +29,5 @@ export var EuiTableRowCellCheckbox = function EuiTableRowCellCheckbox(_ref) {
     className: classes
   }, rest), ___EmotionJSX("div", {
     className: "euiTableCellContent"
-  }, children));
+  }, children), append);
 };

package/optimize/es/services/copy/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { copyToClipboard } from './copy_to_clipboard';
+export { tabularCopyMarkers, OverrideCopiedTabularContent } from './tabular_copy';

package/optimize/es/services/copy/tabular_copy.js

@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect } from 'react';
+
+/**
+ * Clipboard text cleaning logic
+ */
+
+// Special visually hidden unicode characters that we use to manually clean content
+// and force our own newlines/horizontal tabs
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CHARS = {
+  NEWLINE: '↵',
+  TAB: '↦',
+  // Use multiple characters to reduce the chances of consumers also using these characters
+  TABULAR_CONTENT_BOUND: '𐘂𐘂',
+  NO_COPY_BOUND: '✄𐘗'
+};
+// This regex finds all content between two bounds
+var noCopyBoundsRegex = new RegExp("".concat(CHARS.NO_COPY_BOUND, "[^").concat(CHARS.NO_COPY_BOUND, "]*").concat(CHARS.NO_COPY_BOUND), 'gs');
+var hasCharsToReplace = function hasCharsToReplace(text) {
+  for (var _i = 0, _Object$values = Object.values(CHARS); _i < _Object$values.length; _i++) {
+    var char = _Object$values[_i];
+    if (text.indexOf(char) >= 0) return true;
+  }
+  return false;
+};
+
+// Strip all existing newlines and replace our special hidden characters
+// with the desired spacing needed to paste cleanly into a spreadsheet
+export var onTabularCopy = function onTabularCopy(event) {
+  var _window$getSelection;
+  if (!event.clipboardData) return;
+  var selectedText = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+  if (!selectedText || !hasCharsToReplace(selectedText)) return;
+  var amendedText = selectedText.split(CHARS.TABULAR_CONTENT_BOUND).map(function (text) {
+    return hasCharsToReplace(text) ? text.replace(/\r?\n/g, '') // remove all other newlines generated by content or block display
+    .replaceAll(CHARS.NEWLINE, '\n') // insert newline for each table/grid row
+    .replace(/\t/g, '') // remove tabs generated by content or automatically by <td> elements
+    .replaceAll(CHARS.TAB, "\t") // insert horizontal tab for each table/grid cell
+    .replace(noCopyBoundsRegex, '') // remove text that should not be copied (e.g. screen reader instructions)
+    : text;
+  }).join('');
+  event.clipboardData.setData('text/plain', amendedText);
+  event.preventDefault();
+};
+
+/**
+ * JSX utils for rendering the hidden marker characters
+ */
+
+var VisuallyHide = function VisuallyHide(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'true' : _ref$type;
+  return (
+    // Hides the characters to both sighted user and screen readers
+    // Sadly, we can't use `hidden` as that hides the chars from the clipboard as well
+    ___EmotionJSX("span", {
+      className: "euiScreenReaderOnly",
+      "aria-hidden": true,
+      "data-tabular-copy-marker": type
+    }, children)
+  );
+};
+export var tabularCopyMarkers = {
+  hiddenTab: ___EmotionJSX(VisuallyHide, {
+    type: "tab"
+  }, CHARS.TAB),
+  hiddenNewline: ___EmotionJSX(VisuallyHide, {
+    type: "newline"
+  }, CHARS.NEWLINE),
+  hiddenWrapperBoundary: ___EmotionJSX(VisuallyHide, {
+    type: "boundary"
+  }, CHARS.TABULAR_CONTENT_BOUND),
+  hiddenNoCopyBoundary: ___EmotionJSX(VisuallyHide, {
+    type: "no-copy"
+  }, CHARS.NO_COPY_BOUND)
+};
+
+/**
+ * Wrapper setup around table/grid tabular content we want to override/clean up on copy
+ */
+
+export var OverrideCopiedTabularContent = function OverrideCopiedTabularContent(_ref2) {
+  var children = _ref2.children;
+  useEffect(function () {
+    // Chrome and webkit browsers work perfectly when passing `onTabularCopy` to a React
+    // `onCopy` prop, but sadly Firefox does not if copying more than just the table/grid
+    // (e.g. Ctrl+A). So we have to set up a global window event listener
+    window.document.addEventListener('copy', onTabularCopy);
+    // Note: Since onCopy is static, we don't have to worry about duplicate
+    // event listeners - it's automatically handled by the browser. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners
+  }, []);
+  return ___EmotionJSX(React.Fragment, null, tabularCopyMarkers.hiddenWrapperBoundary, children, tabularCopyMarkers.hiddenWrapperBoundary);
+};

package/optimize/es/services/index.js

@@ -15,7 +15,7 @@ export { CanvasTextUtils } from './canvas';
 export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteRed, euiPaletteGreen, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
-export { copyToClipboard } from './copy_to_clipboard';
+export * from './copy';
 export * from './emotion';
 export * from './findElement';
 export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';

package/optimize/lib/components/basic_table/basic_table.js

@@ -177,6 +177,10 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         });
       });
     });
+    (0, _defineProperty2.default)(_this, "renderCopyChar", function (columnIndex) {
+      var isLastColumn = columnIndex === _this.props.columns.length - 1;
+      return isLastColumn ? _services.tabularCopyMarkers.hiddenNewline : _services.tabularCopyMarkers.hiddenTab;
+    });
     (0, _defineProperty2.default)(_this, "resolveColumnSortDirection", function (column) {
       var sorting = _this.props.sorting;
       var _ref5 = column,
@@ -377,13 +381,13 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
-      }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_table.EuiTable, {
+      }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
         id: this.tableId,
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         css: loading && _basic_table.safariLoadingWorkaround
-      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter()));
+      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
   }, {
     key: "renderTableMobileSort",
@@ -482,7 +486,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("caption", {
         css: _table2.euiTableCaptionStyles,
         className: "euiTableCaption"
-      }, (0, _react2.jsx)(_delay_render.EuiDelayRender, null, captionElement)));
+      }, _services.tabularCopyMarkers.hiddenNoCopyBoundary, (0, _react2.jsx)(_delay_render.EuiDelayRender, null, captionElement), _services.tabularCopyMarkers.hiddenNoCopyBoundary));
     }
   }, {
     key: "renderTableHead",
@@ -494,7 +498,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var headers = [];
       if (selection) {
         headers.push((0, _react2.jsx)(_table.EuiTableHeaderCellCheckbox, {
-          key: "_selection_column_h"
+          key: "_selection_column_h",
+          append: this.renderCopyChar(-1)
         }, this.renderSelectAll(false)));
       }
       columns.forEach(function (column, index) {
@@ -509,16 +514,20 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           readOnly = _ref8.readOnly,
           description = _ref8.description;
         var columnAlign = align || _this3.getAlignForDataType(dataType);
+        var sharedProps = {
+          width: width,
+          description: description,
+          mobileOptions: mobileOptions,
+          align: columnAlign,
+          append: _this3.renderCopyChar(index)
+        };
 
         // actions column
         if (column.actions) {
-          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, {
+          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({}, sharedProps, {
             key: "_actions_h_".concat(index),
-            align: "right",
-            width: width,
-            description: description,
-            mobileOptions: mobileOptions
-          }, name));
+            align: "right"
+          }), name));
           return;
         }
 
@@ -533,13 +542,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
             _sorting.onSort = _this3.resolveColumnOnSort(column);
             _sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
-          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({
+          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({}, sharedProps, {
             key: "_computed_column_h_".concat(index),
-            align: columnAlign,
-            width: width,
-            mobileOptions: mobileOptions,
-            "data-test-subj": "tableHeaderCell_".concat(typeof name === 'string' ? name : '', "_").concat(index),
-            description: description
+            "data-test-subj": "tableHeaderCell_".concat(typeof name === 'string' ? name : '', "_").concat(index)
           }, _sorting), name));
           return;
         }
@@ -562,13 +567,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
             sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
         }
-        headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({
+        headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({}, sharedProps, {
           key: "_data_h_".concat(String(field), "_").concat(index),
-          align: columnAlign,
-          width: width,
-          mobileOptions: mobileOptions,
-          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index),
-          description: description
+          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index)
         }, sorting), name));
       });
       return (0, _react2.jsx)(_table.EuiTableHeader, null, headers);
@@ -734,7 +735,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasSelection: !!selection
       }, (0, _react2.jsx)(_table.EuiTableRowCell, {
         colSpan: expandedRowColSpan,
-        textOnly: false
+        textOnly: false,
+        append: _services.tabularCopyMarkers.hiddenNewline
       }, itemIdToExpandedRowMap[itemId])) : undefined;
       var rowPropsCallback = this.props.rowProps;
       var rowProps = getRowProps(item, rowPropsCallback);
@@ -773,7 +775,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       };
       return [(0, _react2.jsx)(_table.EuiTableRowCellCheckbox, {
-        key: key
+        key: key,
+        append: this.renderCopyChar(-1)
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiBasicTable.selectThisRow",
         default: "Select row {index}",
@@ -842,7 +845,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: hasCustomActions ? 'custom' : true
+        hasActions: hasCustomActions ? 'custom' : true,
+        append: this.renderCopyChar(columnIndex)
       }, (0, _react2.jsx)(_expanded_item_actions.ExpandedItemActions, {
         actions: actualActions,
         actionsDisabled: allDisabled,
@@ -860,7 +864,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = (0, _objects.get)(item, field);
       var content = contentRenderer(value, item);
-      return this.renderItemCell(item, column, key, content, setScopeRow);
+      return this.renderItemCell(item, column, columnIndex, key, content, setScopeRow);
     }
   }, {
     key: "renderItemComputedCell",
@@ -869,11 +873,12 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var key = "_computed_column_".concat(itemId, "_").concat(columnIndex);
       var contentRenderer = render || this.getRendererForDataType();
       var content = contentRenderer(item);
-      return this.renderItemCell(item, column, key, content, false);
+      return this.renderItemCell(item, column, columnIndex, key, content, false);
     }
   }, {
     key: "renderItemCell",
-    value: function renderItemCell(item, column, key, content, setScopeRow) {
+    value: function renderItemCell(item, column, columnIndex, key, content, setScopeRow) {
+      var _mobileOptions$render, _mobileOptions$header;
       var _ref11 = column,
         align = _ref11.align,
         render = _ref11.render,
@@ -897,10 +902,12 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         textOnly: textOnly || !render,
         setScopeRow: setScopeRow,
         mobileOptions: _objectSpread(_objectSpread({}, mobileOptions), {}, {
-          render: mobileOptions && mobileOptions.render && mobileOptions.render(item),
-          header: mobileOptions && mobileOptions.header === false ? false : name
+          render: mobileOptions === null || mobileOptions === void 0 || (_mobileOptions$render = mobileOptions.render) === null || _mobileOptions$render === void 0 ? void 0 : _mobileOptions$render.call(mobileOptions, item),
+          header: (_mobileOptions$header = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.header) !== null && _mobileOptions$header !== void 0 ? _mobileOptions$header : name
         })
-      }, cellProps, rest), content);
+      }, cellProps, rest, {
+        append: this.renderCopyChar(columnIndex)
+      }), content);
     }
   }, {
     key: "getRendererForDataType",

package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js

@@ -70,10 +70,7 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     });
   }, [cellHeightType, isControlColumn]);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell.euiDataGridRowCellStyles);
-  var cssStyles = [styles.content.euiDataGridRowCell__content].concat((0, _toConsumableArray2.default)(isControlColumn ? [
-  // Control column cells should not be vertically centered (defaultHeight) except
-  // on single rows. They should be top-aligned for auto and lineCount heights
-  styles.content.controlColumn, cellHeightType === 'default' ? styles.content.defaultHeight : styles.content.autoHeight] : [
+  var cssStyles = [styles.content.euiDataGridRowCell__content].concat((0, _toConsumableArray2.default)(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
   // Regular data cells should always inherit height from the row wrapper,
   // except for auto height
   cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
@@ -151,7 +148,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
         var shouldUseHeightsCache = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.isRowHeightOverride(rowIndex, rowHeightsOptions);
-        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount, shouldUseHeightsCache);
+        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount);
         if (shouldUseHeightsCache) {
           var _this$props4 = _this.props,
             columnId = _this$props4.columnId,
@@ -343,12 +340,12 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _this$props$rowHeight3, _this$props$style, _prevProps$style;
+      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _prevProps$rowHeights2, _this$props$rowHeight3, _prevProps$rowHeights3, _this$props$gridStyle, _prevProps$gridStyles, _this$props$gridStyle2, _prevProps$gridStyles2, _this$props$rowHeight4, _this$props$rowHeight5, _this$props$style, _prevProps$style;
       this.recalculateAutoHeight();
-      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight)) {
+      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight) || ((_this$props$rowHeight2 = this.props.rowHeightsOptions) === null || _this$props$rowHeight2 === void 0 || (_this$props$rowHeight2 = _this$props$rowHeight2.rowHeights) === null || _this$props$rowHeight2 === void 0 ? void 0 : _this$props$rowHeight2[this.props.rowIndex]) !== ((_prevProps$rowHeights2 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights2 === void 0 || (_prevProps$rowHeights2 = _prevProps$rowHeights2.rowHeights) === null || _prevProps$rowHeights2 === void 0 ? void 0 : _prevProps$rowHeights2[prevProps.rowIndex]) || ((_this$props$rowHeight3 = this.props.rowHeightsOptions) === null || _this$props$rowHeight3 === void 0 ? void 0 : _this$props$rowHeight3.lineHeight) !== ((_prevProps$rowHeights3 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights3 === void 0 ? void 0 : _prevProps$rowHeights3.lineHeight) || ((_this$props$gridStyle = this.props.gridStyles) === null || _this$props$gridStyle === void 0 ? void 0 : _this$props$gridStyle.fontSize) !== ((_prevProps$gridStyles = prevProps.gridStyles) === null || _prevProps$gridStyles === void 0 ? void 0 : _prevProps$gridStyles.fontSize) || ((_this$props$gridStyle2 = this.props.gridStyles) === null || _this$props$gridStyle2 === void 0 ? void 0 : _this$props$gridStyle2.cellPadding) !== ((_prevProps$gridStyles2 = prevProps.gridStyles) === null || _prevProps$gridStyles2 === void 0 ? void 0 : _prevProps$gridStyles2.cellPadding)) {
         this.recalculateLineHeight();
       }
-      if ((_this$props$rowHeight2 = this.props.rowHeightUtils) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.compensateForLayoutShift && (_this$props$rowHeight3 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight3 !== void 0 && _this$props$rowHeight3.scrollAnchorRow && this.props.colIndex === 0 &&
+      if ((_this$props$rowHeight4 = this.props.rowHeightUtils) !== null && _this$props$rowHeight4 !== void 0 && _this$props$rowHeight4.compensateForLayoutShift && (_this$props$rowHeight5 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight5 !== void 0 && _this$props$rowHeight5.scrollAnchorRow && this.props.colIndex === 0 &&
       // once per row
       this.props.columnId === prevProps.columnId &&
       // if this is still the same column
@@ -356,12 +353,12 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       // if this is still the same row
       ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.top) !== ((_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.top) // if the top position has changed
       ) {
-        var _prevProps$style2, _this$props$style2, _this$props$rowHeight4;
+        var _prevProps$style2, _this$props$style2, _this$props$rowHeight6;
         var previousTop = parseFloat((_prevProps$style2 = prevProps.style) === null || _prevProps$style2 === void 0 ? void 0 : _prevProps$style2.top);
         var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top);
 
         // @ts-ignore We've already checked that this virtualization util is available above
-        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight4 = this.props.rowHeightsOptions) === null || _this$props$rowHeight4 === void 0 ? void 0 : _this$props$rowHeight4.scrollAnchorRow);
+        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight6 = this.props.rowHeightsOptions) === null || _this$props$rowHeight6 === void 0 ? void 0 : _this$props$rowHeight6.scrollAnchorRow);
       }
       if (this.props.popoverContext.popoverIsOpen !== prevProps.popoverContext.popoverIsOpen || this.props.popoverContext.cellLocation !== prevProps.popoverContext.cellLocation || this.props.renderCellPopover !== prevProps.renderCellPopover) {
         this.handleCellPopover();
@@ -373,6 +370,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
+      var _nextProps$gridStyles, _this$props$gridStyle3, _nextProps$gridStyles2, _this$props$gridStyle4;
       if (nextProps.rowIndex !== this.props.rowIndex) return true;
       if (nextProps.visibleRowIndex !== this.props.visibleRowIndex) return true;
       if (nextProps.colIndex !== this.props.colIndex) return true;
@@ -380,6 +378,8 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       if (nextProps.columnType !== this.props.columnType) return true;
       if (nextProps.width !== this.props.width) return true;
       if (nextProps.rowHeightsOptions !== this.props.rowHeightsOptions) return true;
+      if (((_nextProps$gridStyles = nextProps.gridStyles) === null || _nextProps$gridStyles === void 0 ? void 0 : _nextProps$gridStyles.fontSize) !== ((_this$props$gridStyle3 = this.props.gridStyles) === null || _this$props$gridStyle3 === void 0 ? void 0 : _this$props$gridStyle3.fontSize)) return true;
+      if (((_nextProps$gridStyles2 = nextProps.gridStyles) === null || _nextProps$gridStyles2 === void 0 ? void 0 : _nextProps$gridStyles2.cellPadding) !== ((_this$props$gridStyle4 = this.props.gridStyles) === null || _this$props$gridStyle4 === void 0 ? void 0 : _this$props$gridStyle4.cellPadding)) return true;
       if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
       if (nextProps.renderCellPopover !== this.props.renderCellPopover) return true;
       if (nextProps.interactiveCellId !== this.props.interactiveCellId) return true;
@@ -425,6 +425,10 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
       var cellClasses = (0, _classnames.default)('euiDataGridRowCell', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridRowCell--".concat(columnType), columnType), 'euiDataGridRowCell--open', popoverIsOpen), className);
+
+      // classNames set by EuiDataGridCellWrapper
+      var isControlColumn = cellClasses.includes('euiDataGridRowCell--controlColumn');
+      var isLastColumn = cellClasses.includes('euiDataGridRowCell--lastColumn');
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
         _ = _this$state$cellProps2.isExpandable,
@@ -478,10 +482,10 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         setCellContentsRef: this.setCellContentsRef,
         rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
+        isControlColumn: isControlColumn,
         rowIndex: rowIndex,
         colIndex: colIndex
-      }))), this.state.isFocused && (0, _react2.jsx)(CellScreenReaderDescription, {
+      }))), isLastColumn ? _services.tabularCopyMarkers.hiddenNewline : _services.tabularCopyMarkers.hiddenTab, this.state.isFocused && (0, _react2.jsx)(CellScreenReaderDescription, {
         columnName: (column === null || column === void 0 ? void 0 : column.displayAsText) || this.props.columnId,
         columnIndex: colIndex + 1,
         rowIndex: ariaRowIndex,
@@ -559,6 +563,6 @@ var CellScreenReaderDescription = /*#__PURE__*/(0, _react.memo)(function (_ref5)
     rowIndex: rowIndex
   });
   var enterKeyPrompt = (0, _i18n.useEuiI18n)('euiDataGridCell.expansionEnterPrompt', 'Press the Enter key to expand this cell.');
-  return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : '')));
+  return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, _services.tabularCopyMarkers.hiddenNoCopyBoundary, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : ''), _services.tabularCopyMarkers.hiddenNoCopyBoundary));
 });
 CellScreenReaderDescription.displayName = 'CellScreenReaderDescription';

package/optimize/lib/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -96,6 +96,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiDataGridRowCellStyles = exports.euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   var cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
   var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
     outlineSelectors = _euiDataGridCellOutli.outline;
@@ -103,9 +104,11 @@ var euiDataGridRowCellStyles = exports.euiDataGridRowCellStyles = function euiDa
     euiDataGridRowCell: /*#__PURE__*/(0, _react.css)("position:relative;", outlineSelectors.show, "{", cellOutline.focusStyles, ";}", outlineSelectors.hover, "{", cellOutline.hoverStyles, ";}", outlineSelectors.focusTrapped, "{", cellOutline.hoverStyles, ";}&>[data-focus-lock-disabled]{", (0, _global_styling.logicalCSS)('height', '100%'), ";}&:where(.euiDataGridRowCell--numeric, .euiDataGridRowCell--currency){", (0, _global_styling.logicalTextAlignCSS)('right'), ";}&:where(.euiDataGridRowCell--uppercase){text-transform:uppercase;}&:where(.euiDataGridRowCell--lowercase){text-transform:lowercase;}&:where(.euiDataGridRowCell--capitalize){text-transform:capitalize;};label:euiDataGridRowCell;"),
     content: {
       euiDataGridRowCell__content: _ref,
-      controlColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100%'), " display:flex;align-items:center;;label:controlColumn;"),
       autoHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), ";;label:autoHeight;"),
-      defaultHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:defaultHeight;")
+      defaultHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:defaultHeight;"),
+      // Control columns should be vertically centered with the *first line* of text
+      // for both single and multi-line heights (see https://github.com/elastic/eui/issues/7897)
+      controlColumn: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:start;gap:", euiTheme.size.xxs, ";vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;.euiDataGrid--fontSizeSmall &:where(.euiDataGridRowCell__content--defaultHeight){", (0, _global_styling.logicalCSS)('height', '100%'), " align-items:center;}.euiCheckbox:not(:has(label)){display:inline;.euiCheckbox__square{display:inline-flex;vertical-align:text-bottom;@supports (vertical-align: -moz-middle-with-baseline){vertical-align:sub;}}};label:controlColumn;")
     }
   };
 };

package/optimize/lib/components/datagrid/body/data_grid_body_custom.js

@@ -98,6 +98,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -111,6 +112,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
       visibleRowIndex: visibleRows.visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -142,9 +144,10 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       interactiveCellId: interactiveCellId,
       setRowHeight: setRowHeight,
       rowHeightsOptions: rowHeightsOptions,
-      rowHeightUtils: rowHeightUtils
+      rowHeightUtils: rowHeightUtils,
+      gridStyles: gridStyles
     };
-  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils]);
+  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils, gridStyles]);
   var Cell = (0, _react.useCallback)(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,

package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -157,6 +157,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -171,6 +172,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRowCount,
       visibleRowIndex: visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -293,9 +295,10 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       rowHeightUtils: rowHeightUtils,
       rowManager: rowManager,
       pagination: pagination,
-      headerRowHeight: headerRowHeight
+      headerRowHeight: headerRowHeight,
+      gridStyles: gridStyles
     };
-  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight]);
+  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight, gridStyles]);
   var rowWrapperContextValue = (0, _react.useMemo)(function () {
     return {
       headerRowHeight: headerRowHeight,

package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js

@@ -14,7 +14,7 @@ var _services = require("../../../../services");
 var _cell = require("../cell");
 var _data_grid_footer = require("./data_grid_footer.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex", "gridStyles"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex", "visibleColCount", "gridStyles"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -42,19 +42,27 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
     _dataTestSubj = _ref['data-test-subj'],
     _ref$visibleRowIndex = _ref.visibleRowIndex,
     visibleRowIndex = _ref$visibleRowIndex === void 0 ? rowIndex : _ref$visibleRowIndex,
+    visibleColCount = _ref.visibleColCount,
     gridStyles = _ref.gridStyles,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_footer.euiDataGridFooterStyles);
   var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
   var classes = (0, _classnames.default)('euiDataGridFooter', className);
   var dataTestSubj = (0, _classnames.default)('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
+  var getCellClasses = (0, _react.useCallback)(function (columnIndex, classes) {
+    return (0, _classnames.default)('euiDataGridFooterCell', {
+      'euiDataGridRowCell--firstColumn': columnIndex === 0,
+      'euiDataGridRowCell--lastColumn': columnIndex === visibleColCount - 1
+    }, classes);
+  }, [visibleColCount]);
   var popoverContext = (0, _react.useContext)(_cell.DataGridCellPopoverContext);
   var sharedCellProps = {
     css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    gridStyles: gridStyles
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
@@ -74,7 +82,7 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: (0, _classnames.default)('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(i, (0, _classnames.default)('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }), columns.map(function (_ref3, i) {
     var id = _ref3.id;
@@ -91,7 +99,7 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
       renderCellValue: renderCellValue,
       renderCellPopover: renderCellPopover,
       isExpandable: true,
-      className: "euiDataGridFooterCell"
+      className: getCellClasses(columnPosition)
     }));
   }), trailingControlColumns.map(function (_ref4, i) {
     var id = _ref4.id,
@@ -106,7 +114,7 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: (0, _classnames.default)('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(colIndex, (0, _classnames.default)('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }));
 }));