@elastic/eui 95.11.0 → 95.12.0

package/lib/services/copy/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OverrideCopiedTabularContent", {
+  enumerable: true,
+  get: function get() {
+    return _tabular_copy.OverrideCopiedTabularContent;
+  }
+});
+Object.defineProperty(exports, "copyToClipboard", {
+  enumerable: true,
+  get: function get() {
+    return _copy_to_clipboard.copyToClipboard;
+  }
+});
+Object.defineProperty(exports, "tabularCopyMarkers", {
+  enumerable: true,
+  get: function get() {
+    return _tabular_copy.tabularCopyMarkers;
+  }
+});
+var _copy_to_clipboard = require("./copy_to_clipboard");
+var _tabular_copy = require("./tabular_copy");

package/lib/services/copy/tabular_copy.js

@@ -0,0 +1,111 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabularCopyMarkers = exports.onTabularCopy = exports.OverrideCopiedTabularContent = exports.CHARS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+/**
+ * Clipboard text cleaning logic
+ */
+
+// Special visually hidden unicode characters that we use to manually clean content
+// and force our own newlines/horizontal tabs
+var CHARS = exports.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
+var onTabularCopy = exports.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
+    (0, _react2.jsx)("span", {
+      className: "euiScreenReaderOnly",
+      "aria-hidden": true,
+      "data-tabular-copy-marker": type
+    }, children)
+  );
+};
+var tabularCopyMarkers = exports.tabularCopyMarkers = {
+  hiddenTab: (0, _react2.jsx)(VisuallyHide, {
+    type: "tab"
+  }, CHARS.TAB),
+  hiddenNewline: (0, _react2.jsx)(VisuallyHide, {
+    type: "newline"
+  }, CHARS.NEWLINE),
+  hiddenWrapperBoundary: (0, _react2.jsx)(VisuallyHide, {
+    type: "boundary"
+  }, CHARS.TABULAR_CONTENT_BOUND),
+  hiddenNoCopyBoundary: (0, _react2.jsx)(VisuallyHide, {
+    type: "no-copy"
+  }, CHARS.NO_COPY_BOUND)
+};
+
+/**
+ * Wrapper setup around table/grid tabular content we want to override/clean up on copy
+ */
+
+var OverrideCopiedTabularContent = exports.OverrideCopiedTabularContent = function OverrideCopiedTabularContent(_ref2) {
+  var children = _ref2.children;
+  (0, _react.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 (0, _react2.jsx)(_react.default.Fragment, null, tabularCopyMarkers.hiddenWrapperBoundary, children, tabularCopyMarkers.hiddenWrapperBoundary);
+};

package/lib/services/index.js

@@ -59,7 +59,6 @@ var _exportNames = {
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
-  copyToClipboard: true,
   dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
@@ -207,12 +206,6 @@ Object.defineProperty(exports, "colorPalette", {
     return _color.colorPalette;
   }
 });
-Object.defineProperty(exports, "copyToClipboard", {
-  enumerable: true,
-  get: function get() {
-    return _copy_to_clipboard.copyToClipboard;
-  }
-});
 Object.defineProperty(exports, "darken", {
   enumerable: true,
   get: function get() {
@@ -588,7 +581,18 @@ Object.keys(_console).forEach(function (key) {
     }
   });
 });
-var _copy_to_clipboard = require("./copy_to_clipboard");
+var _copy = require("./copy");
+Object.keys(_copy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _copy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _copy[key];
+    }
+  });
+});
 var _emotion = require("./emotion");
 Object.keys(_emotion).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/optimize/es/components/basic_table/basic_table.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { formatAuto, formatBoolean, formatDate, formatNumber, formatText, LEFT_ALIGNMENT, RIGHT_ALIGNMENT, SortDirection, RenderWithEuiTheme } from '../../services';
+import { formatAuto, formatBoolean, formatDate, formatNumber, formatText, LEFT_ALIGNMENT, RIGHT_ALIGNMENT, SortDirection, RenderWithEuiTheme, OverrideCopiedTabularContent, tabularCopyMarkers } from '../../services';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
 import { EuiCheckbox } from '../form';
@@ -168,6 +168,10 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         });
       });
     });
+    _defineProperty(_this, "renderCopyChar", function (columnIndex) {
+      var isLastColumn = columnIndex === _this.props.columns.length - 1;
+      return isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab;
+    });
     _defineProperty(_this, "resolveColumnSortDirection", function (column) {
       var sorting = _this.props.sorting;
       var _ref5 = column,
@@ -368,13 +372,13 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading;
       return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
-      }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(EuiTable, {
+      }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiTable, {
         id: this.tableId,
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         css: loading && safariLoadingWorkaround
-      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter()));
+      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
   }, {
     key: "renderTableMobileSort",
@@ -473,7 +477,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("caption", {
         css: euiTableCaptionStyles,
         className: "euiTableCaption"
-      }, ___EmotionJSX(EuiDelayRender, null, captionElement)));
+      }, tabularCopyMarkers.hiddenNoCopyBoundary, ___EmotionJSX(EuiDelayRender, null, captionElement), tabularCopyMarkers.hiddenNoCopyBoundary));
     }
   }, {
     key: "renderTableHead",
@@ -485,7 +489,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var headers = [];
       if (selection) {
         headers.push(___EmotionJSX(EuiTableHeaderCellCheckbox, {
-          key: "_selection_column_h"
+          key: "_selection_column_h",
+          append: this.renderCopyChar(-1)
         }, this.renderSelectAll(false)));
       }
       columns.forEach(function (column, index) {
@@ -500,16 +505,20 @@ export var 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(___EmotionJSX(EuiTableHeaderCell, {
+          headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({}, sharedProps, {
             key: "_actions_h_".concat(index),
-            align: "right",
-            width: width,
-            description: description,
-            mobileOptions: mobileOptions
-          }, name));
+            align: "right"
+          }), name));
           return;
         }
 
@@ -524,13 +533,9 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
             _sorting.onSort = _this3.resolveColumnOnSort(column);
             _sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
-          headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({
+          headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({}, 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;
         }
@@ -553,13 +558,9 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
             sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
         }
-        headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({
+        headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({}, 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 ___EmotionJSX(EuiTableHeader, null, headers);
@@ -725,7 +726,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasSelection: !!selection
       }, ___EmotionJSX(EuiTableRowCell, {
         colSpan: expandedRowColSpan,
-        textOnly: false
+        textOnly: false,
+        append: tabularCopyMarkers.hiddenNewline
       }, itemIdToExpandedRowMap[itemId])) : undefined;
       var rowPropsCallback = this.props.rowProps;
       var rowProps = getRowProps(item, rowPropsCallback);
@@ -764,7 +766,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       };
       return [___EmotionJSX(EuiTableRowCellCheckbox, {
-        key: key
+        key: key,
+        append: this.renderCopyChar(-1)
       }, ___EmotionJSX(EuiI18n, {
         token: "euiBasicTable.selectThisRow",
         default: "Select row {index}",
@@ -833,7 +836,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: hasCustomActions ? 'custom' : true
+        hasActions: hasCustomActions ? 'custom' : true,
+        append: this.renderCopyChar(columnIndex)
       }, ___EmotionJSX(ExpandedItemActions, {
         actions: actualActions,
         actionsDisabled: allDisabled,
@@ -851,7 +855,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = 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",
@@ -860,11 +864,12 @@ export var 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,
@@ -888,10 +893,12 @@ export var 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/es/components/datagrid/body/cell/data_grid_cell.js

@@ -27,7 +27,7 @@ import classNames from 'classnames';
 import React, { Component, createRef, memo, useMemo, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { IS_JEST_ENVIRONMENT } from '../../../../utils';
-import { keys, useEuiMemoizedStyles } from '../../../../services';
+import { keys, tabularCopyMarkers, useEuiMemoizedStyles } from '../../../../services';
 import { EuiScreenReaderOnly } from '../../../accessibility';
 import { useEuiI18n } from '../../../i18n';
 import { EuiTextBlockTruncate } from '../../../text_truncate';
@@ -61,10 +61,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     });
   }, [cellHeightType, isControlColumn]);
   var styles = useEuiMemoizedStyles(euiDataGridRowCellStyles);
-  var cssStyles = [styles.content.euiDataGridRowCell__content].concat(_toConsumableArray(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(_toConsumableArray(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]));
@@ -142,7 +139,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       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,
@@ -334,12 +331,12 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     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
@@ -347,12 +344,12 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       // 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();
@@ -364,6 +361,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     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;
@@ -371,6 +369,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       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;
@@ -416,6 +416,10 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
       var cellClasses = classNames('euiDataGridRowCell', _defineProperty(_defineProperty({}, "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,
@@ -469,10 +473,10 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
+        isControlColumn: isControlColumn,
         rowIndex: rowIndex,
         colIndex: colIndex
-      }))), this.state.isFocused && ___EmotionJSX(CellScreenReaderDescription, {
+      }))), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab, this.state.isFocused && ___EmotionJSX(CellScreenReaderDescription, {
         columnName: (column === null || column === void 0 ? void 0 : column.displayAsText) || this.props.columnId,
         columnIndex: colIndex + 1,
         rowIndex: ariaRowIndex,
@@ -551,6 +555,6 @@ var CellScreenReaderDescription = /*#__PURE__*/memo(function (_ref5) {
     rowIndex: rowIndex
   });
   var enterKeyPrompt = useEuiI18n('euiDataGridCell.expansionEnterPrompt', 'Press the Enter key to expand this cell.');
-  return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : '')));
+  return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, tabularCopyMarkers.hiddenNoCopyBoundary, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : ''), tabularCopyMarkers.hiddenNoCopyBoundary));
 });
 CellScreenReaderDescription.displayName = 'CellScreenReaderDescription';

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

@@ -92,6 +92,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   var cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
   var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
     outlineSelectors = _euiDataGridCellOutli.outline;
@@ -99,9 +100,11 @@ export var euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiTheme
     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;"),
     content: {
       euiDataGridRowCell__content: _ref,
-      controlColumn: /*#__PURE__*/css(logicalCSS('max-height', '100%'), " display:flex;align-items:center;;label:controlColumn;"),
       autoHeight: /*#__PURE__*/css(logicalCSS('height', 'auto'), ";;label:autoHeight;"),
-      defaultHeight: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:defaultHeight;")
+      defaultHeight: /*#__PURE__*/css(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__*/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){", 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/es/components/datagrid/body/data_grid_body_custom.js

@@ -89,6 +89,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -102,6 +103,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
       visibleRowIndex: visibleRows.visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -133,9 +135,10 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       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 = useCallback(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,

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

@@ -149,6 +149,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -163,6 +164,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRowCount,
       visibleRowIndex: visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -285,9 +287,10 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       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 = useMemo(function () {
     return {
       headerRowHeight: headerRowHeight,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -9,8 +9,8 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, memo, useContext } from 'react';
-import classnames from 'classnames';
+import React, { forwardRef, memo, useCallback, useContext } from 'react';
+import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../../services';
 import { EuiDataGridCell, DataGridCellPopoverContext } from '../cell';
 import { euiDataGridFooterStyles } from './data_grid_footer.styles';
@@ -33,19 +33,27 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     _dataTestSubj = _ref['data-test-subj'],
     _ref$visibleRowIndex = _ref.visibleRowIndex,
     visibleRowIndex = _ref$visibleRowIndex === void 0 ? rowIndex : _ref$visibleRowIndex,
+    visibleColCount = _ref.visibleColCount,
     gridStyles = _ref.gridStyles,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiDataGridFooterStyles);
   var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
-  var classes = classnames('euiDataGridFooter', className);
-  var dataTestSubj = classnames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
+  var classes = classNames('euiDataGridFooter', className);
+  var dataTestSubj = classNames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
+  var getCellClasses = useCallback(function (columnIndex, classes) {
+    return classNames('euiDataGridFooterCell', {
+      'euiDataGridRowCell--firstColumn': columnIndex === 0,
+      'euiDataGridRowCell--lastColumn': columnIndex === visibleColCount - 1
+    }, classes);
+  }, [visibleColCount]);
   var popoverContext = useContext(DataGridCellPopoverContext);
   var sharedCellProps = {
     css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    gridStyles: gridStyles
   };
   return ___EmotionJSX("div", _extends({
     ref: ref,
@@ -65,7 +73,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: classnames('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(i, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }), columns.map(function (_ref3, i) {
     var id = _ref3.id;
@@ -82,7 +90,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       renderCellValue: renderCellValue,
       renderCellPopover: renderCellPopover,
       isExpandable: true,
-      className: "euiDataGridFooterCell"
+      className: getCellClasses(columnPosition)
     }));
   }), trailingControlColumns.map(function (_ref4, i) {
     var id = _ref4.id,
@@ -97,7 +105,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: classnames('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(colIndex, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }));
 }));