@elastic/eui 95.10.1 → 95.12.0

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

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
@@ -27,10 +28,12 @@ var _focus = require("../../utils/focus");
 var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _focus_utils = require("./focus_utils");
+var _data_grid_cell = require("./data_grid_cell.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "showCellActions", "onExpandClick", "popoverAnchorRef"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeight", "rowHeightUtils", "isControlColumn"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
-  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
+  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
+  _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -51,14 +54,9 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
-    ariaRowIndex = _ref.ariaRowIndex,
     rowHeight = _ref.rowHeight,
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
-    isFocused = _ref.isFocused,
-    showCellActions = _ref.showCellActions,
-    onExpandClick = _ref.onExpandClick,
-    popoverAnchorRef = _ref.popoverAnchorRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
@@ -71,39 +69,26 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'eui-textTruncate': cellHeightType === 'default'
     });
   }, [cellHeightType, isControlColumn]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(RenderTruncatedCellContent, {
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell.euiDataGridRowCellStyles);
+  var cssStyles = [styles.content.euiDataGridRowCell__content].concat((0, _toConsumableArray2.default)(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
+  // Regular data cells should always inherit height from the row wrapper,
+  // except for auto height
+  cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
+  return (0, _react2.jsx)(RenderTruncatedCellContent, {
     hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
     rowHeight: rowHeight
   }, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
-    className: classes
+    className: classes,
+    css: cssStyles
   }, (0, _react2.jsx)(CellElement, (0, _extends2.default)({
     isDetails: false,
     "data-test-subj": "cell-content",
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, cellContext, rest)))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    hidden: !isFocused
-  }, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiDataGridCell.position",
-    default: "{columnId}, column {col}, row {row}",
-    values: {
-      columnId: (column === null || column === void 0 ? void 0 : column.displayAsText) || rest.columnId,
-      col: colIndex + 1,
-      row: ariaRowIndex
-    }
-  }), showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiDataGridCell.expansionEnterPrompt",
-    default: "Press the Enter key to expand this cell."
-  })))), showCellActions && (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
-    rowIndex: rowIndex,
-    colIndex: colIndex,
-    column: column,
-    onExpandClick: onExpandClick,
-    popoverAnchorRef: popoverAnchorRef
-  }));
+  }, cellContext, rest))));
 });
 EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -122,8 +107,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
     (0, _defineProperty2.default)(_this, "state", {
       cellProps: {},
       isFocused: false,
-      isHovered: false,
-      cellTextAlign: 'Left'
+      isHovered: false
     });
     (0, _defineProperty2.default)(_this, "unsubscribeCell", void 0);
     (0, _defineProperty2.default)(_this, "style", null);
@@ -164,7 +148,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
         var shouldUseHeightsCache = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.isRowHeightOverride(rowIndex, rowHeightsOptions);
-        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount, shouldUseHeightsCache);
+        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount);
         if (shouldUseHeightsCache) {
           var _this$props4 = _this.props,
             columnId = _this$props4.columnId,
@@ -205,29 +189,6 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       } else if (_this.contentObserver) {
         _this.contentObserver.disconnect();
       }
-      _this.setCellTextAlign();
-    });
-    (0, _defineProperty2.default)(_this, "setCellTextAlign", function () {
-      if (_this.cellContentsRef) {
-        var columnType = _this.props.columnType;
-        if (!columnType) {
-          // If no schema was set, this is likely a left aligned column
-          _this.setState({
-            cellTextAlign: 'Left'
-          });
-        } else if (columnType === 'numeric' || columnType === 'currency') {
-          // Default EUI schemas that we know set right text align
-          _this.setState({
-            cellTextAlign: 'Right'
-          });
-        } else {
-          // If the consumer is using a custom schema, it may have custom text alignment
-          var textAlign = window.getComputedStyle(_this.cellContentsRef).getPropertyValue('text-align');
-          _this.setState({
-            cellTextAlign: textAlign === 'right' || textAlign === 'end' ? 'Right' : 'Left'
-          });
-        }
-      }
     });
     (0, _defineProperty2.default)(_this, "isExpandable", function () {
       var _this$props$column, _this$state$cellProps;
@@ -256,7 +217,9 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         // Set popover anchor
         var cellAnchorEl = _this.popoverAnchorRef.current;
         setPopoverAnchor(cellAnchorEl);
-        setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
+        // TODO: Potentially switch to `topLeft` based on occlusion with sticky header
+        // @see https://github.com/elastic/eui/issues/7828
+        setPopoverAnchorPosition('downLeft');
 
         // Set popover contents with cell content
         var _this$props5 = _this.props,
@@ -377,12 +340,12 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _this$props$rowHeight3, _this$props$style, _prevProps$style;
+      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _prevProps$rowHeights2, _this$props$rowHeight3, _prevProps$rowHeights3, _this$props$gridStyle, _prevProps$gridStyles, _this$props$gridStyle2, _prevProps$gridStyles2, _this$props$rowHeight4, _this$props$rowHeight5, _this$props$style, _prevProps$style;
       this.recalculateAutoHeight();
-      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight)) {
+      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight) || ((_this$props$rowHeight2 = this.props.rowHeightsOptions) === null || _this$props$rowHeight2 === void 0 || (_this$props$rowHeight2 = _this$props$rowHeight2.rowHeights) === null || _this$props$rowHeight2 === void 0 ? void 0 : _this$props$rowHeight2[this.props.rowIndex]) !== ((_prevProps$rowHeights2 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights2 === void 0 || (_prevProps$rowHeights2 = _prevProps$rowHeights2.rowHeights) === null || _prevProps$rowHeights2 === void 0 ? void 0 : _prevProps$rowHeights2[prevProps.rowIndex]) || ((_this$props$rowHeight3 = this.props.rowHeightsOptions) === null || _this$props$rowHeight3 === void 0 ? void 0 : _this$props$rowHeight3.lineHeight) !== ((_prevProps$rowHeights3 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights3 === void 0 ? void 0 : _prevProps$rowHeights3.lineHeight) || ((_this$props$gridStyle = this.props.gridStyles) === null || _this$props$gridStyle === void 0 ? void 0 : _this$props$gridStyle.fontSize) !== ((_prevProps$gridStyles = prevProps.gridStyles) === null || _prevProps$gridStyles === void 0 ? void 0 : _prevProps$gridStyles.fontSize) || ((_this$props$gridStyle2 = this.props.gridStyles) === null || _this$props$gridStyle2 === void 0 ? void 0 : _this$props$gridStyle2.cellPadding) !== ((_prevProps$gridStyles2 = prevProps.gridStyles) === null || _prevProps$gridStyles2 === void 0 ? void 0 : _prevProps$gridStyles2.cellPadding)) {
         this.recalculateLineHeight();
       }
-      if ((_this$props$rowHeight2 = this.props.rowHeightUtils) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.compensateForLayoutShift && (_this$props$rowHeight3 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight3 !== void 0 && _this$props$rowHeight3.scrollAnchorRow && this.props.colIndex === 0 &&
+      if ((_this$props$rowHeight4 = this.props.rowHeightUtils) !== null && _this$props$rowHeight4 !== void 0 && _this$props$rowHeight4.compensateForLayoutShift && (_this$props$rowHeight5 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight5 !== void 0 && _this$props$rowHeight5.scrollAnchorRow && this.props.colIndex === 0 &&
       // once per row
       this.props.columnId === prevProps.columnId &&
       // if this is still the same column
@@ -390,12 +353,12 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       // if this is still the same row
       ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.top) !== ((_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.top) // if the top position has changed
       ) {
-        var _prevProps$style2, _this$props$style2, _this$props$rowHeight4;
+        var _prevProps$style2, _this$props$style2, _this$props$rowHeight6;
         var previousTop = parseFloat((_prevProps$style2 = prevProps.style) === null || _prevProps$style2 === void 0 ? void 0 : _prevProps$style2.top);
         var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top);
 
         // @ts-ignore We've already checked that this virtualization util is available above
-        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight4 = this.props.rowHeightsOptions) === null || _this$props$rowHeight4 === void 0 ? void 0 : _this$props$rowHeight4.scrollAnchorRow);
+        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight6 = this.props.rowHeightsOptions) === null || _this$props$rowHeight6 === void 0 ? void 0 : _this$props$rowHeight6.scrollAnchorRow);
       }
       if (this.props.popoverContext.popoverIsOpen !== prevProps.popoverContext.popoverIsOpen || this.props.popoverContext.cellLocation !== prevProps.popoverContext.cellLocation || this.props.renderCellPopover !== prevProps.renderCellPopover) {
         this.handleCellPopover();
@@ -407,6 +370,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
+      var _nextProps$gridStyles, _this$props$gridStyle3, _nextProps$gridStyles2, _this$props$gridStyle4;
       if (nextProps.rowIndex !== this.props.rowIndex) return true;
       if (nextProps.visibleRowIndex !== this.props.visibleRowIndex) return true;
       if (nextProps.colIndex !== this.props.colIndex) return true;
@@ -414,6 +378,8 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       if (nextProps.columnType !== this.props.columnType) return true;
       if (nextProps.width !== this.props.width) return true;
       if (nextProps.rowHeightsOptions !== this.props.rowHeightsOptions) return true;
+      if (((_nextProps$gridStyles = nextProps.gridStyles) === null || _nextProps$gridStyles === void 0 ? void 0 : _nextProps$gridStyles.fontSize) !== ((_this$props$gridStyle3 = this.props.gridStyles) === null || _this$props$gridStyle3 === void 0 ? void 0 : _this$props$gridStyle3.fontSize)) return true;
+      if (((_nextProps$gridStyles2 = nextProps.gridStyles) === null || _nextProps$gridStyles2 === void 0 ? void 0 : _nextProps$gridStyles2.cellPadding) !== ((_this$props$gridStyle4 = this.props.gridStyles) === null || _this$props$gridStyle4 === void 0 ? void 0 : _this$props$gridStyle4.cellPadding)) return true;
       if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
       if (nextProps.renderCellPopover !== this.props.renderCellPopover) return true;
       if (nextProps.interactiveCellId !== this.props.interactiveCellId) return true;
@@ -458,7 +424,11 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       var isExpandable = this.isExpandable();
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
-      var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridRowCell--".concat(columnType), columnType), 'euiDataGridRowCell--open', popoverIsOpen), className);
+      var cellClasses = (0, _classnames.default)('euiDataGridRowCell', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridRowCell--".concat(columnType), columnType), 'euiDataGridRowCell--open', popoverIsOpen), className);
+
+      // classNames set by EuiDataGridCellWrapper
+      var isControlColumn = cellClasses.includes('euiDataGridRowCell--controlColumn');
+      var isLastColumn = cellClasses.includes('euiDataGridRowCell--lastColumn');
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
         _ = _this$state$cellProps2.isExpandable,
@@ -488,23 +458,14 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
       }) : undefined;
       return (0, _react2.jsx)(RenderCellInRow, {
         row: row
-      }, (0, _react2.jsx)("div", (0, _extends2.default)({
-        role: "gridcell",
+      }, (0, _react2.jsx)(GridCellDiv, (0, _extends2.default)({}, cellProps, {
+        ref: this.cellRef,
+        columnId: this.props.columnId,
+        columnIndex: this.props.colIndex,
+        rowIndex: rowIndex,
+        visibleRowIndex: this.props.visibleRowIndex,
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused ? 0 : -1,
-        ref: this.cellRef
-      }, cellProps, {
-        "data-test-subj": "dataGridRowCell"
-        // Data attributes to help target specific cells by either data or current cell location
-        ,
-        "data-gridcell-column-id": this.props.columnId // Static column ID name, not affected by column order
-        ,
-        "data-gridcell-column-index": this.props.colIndex // Affected by column reordering
-        ,
-        "data-gridcell-row-index": this.props.rowIndex // Index from data, not affected by sorting or pagination
-        ,
-        "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
-        ,
         onKeyDown: this.handleCellKeyDown,
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave
@@ -518,18 +479,24 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         columnType: columnType,
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
-        onExpandClick: this.handleCellExpansionClick,
-        popoverAnchorRef: this.popoverAnchorRef,
-        showCellActions: showCellActions,
-        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
-        ariaRowIndex: ariaRowIndex,
+        isControlColumn: isControlColumn,
         rowIndex: rowIndex,
         colIndex: colIndex
-      })))));
+      }))), 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,
+        canExpandCell: showCellActions
+      }), showCellActions && (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        column: column,
+        onExpandClick: this.handleCellExpansionClick,
+        popoverAnchorRef: this.popoverAnchorRef
+      })));
     }
   }]);
 }(_react.Component);
@@ -555,4 +522,47 @@ var RenderTruncatedCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref3)
     cloneElement: true
   }, children) : children;
 });
-RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
+RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
+
+/**
+ * Function component utilities for easier hook usage
+ */
+
+var GridCellDiv = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var columnId = _ref4.columnId,
+    columnIndex = _ref4.columnIndex,
+    rowIndex = _ref4.rowIndex,
+    visibleRowIndex = _ref4.visibleRowIndex,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell.euiDataGridRowCellStyles);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref,
+    css: styles.euiDataGridRowCell
+  }, props, {
+    role: "gridcell"
+    // Data attributes to help target specific cells by either data or current cell location
+    ,
+    "data-gridcell-column-id": columnId // Static column ID name, not affected by column order
+    ,
+    "data-gridcell-column-index": columnIndex // Affected by column reordering
+    ,
+    "data-gridcell-row-index": rowIndex // Index from data, not affected by sorting or pagination
+    ,
+    "data-gridcell-visible-row-index": visibleRowIndex // Affected by sorting & pagination
+  }));
+}));
+GridCellDiv.displayName = 'GridCellDiv';
+var CellScreenReaderDescription = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var columnName = _ref5.columnName,
+    columnIndex = _ref5.columnIndex,
+    rowIndex = _ref5.rowIndex,
+    canExpandCell = _ref5.canExpandCell;
+  var cellPosition = (0, _i18n.useEuiI18n)('euiDataGridCell.position', '{columnName}, column {columnIndex}, row {rowIndex}', {
+    columnName: columnName,
+    columnIndex: columnIndex,
+    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, _services.tabularCopyMarkers.hiddenNoCopyBoundary, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : ''), _services.tabularCopyMarkers.hiddenNoCopyBoundary));
+});
+CellScreenReaderDescription.displayName = 'CellScreenReaderDescription';

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

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridRowCellStyles = exports.euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineSelectors = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * 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.
+ */
+var euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var focusColor = euiTheme.colors.primary;
+  var hoverColor = euiTheme.colors.darkShade;
+  var outlineWidth = euiTheme.border.width.thick;
+  var borderRadius = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+    return x / 2;
+  });
+
+  // Note: We use a pseudo element for the 'outline' over any other CSS approaches
+  // (outline, border, box-shadow) because it gives us the most control and reduces
+  // overlap with other cells or inner elements
+  return {
+    borderRadius: borderRadius,
+    focusColor: focusColor,
+    focusStyles: "\n      /* Remove outline as we're handling it manually. Needed to override global styles */\n      &:focus-visible {\n        outline: none;\n      }\n\n      &::after {\n        content: '';\n        /* We want this to be visually on top of cell content but not interactive */\n        z-index: 2;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        border: ".concat(outlineWidth, " solid ").concat(focusColor, ";\n        border-radius: ").concat(borderRadius, ";\n      }\n    "),
+    hoverColor: hoverColor,
+    hoverStyles: "\n      &::after {\n        border-color: ".concat(hoverColor, ";\n      }\n    ")
+  };
+};
+var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSelectors() {
+  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '&';
+  // Focus selectors
+  var focus = ':focus'; // cell has been clicked or keyboard navigated to
+  var isOpen = '.euiDataGridRowCell--open'; // always show when the cell expansion popover is open
+  var isClosing = '[data-keyboard-closing]'; // prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  var isEntered = ':has([data-focus-lock-disabled="false"])'; // cell focus trap has been entered - ideally show the outline still, but grayed out
+
+  // Hover selectors
+  var hover = ':hover'; // hover styles should not supercede focus styles
+  var focusWithin = ':focus-within'; // used by :hover:not() to prevent flash of gray when mouse users are opening/closing the expansion popover via cell action click
+
+  // Cell header specific selectors
+  var headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+
+  // Utils
+  var selectors = function selectors() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return [].concat(args).join(', ');
+  };
+  var is = function is(selectors) {
+    return "".concat(parentSelector, ":is(").concat(selectors, ")");
+  };
+  var not = function not(selectors) {
+    return "".concat(parentSelector, ":not(").concat(selectors, ")");
+  };
+  var hoverNot = function hoverNot(selectors) {
+    return "".concat(parentSelector, ":hover:not(").concat(selectors, ")");
+  };
+  var _ = function _(selectors) {
+    return "".concat(parentSelector).concat(selectors);
+  };
+  return {
+    outline: {
+      show: is(selectors(hover, focus, isOpen, isEntered)),
+      hover: hoverNot(selectors(focus, focusWithin, isOpen)),
+      focusTrapped: _(isEntered)
+    },
+    actions: {
+      hoverZone: hoverNot(selectors(focus, isOpen)),
+      hoverColor: hoverNot(selectors(focus, focusWithin, isOpen)),
+      showAnimation: is(selectors(hover, focus, isOpen, isClosing)),
+      hoverAnimation: hoverNot(selectors(focus, isOpen, isClosing))
+    },
+    header: {
+      focus: is(selectors(focus, focusWithin, headerActionsOpen)),
+      // :focus-within here is primarily intended for when the column actions button has been clicked twice
+      focusTrapped: _(isEntered),
+      hideActions: not(selectors(hover, focusWithin, headerActionsOpen))
+    }
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;"
+} : {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;",
+  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;
+  return {
+    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,
+      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;"),
+      // Control columns should be vertically centered with the *first line* of text
+      // for both single and multi-line heights (see https://github.com/elastic/eui/issues/7897)
+      controlColumn: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:start;gap:", euiTheme.size.xxs, ";vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;.euiDataGrid--fontSizeSmall &:where(.euiDataGridRowCell__content--defaultHeight){", (0, _global_styling.logicalCSS)('height', '100%'), " align-items:center;}.euiCheckbox:not(:has(label)){display:inline;.euiCheckbox__square{display:inline-flex;vertical-align:text-bottom;@supports (vertical-align: -moz-middle-with-baseline){vertical-align:sub;}}};label:controlColumn;")
+    }
+  };
+};

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

@@ -10,11 +10,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../../services");
 var _i18n = require("../../../i18n");
 var _button_icon = require("../../../button/button_icon");
 var _button_empty = require("../../../button/button_empty");
 var _flex = require("../../../flex");
 var _popover = require("../../../popover");
+var _data_grid_cell_actions = require("./data_grid_cell_actions.styles");
 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; }
@@ -32,6 +34,8 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
     column = _ref.column,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex;
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell_actions.euiDataGridCellActionsStyles);
+
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
@@ -43,6 +47,7 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
       default: "Click or hit enter to interact with cell content"
     }, function (expandButtonTitle) {
       return (0, _react2.jsx)(_button_icon.EuiButtonIcon, {
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
@@ -54,12 +59,13 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         title: expandButtonTitle
       });
     });
-  }, [onExpandClick]);
+  }, [onExpandClick, styles]);
   var additionalButtons = (0, _react.useMemo)(function () {
     if (!column || !Array.isArray(column === null || column === void 0 ? void 0 : column.cellActions)) return [];
     var ButtonComponent = function ButtonComponent(props) {
       return (0, _react2.jsx)(_button_icon.EuiButtonIcon, (0, _extends2.default)({}, props, {
         "aria-hidden": true,
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon"
         // Don't allow consumers to override sizes or colors for cell actions on hover/focus
         ,
@@ -84,8 +90,12 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         isExpanded: false
       });
     });
-  }, [column, colIndex, rowIndex]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+  }, [column, colIndex, rowIndex, styles]);
+  return (0, _react2.jsx)("div", {
+    css: styles.euiDataGridRowCell__actionsWrapper,
+    className: "euiDataGridRowCell__actionsWrapper"
+  }, (0, _react2.jsx)("div", {
+    css: styles.euiDataGridRowCell__actions,
     className: "euiDataGridRowCell__actions"
   }, [].concat((0, _toConsumableArray2.default)(additionalButtons), [expandButton])), (0, _react2.jsx)("div", {
     ref: popoverAnchorRef,

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridCellActionsStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid = require("../../data_grid.styles");
+var _data_grid_cell = require("./data_grid_cell.styles");
+var _templateObject;
+/*
+ * 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.
+ */
+var euiDataGridCellActionsStyles = exports.euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = (0, _data_grid.euiDataGridVariables)(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  var borderWidth = euiTheme.border.width.thin;
+  var cellOutline = (0, _data_grid_cell.euiDataGridCellOutlineStyles)(euiThemeContext);
+  var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridRowCell'),
+    cellSelectors = _euiDataGridCellOutli.actions;
+  return {
+    euiDataGridRowCell__actionsWrapper: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('bottom', '100%'), "z-index:", levels.stickyHeader - 1, ";.euiDataGridRowCell[data-gridcell-visible-row-index='0']>&{z-index:", levels.stickyHeader + 1, ";}", cellSelectors.hoverZone, " &{", (0, _global_styling.logicalCSS)('min-width', '50%'), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";};label:euiDataGridRowCell__actionsWrapper;"),
+    euiDataGridRowCell__actions: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;gap:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('width', 'fit-content'), " padding-inline:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(borderWidth)), " background-color:", cellOutline.focusColor, ";color:", euiTheme.colors.emptyShade, ";border:", borderWidth, " solid ", cellOutline.focusColor, ";border-radius:", cellOutline.borderRadius, ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('top', '100%'), " ", (0, _global_styling.logicalCSS)('left', "-".concat(borderWidth)), " ", (0, _global_styling.logicalSizeCSS)((0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+      return x * 2;
+    })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", _global_styling.euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
+    euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
+      return x + y;
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}&.euiDataGridRowCell__expandCell .euiIcon{", (0, _global_styling.logicalCSS)('width', '120%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDataGridRowCell__actionButtonIcon;")
+  };
+};
+var slideUp = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from { transform: scaleY(0); }\n  to { transform: scaleY(1); }\n"])));

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

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
 var _popover = require("../../../popover");
+var _data_grid = require("../../data_grid.styles");
+var _data_grid_cell_popover = require("./data_grid_cell_popover.styles");
 var _text = require("../../../text");
 var _code = require("../../../code");
 var _react2 = require("@emotion/react");
@@ -95,25 +97,23 @@ var useCellPopover = exports.useCellPopover = function useCellPopover() {
   // popover button isn't actually the DOM node we pass to `button`. Otherwise,
   // clicking the expansion cell action triggers an outside click
   var onClickOutside = (0, _react.useCallback)(function (event) {
-    var _popoverAnchor$parent;
-    var cellActions = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent = popoverAnchor.parentElement) === null || _popoverAnchor$parent === void 0 || (_popoverAnchor$parent = _popoverAnchor$parent.parentElement) === null || _popoverAnchor$parent === void 0 ? void 0 : _popoverAnchor$parent.previousElementSibling;
+    var cellActions = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell__actionsWrapper');
     if (!(cellActions !== null && cellActions !== void 0 && cellActions.contains(event.target))) {
       closeCellPopover();
     }
   }, [popoverAnchor, closeCellPopover]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
-      var _popoverAnchor$parent2;
       event.preventDefault();
       event.stopPropagation();
       closeCellPopover();
-      var cell = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent2 = popoverAnchor.parentElement) === null || _popoverAnchor$parent2 === void 0 || (_popoverAnchor$parent2 = _popoverAnchor$parent2.parentElement) === null || _popoverAnchor$parent2 === void 0 ? void 0 : _popoverAnchor$parent2.parentElement;
+      var cell = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell');
 
       // Prevent cell animation flash while focus is being shifted between popover and cell
       cell === null || cell === void 0 || cell.setAttribute('data-keyboard-closing', 'true');
       // Ensure focus is returned to the parent cell, and remove animation stopgap
       requestAnimationFrame(function () {
-        popoverAnchor === null || popoverAnchor === void 0 || popoverAnchor.parentElement.focus();
+        cell === null || cell === void 0 || cell.focus();
         cell === null || cell === void 0 || cell.removeAttribute('data-keyboard-closing');
       });
     }
@@ -130,36 +130,45 @@ var useCellPopover = exports.useCellPopover = function useCellPopover() {
       setCellPopoverProps: setCellPopoverProps
     };
   }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell_popover.euiDataGridCellPopoverStyles);
+  var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_data_grid.euiDataGridVariables),
+    levels = _useEuiMemoizedStyles.levels;
   var cellPopover = (0, _react.useMemo)(function () {
-    var _cellPopoverProps$pan;
+    var _cellPopoverProps$pan, _cell$offsetWidth;
     if (!popoverIsOpen || !popoverAnchor) return null;
+    var cell = popoverAnchor.closest('.euiDataGridRowCell');
 
     // Note that this popover is rendered once at the top grid level, rather than one popover per cell
     return (0, _react2.jsx)(_popover.EuiWrappingPopover, (0, _extends2.default)({
       isOpen: popoverIsOpen,
       display: "block",
       hasArrow: false,
+      attachToAnchor: true // required for https://github.com/elastic/eui/issues/6151
+      ,
       panelPaddingSize: "s",
       anchorPosition: popoverAnchorPosition,
-      repositionToCrossAxis: false
+      repositionToCrossAxis: false,
+      zIndex: levels.cellPopover
     }, cellPopoverProps, {
       focusTrapProps: {
         onClickOutside: onClickOutside,
         clickOutsideDisables: false
       },
-      panelProps: _objectSpread({
+      panelProps: _objectSpread(_objectSpread({
         'data-test-subj': 'euiDataGridExpansionPopover'
-      }, cellPopoverProps.panelProps || {}),
+      }, cellPopoverProps.panelProps || {}), {}, {
+        css: [styles.euiDataGridRowCell__popover, cellPopoverProps.css]
+      }),
       panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
       panelStyle: {
-        maxInlineSize: "min(75vw, max(".concat(popoverAnchor.parentElement.offsetWidth, "px, 400px))"),
+        maxInlineSize: "min(75vw, max(".concat((_cell$offsetWidth = cell === null || cell === void 0 ? void 0 : cell.offsetWidth) !== null && _cell$offsetWidth !== void 0 ? _cell$offsetWidth : 0, "px, 400px))"),
         maxBlockSize: '50vh'
       },
       onKeyDown: onKeyDown,
       button: popoverAnchor,
       closePopover: closeCellPopover
     }), popoverContent);
-  }, [popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
+  }, [styles, levels.cellPopover, popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
   return (0, _react.useMemo)(function () {
     return {
       cellPopoverContext: cellPopoverContext,