@elastic/eui 95.11.0 → 95.12.0

package/README.md

@@ -1,69 +1 @@
-<img src="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7" alt="" />
-
-# Elastic UI Framework
-
-**The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.**
-
-Check out our [full documentation site][docs] which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions — for other general questions regarding EUI, check out the [Discussions tab](https://github.com/elastic/eui/discussions).
-
-> [!NOTE]
-> We're in the process of migrating this repository to a monorepo structure. You can find `@elastic/eui` files in the [packages/eui](https://github.com/elastic/eui/tree/main/packages/eui) directory.
-
-## Frequently Asked Questions
-
-### What is the Elastic UI Framework?
-
-The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.
-
-The primary goal of this library is to provide reusable UI components that can be used throughout Elastic's web products. As React components, they remove CSS from the process of building UIs. As a single source of truth, the framework allows our designers to make changes to our aesthetic directly in the code. And unit test coverage for the UI components allows us to deliver a stable "API for user interfaces".
-
-### Can I use EUI?
-
-Please see Elastic's licensing FAQ: [I’m using EUI or Elastic Charts in my application outside of Kibana, how does this affect me?][licensing-faq]
-
-### Why is EUI open source?
-
-Many of Elastic's products are open source and rely upon this library to function. The Elastic UI Framework began as a folder of code in Kibana and we decided it could be used beyond that codebase. It exists as an independent library so that patterns can be shared across teams and design standards can be scaled across our organization. Since most of our products are open source, we treat this one similarly as far as public publishing and conversation even if its usage tends to focus more inward towards Elastic itself.
-
-### What is the versioning, release, and upgrade strategy?
-
-We use [semver](https://semver.org/) for versioning and use that to denote breaking changes in EUI upgrades. Traditionally we consider API changes in our prop names or existing component functionality to be a reason for a breaking change, but do not track the renaming of CSS selectors, mixins or other style changes under this same rigor.
-
-Traditionally releases are made weekly against whatever is in the `main` branch and you can upgrade from NPM as you see fit.
-
-### Can I contribute to EUI?
-
-Yes! We welcome community-contributed PRs, especially around feature requests that the EUI team may not have bandwidth to carry out alone. You can find documentation around creating and submitting new components in [our wiki](wiki/contributing-to-eui/).
-
-### What about reporting bugs and feature requests?
-
-Bug reports and feature requests are most welcome, but our roadmap and prioritization are driven primarily by [internal Elastic usage](wiki/contributing-to-eui#how-we-assign-work-and-define-our-roadmap).
-
-Please note that in order to keep our backlog manageable and focused on tasks we intend to complete, feature requests & tech debt issues that are inactive for a year will be auto-closed (bugs will remain open if determined to be reproducible and valid).
-
-This activity counter can be soft reset by commenting on the issue directly, but please do so mindfully. We would ask that you proactively let the EUI team know why this request matters to you or how it impacts you or your users, in order to help us prioritize accordingly.
-
-The EUI team, like everyone else, has a finite amount of time and resources, and it is not humanly possible for us to implement every task or feature requested of us. However, that's where the beauty of open source comes in - if your request is important to you, we strongly encourage you to [contribute code directly to EUI](wiki/contributing-to-eui/) that addresses your issue or request!
-
-<!-- TODO: Delete this question once the Emotion migration is complete -->
-### What is the status of EUI's theming?
-
-The EUI library was previously built upon Sass and is in the process of migrating to CSS-in-JS (specifically [Emotion](https://emotion.sh)). While this work is in progress, we ask for your patience with our in-between state in areas such as documentation and setup.
-
-If you're a Kibana developer with questions around CSS-in-JS usage in Kibana, please check out our [FAQ discussion](https://github.com/elastic/eui/discussions/6828)!
-
-## Wiki
-
-Our wiki docs contain instructions and guidelines on multiple areas of EUI usage and development that are too detailed for an initial README. For more information, see:
-
-- [Consuming EUI](wiki/consuming-eui)
-- [Contributing to EUI](wiki/contributing-to-eui/)
-- [Running EUI locally](wiki/contributing-to-eui/running-eui-locally.md)
-
-## License
-
-[Dual-licensed under Elastic v2 and Server Side Public License, v1][license]. See Elastic's [licensing FAQ][licensing-faq] for details.
-
-[license]: LICENSE.txt
-[licensing-faq]: https://www.elastic.co/pricing/faq/licensing#im-using-eui-or-elastic-charts-in-my-application-outside-of-kibana-how-does-this-affect-me
-[docs]: https://elastic.github.io/eui/
+## See [the top-level repo README](../../#readme) and [wiki](../../wiki) for more information on consuming and contributing to EUI.

package/es/components/basic_table/basic_table.js

@@ -40,7 +40,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { Component, Fragment } from 'react';
 import PropTypes from "prop-types";
 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';
@@ -184,6 +184,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,
@@ -384,13 +388,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",
@@ -489,7 +493,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",
@@ -501,7 +505,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) {
@@ -516,16 +521,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;
         }
 
@@ -540,13 +549,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;
         }
@@ -569,13 +574,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);
@@ -741,7 +742,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);
@@ -780,7 +782,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}",
@@ -849,7 +852,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,
@@ -867,7 +871,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",
@@ -876,11 +880,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,
@@ -904,10 +909,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/es/components/datagrid/body/cell/data_grid_cell.js

@@ -40,7 +40,7 @@ import PropTypes from "prop-types";
 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';
@@ -74,10 +74,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]));
@@ -541,6 +538,57 @@ EuiDataGridCellContent.propTypes = {
   }),
   rowHeightUtils: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   pagination: PropTypes.any,
+  gridStyles: PropTypes.shape({
+    /**
+       * Size of fonts used within the row and column cells
+       * @default m
+       */
+    fontSize: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Defines the padding with the row and column cells
+       * @default m
+       */
+    cellPadding: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Border used for the row and column cells
+       * @default all
+       */
+    border: PropTypes.oneOf(["all", "horizontal", "none"]),
+    /**
+       * If set to true, rows will alternate zebra striping for clarity
+       * @default false
+       */
+    stripes: PropTypes.bool,
+    /**
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * @default shade
+       */
+    header: PropTypes.oneOf(["shade", "underline"]),
+    /**
+       * Visual style for the column footers.
+       * @default overline
+       */
+    footer: PropTypes.oneOf(["shade", "overline", "striped"]),
+    /**
+       * If set to true, the footer row will be sticky
+       * @default true
+       */
+    stickyFooter: PropTypes.bool,
+    /**
+       * Will define what visual style to show on row hover
+       * @default hover
+       */
+    rowHover: PropTypes.oneOf(["highlight", "none"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: PropTypes.shape({}),
+    /**
+       * Optional callback returning the current `gridStyle` config when changes occur from user input (e.g. toolbar display controls).
+       * Can be used for, e.g. storing user `gridStyle` in a local storage object.
+       */
+    onChange: PropTypes.func
+  }).isRequired,
   setCellProps: PropTypes.func.isRequired,
   setCellContentsRef: PropTypes.func.isRequired,
   isExpanded: PropTypes.bool.isRequired,
@@ -608,7 +656,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,
@@ -800,12 +848,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
@@ -813,12 +861,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();
@@ -830,6 +878,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;
@@ -837,6 +886,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;
@@ -882,6 +933,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,
@@ -935,10 +990,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,
@@ -1346,7 +1401,58 @@ EuiDataGridCell.propTypes = {
   rowManager: PropTypes.shape({
     getRow: PropTypes.func.isRequired
   }),
-  pagination: PropTypes.any
+  pagination: PropTypes.any,
+  gridStyles: PropTypes.shape({
+    /**
+       * Size of fonts used within the row and column cells
+       * @default m
+       */
+    fontSize: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Defines the padding with the row and column cells
+       * @default m
+       */
+    cellPadding: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Border used for the row and column cells
+       * @default all
+       */
+    border: PropTypes.oneOf(["all", "horizontal", "none"]),
+    /**
+       * If set to true, rows will alternate zebra striping for clarity
+       * @default false
+       */
+    stripes: PropTypes.bool,
+    /**
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * @default shade
+       */
+    header: PropTypes.oneOf(["shade", "underline"]),
+    /**
+       * Visual style for the column footers.
+       * @default overline
+       */
+    footer: PropTypes.oneOf(["shade", "overline", "striped"]),
+    /**
+       * If set to true, the footer row will be sticky
+       * @default true
+       */
+    stickyFooter: PropTypes.bool,
+    /**
+       * Will define what visual style to show on row hover
+       * @default hover
+       */
+    rowHover: PropTypes.oneOf(["highlight", "none"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: PropTypes.shape({}),
+    /**
+       * Optional callback returning the current `gridStyle` config when changes occur from user input (e.g. toolbar display controls).
+       * Can be used for, e.g. storing user `gridStyle` in a local storage object.
+       */
+    onChange: PropTypes.func
+  }).isRequired
 };
 var RenderCellInRow = /*#__PURE__*/memo(function (_ref2) {
   var row = _ref2.row,
@@ -1418,7 +1524,7 @@ 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.propTypes = {
   columnName: PropTypes.string.isRequired,

package/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/es/components/datagrid/body/data_grid_body_custom.js

@@ -102,6 +102,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -115,6 +116,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
       visibleRowIndex: visibleRows.visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -146,9 +148,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/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -154,6 +154,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -168,6 +169,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRowCount,
       visibleRowIndex: visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -290,9 +292,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/es/components/datagrid/body/footer/data_grid_footer_row.js

@@ -1,4 +1,4 @@
-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"];
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -10,8 +10,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * 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';
@@ -34,19 +34,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,
@@ -66,7 +74,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;
@@ -83,7 +91,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,
@@ -98,7 +106,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))
     }));
   }));
 }));