@elastic/eui 95.11.0 → 95.12.0

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

@@ -82,10 +82,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(_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]));
@@ -549,6 +546,57 @@ EuiDataGridCellContent.propTypes = {
   }),
   rowHeightUtils: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
   pagination: _propTypes.default.any,
+  gridStyles: _propTypes.default.shape({
+    /**
+       * Size of fonts used within the row and column cells
+       * @default m
+       */
+    fontSize: _propTypes.default.oneOf(["s", "m", "l"]),
+    /**
+       * Defines the padding with the row and column cells
+       * @default m
+       */
+    cellPadding: _propTypes.default.oneOf(["s", "m", "l"]),
+    /**
+       * Border used for the row and column cells
+       * @default all
+       */
+    border: _propTypes.default.oneOf(["all", "horizontal", "none"]),
+    /**
+       * If set to true, rows will alternate zebra striping for clarity
+       * @default false
+       */
+    stripes: _propTypes.default.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.default.oneOf(["shade", "underline"]),
+    /**
+       * Visual style for the column footers.
+       * @default overline
+       */
+    footer: _propTypes.default.oneOf(["shade", "overline", "striped"]),
+    /**
+       * If set to true, the footer row will be sticky
+       * @default true
+       */
+    stickyFooter: _propTypes.default.bool,
+    /**
+       * Will define what visual style to show on row hover
+       * @default hover
+       */
+    rowHover: _propTypes.default.oneOf(["highlight", "none"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: _propTypes.default.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.default.func
+  }).isRequired,
   setCellProps: _propTypes.default.func.isRequired,
   setCellContentsRef: _propTypes.default.func.isRequired,
   isExpanded: _propTypes.default.bool.isRequired,
@@ -616,7 +664,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,
@@ -808,12 +856,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
@@ -821,12 +869,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();
@@ -838,6 +886,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;
@@ -845,6 +894,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;
@@ -890,6 +941,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', _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,
@@ -943,10 +998,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,
@@ -1353,7 +1408,58 @@ EuiDataGridCell.propTypes = {
   rowManager: _propTypes.default.shape({
     getRow: _propTypes.default.func.isRequired
   }),
-  pagination: _propTypes.default.any
+  pagination: _propTypes.default.any,
+  gridStyles: _propTypes.default.shape({
+    /**
+       * Size of fonts used within the row and column cells
+       * @default m
+       */
+    fontSize: _propTypes.default.oneOf(["s", "m", "l"]),
+    /**
+       * Defines the padding with the row and column cells
+       * @default m
+       */
+    cellPadding: _propTypes.default.oneOf(["s", "m", "l"]),
+    /**
+       * Border used for the row and column cells
+       * @default all
+       */
+    border: _propTypes.default.oneOf(["all", "horizontal", "none"]),
+    /**
+       * If set to true, rows will alternate zebra striping for clarity
+       * @default false
+       */
+    stripes: _propTypes.default.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.default.oneOf(["shade", "underline"]),
+    /**
+       * Visual style for the column footers.
+       * @default overline
+       */
+    footer: _propTypes.default.oneOf(["shade", "overline", "striped"]),
+    /**
+       * If set to true, the footer row will be sticky
+       * @default true
+       */
+    stickyFooter: _propTypes.default.bool,
+    /**
+       * Will define what visual style to show on row hover
+       * @default hover
+       */
+    rowHover: _propTypes.default.oneOf(["highlight", "none"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: _propTypes.default.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.default.func
+  }).isRequired
 };
 var RenderCellInRow = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var row = _ref2.row,
@@ -1425,7 +1531,7 @@ 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.propTypes = {
   columnName: _propTypes.default.string.isRequired,

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

@@ -109,6 +109,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -122,6 +123,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
       visibleRowIndex: visibleRows.visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -153,9 +155,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/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -161,6 +161,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -175,6 +176,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRowCount,
       visibleRowIndex: visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
@@ -297,9 +299,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/lib/components/datagrid/body/footer/data_grid_footer_row.js

@@ -11,7 +11,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
@@ -43,19 +43,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 = _objectWithoutProperties(_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", _extends({
     ref: ref,
@@ -75,7 +83,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;
@@ -92,7 +100,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,
@@ -107,7 +115,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))
     }));
   }));
 }));

package/lib/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -22,7 +22,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 var EuiDataGridControlHeaderCell = exports.EuiDataGridControlHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlColumn = _ref.controlColumn,
-    index = _ref.index;
+    index = _ref.index,
+    visibleColCount = _ref.visibleColCount;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -31,11 +32,13 @@ var EuiDataGridControlHeaderCell = exports.EuiDataGridControlHeaderCell = /*#__P
     className: (0, _classnames.default)('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width
+    width: width,
+    visibleColCount: visibleColCount
   }), (0, _react2.jsx)(HeaderCellRender, null));
 });
 EuiDataGridControlHeaderCell.propTypes = {
   index: _propTypes.default.number.isRequired,
+  visibleColCount: _propTypes.default.number.isRequired,
   controlColumn: _propTypes.default.shape({
     /**
        * Used as the React `key` when rendering content

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -47,6 +47,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
+    visibleColCount = _ref.visibleColCount,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     sorting = _ref.sorting,
@@ -131,11 +132,12 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
    */
   var classes = (0, _classnames2.default)(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
-  var contentStyles = [styles.euiDataGridHeaderCell__content, columnType === 'numeric' || columnType === 'currency' ? styles.right : styles.left];
+  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
     index: index,
+    visibleColCount: visibleColCount,
     width: width,
     "aria-sort": ariaSort,
     hasActionsPopover: showColumnActions,

package/lib/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -24,8 +24,6 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
     header = _euiDataGridCellOutli.header;
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
-    // Overwrite inherited 'center' styles from <button>
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),

package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -13,7 +13,7 @@ var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
+var _excluded = ["id", "index", "visibleColCount", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -41,6 +41,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(_ref) {
   var id = _ref.id,
     index = _ref.index,
+    visibleColCount = _ref.visibleColCount,
     width = _ref.width,
     className = _ref.className,
     children = _ref.children,
@@ -96,6 +97,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
       openActionsPopover === null || openActionsPopover === void 0 || openActionsPopover();
     }
   }, [hasActionsPopover, openActionsPopover, renderFocusTrap, headerEl]);
+  var isLastColumn = index === visibleColCount - 1;
   return (0, _react2.jsx)("div", _extends({
     role: "columnheader",
     ref: setHeaderEl,
@@ -117,12 +119,13 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     updateCellFocusContext: updateCellFocusContext,
     renderFocusTrap: renderFocusTrap,
     onInteractiveChildrenFound: setInteractiveChildren
-  }, typeof children === 'function' ? children(renderFocusTrap) : children));
+  }, typeof children === 'function' ? children(renderFocusTrap) : children), isLastColumn ? _services.tabularCopyMarkers.hiddenNewline : _services.tabularCopyMarkers.hiddenTab);
 };
 EuiDataGridHeaderCellWrapper.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]).isRequired,
   id: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
+  visibleColCount: _propTypes.default.number.isRequired,
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.any,

package/lib/components/datagrid/body/header/data_grid_header_row.js

@@ -13,7 +13,7 @@ var _data_grid_control_header_cell = require("./data_grid_control_header_cell");
 var _data_grid_header_cell = require("./data_grid_header_cell");
 var _data_grid_header_row = require("./data_grid_header_row.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "visibleColCount", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +38,7 @@ var EuiDataGridHeaderRow = exports.EuiDataGridHeaderRow = /*#__PURE__*/(0, _reac
     columnWidths = props.columnWidths,
     defaultColumnWidth = props.defaultColumnWidth,
     setColumnWidth = props.setColumnWidth,
+    visibleColCount = props.visibleColCount,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
     sorting = props.sorting,
@@ -59,6 +60,7 @@ var EuiDataGridHeaderRow = exports.EuiDataGridHeaderRow = /*#__PURE__*/(0, _reac
     return (0, _react2.jsx)(_data_grid_control_header_cell.EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
+      visibleColCount: visibleColCount,
       controlColumn: controlColumn
     });
   }), columns.map(function (column, index) {
@@ -70,6 +72,7 @@ var EuiDataGridHeaderRow = exports.EuiDataGridHeaderRow = /*#__PURE__*/(0, _reac
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -80,6 +83,7 @@ var EuiDataGridHeaderRow = exports.EuiDataGridHeaderRow = /*#__PURE__*/(0, _reac
     return (0, _react2.jsx)(_data_grid_control_header_cell.EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index + leadingControlColumns.length + columns.length,
+      visibleColCount: visibleColCount,
       controlColumn: controlColumn
     });
   }));

package/lib/components/datagrid/data_grid.js

@@ -383,7 +383,7 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     role: "grid",
     "aria-rowcount": rowCount,
     id: gridId
-  }, wrappingDivFocusProps, gridAriaProps), (0, _react2.jsx)(_body.EuiDataGridBody, {
+  }, wrappingDivFocusProps, gridAriaProps), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_body.EuiDataGridBody, {
     columns: orderedVisibleColumns,
     visibleColCount: visibleColCount,
     leadingControlColumns: leadingControlColumns,
@@ -411,7 +411,7 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
     renderCustomGridBody: renderCustomGridBody
-  })), showPagination && props['aria-labelledby'] && (0, _react2.jsx)("p", {
+  }))), showPagination && props['aria-labelledby'] && (0, _react2.jsx)("p", {
     id: ariaLabelledById,
     hidden: true
   }, ariaLabelledBy), showPagination && (0, _react2.jsx)(_pagination2.EuiDataGridPagination, _extends({}, pagination, {