@elastic/eui 95.10.0 → 95.11.0

package/optimize/es/components/datagrid/utils/scrolling.styles.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+export var euiDataGridScrollBarStyles = function euiDataGridScrollBarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Note that 'borders' *must* be rendered with inset box-shadow, because actual
+  // `border` CSS will affect the relative position of the child scroll bar overlays
+  // and cause them to be off by the width of the border
+  var borderWidth = euiTheme.border.width.thin;
+  var borderColor = euiTheme.border.color;
+  return {
+    euiDataGrid__scrollOverlay: /*#__PURE__*/css("position:absolute;inset:0;", logicalCSS('top', "-".concat(borderWidth)), "pointer-events:none;box-shadow:inset 0 0 0 ", borderWidth, " ", borderColor, ";.euiDataGrid--bordersHorizontal &{box-shadow:inset 0 -", mathWithUnits(borderWidth, function (x) {
+      return x * 2;
+    }), " 0 -", borderWidth, " ", borderColor, ";};label:euiDataGrid__scrollOverlay;"),
+    // Ensure the horizontal scrollbar has a top border
+    euiDataGrid__scrollBarOverlayBottom: /*#__PURE__*/css("position:absolute;inset-inline:0;", logicalCSS('height', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayBottom;"),
+    // Ensure the vertical scrollbar has a left border
+    euiDataGrid__scrollBarOverlayRight: /*#__PURE__*/css("position:absolute;", logicalCSS('width', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayRight;")
+    // Note: Scroll bar border positions are set via JS inline style, since
+    // JS has access to the exact OS scrollbar width/height and CSS doesn't
+  };
+};

package/optimize/es/components/flyout/flyout_resizable.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,10 +29,13 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     side = _ref$side === void 0 ? 'right' : _ref$side,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasOverlay = type === 'overlay' && ownFocus;
   var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
   var getFlyoutMinMaxWidth = useCallback(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -136,6 +139,7 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     maxWidth: maxWidth,
     side: side,
     type: type,
+    ownFocus: ownFocus,
     ref: setRefs
   }), ___EmotionJSX(EuiResizableButton, {
     isHorizontal: true,

package/optimize/es/components/flyout/flyout_resizable.styles.js

@@ -10,6 +10,30 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;"
+} : {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;"
+} : {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;"
+} : {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1gfwqnd-euiFlyoutResizableButton",
   styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
@@ -17,17 +41,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref,
+    euiFlyoutResizableButton: _ref4,
     overlay: {
       left: /*#__PURE__*/css(logicalCSS('right', 0), ";;label:left;"),
       right: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:right;")
     },
     push: {
-      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thick)), ";;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
+    },
+    noOverlay: {
+      noOverlay: _ref3,
+      left: _ref2,
+      right: _ref
     }
   };
 };

package/optimize/es/components/popover/popover.js

@@ -421,7 +421,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = ___EmotionJSX(EuiPortal, {
+        panel = ___EmotionJSX(EuiPortal, insert && {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
           clickOutsideDisables: true,

package/optimize/es/components/text/text.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
+var _excluded = ["component", "size", "color", "grow", "textAlign", "children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,13 +12,15 @@ var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
 import React from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
-import { euiTextStyles } from './text.styles';
 import { EuiTextColor } from './text_color';
 import { EuiTextAlign } from './text_align';
+import { euiTextStyles } from './text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 export var EuiText = function EuiText(_ref) {
-  var _ref$size = _ref.size,
+  var _ref$component = _ref.component,
+    component = _ref$component === void 0 ? 'div' : _ref$component,
+    _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     color = _ref.color,
     _ref$grow = _ref.grow,
@@ -30,12 +32,14 @@ export var EuiText = function EuiText(_ref) {
   var styles = useEuiMemoizedStyles(euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = classNames('euiText', className);
-  var text = ___EmotionJSX("div", _extends({
+  var Component = component;
+  var text = ___EmotionJSX(Component, _extends({
     css: cssStyles,
     className: classes
   }, rest), children);
   if (color) {
     text = ___EmotionJSX(EuiTextColor, {
+      component: component,
       color: color,
       className: classes,
       cloneElement: true
@@ -43,6 +47,7 @@ export var EuiText = function EuiText(_ref) {
   }
   if (textAlign) {
     text = ___EmotionJSX(EuiTextAlign, {
+      component: component,
       textAlign: textAlign,
       className: classes,
       cloneElement: true

package/optimize/es/components/text/text_align.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "textAlign", "cloneElement"];
+var _excluded = ["children", "component", "textAlign", "cloneElement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -18,6 +18,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'right', 'center'];
 export var EuiTextAlign = function EuiTextAlign(_ref) {
   var children = _ref.children,
+    _ref$component = _ref.component,
+    Component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$textAlign = _ref.textAlign,
     textAlign = _ref$textAlign === void 0 ? 'left' : _ref$textAlign,
     _ref$cloneElement = _ref.cloneElement,
@@ -30,6 +32,6 @@ export var EuiTextAlign = function EuiTextAlign(_ref) {
   if ( /*#__PURE__*/isValidElement(children) && cloneElement) {
     return cloneElementWithCss(children, props);
   } else {
-    return ___EmotionJSX("div", props, children);
+    return ___EmotionJSX(Component, props, children);
   }
 };

package/optimize/es/components/text/text_color.js

@@ -24,7 +24,7 @@ export var EuiTextColor = function EuiTextColor(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$component = _ref.component,
-    component = _ref$component === void 0 ? 'span' : _ref$component,
+    Component = _ref$component === void 0 ? 'span' : _ref$component,
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     style = _ref.style,
@@ -49,7 +49,6 @@ export var EuiTextColor = function EuiTextColor(_ref) {
       style: childrenStyle
     }));
   } else {
-    var Component = component;
     return ___EmotionJSX(Component, props, children);
   }
 };

package/optimize/es/components/text/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -705,7 +705,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           var hasCustomActions = columnActions.some(function (action) {
             return !!action.render;
           });
-          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions));
+          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions));
           // A table theoretically could have both custom and default action items
           // If it has both, default action mobile row styles take precedence over custom
           hasActions = !hasActions && hasCustomActions ? 'custom' : true;
@@ -794,7 +794,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderItemActionsCell",
-    value: function renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions) {
+    value: function renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions) {
       // Disable all actions if any row(s) are selected
       var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
@@ -831,7 +831,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
               actions: column.actions,
               actionsDisabled: allDisabled,
               itemId: itemId,
-              item: item
+              item: item,
+              displayedRowIndex: rowIndex
             });
           }
         });

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

@@ -30,6 +30,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     itemId = _ref.itemId,
     item = _ref.item,
     actionsDisabled = _ref.actionsDisabled,
+    displayedRowIndex = _ref.displayedRowIndex,
     className = _ref.className;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -38,6 +39,11 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
   var closePopover = (0, _react.useCallback)(function () {
     return setPopoverOpen(false);
   }, []);
+  var allActionsTooltip = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsTooltip', 'All actions');
+  var allActionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActions', 'All actions, row {index}', {
+    index: displayedRowIndex + 1
+  });
+  var allActionsButtonDisabledAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsDisabled', 'Individual item actions are disabled when rows are being selected.');
   var controls = (0, _react.useMemo)(function () {
     return actions.reduce(function (controls, action, index) {
       var _action$available, _action$available2;
@@ -88,37 +94,24 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
       return controls;
     }, []);
   }, [actions, actionsDisabled, item, closePopover]);
-  var popoverButton = (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
-    defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
-  }, function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-      allActions = _ref3[0],
-      allActionsDisabled = _ref3[1];
-    return (0, _react2.jsx)(_button.EuiButtonIcon, {
-      className: className,
-      "aria-label": actionsDisabled ? allActionsDisabled : allActions,
-      title: actionsDisabled ? allActionsDisabled : undefined,
-      iconType: "boxesHorizontal",
-      color: "text",
-      isDisabled: actionsDisabled,
-      onClick: function onClick() {
-        return setPopoverOpen(function (isOpen) {
-          return !isOpen;
-        });
-      },
-      "data-test-subj": "euiCollapsedItemActionsButton"
-    });
-  });
-  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiCollapsedItemActions.allActions",
-    default: "All actions"
-  }, function (allActions) {
-    return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: allActions,
-      delay: "long"
-    }, popoverButton);
+  var popoverButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    className: className,
+    "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
+    title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
+    iconType: "boxesHorizontal",
+    color: "text",
+    isDisabled: actionsDisabled,
+    onClick: function onClick() {
+      return setPopoverOpen(function (isOpen) {
+        return !isOpen;
+      });
+    },
+    "data-test-subj": "euiCollapsedItemActionsButton"
   });
+  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: allActionsTooltip,
+    delay: "long"
+  }, popoverButton);
   return (0, _react2.jsx)(_popover.EuiPopover, {
     className: className,
     id: "".concat(itemId, "-actions"),

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,29 @@ 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 ? [
+  // 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] : [
+  // 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 +110,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);
@@ -205,29 +192,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 +220,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,
@@ -458,7 +424,7 @@ 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);
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
         _ = _this$state$cellProps2.isExpandable,
@@ -488,23 +454,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 +475,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,
         rowIndex: rowIndex,
         colIndex: colIndex
-      })))));
+      }))), 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 +518,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, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : '')));
+});
+CellScreenReaderDescription.displayName = 'CellScreenReaderDescription';